Expression editing in grid row/column controls (#6396)

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

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

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

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

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


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

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

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

editor/src/components/inspector/common/css-utils.ts

@@ -652,6 +652,21 @@ export type GridCSSMinmax = BaseGridDimension & {
   max: GridCSSNumber | GridCSSKeyword
 }
 
+export function parseGridCSSMinmaxOrRepeat(input: string): GridCSSMinmax | GridCSSRepeat | null {
+  const parsed = csstree.parse(input, { context: 'value' })
+  if (parsed.type === 'Value') {
+    const parsedDimensions = parseGridChildren(parsed.children)
+    if (
+      isRight(parsedDimensions) &&
+      parsedDimensions.value.length === 1 &&
+      (isGridCSSMinmax(parsedDimensions.value[0]) || isGridCSSRepeat(parsedDimensions.value[0]))
+    ) {
+      return parsedDimensions.value[0]
+    }
+  }
+  return null
+}
+
 export function isGridCSSKeyword(dim: GridDimension): dim is GridCSSKeyword {
   return dim.type === 'KEYWORD'
 }
@@ -1007,7 +1022,6 @@ const validGridDimensionKeywords = [
   'subgrid',
   'auto-fit',
   'auto-fill',
-  'minmax', // TODO this should be removed once we have proper editing of grid template expressions!
 ] as const
 
 export type ValidGridDimensionKeyword = (typeof validGridDimensionKeywords)[number]

editor/src/components/inspector/flex-section.spec.browser2.tsx

@@ -53,29 +53,19 @@ describe('flex section', () => {
       const grid = await renderResult.renderedDOM.findByTestId('grid')
       expect(grid.style.gridTemplateColumns).toEqual('[area1] auto 1fr 1fr 1fr 1fr')
     })
-    it('uses auto for defaults when empty', async () => {
-      const renderResult = await renderTestEditorWithCode(
-        gridProjectWithoutTemplate,
-        'await-first-dom-report',
-      )
-      await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
-      const control = await screen.findByTestId('grid-dimension-column-0')
-      await typeIntoField(control, '100px')
-      const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('100px auto auto')
-    })
-    it('updates a repeated value', async () => {
+    it('updates a repeat expression', async () => {
       const renderResult = await renderTestEditorWithCode(
         gridProjectWithRepeat,
         'await-first-dom-report',
       )
       await selectComponentsForTest(renderResult, [EP.fromString('sb/grid')])
-      await typeIntoField(await screen.findByTestId('grid-dimension-column-2'), '42')
 
       const grid = await renderResult.renderedDOM.findByTestId('grid')
-      expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 10px 42px) 2fr')
 
-      await typeIntoField(await screen.findByTestId('grid-dimension-column-1'), '.5fr')
+      await typeIntoField(
+        await screen.findByTestId('grid-dimension-column-1'),
+        'repeat(2, 0.5fr 42px)',
+      )
       expect(grid.style.gridTemplateColumns).toEqual('[area1] 1fr repeat(2, 0.5fr 42px) 2fr')
     })
   })