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 01/15] 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 02/15] 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 03/15] 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 04/15] 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 05/15] 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 06/15] 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 07/15] 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 08/15] 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 09/15] 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 10/15] 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 11/15] 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 12/15] 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 13/15] 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 14/15] 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 15/15] 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(