From efa784a039c75cf918deb2efba901586f8993ca1 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 20 Jul 2026 15:09:28 +0300
Subject: [PATCH] feat(layout): layout-grid editor section

Add a Layout grid section for frames/components with pattern (columns/rows/
grid), count, gutter/section size, and margin, plus visibility and remove
actions. The canvas already rendered layout grids from imported files; this
wires creation and editing through the standard panel list pattern with
undo support and icon+tooltip pattern options.
---
 packages/vue/src/i18n/messages/panels.ts      |  10 ++
 .../LayoutSection/LayoutGridSection.vue       | 148 ++++++++++++++++++
 .../LayoutSection/LayoutSection.vue           |   3 +
 3 files changed, 161 insertions(+)
 create mode 100644 src/components/properties/LayoutSection/LayoutGridSection.vue

diff --git a/packages/vue/src/i18n/messages/panels.ts b/packages/vue/src/i18n/messages/panels.ts
index 9a7dcae61..2043225e6 100644
--- a/packages/vue/src/i18n/messages/panels.ts
+++ b/packages/vue/src/i18n/messages/panels.ts
@@ -250,6 +250,16 @@ export const panelMessageDefaults = {
   resizeAutoWidth: 'Auto width',
   resizeAutoHeight: 'Auto height',
   resizeFixed: 'Fixed size',
+  layoutGrids: 'Layout grid',
+  addLayoutGrid: 'Add layout grid',
+  removeLayoutGrid: 'Remove layout grid',
+  gridColumns: 'Columns',
+  gridRows: 'Rows',
+  gridGrid: 'Grid',
+  gridCount: 'Count',
+  gridGutter: 'Gutter',
+  gridMargin: 'Margin',
+  gridSectionSize: 'Section size',
   searchFonts: 'Search fonts...'
 } as const
 
diff --git a/src/components/properties/LayoutSection/LayoutGridSection.vue b/src/components/properties/LayoutSection/LayoutGridSection.vue
new file mode 100644
index 000000000..674f9fea4
--- /dev/null
+++ b/src/components/properties/LayoutSection/LayoutGridSection.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n, useLayoutControlsContext, useSceneComputed } from '@open-pencil/vue'
+
+import NumberField from '@/components/inputs/NumberField.vue'
+import IconButton from '@/components/ui/IconButton.vue'
+import SegmentedControl from '@/components/ui/SegmentedControl.vue'
+import Tip from '@/components/ui/Tip.vue'
+import PanelFieldGroup from '@/components/ui/panel/PanelFieldGroup.vue'
+import PanelGrid from '@/components/ui/panel/PanelGrid.vue'
+import PanelItemRow from '@/components/ui/panel/PanelItemRow.vue'
+import PanelSection from '@/components/ui/panel/PanelSection.vue'
+
+import type { LayoutGrid } from '@open-pencil/scene-graph'
+
+const ctx = useLayoutControlsContext()
+const { panels } = useI18n()
+
+const selectedNode = useSceneComputed(() => ctx.editor.getSelectedNode() ?? null)
+const grids = computed<LayoutGrid[]>(() => selectedNode.value?.layoutGrids ?? [])
+
+const patternOptions = computed(() => [
+  { value: 'COLUMNS' as const, label: panels.value.gridColumns },
+  { value: 'ROWS' as const, label: panels.value.gridRows },
+  { value: 'GRID' as const, label: panels.value.gridGrid }
+])
+
+function defaultGrid(): LayoutGrid {
+  return {
+    visible: true,
+    color: { r: 1, g: 0, b: 0, a: 0.1 },
+    pattern: 'COLUMNS',
+    alignment: 'STRETCH',
+    count: 5,
+    gutterSize: 20,
+    offset: 0,
+    sectionSize: 0
+  }
+}
+
+function commit(next: LayoutGrid[], label: string) {
+  const node = selectedNode.value
+  if (!node) return
+  ctx.editor.updateNodeWithUndo(node.id, { layoutGrids: next }, label)
+}
+
+function add() {
+  commit([...grids.value, defaultGrid()], 'Add layout grid')
+}
+
+function remove(index: number) {
+  commit(
+    grids.value.filter((_, i) => i !== index),
+    'Remove layout grid'
+  )
+}
+
+function patch(index: number, changes: Partial<LayoutGrid>, label = 'Edit layout grid') {
+  commit(
+    grids.value.map((grid, i) => (i === index ? { ...grid, ...changes } : grid)),
+    label
+  )
+}
+
+function gridPattern(grid: LayoutGrid): 'COLUMNS' | 'ROWS' | 'GRID' {
+  if (grid.pattern) return grid.pattern
+  return grid.axis === 'Y' ? 'ROWS' : 'COLUMNS'
+}
+
+function isGrid(grid: LayoutGrid): boolean {
+  return gridPattern(grid) === 'GRID'
+}
+</script>
+
+<template>
+  <PanelSection :label="panels.layoutGrids" :empty="grids.length === 0">
+    <template #actions>
+      <IconButton :label="panels.addLayoutGrid" @click="add">
+        <icon-lucide-plus class="size-3.5" />
+      </IconButton>
+    </template>
+
+    <PanelItemRow v-for="(grid, index) in grids" :key="index" class="items-start">
+      <div class="flex min-w-0 flex-1 flex-col gap-1.5">
+        <SegmentedControl
+          :model-value="gridPattern(grid)"
+          :options="patternOptions"
+          :label="panels.layoutGrids"
+          @change="patch(index, { pattern: $event as LayoutGrid['pattern'] }, 'Change grid pattern')"
+        >
+          <template #option="{ option }">
+            <Tip :label="option.label" class="flex items-center justify-center">
+              <icon-lucide-columns-3 v-if="option.value === 'COLUMNS'" class="size-3.5" />
+              <icon-lucide-rows-3 v-else-if="option.value === 'ROWS'" class="size-3.5" />
+              <icon-lucide-layout-grid v-else class="size-3.5" />
+            </Tip>
+          </template>
+        </SegmentedControl>
+        <PanelGrid columns="two">
+          <PanelFieldGroup :label="panels.gridCount">
+            <NumberField
+              :model-value="grid.count ?? grid.numSections ?? 1"
+              :min="1"
+              :aria-label="panels.gridCount"
+              @update:model-value="patch(index, { count: $event })"
+            />
+          </PanelFieldGroup>
+          <PanelFieldGroup v-if="!isGrid(grid)" :label="panels.gridGutter">
+            <NumberField
+              :model-value="grid.gutterSize ?? 0"
+              :min="0"
+              :aria-label="panels.gridGutter"
+              @update:model-value="patch(index, { gutterSize: $event })"
+            />
+          </PanelFieldGroup>
+          <PanelFieldGroup v-if="isGrid(grid)" :label="panels.gridSectionSize">
+            <NumberField
+              :model-value="grid.sectionSize ?? 0"
+              :min="1"
+              :aria-label="panels.gridSectionSize"
+              @update:model-value="patch(index, { sectionSize: $event })"
+            />
+          </PanelFieldGroup>
+          <PanelFieldGroup :label="panels.gridMargin">
+            <NumberField
+              :model-value="grid.offset ?? 0"
+              :aria-label="panels.gridMargin"
+              @update:model-value="patch(index, { offset: $event })"
+            />
+          </PanelFieldGroup>
+        </PanelGrid>
+      </div>
+      <template #rail>
+        <IconButton
+          :label="panels.toggleVisibility"
+          :active="grid.visible === false"
+          @click="patch(index, { visible: grid.visible === false }, 'Toggle layout grid')"
+        >
+          <icon-lucide-eye-off v-if="grid.visible === false" class="size-3.5" />
+          <icon-lucide-eye v-else class="size-3.5" />
+        </IconButton>
+        <IconButton :label="panels.removeLayoutGrid" @click="remove(index)">
+          <icon-lucide-minus class="size-3.5" />
+        </IconButton>
+      </template>
+    </PanelItemRow>
+  </PanelSection>
+</template>
diff --git a/src/components/properties/LayoutSection/LayoutSection.vue b/src/components/properties/LayoutSection/LayoutSection.vue
index 80b577097..45e6f4e73 100644
--- a/src/components/properties/LayoutSection/LayoutSection.vue
+++ b/src/components/properties/LayoutSection/LayoutSection.vue
@@ -5,6 +5,7 @@ import AutoLayoutControls from '@/components/properties/LayoutSection/AutoLayout
 import ClipContentControl from '@/components/properties/LayoutSection/ClipContentControl.vue'
 import FlexControls from '@/components/properties/LayoutSection/FlexControls.vue'
 import GridControls from '@/components/properties/LayoutSection/GridControls.vue'
+import LayoutGridSection from '@/components/properties/LayoutSection/LayoutGridSection.vue'
 import PaddingControls from '@/components/properties/LayoutSection/PaddingControls.vue'
 import SizeControls from '@/components/properties/LayoutSection/size/SizeControls.vue'
 import TextResizingControl from '@/components/properties/LayoutSection/TextResizingControl.vue'
@@ -38,6 +39,8 @@ const CONTAINER_TYPES = ['FRAME', 'COMPONENT', 'COMPONENT_SET', 'INSTANCE']
             </template>
           </template>
         </PanelSection>
+
+        <LayoutGridSection />
       </template>
     </template>
   </LayoutControlsRoot>