From 6658702608502b12f0079795c6b0003b45d4ff5e Mon Sep 17 00:00:00 2001
From: SmrutiSawant <smrutis192004@gmail.com>
Date: Mon, 27 Jul 2026 15:37:20 +0000
Subject: [PATCH 1/8] feat: add GapControl component with uniform and split
 mode support

---
 frontend/components.d.ts                      |   1 +
 .../src/components/BlockFlexLayoutHandler.vue |   9 +-
 .../src/components/BlockGridLayoutHandler.vue |  10 +-
 frontend/src/components/GapControl.vue        | 115 ++++++++++++++++++
 frontend/src/utils/cssUtils.ts                |  26 ++++
 5 files changed, 147 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/components/GapControl.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 363ab1fea..b8ef53648 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -77,6 +77,7 @@ declare module 'vue' {
     Files: typeof import('./src/components/Icons/Files.vue')['default']
     FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
     FontUploader: typeof import('./src/components/Controls/FontUploader.vue')['default']
+    GapControl: typeof import('./src/components/GapControl.vue')['default']
     GlobalAI: typeof import('./src/components/Settings/GlobalAI.vue')['default']
     GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
     GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
diff --git a/frontend/src/components/BlockFlexLayoutHandler.vue b/frontend/src/components/BlockFlexLayoutHandler.vue
index 4823d86d7..dee649fc2 100644
--- a/frontend/src/components/BlockFlexLayoutHandler.vue
+++ b/frontend/src/components/BlockFlexLayoutHandler.vue
@@ -25,12 +25,7 @@
 			{ label: 'Space Around', value: 'space-around' },
 			{ label: 'Space Evenly', value: 'space-evenly' },
 		]" />
-	<StylePropertyControl
-		v-if="blockController.isFlex()"
-		label="Gap"
-		propertyKey="gap"
-		:enableSlider="true"
-		:unitOptions="BOX_UNIT_OPTIONS" />
+	<GapControl v-if="blockController.isFlex()" />
 	<StylePropertyControl
 		propertyKey="flexWrap"
 		:component="OptionToggle"
@@ -73,7 +68,7 @@
 <script lang="ts" setup>
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import GapControl from "@/components/GapControl.vue";
 import blockController from "@/utils/blockController";
-import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
 import PlacementControl from "./PlacementControl.vue";
 </script>
diff --git a/frontend/src/components/BlockGridLayoutHandler.vue b/frontend/src/components/BlockGridLayoutHandler.vue
index cbc62130f..3b3b5a899 100644
--- a/frontend/src/components/BlockGridLayoutHandler.vue
+++ b/frontend/src/components/BlockGridLayoutHandler.vue
@@ -48,12 +48,7 @@
 		type="text"
 		:modelValue="height"
 		@update:modelValue="setHeight" />
-	<StylePropertyControl
-		propertyKey="gap"
-		label="Gap"
-		v-if="blockController.isGrid()"
-		:enableSlider="true"
-		:unitOptions="BOX_UNIT_OPTIONS" />
+	<GapControl v-if="blockController.isGrid()" />
 	<!-- <InlineInput
 		label="Align"
 		v-if="blockController.isGrid()"
@@ -216,8 +211,9 @@
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import GapControl from "@/components/GapControl.vue";
 import blockController from "@/utils/blockController";
-import { BOX_UNIT_OPTIONS, GRID_UNIT_OPTIONS } from "@/utils/unitOptions";
+import { GRID_UNIT_OPTIONS } from "@/utils/unitOptions";
 import { computed } from "vue";
 
 const getGridType = () => {
diff --git a/frontend/src/components/GapControl.vue b/frontend/src/components/GapControl.vue
new file mode 100644
index 000000000..3ce9b5bd1
--- /dev/null
+++ b/frontend/src/components/GapControl.vue
@@ -0,0 +1,115 @@
+<template>
+	<div class="flex w-full flex-col gap-2">
+		<StylePropertyControl
+			propertyKey="gap"
+			:component="SplitModeInput"
+			label="Gap"
+			:unitOptions="BOX_UNIT_OPTIONS"
+			:enableStates="true"
+			:enableSlider="true"
+			:splits="splits"
+			:toControlValues="toControlValues"
+			:toModelValue="toModelValue"
+			:normalizeValue="normalize"
+			:inputAttrs="{ min: 0 }"
+			:getModelValue="readValue"
+			:getPlaceholder="getPlaceholder"
+			:getVariantValue="readValue"
+			:getMergedValue="getMergedValue"
+			:setModelValue="setModelValue"
+			:getControlAttrs="getControlAttrs" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import blockController from "@/utils/blockController";
+import { collapseGapShorthand, expandGapShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
+import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
+import { computed, ref, watch } from "vue";
+
+type BoxValue = string | number | boolean | null;
+
+const enableSlider = true;
+const splitModes = ref<Record<string, boolean>>({});
+
+watch(
+	() => blockController.getSelectedBlocks(),
+	() => (splitModes.value = {}),
+);
+
+const isColumnDirection = computed(() => {
+	const dir = blockController.getNativeStyle("flexDirection") || blockController.getCascadingStyle("flexDirection");
+	return String(dir || "").startsWith("column");
+});
+
+const splits = computed(() =>
+	isColumnDirection.value
+		? [{ label: "HORIZONTAL" }, { label: "VERTICAL" }]
+		: [{ label: "VERTICAL" }, { label: "HORIZONTAL" }],
+);
+
+const readValue = (state: string | null = null) => {
+	if (state) {
+		return String(blockController.getNativeStyle(`${state}:gap`) ?? "");
+	}
+	const gap = String(blockController.getNativeStyle("gap") ?? "");
+	const rowGap = String(blockController.getNativeStyle("rowGap") ?? "");
+	const colGap = String(blockController.getNativeStyle("columnGap") ?? "");
+	if (gap) return gap;
+	if (rowGap || colGap) return collapseGapShorthand([rowGap || "0px", colGap || "0px"]);
+	return "";
+};
+
+const getPlaceholder = () => String(blockController.getCascadingStyle("gap") ?? "unset");
+
+const toControlValues = (value: unknown) => {
+	const [rowGap, colGap] = expandGapShorthand(value);
+	return isColumnDirection.value ? [colGap, rowGap] : [rowGap, colGap];
+};
+
+const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
+
+const toModelValue = (parts: BoxValue[]) => {
+	const [first, second] = parts;
+	return isColumnDirection.value
+		? collapseGapShorthand([second, first])
+		: collapseGapShorthand([first, second]);
+};
+
+const getMergedValue = (parts: BoxValue[]) => parts[0] ?? 0;
+
+const splitOptions = [
+	{
+		label: "Use for all",
+		value: false,
+		icon: "lucide-square",
+		tooltip: "Use for all",
+	},
+	{
+		label: "Set separately",
+		value: true,
+		icon: "lucide-layout-grid",
+		tooltip: "Set separately",
+	},
+];
+
+const getControlAttrs = (variant: string | null) => {
+	const key = variant ?? "main";
+	return {
+		split: new Set(toControlValues(readValue(variant))).size > 1 || (splitModes.value[key] ?? false),
+		enableSlider,
+		splitOptions,
+		"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
+	};
+};
+
+const setModelValue = (val: string | boolean | number) => {
+	if (typeof val === "boolean") return;
+	const value = String(val);
+	blockController.setStyle("rowGap", null);
+	blockController.setStyle("columnGap", null);
+	blockController.setStyle("gap", value || null);
+};
+</script>
diff --git a/frontend/src/utils/cssUtils.ts b/frontend/src/utils/cssUtils.ts
index 70c47779c..04dd1bc77 100644
--- a/frontend/src/utils/cssUtils.ts
+++ b/frontend/src/utils/cssUtils.ts
@@ -344,6 +344,30 @@ function collapseBoxShorthand(parts: unknown[]): string {
 	return [top, right, bottom, left].join(" ");
 }
 
+/**
+ * Expands a CSS gap shorthand into its two component values (row-gap, column-gap).
+ * @param value - Gap shorthand value string
+ * @param fallback - Value used when the shorthand is empty
+ * @returns Array of exactly two values: [row-gap, column-gap]
+ */
+function expandGapShorthand(value: unknown, fallback = "0"): [string, string] {
+	const parts = splitCssValueList(String(value ?? "").trim());
+	if (!parts.length) return [fallback, fallback];
+	if (parts.length === 1) return [parts[0], parts[0]];
+	return [parts[0], parts[1]];
+}
+
+/**
+ * Collapses two gap values (row-gap, column-gap) into the shortest shorthand.
+ * @param parts - Two gap values in [row-gap, column-gap] order
+ * @returns Gap shorthand value string
+ */
+function collapseGapShorthand(parts: unknown[]): string {
+	const [rowGap, colGap] = parts.map((part) => String(part ?? ""));
+	if (rowGap === colGap) return rowGap;
+	return `${rowGap} ${colGap}`;
+}
+
 /**
  * Normalizes CSS values by adding the default unit where missing.
  * Handles both single and whitespace-separated numeric values.
@@ -362,7 +386,9 @@ function normalizeValueWithUnits(value: string, defaultUnit: string): string {
 export {
 	addPxToNumber,
 	collapseBoxShorthand,
+	collapseGapShorthand,
 	expandBoxShorthand,
+	expandGapShorthand,
 	extractNumberAndUnit,
 	getBoxSpacing,
 	getNumberFromPx,

From 3e6a2dad8f1750292651ac1e45b705e022ae08c6 Mon Sep 17 00:00:00 2001
From: SmrutiSawant <smrutis192004@gmail.com>
Date: Tue, 28 Jul 2026 09:34:00 +0000
Subject: [PATCH 2/8] update gap split labels to H and V

---
 frontend/src/components/GapControl.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/GapControl.vue b/frontend/src/components/GapControl.vue
index 3ce9b5bd1..e15c933e9 100644
--- a/frontend/src/components/GapControl.vue
+++ b/frontend/src/components/GapControl.vue
@@ -46,8 +46,8 @@ const isColumnDirection = computed(() => {
 
 const splits = computed(() =>
 	isColumnDirection.value
-		? [{ label: "HORIZONTAL" }, { label: "VERTICAL" }]
-		: [{ label: "VERTICAL" }, { label: "HORIZONTAL" }],
+		? [{ label: "H" }, { label: "V" }]
+		: [{ label: "V" }, { label: "H" }],
 );
 
 const readValue = (state: string | null = null) => {

From b5578f47010b51ad3b51042eeae2a09cf0a18e18 Mon Sep 17 00:00:00 2001
From: SmrutiSawant <smrutis192004@gmail.com>
Date: Tue, 28 Jul 2026 10:57:07 +0000
Subject: [PATCH 3/8] fix: handle Mixed style state in gap shorthand
 expand/collapse

---
 frontend/src/components/GapControl.vue |  2 +-
 frontend/src/utils/cssUtils.ts         | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/GapControl.vue b/frontend/src/components/GapControl.vue
index e15c933e9..8f4e9406c 100644
--- a/frontend/src/components/GapControl.vue
+++ b/frontend/src/components/GapControl.vue
@@ -65,7 +65,7 @@ const readValue = (state: string | null = null) => {
 const getPlaceholder = () => String(blockController.getCascadingStyle("gap") ?? "unset");
 
 const toControlValues = (value: unknown) => {
-	const [rowGap, colGap] = expandGapShorthand(value);
+	const [rowGap, colGap] = expandGapShorthand(value, "");
 	return isColumnDirection.value ? [colGap, rowGap] : [rowGap, colGap];
 };
 
diff --git a/frontend/src/utils/cssUtils.ts b/frontend/src/utils/cssUtils.ts
index 04dd1bc77..228a42fce 100644
--- a/frontend/src/utils/cssUtils.ts
+++ b/frontend/src/utils/cssUtils.ts
@@ -347,11 +347,13 @@ function collapseBoxShorthand(parts: unknown[]): string {
 /**
  * Expands a CSS gap shorthand into its two component values (row-gap, column-gap).
  * @param value - Gap shorthand value string
- * @param fallback - Value used when the shorthand is empty
+ * @param fallback - Value used when the shorthand is empty or Mixed
  * @returns Array of exactly two values: [row-gap, column-gap]
  */
 function expandGapShorthand(value: unknown, fallback = "0"): [string, string] {
-	const parts = splitCssValueList(String(value ?? "").trim());
+	const str = String(value ?? "").trim();
+	if (!str || str === "Mixed") return [fallback, fallback];
+	const parts = splitCssValueList(str);
 	if (!parts.length) return [fallback, fallback];
 	if (parts.length === 1) return [parts[0], parts[0]];
 	return [parts[0], parts[1]];
@@ -363,7 +365,10 @@ function expandGapShorthand(value: unknown, fallback = "0"): [string, string] {
  * @returns Gap shorthand value string
  */
 function collapseGapShorthand(parts: unknown[]): string {
-	const [rowGap, colGap] = parts.map((part) => String(part ?? ""));
+	const [rowGap, colGap] = parts.map((part) => {
+		const str = String(part ?? "").trim();
+		return !str || str === "Mixed" ? "0px" : str;
+	});
 	if (rowGap === colGap) return rowGap;
 	return `${rowGap} ${colGap}`;
 }

From 7f9c410abb8a2c79f3310ccacee620770979152d Mon Sep 17 00:00:00 2001
From: SmrutiSawant <smrutis192004@gmail.com>
Date: Tue, 28 Jul 2026 18:29:36 +0000
Subject: [PATCH 4/8] fix: preserve untouched axis and prevent invalid CSS on
 mixed gap edits

---
 frontend/src/components/GapControl.vue | 111 ++++++++++++++-----------
 frontend/src/utils/cssUtils.ts         |  14 ++--
 2 files changed, 72 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/GapControl.vue b/frontend/src/components/GapControl.vue
index 8f4e9406c..4389c274c 100644
--- a/frontend/src/components/GapControl.vue
+++ b/frontend/src/components/GapControl.vue
@@ -24,6 +24,7 @@
 <script lang="ts" setup>
 import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import type Block from "@/block";
 import blockController from "@/utils/blockController";
 import { collapseGapShorthand, expandGapShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
@@ -34,65 +35,59 @@ type BoxValue = string | number | boolean | null;
 const enableSlider = true;
 const splitModes = ref<Record<string, boolean>>({});
 
-watch(
-	() => blockController.getSelectedBlocks(),
-	() => (splitModes.value = {}),
+watch(() => blockController.getSelectedBlocks(), () => (splitModes.value = {}));
+
+const isColumnDirection = computed(() =>
+	String(blockController.getNativeStyle("flexDirection") || blockController.getCascadingStyle("flexDirection") || "").startsWith("column"),
 );
 
-const isColumnDirection = computed(() => {
-	const dir = blockController.getNativeStyle("flexDirection") || blockController.getCascadingStyle("flexDirection");
-	return String(dir || "").startsWith("column");
-});
+const splits = computed(() => isColumnDirection.value ? [{ label: "H" }, { label: "V" }] : [{ label: "V" }, { label: "H" }]);
 
-const splits = computed(() =>
-	isColumnDirection.value
-		? [{ label: "H" }, { label: "V" }]
-		: [{ label: "V" }, { label: "H" }],
-);
+const getBlockGap = (block: Block): [string, string] => {
+	const [exR, exC] = expandGapShorthand(block.getNativeStyle("gap"));
+	return [String(block.getNativeStyle("rowGap") ?? "").trim() || exR, String(block.getNativeStyle("columnGap") ?? "").trim() || exC];
+};
 
-const readValue = (state: string | null = null) => {
-	if (state) {
-		return String(blockController.getNativeStyle(`${state}:gap`) ?? "");
+const getEffectiveGap = (): [string, string] => {
+	const blocks = blockController.getSelectedBlocks();
+	if (!blocks.length) return ["", ""];
+	let [r, c] = getBlockGap(blocks[0]);
+	for (let i = 1; i < blocks.length; i++) {
+		const [bR, bC] = getBlockGap(blocks[i]);
+		if (r !== bR) r = "Mixed";
+		if (c !== bC) c = "Mixed";
 	}
-	const gap = String(blockController.getNativeStyle("gap") ?? "");
-	const rowGap = String(blockController.getNativeStyle("rowGap") ?? "");
-	const colGap = String(blockController.getNativeStyle("columnGap") ?? "");
-	if (gap) return gap;
-	if (rowGap || colGap) return collapseGapShorthand([rowGap || "0px", colGap || "0px"]);
-	return "";
+	return [r, c];
+};
+
+const readValue = (state: string | null = null) => {
+	if (state) return String(blockController.getNativeStyle(`${state}:gap`) ?? "");
+	const [r, c] = getEffectiveGap();
+	if (r === "Mixed" || c === "Mixed") return r === "Mixed" && c === "Mixed" ? "Mixed" : collapseGapShorthand([r, c]);
+	return !r && !c ? "" : r === c ? r : collapseGapShorthand([r, c]);
 };
 
 const getPlaceholder = () => String(blockController.getCascadingStyle("gap") ?? "unset");
 
 const toControlValues = (value: unknown) => {
-	const [rowGap, colGap] = expandGapShorthand(value, "");
-	return isColumnDirection.value ? [colGap, rowGap] : [rowGap, colGap];
+	const [r, c] = typeof value === "string" && value.includes("Mixed") ? getEffectiveGap() : expandGapShorthand(value);
+	return isColumnDirection.value ? [c, r] : [r, c];
 };
 
 const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
 
-const toModelValue = (parts: BoxValue[]) => {
-	const [first, second] = parts;
-	return isColumnDirection.value
-		? collapseGapShorthand([second, first])
-		: collapseGapShorthand([first, second]);
-};
+const toModelValue = (parts: BoxValue[], changedIndex?: number) => ({
+	type: "gap-split",
+	rowGap: isColumnDirection.value ? parts[1] : parts[0],
+	colGap: isColumnDirection.value ? parts[0] : parts[1],
+	changedAxis: changedIndex !== undefined ? ((isColumnDirection.value ? changedIndex === 0 : changedIndex === 1) ? "columnGap" : "rowGap") : null,
+});
 
-const getMergedValue = (parts: BoxValue[]) => parts[0] ?? 0;
+const getMergedValue = (parts: BoxValue[]) => parts.find((p) => p && String(p) !== "Mixed") ?? 0;
 
 const splitOptions = [
-	{
-		label: "Use for all",
-		value: false,
-		icon: "lucide-square",
-		tooltip: "Use for all",
-	},
-	{
-		label: "Set separately",
-		value: true,
-		icon: "lucide-layout-grid",
-		tooltip: "Set separately",
-	},
+	{ label: "Use for all", value: false, icon: "lucide-square", tooltip: "Use for all" },
+	{ label: "Set separately", value: true, icon: "lucide-layout-grid", tooltip: "Set separately" },
 ];
 
 const getControlAttrs = (variant: string | null) => {
@@ -105,11 +100,33 @@ const getControlAttrs = (variant: string | null) => {
 	};
 };
 
-const setModelValue = (val: string | boolean | number) => {
+const setModelValue = (val: unknown) => {
 	if (typeof val === "boolean") return;
-	const value = String(val);
-	blockController.setStyle("rowGap", null);
-	blockController.setStyle("columnGap", null);
-	blockController.setStyle("gap", value || null);
+	const payload = val && typeof val === "object" && (val as any).type === "gap-split" ? (val as any) : null;
+
+	blockController.getSelectedBlocks().forEach((block) => {
+		if (payload) {
+			const [exR, exC] = getBlockGap(block);
+			let r = (payload.changedAxis === "columnGap" ? exR : String(payload.rowGap ?? "").trim());
+			let c = (payload.changedAxis === "rowGap" ? exC : String(payload.colGap ?? "").trim());
+			r = r === "Mixed" ? "" : r;
+			c = c === "Mixed" ? "" : c;
+
+			block.setStyle("gap", null);
+			if (r && c && r === c) {
+				block.setStyle("rowGap", null);
+				block.setStyle("columnGap", null);
+				block.setStyle("gap", r);
+			} else {
+				block.setStyle("rowGap", r || null);
+				block.setStyle("columnGap", c || null);
+			}
+		} else {
+			const value = String(val ?? "").trim();
+			block.setStyle("rowGap", null);
+			block.setStyle("columnGap", null);
+			block.setStyle("gap", value || null);
+		}
+	});
 };
 </script>
diff --git a/frontend/src/utils/cssUtils.ts b/frontend/src/utils/cssUtils.ts
index 228a42fce..b5b0317b2 100644
--- a/frontend/src/utils/cssUtils.ts
+++ b/frontend/src/utils/cssUtils.ts
@@ -322,8 +322,10 @@ function splitCssValueList(value: string): string[] {
  * @param fallback - Value used for every side when the shorthand is empty
  * @returns Array of exactly four side values
  */
-function expandBoxShorthand(value: unknown, fallback = "0"): string[] {
-	const parts = splitCssValueList(String(value ?? "").trim());
+function expandBoxShorthand(value: unknown, fallback = ""): string[] {
+	const str = String(value ?? "").trim();
+	if (!str || str === "Mixed" || str === "unset") return Array(4).fill(fallback);
+	const parts = splitCssValueList(str).map((p) => (p === "Mixed" || p === "unset" ? fallback : p));
 	if (!parts.length) return Array(4).fill(fallback);
 	if (parts.length === 1) return Array(4).fill(parts[0]);
 	if (parts.length === 2) return [parts[0], parts[1], parts[0], parts[1]];
@@ -350,10 +352,10 @@ function collapseBoxShorthand(parts: unknown[]): string {
  * @param fallback - Value used when the shorthand is empty or Mixed
  * @returns Array of exactly two values: [row-gap, column-gap]
  */
-function expandGapShorthand(value: unknown, fallback = "0"): [string, string] {
+function expandGapShorthand(value: unknown, fallback = ""): [string, string] {
 	const str = String(value ?? "").trim();
-	if (!str || str === "Mixed") return [fallback, fallback];
-	const parts = splitCssValueList(str);
+	if (!str || str === "Mixed" || str === "unset") return [fallback, fallback];
+	const parts = splitCssValueList(str).map((p) => (p === "Mixed" || p === "unset" ? fallback : p));
 	if (!parts.length) return [fallback, fallback];
 	if (parts.length === 1) return [parts[0], parts[0]];
 	return [parts[0], parts[1]];
@@ -367,7 +369,7 @@ function expandGapShorthand(value: unknown, fallback = "0"): [string, string] {
 function collapseGapShorthand(parts: unknown[]): string {
 	const [rowGap, colGap] = parts.map((part) => {
 		const str = String(part ?? "").trim();
-		return !str || str === "Mixed" ? "0px" : str;
+		return !str || str === "Mixed" || str === "unset" ? "0px" : str;
 	});
 	if (rowGap === colGap) return rowGap;
 	return `${rowGap} ${colGap}`;

From ac671bb90546564237a19d0593014674e430e1de Mon Sep 17 00:00:00 2001
From: SmrutiSawant <smrutis192004@gmail.com>
Date: Thu, 30 Jul 2026 15:27:20 +0000
Subject: [PATCH 5/8] refactor: deduplicate split-control logic into composable
 and unify shorthand expansion

---
 frontend/src/components/BorderControl.vue     | 28 ++---------
 .../src/components/BorderRadiusControl.vue    | 27 ++--------
 .../components/Controls/SplitModeInput.vue    |  3 +-
 frontend/src/components/GapControl.vue        | 37 +++++---------
 frontend/src/components/SpacingControl.vue    | 28 +++--------
 frontend/src/composables/useSplitControl.ts   | 43 ++++++++++++++++
 frontend/src/utils/cssUtils.ts                | 49 ++++++++++++-------
 7 files changed, 104 insertions(+), 111 deletions(-)
 create mode 100644 frontend/src/composables/useSplitControl.ts

diff --git a/frontend/src/components/BorderControl.vue b/frontend/src/components/BorderControl.vue
index a4550a177..268132579 100644
--- a/frontend/src/components/BorderControl.vue
+++ b/frontend/src/components/BorderControl.vue
@@ -48,20 +48,11 @@ import ColorInput from "@/components/Controls/ColorInput.vue";
 import blockController from "@/utils/blockController";
 import { expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { BORDER_UNIT_OPTIONS } from "@/utils/unitOptions";
-import { computed, ref, watch } from "vue";
-
-type BoxValue = string | number | boolean | null;
+import { computed } from "vue";
+import { useSplitControl, type SplitValue } from "@/composables/useSplitControl";
 
 const SPLITS = ["T", "R", "B", "L"];
-const splitModes = ref<Record<string, boolean>>({});
 
-// Reset split modes on selection change
-watch(
-	() => blockController.getSelectedBlocks(),
-	() => {
-		splitModes.value = {};
-	}
-);
 
 const readValue = (state: string | null = null) => {
 	const key = state ? `${state}:borderWidth` : "borderWidth";
@@ -69,18 +60,9 @@ const readValue = (state: string | null = null) => {
 };
 
 const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: BoxValue[]) => parts.join(" ");
-const getMergedValue = (parts: BoxValue[]) => parts[0] ?? "0px";
-
-const getControlAttrs = (variant: string | null) => {
-	const key = variant ?? "main";
-	return {
-		split: new Set(toControlValues(readValue(variant))).size > 1 || (splitModes.value[key] ?? false),
-		enableSlider: true,
-		"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
-	};
-};
+const normalize = (value: SplitValue) => normalizeValueWithUnits(String(value || "0"), "px");
+const toModelValue = (parts: SplitValue[]) => parts.join(" ");
+const { getControlAttrs, getMergedValue } = useSplitControl(toControlValues, readValue);
 
 const hasColor = computed(() => {
 	return Boolean(
diff --git a/frontend/src/components/BorderRadiusControl.vue b/frontend/src/components/BorderRadiusControl.vue
index fe28563a1..f8a838201 100644
--- a/frontend/src/components/BorderRadiusControl.vue
+++ b/frontend/src/components/BorderRadiusControl.vue
@@ -27,38 +27,21 @@ import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue
 import blockController from "@/utils/blockController";
 import { collapseBoxShorthand, expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { RADIUS_UNIT_OPTIONS } from "@/utils/unitOptions";
-import { ref, watch } from "vue";
-
-type BoxValue = string | number | boolean | null;
+import { useSplitControl, type SplitValue } from "@/composables/useSplitControl";
 
 const SPLITS = ["TL", "TR", "BR", "BL"];
 
-const splitModes = ref<Record<string, boolean>>({});
-
-watch(
-	() => blockController.getSelectedBlocks(),
-	() => (splitModes.value = {}),
-);
-
 const readValue = (state: string | null = null) =>
 	String(blockController.getStyle(state ? `${state}:borderRadius` : "borderRadius") || "");
 
-const ensureRoundedContentIsClipped = (value: BoxValue) => {
+const ensureRoundedContentIsClipped = (value: SplitValue) => {
 	if (!value) return;
 	if (!blockController.getStyle("overflowX")) blockController.setStyle("overflowX", "hidden");
 	if (!blockController.getStyle("overflowY")) blockController.setStyle("overflowY", "hidden");
 };
 
 const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: BoxValue[]) => collapseBoxShorthand(parts);
-const getMergedValue = (parts: BoxValue[]) => parts[0] ?? "0px";
-const getControlAttrs = (variant: string | null) => {
-	const key = variant ?? "main";
-	return {
-		enableSlider: true,
-		split: new Set(toControlValues(readValue(variant))).size > 1 || (splitModes.value[key] ?? false),
-		"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
-	};
-};
+const normalize = (value: SplitValue) => normalizeValueWithUnits(String(value || "0"), "px");
+const toModelValue = (parts: SplitValue[]) => collapseBoxShorthand(parts);
+const { getControlAttrs, getMergedValue } = useSplitControl(toControlValues, readValue);
 </script>
diff --git a/frontend/src/components/Controls/SplitModeInput.vue b/frontend/src/components/Controls/SplitModeInput.vue
index 9b8bb47b2..b9ce69868 100644
--- a/frontend/src/components/Controls/SplitModeInput.vue
+++ b/frontend/src/components/Controls/SplitModeInput.vue
@@ -60,7 +60,7 @@ const props = withDefaults(
 		inputAttrs?: InputAttrs;
 		enableSlider?: boolean;
 		type?: string;
-		getMergedValue: (values: InputValue[]) => InputValue;
+		getMergedValue?: (values: InputValue[]) => InputValue;
 	}>(),
 	{
 		modelValue: "",
@@ -74,6 +74,7 @@ const props = withDefaults(
 		normalizeValue: (value: InputValue) => value,
 		inputAttrs: () => ({}),
 		enableSlider: false,
+		getMergedValue: (values: InputValue[]) => values[0] ?? "0px",
 	},
 );
 
diff --git a/frontend/src/components/GapControl.vue b/frontend/src/components/GapControl.vue
index 4389c274c..0769aecd2 100644
--- a/frontend/src/components/GapControl.vue
+++ b/frontend/src/components/GapControl.vue
@@ -28,14 +28,8 @@ import type Block from "@/block";
 import blockController from "@/utils/blockController";
 import { collapseGapShorthand, expandGapShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
-import { computed, ref, watch } from "vue";
-
-type BoxValue = string | number | boolean | null;
-
-const enableSlider = true;
-const splitModes = ref<Record<string, boolean>>({});
-
-watch(() => blockController.getSelectedBlocks(), () => (splitModes.value = {}));
+import { computed } from "vue";
+import { useSplitControl, type SplitValue } from "@/composables/useSplitControl";
 
 const isColumnDirection = computed(() =>
 	String(blockController.getNativeStyle("flexDirection") || blockController.getCascadingStyle("flexDirection") || "").startsWith("column"),
@@ -74,31 +68,22 @@ const toControlValues = (value: unknown) => {
 	return isColumnDirection.value ? [c, r] : [r, c];
 };
 
-const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
+const normalize = (value: SplitValue) => normalizeValueWithUnits(String(value || "0"), "px");
 
-const toModelValue = (parts: BoxValue[], changedIndex?: number) => ({
+const toModelValue = (parts: SplitValue[], changedIndex?: number) => ({
 	type: "gap-split",
 	rowGap: isColumnDirection.value ? parts[1] : parts[0],
 	colGap: isColumnDirection.value ? parts[0] : parts[1],
 	changedAxis: changedIndex !== undefined ? ((isColumnDirection.value ? changedIndex === 0 : changedIndex === 1) ? "columnGap" : "rowGap") : null,
 });
 
-const getMergedValue = (parts: BoxValue[]) => parts.find((p) => p && String(p) !== "Mixed") ?? 0;
-
-const splitOptions = [
-	{ label: "Use for all", value: false, icon: "lucide-square", tooltip: "Use for all" },
-	{ label: "Set separately", value: true, icon: "lucide-layout-grid", tooltip: "Set separately" },
-];
-
-const getControlAttrs = (variant: string | null) => {
-	const key = variant ?? "main";
-	return {
-		split: new Set(toControlValues(readValue(variant))).size > 1 || (splitModes.value[key] ?? false),
-		enableSlider,
-		splitOptions,
-		"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
-	};
-};
+const { getControlAttrs, getMergedValue } = useSplitControl(toControlValues, readValue, {
+	splitOptions: [
+		{ label: "Use for all", value: false, icon: "lucide-square", tooltip: "Use for all" },
+		{ label: "Set separately", value: true, icon: "lucide-layout-grid", tooltip: "Set separately" },
+	],
+	getMergedValue: (parts) => parts.find((p) => p && String(p) !== "Mixed") ?? 0,
+});
 
 const setModelValue = (val: unknown) => {
 	if (typeof val === "boolean") return;
diff --git a/frontend/src/components/SpacingControl.vue b/frontend/src/components/SpacingControl.vue
index 1ebc520c3..233ff1a9f 100644
--- a/frontend/src/components/SpacingControl.vue
+++ b/frontend/src/components/SpacingControl.vue
@@ -6,7 +6,7 @@
 			:label="label"
 			:unitOptions="BOX_UNIT_OPTIONS"
 			:enableStates="true"
-			:enableSlider="enableSlider"
+			:enableSlider="true"
 			:splits="SPLITS"
 			:toControlValues
 			:toModelValue
@@ -27,21 +27,15 @@ import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue
 import blockController from "@/utils/blockController";
 import { collapseBoxShorthand, expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
-import { computed, ref, watch } from "vue";
+import { computed } from "vue";
+import { useSplitControl, type SplitValue } from "@/composables/useSplitControl";
 
 type SpacingType = "margin" | "padding";
-type BoxValue = string | number | boolean | null;
 
 const SPLITS = ["T", "R", "B", "L"];
-const enableSlider = true;
 
 const props = defineProps<{ type: SpacingType }>();
-const splitModes = ref<Record<string, boolean>>({});
 
-watch(
-	() => blockController.getSelectedBlocks(),
-	() => (splitModes.value = {}),
-);
 
 const label = computed(() => (props.type === "margin" ? "Margin" : "Padding"));
 
@@ -56,17 +50,11 @@ const readValue = (state: string | null = null) =>
 const getPlaceholder = () => String(getBaseValue(true));
 
 const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: BoxValue[]) => collapseBoxShorthand(parts);
-const getMergedValue = (parts: BoxValue[]) => parts[0] ?? 0;
-const getControlAttrs = (variant: string | null) => {
-	const key = variant ?? "main";
-	return {
-		split: new Set(toControlValues(readValue(variant))).size > 1 || (splitModes.value[key] ?? false),
-		enableSlider,
-		"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
-	};
-};
+const normalize = (value: SplitValue) => normalizeValueWithUnits(String(value || "0"), "px");
+const toModelValue = (parts: SplitValue[]) => collapseBoxShorthand(parts);
+const { getControlAttrs, getMergedValue } = useSplitControl(toControlValues, readValue, {
+	getMergedValue: (parts) => parts[0] ?? 0,
+});
 
 const setModelValue = (val: string | boolean | number) => {
 	if (typeof val == "boolean") return;
diff --git a/frontend/src/composables/useSplitControl.ts b/frontend/src/composables/useSplitControl.ts
new file mode 100644
index 000000000..c860ca91e
--- /dev/null
+++ b/frontend/src/composables/useSplitControl.ts
@@ -0,0 +1,43 @@
+import blockController from "@/utils/blockController";
+import { ref, watch } from "vue";
+
+export type SplitValue = string | number | boolean | null;
+
+interface UseSplitControlOptions {
+	enableSlider?: boolean;
+	splitOptions?: Array<{ label: string; value: boolean; icon: string; tooltip: string }>;
+	getMergedValue?: (parts: SplitValue[]) => SplitValue;
+}
+
+export function useSplitControl(
+	toControlValues: (value: unknown) => SplitValue[],
+	readValue: (state: string | null) => string,
+	options: UseSplitControlOptions = {},
+) {
+	const splitModes = ref<Record<string, boolean>>({});
+
+	watch(
+		() => blockController.getSelectedBlocks(),
+		() => (splitModes.value = {}),
+	);
+
+	const getControlAttrs = (variant: string | null) => {
+		const key = variant ?? "main";
+		const attrs: Record<string, unknown> = {
+			split:
+				new Set(toControlValues(readValue(variant))).size > 1 ||
+				(splitModes.value[key] ?? false),
+			enableSlider: options.enableSlider ?? true,
+			"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
+		};
+		if (options.splitOptions) {
+			attrs.splitOptions = options.splitOptions;
+		}
+		return attrs;
+	};
+
+	const getMergedValue =
+		options.getMergedValue ?? ((parts: SplitValue[]) => parts[0] ?? "0px");
+
+	return { splitModes, getControlAttrs, getMergedValue };
+}
diff --git a/frontend/src/utils/cssUtils.ts b/frontend/src/utils/cssUtils.ts
index b5b0317b2..d65d40706 100644
--- a/frontend/src/utils/cssUtils.ts
+++ b/frontend/src/utils/cssUtils.ts
@@ -236,7 +236,7 @@ function getBoxSpacing(
 	const cascading = opts?.cascading ?? false;
 	const baseValue = block.getStyle(type, undefined, nativeOnly, cascading);
 	const base = String(baseValue ?? (nativeOnly && !cascading ? "" : "unset"));
-	const baseParts = expandBoxShorthand(base, base);
+	const baseParts = expandBoxShorthand(base);
 	const top = block.getStyle(`${type}Top`, undefined, nativeOnly, cascading) ?? baseParts[0];
 	const right = block.getStyle(`${type}Right`, undefined, nativeOnly, cascading) ?? baseParts[1];
 	const bottom = block.getStyle(`${type}Bottom`, undefined, nativeOnly, cascading) ?? baseParts[2];
@@ -315,22 +315,39 @@ function splitCssValueList(value: string): string[] {
 	return parts;
 }
 
+/**
+ * Expands a CSS shorthand value into the given number of component slots
+ * following CSS conventions:
+ *   - 2 slots: `a` → `[a,a]`, `a b` → `[a,b]`
+ *   - 4 slots: `a` → `[a,a,a,a]`, `a b` → `[a,b,a,b]`,
+ *              `a b c` → `[a,b,c,b]`, `a b c d` → `[a,b,c,d]`
+ * @param value - Shorthand value string
+ * @param slots - Number of component slots (2 or 4)
+ * @returns Array of exactly `slots` values
+ */
+type ShorthandSlots = 2 | 4;
+
+function expandShorthand(value: unknown, slots: ShorthandSlots): string[] {
+	const str = String(value ?? "").trim();
+	if (!str || str === "Mixed" || str === "unset") return Array(slots).fill("");
+	const parts = splitCssValueList(str).filter((p) => p !== "Mixed" && p !== "unset");
+	const n = parts.length;
+	if (n === 0) return Array(slots).fill("");
+	if (n === 1) return Array(slots).fill(parts[0]);
+	if (n >= slots) return parts.slice(0, slots);
+	// CSS box shorthand: 2 values → T/B + R/L, 3 values → T + R/L + B
+	if (n === 2) return [parts[0], parts[1], parts[0], parts[1]];
+	return [parts[0], parts[1], parts[2], parts[1]];
+}
+
 /**
  * Expands a CSS box shorthand (margin, padding, border-radius) into its four
  * component values following the standard 1/2/3/4-value rules.
  * @param value - Shorthand value string
- * @param fallback - Value used for every side when the shorthand is empty
  * @returns Array of exactly four side values
  */
-function expandBoxShorthand(value: unknown, fallback = ""): string[] {
-	const str = String(value ?? "").trim();
-	if (!str || str === "Mixed" || str === "unset") return Array(4).fill(fallback);
-	const parts = splitCssValueList(str).map((p) => (p === "Mixed" || p === "unset" ? fallback : p));
-	if (!parts.length) return Array(4).fill(fallback);
-	if (parts.length === 1) return Array(4).fill(parts[0]);
-	if (parts.length === 2) return [parts[0], parts[1], parts[0], parts[1]];
-	if (parts.length === 3) return [parts[0], parts[1], parts[2], parts[1]];
-	return parts.slice(0, 4);
+function expandBoxShorthand(value: unknown): string[] {
+	return expandShorthand(value, 4);
 }
 
 /**
@@ -349,16 +366,10 @@ function collapseBoxShorthand(parts: unknown[]): string {
 /**
  * Expands a CSS gap shorthand into its two component values (row-gap, column-gap).
  * @param value - Gap shorthand value string
- * @param fallback - Value used when the shorthand is empty or Mixed
  * @returns Array of exactly two values: [row-gap, column-gap]
  */
-function expandGapShorthand(value: unknown, fallback = ""): [string, string] {
-	const str = String(value ?? "").trim();
-	if (!str || str === "Mixed" || str === "unset") return [fallback, fallback];
-	const parts = splitCssValueList(str).map((p) => (p === "Mixed" || p === "unset" ? fallback : p));
-	if (!parts.length) return [fallback, fallback];
-	if (parts.length === 1) return [parts[0], parts[0]];
-	return [parts[0], parts[1]];
+function expandGapShorthand(value: unknown): [string, string] {
+	return expandShorthand(value, 2) as [string, string];
 }
 
 /**

From 702ac06a8a5433149b0cf9ce42bc0538c4218deb Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Fri, 31 Jul 2026 12:53:38 +0530
Subject: [PATCH 6/8] refactor: move split state into SplitModeInput and add
 SplitPropertyControl

SplitModeInput now owns its split mode. It turns split on when the sides
differ, and the toggle only forces it on. Each variant renders its own
instance, so a plain ref replaces the per-variant record that the
useSplitControl composable held. This removes the composable and the
getControlAttrs wiring from every caller.

SplitPropertyControl wraps StylePropertyControl the same way
StylePropertyControl wraps BasePropertyControl. It pins the component and
the slider, and it defaults the shorthand converters, the input attributes
and the unit normalizer. The normalizer now follows the first unit option
instead of a hardcoded px. All current unit lists start with px, so the
behavior does not change.

The four split controls drop 8 to 9 repeated props each. Border radius
falls from 43 lines to 28.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/components.d.ts                      |  1 +
 frontend/src/components/BorderControl.vue     | 22 ++------
 .../src/components/BorderRadiusControl.vue    | 24 +-------
 .../components/Controls/SplitModeInput.vue    | 30 ++++++----
 .../Controls/SplitPropertyControl.vue         | 56 +++++++++++++++++++
 frontend/src/components/GapControl.vue        | 37 ++++--------
 frontend/src/components/SpacingControl.vue    | 28 ++--------
 frontend/src/composables/useSplitControl.ts   | 43 --------------
 8 files changed, 99 insertions(+), 142 deletions(-)
 create mode 100644 frontend/src/components/Controls/SplitPropertyControl.vue
 delete mode 100644 frontend/src/composables/useSplitControl.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index b8ef53648..1c5e351d6 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -142,6 +142,7 @@ declare module 'vue' {
     SpacingControl: typeof import('./src/components/SpacingControl.vue')['default']
     SplitInput: typeof import('./src/components/Controls/SplitInput.vue')['default']
     SplitModeInput: typeof import('./src/components/Controls/SplitModeInput.vue')['default']
+    SplitPropertyControl: typeof import('./src/components/Controls/SplitPropertyControl.vue')['default']
     StringOptions: typeof import('./src/components/PropsOptions/StringOptions.vue')['default']
     StylePropertyControl: typeof import('./src/components/Controls/StylePropertyControl.vue')['default']
     TabButtons: typeof import('./src/components/Controls/TabButtons.vue')['default']
diff --git a/frontend/src/components/BorderControl.vue b/frontend/src/components/BorderControl.vue
index 268132579..2795904c2 100644
--- a/frontend/src/components/BorderControl.vue
+++ b/frontend/src/components/BorderControl.vue
@@ -9,23 +9,14 @@
 			:events="colorEvents" />
 
 		<!-- Border Width (with Split Mode Input) -->
-		<StylePropertyControl
+		<SplitPropertyControl
 			v-if="hasColor"
 			label="Border Width"
 			propertyKey="borderWidth"
-			:component="SplitModeInput"
 			:unitOptions="BORDER_UNIT_OPTIONS"
-			:enableStates="true"
-			:enableSlider="true"
 			:splits="SPLITS"
-			:toControlValues="toControlValues"
 			:toModelValue="toModelValue"
-			:normalizeValue="normalize"
-			:inputAttrs="{ min: 0 }"
-			:getModelValue="readValue"
-			:getVariantValue="readValue"
-			:getControlAttrs="getControlAttrs"
-			:getMergedValue="getMergedValue" />
+			:getModelValue="readValue" />
 
 		<!-- Border Style -->
 		<StylePropertyControl
@@ -42,14 +33,12 @@
 </template>
 
 <script lang="ts" setup>
-import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import ColorInput from "@/components/Controls/ColorInput.vue";
 import blockController from "@/utils/blockController";
-import { expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { BORDER_UNIT_OPTIONS } from "@/utils/unitOptions";
 import { computed } from "vue";
-import { useSplitControl, type SplitValue } from "@/composables/useSplitControl";
 
 const SPLITS = ["T", "R", "B", "L"];
 
@@ -59,10 +48,7 @@ const readValue = (state: string | null = null) => {
 	return String(blockController.getStyle(key) || "");
 };
 
-const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: SplitValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: SplitValue[]) => parts.join(" ");
-const { getControlAttrs, getMergedValue } = useSplitControl(toControlValues, readValue);
+const toModelValue = (parts: StyleValue[]) => parts.join(" ");
 
 const hasColor = computed(() => {
 	return Boolean(
diff --git a/frontend/src/components/BorderRadiusControl.vue b/frontend/src/components/BorderRadiusControl.vue
index f8a838201..f479f6852 100644
--- a/frontend/src/components/BorderRadiusControl.vue
+++ b/frontend/src/components/BorderRadiusControl.vue
@@ -1,47 +1,29 @@
 <template>
 	<div class="flex w-full flex-col gap-2">
-		<StylePropertyControl
+		<SplitPropertyControl
 			label="Radius"
 			placeholder="None"
 			propertyKey="borderRadius"
-			:component="SplitModeInput"
 			:unitOptions="RADIUS_UNIT_OPTIONS"
-			:enableStates="true"
-			:enableSlider="true"
 			:splits="SPLITS"
-			:toControlValues
-			:toModelValue
-			:normalizeValue="normalize"
-			:inputAttrs="{ min: 0 }"
 			:getModelValue="readValue"
-			:getVariantValue="readValue"
-			:getControlAttrs="getControlAttrs"
-			:getMergedValue
 			@update:modelValue="ensureRoundedContentIsClipped" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
-import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
 import blockController from "@/utils/blockController";
-import { collapseBoxShorthand, expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { RADIUS_UNIT_OPTIONS } from "@/utils/unitOptions";
-import { useSplitControl, type SplitValue } from "@/composables/useSplitControl";
 
 const SPLITS = ["TL", "TR", "BR", "BL"];
 
 const readValue = (state: string | null = null) =>
 	String(blockController.getStyle(state ? `${state}:borderRadius` : "borderRadius") || "");
 
-const ensureRoundedContentIsClipped = (value: SplitValue) => {
+const ensureRoundedContentIsClipped = (value: StyleValue) => {
 	if (!value) return;
 	if (!blockController.getStyle("overflowX")) blockController.setStyle("overflowX", "hidden");
 	if (!blockController.getStyle("overflowY")) blockController.setStyle("overflowY", "hidden");
 };
-
-const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: SplitValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: SplitValue[]) => collapseBoxShorthand(parts);
-const { getControlAttrs, getMergedValue } = useSplitControl(toControlValues, readValue);
 </script>
diff --git a/frontend/src/components/Controls/SplitModeInput.vue b/frontend/src/components/Controls/SplitModeInput.vue
index b9ce69868..c06ce0305 100644
--- a/frontend/src/components/Controls/SplitModeInput.vue
+++ b/frontend/src/components/Controls/SplitModeInput.vue
@@ -33,10 +33,11 @@
 <script lang="ts" setup>
 import Input from "@/components/Controls/Input.vue";
 import SplitInput from "@/components/Controls/SplitInput.vue";
+import blockController from "@/utils/blockController";
 import { expandBoxShorthand } from "@/utils/cssUtils";
 import { TabButtons, type TabButton } from "frappe-ui";
 import type { HTMLAttributes } from "vue";
-import { computed, useAttrs } from "vue";
+import { computed, ref, useAttrs, watch } from "vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -49,7 +50,6 @@ const props = withDefaults(
 	defineProps<{
 		modelValue?: InputValue;
 		placeholder?: string | number | boolean;
-		split?: boolean;
 		uniformTitle?: string;
 		splitTitle?: string;
 		splitOptions?: SplitOption[];
@@ -65,7 +65,6 @@ const props = withDefaults(
 	{
 		modelValue: "",
 		placeholder: "",
-		split: false,
 		uniformTitle: "Use for all",
 		splitTitle: "Set separately",
 		splits: 0,
@@ -73,14 +72,15 @@ const props = withDefaults(
 		toModelValue: (values: InputValue[]) => values,
 		normalizeValue: (value: InputValue) => value,
 		inputAttrs: () => ({}),
-		enableSlider: false,
+		// The base control filters its own enableSlider out of the fallthrough attrs, so split
+		// inputs opt in here instead.
+		enableSlider: true,
 		getMergedValue: (values: InputValue[]) => values[0] ?? "0px",
 	},
 );
 
 const emit = defineEmits<{
 	"update:modelValue": [value: InputValue];
-	"update:split": [value: boolean];
 }>();
 
 const attrs = useAttrs();
@@ -91,8 +91,17 @@ const controlAttrs = computed(() =>
 
 const splitCount = computed(() => (typeof props.splits === "number" ? props.splits : props.splits.length));
 const splitValues = computed(() => props.toControlValues(props.modelValue, splitCount.value));
+
+// Split mode turns itself on when the sides already differ; the toggle only forces it on.
+const forceSplit = ref(false);
+const split = computed(() => new Set(splitValues.value).size > 1 || forceSplit.value);
+watch(
+	() => blockController.getSelectedBlocks(),
+	() => (forceSplit.value = false),
+);
+
 const displayValue = computed(() => {
-	if (!props.split) return props.modelValue;
+	if (!split.value) return props.modelValue;
 	if (String(props.modelValue ?? "").trim() === "Mixed") return "";
 	const values = expandBoxShorthand(props.modelValue);
 	return new Set(values).size === 1 ? values[0] : "";
@@ -117,18 +126,15 @@ const resolvedSplitOptions = computed(() => props.splitOptions ?? defaultSplitOp
 
 const setSplitValue = (value: string | number | boolean | undefined) => {
 	if (typeof value !== "boolean") return;
-	if (!value) {
-		const mergedValue = props.getMergedValue(splitValues.value);
-		emit("update:modelValue", mergedValue);
-	}
-	emit("update:split", value);
+	if (!value) emit("update:modelValue", props.getMergedValue(splitValues.value));
+	forceSplit.value = value;
 };
 
 const setIndividualValue = (value: unknown) => emit("update:modelValue", value as InputValue);
 
 const setUniformValue = (value: InputValue) => {
 	if (String(value ?? "") === String(displayValue.value ?? "")) return;
-	if (props.split) emit("update:split", false);
+	forceSplit.value = false;
 	emit("update:modelValue", value);
 };
 </script>
diff --git a/frontend/src/components/Controls/SplitPropertyControl.vue b/frontend/src/components/Controls/SplitPropertyControl.vue
new file mode 100644
index 000000000..6dc2b125a
--- /dev/null
+++ b/frontend/src/components/Controls/SplitPropertyControl.vue
@@ -0,0 +1,56 @@
+<template>
+	<StylePropertyControl v-bind="{ ...splitProps, ...$attrs }" :component="SplitModeInput">
+		<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+			<slot :name="name" v-bind="slotData || {}" />
+		</template>
+	</StylePropertyControl>
+</template>
+
+<script lang="ts" setup>
+import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import { collapseBoxShorthand, expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
+import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
+import { computed } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+type InputAttrs = Record<string, unknown>;
+type SplitConfig = string | { label?: string; attrs?: InputAttrs };
+
+const props = withDefaults(
+	defineProps<{
+		propertyKey: string;
+		splits: number | SplitConfig[];
+		unitOptions?: string[];
+		toControlValues?: (value: unknown, count: number) => StyleValue[];
+		toModelValue?: (values: StyleValue[], changedIndex: number) => unknown;
+		normalizeValue?: (value: StyleValue, index: number) => StyleValue;
+		inputAttrs?: InputAttrs;
+		// Reads the base value when called without a state, the variant value otherwise.
+		getModelValue?: (state?: string | null) => string | number | boolean;
+		getVariantValue?: (variant: string) => string | number | boolean;
+	}>(),
+	{
+		unitOptions: () => BOX_UNIT_OPTIONS,
+		toControlValues: (value: unknown) => expandBoxShorthand(value),
+		toModelValue: (values: StyleValue[]) => collapseBoxShorthand(values),
+		inputAttrs: () => ({ min: 0 }),
+	},
+);
+
+const defaultUnit = computed(() => props.unitOptions[0] ?? "px");
+
+const normalizeValue = computed(
+	() =>
+		props.normalizeValue ??
+		((value: StyleValue) => normalizeValueWithUnits(String(value || "0"), defaultUnit.value)),
+);
+
+const splitProps = computed(() => ({
+	...props,
+	enableSlider: true,
+	normalizeValue: normalizeValue.value,
+	getVariantValue: props.getVariantValue ?? props.getModelValue,
+}));
+</script>
diff --git a/frontend/src/components/GapControl.vue b/frontend/src/components/GapControl.vue
index 0769aecd2..7274e7d6c 100644
--- a/frontend/src/components/GapControl.vue
+++ b/frontend/src/components/GapControl.vue
@@ -1,35 +1,25 @@
 <template>
 	<div class="flex w-full flex-col gap-2">
-		<StylePropertyControl
+		<SplitPropertyControl
 			propertyKey="gap"
-			:component="SplitModeInput"
 			label="Gap"
-			:unitOptions="BOX_UNIT_OPTIONS"
-			:enableStates="true"
-			:enableSlider="true"
 			:splits="splits"
 			:toControlValues="toControlValues"
 			:toModelValue="toModelValue"
-			:normalizeValue="normalize"
-			:inputAttrs="{ min: 0 }"
 			:getModelValue="readValue"
 			:getPlaceholder="getPlaceholder"
-			:getVariantValue="readValue"
 			:getMergedValue="getMergedValue"
-			:setModelValue="setModelValue"
-			:getControlAttrs="getControlAttrs" />
+			:splitOptions="SPLIT_OPTIONS"
+			:setModelValue="setModelValue" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
-import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
 import type Block from "@/block";
 import blockController from "@/utils/blockController";
-import { collapseGapShorthand, expandGapShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
-import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
+import { collapseGapShorthand, expandGapShorthand } from "@/utils/cssUtils";
 import { computed } from "vue";
-import { useSplitControl, type SplitValue } from "@/composables/useSplitControl";
 
 const isColumnDirection = computed(() =>
 	String(blockController.getNativeStyle("flexDirection") || blockController.getCascadingStyle("flexDirection") || "").startsWith("column"),
@@ -68,22 +58,19 @@ const toControlValues = (value: unknown) => {
 	return isColumnDirection.value ? [c, r] : [r, c];
 };
 
-const normalize = (value: SplitValue) => normalizeValueWithUnits(String(value || "0"), "px");
-
-const toModelValue = (parts: SplitValue[], changedIndex?: number) => ({
+const toModelValue = (parts: StyleValue[], changedIndex?: number) => ({
 	type: "gap-split",
 	rowGap: isColumnDirection.value ? parts[1] : parts[0],
 	colGap: isColumnDirection.value ? parts[0] : parts[1],
 	changedAxis: changedIndex !== undefined ? ((isColumnDirection.value ? changedIndex === 0 : changedIndex === 1) ? "columnGap" : "rowGap") : null,
 });
 
-const { getControlAttrs, getMergedValue } = useSplitControl(toControlValues, readValue, {
-	splitOptions: [
-		{ label: "Use for all", value: false, icon: "lucide-square", tooltip: "Use for all" },
-		{ label: "Set separately", value: true, icon: "lucide-layout-grid", tooltip: "Set separately" },
-	],
-	getMergedValue: (parts) => parts.find((p) => p && String(p) !== "Mixed") ?? 0,
-});
+const SPLIT_OPTIONS = [
+	{ label: "Use for all", value: false, icon: "lucide-square", tooltip: "Use for all" },
+	{ label: "Set separately", value: true, icon: "lucide-layout-grid", tooltip: "Set separately" },
+];
+
+const getMergedValue = (parts: StyleValue[]) => parts.find((part) => part && String(part) !== "Mixed") ?? 0;
 
 const setModelValue = (val: unknown) => {
 	if (typeof val === "boolean") return;
diff --git a/frontend/src/components/SpacingControl.vue b/frontend/src/components/SpacingControl.vue
index 233ff1a9f..676c22568 100644
--- a/frontend/src/components/SpacingControl.vue
+++ b/frontend/src/components/SpacingControl.vue
@@ -1,34 +1,21 @@
 <template>
 	<div class="flex w-full flex-col gap-2">
-		<StylePropertyControl
+		<SplitPropertyControl
 			:propertyKey="type"
-			:component="SplitModeInput"
 			:label="label"
-			:unitOptions="BOX_UNIT_OPTIONS"
-			:enableStates="true"
-			:enableSlider="true"
 			:splits="SPLITS"
-			:toControlValues
-			:toModelValue
-			:normalizeValue="normalize"
 			:inputAttrs="type === 'margin' ? {} : { min: 0 }"
 			:getModelValue="readValue"
-			:getPlaceholder="getPlaceholder"
-			:getVariantValue="readValue"
+			:getPlaceholder
 			:getMergedValue
-			:setModelValue
-			:getControlAttrs="getControlAttrs" />
+			:setModelValue />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
-import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
 import blockController from "@/utils/blockController";
-import { collapseBoxShorthand, expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
-import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
 import { computed } from "vue";
-import { useSplitControl, type SplitValue } from "@/composables/useSplitControl";
 
 type SpacingType = "margin" | "padding";
 
@@ -49,12 +36,7 @@ const readValue = (state: string | null = null) =>
 
 const getPlaceholder = () => String(getBaseValue(true));
 
-const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: SplitValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: SplitValue[]) => collapseBoxShorthand(parts);
-const { getControlAttrs, getMergedValue } = useSplitControl(toControlValues, readValue, {
-	getMergedValue: (parts) => parts[0] ?? 0,
-});
+const getMergedValue = (parts: StyleValue[]) => parts[0] ?? 0;
 
 const setModelValue = (val: string | boolean | number) => {
 	if (typeof val == "boolean") return;
diff --git a/frontend/src/composables/useSplitControl.ts b/frontend/src/composables/useSplitControl.ts
deleted file mode 100644
index c860ca91e..000000000
--- a/frontend/src/composables/useSplitControl.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import blockController from "@/utils/blockController";
-import { ref, watch } from "vue";
-
-export type SplitValue = string | number | boolean | null;
-
-interface UseSplitControlOptions {
-	enableSlider?: boolean;
-	splitOptions?: Array<{ label: string; value: boolean; icon: string; tooltip: string }>;
-	getMergedValue?: (parts: SplitValue[]) => SplitValue;
-}
-
-export function useSplitControl(
-	toControlValues: (value: unknown) => SplitValue[],
-	readValue: (state: string | null) => string,
-	options: UseSplitControlOptions = {},
-) {
-	const splitModes = ref<Record<string, boolean>>({});
-
-	watch(
-		() => blockController.getSelectedBlocks(),
-		() => (splitModes.value = {}),
-	);
-
-	const getControlAttrs = (variant: string | null) => {
-		const key = variant ?? "main";
-		const attrs: Record<string, unknown> = {
-			split:
-				new Set(toControlValues(readValue(variant))).size > 1 ||
-				(splitModes.value[key] ?? false),
-			enableSlider: options.enableSlider ?? true,
-			"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
-		};
-		if (options.splitOptions) {
-			attrs.splitOptions = options.splitOptions;
-		}
-		return attrs;
-	};
-
-	const getMergedValue =
-		options.getMergedValue ?? ((parts: SplitValue[]) => parts[0] ?? "0px");
-
-	return { splitModes, getControlAttrs, getMergedValue };
-}

From 6f08b6b6249faabf6027b49bcc12faa33e9d9a57 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Fri, 31 Jul 2026 13:06:16 +0530
Subject: [PATCH 7/8] refactor: add collapseShorthand and simplify
 expandShorthand

expandShorthand loses three branches. The token filter now removes the
"Mixed" and "unset" placeholders, so the whole-string guard is no longer
necessary. The 2-value and 3-value cases differ only in the third slot, so
one line covers both.

collapseShorthand is the new counterpart. It walks the slots backwards and
drops each trailing value that the value two slots before it implies. This
works for 2 slots and for 4, so collapseBoxShorthand and collapseGapShorthand
become one-liners over it. The gap version keeps the 0px fallback, because an
unset axis would otherwise make the pair read as a single value.

The JSDoc blocks give way to one comment per rule.

A differential test over 13369 inputs shows no change in behavior. It covers
both slot counts, all four-side and two-axis combinations, the placeholder
values and calc() values.

Also drop a stale second argument in useSpacingHandler. expandBoxShorthand
takes one argument. The runtime ignored the extra one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/src/composables/useSpacingHandler.ts |  2 +-
 frontend/src/utils/cssUtils.ts                | 90 +++++++------------
 2 files changed, 35 insertions(+), 57 deletions(-)

diff --git a/frontend/src/composables/useSpacingHandler.ts b/frontend/src/composables/useSpacingHandler.ts
index c34557b53..b0c4b2347 100644
--- a/frontend/src/composables/useSpacingHandler.ts
+++ b/frontend/src/composables/useSpacingHandler.ts
@@ -75,7 +75,7 @@ export function useSpacingHandler(getTargetBlock: () => Block, getBreakpoint: ()
 	// then collapse every update back into the single shorthand style.
 	const getSpacingParts = (property: SpacingProperty) => {
 		const styles = blockStyles.value;
-		const parts = expandBoxShorthand(styles[property] ?? "", "0px");
+		const parts = expandBoxShorthand(styles[property] ?? "");
 		allSides.forEach((side) => {
 			const sideValue = styles[styleKey(property, side)];
 			if (sideValue) parts[sides[side].index] = String(sideValue);
diff --git a/frontend/src/utils/cssUtils.ts b/frontend/src/utils/cssUtils.ts
index d65d40706..5d773d223 100644
--- a/frontend/src/utils/cssUtils.ts
+++ b/frontend/src/utils/cssUtils.ts
@@ -245,7 +245,12 @@ function getBoxSpacing(
 	const sRight = String(right);
 	const sBottom = String(bottom);
 	const sLeft = String(left);
-	if (sTop === baseParts[0] && sRight === baseParts[1] && sBottom === baseParts[2] && sLeft === baseParts[3]) {
+	if (
+		sTop === baseParts[0] &&
+		sRight === baseParts[1] &&
+		sBottom === baseParts[2] &&
+		sLeft === baseParts[3]
+	) {
 		return base;
 	}
 	// A side left unset while others are set falls back to an empty base; treat it as 0
@@ -293,10 +298,7 @@ function removeDefaultUnit(value: string, defaultUnit: string): string {
 		.join("");
 }
 
-/**
- * Splits a CSS value list on whitespace, ignoring whitespace inside
- * parentheses so functional values like `calc(10px + 5%)` stay intact.
- */
+// Splits on whitespace outside parentheses, so `calc(10px + 5%)` stays one part.
 function splitCssValueList(value: string): string[] {
 	const parts: string[] = [];
 	let current = "";
@@ -315,75 +317,51 @@ function splitCssValueList(value: string): string[] {
 	return parts;
 }
 
-/**
- * Expands a CSS shorthand value into the given number of component slots
- * following CSS conventions:
- *   - 2 slots: `a` → `[a,a]`, `a b` → `[a,b]`
- *   - 4 slots: `a` → `[a,a,a,a]`, `a b` → `[a,b,a,b]`,
- *              `a b c` → `[a,b,c,b]`, `a b c d` → `[a,b,c,d]`
- * @param value - Shorthand value string
- * @param slots - Number of component slots (2 or 4)
- * @returns Array of exactly `slots` values
- */
+// 2 slots for gap (row, column), 4 for the box sides (top, right, bottom, left).
 type ShorthandSlots = 2 | 4;
 
+// `a` → every slot, `a b` → [a,b,a,b], `a b c` → [a,b,c,b].
 function expandShorthand(value: unknown, slots: ShorthandSlots): string[] {
-	const str = String(value ?? "").trim();
-	if (!str || str === "Mixed" || str === "unset") return Array(slots).fill("");
-	const parts = splitCssValueList(str).filter((p) => p !== "Mixed" && p !== "unset");
-	const n = parts.length;
-	if (n === 0) return Array(slots).fill("");
-	if (n === 1) return Array(slots).fill(parts[0]);
-	if (n >= slots) return parts.slice(0, slots);
-	// CSS box shorthand: 2 values → T/B + R/L, 3 values → T + R/L + B
-	if (n === 2) return [parts[0], parts[1], parts[0], parts[1]];
-	return [parts[0], parts[1], parts[2], parts[1]];
+	const parts = splitCssValueList(String(value ?? "").trim()).filter(
+		(part: string) => part !== "" && part !== "Mixed" && part !== "unset",
+	);
+	if (!parts.length) return Array(slots).fill("");
+	if (parts.length >= slots) return parts.slice(0, slots);
+	if (parts.length === 1) return Array(slots).fill(parts[0]);
+	return [parts[0], parts[1], parts[2] ?? parts[0], parts[1]];
+}
+
+// Inverse of expandShorthand: drops every trailing value that CSS can infer.
+function collapseShorthand(parts: unknown[], slots: ShorthandSlots): string {
+	const values = Array.from({ length: slots }, (_, index) => String(parts[index] ?? ""));
+	while (values.length > 2 && values[values.length - 1] === values[values.length - 3]) values.pop();
+	if (values.length === 2 && values[0] === values[1]) values.pop();
+	return values.join(" ");
 }
 
-/**
- * Expands a CSS box shorthand (margin, padding, border-radius) into its four
- * component values following the standard 1/2/3/4-value rules.
- * @param value - Shorthand value string
- * @returns Array of exactly four side values
- */
 function expandBoxShorthand(value: unknown): string[] {
 	return expandShorthand(value, 4);
 }
 
-/**
- * Collapses four side values into the shortest shorthand that expands back to them.
- * @param parts - Four side values, in the order expandBoxShorthand returns
- * @returns Shorthand value string
- */
 function collapseBoxShorthand(parts: unknown[]): string {
-	const [top, right, bottom, left] = parts.map((part) => String(part ?? ""));
-	if (top === right && top === bottom && top === left) return top;
-	if (top === bottom && right === left) return `${top} ${right}`;
-	if (right === left) return `${top} ${right} ${bottom}`;
-	return [top, right, bottom, left].join(" ");
+	return collapseShorthand(parts, 4);
 }
 
-/**
- * Expands a CSS gap shorthand into its two component values (row-gap, column-gap).
- * @param value - Gap shorthand value string
- * @returns Array of exactly two values: [row-gap, column-gap]
- */
 function expandGapShorthand(value: unknown): [string, string] {
 	return expandShorthand(value, 2) as [string, string];
 }
 
-/**
- * Collapses two gap values (row-gap, column-gap) into the shortest shorthand.
- * @param parts - Two gap values in [row-gap, column-gap] order
- * @returns Gap shorthand value string
- */
 function collapseGapShorthand(parts: unknown[]): string {
-	const [rowGap, colGap] = parts.map((part) => {
-		const str = String(part ?? "").trim();
-		return !str || str === "Mixed" || str === "unset" ? "0px" : str;
+	// An unset axis has to become 0px, otherwise the pair reads as a single value.
+	const axes = parts.map((part) => {
+		const value = String(part ?? "").trim();
+		if (value !== "" && value !== "Mixed" && value !== "unset") {
+			return value;
+		} else {
+			return "0px";
+		}
 	});
-	if (rowGap === colGap) return rowGap;
-	return `${rowGap} ${colGap}`;
+	return collapseShorthand(axes, 2);
 }
 
 /**

From e79be12cd125aebdf97e1ea937c22f95dbf76180 Mon Sep 17 00:00:00 2001
From: SmrutiSawant <smrutis192004@gmail.com>
Date: Fri, 31 Jul 2026 09:25:54 +0000
Subject: [PATCH 8/8] refactor : rename gap variables to descriptive names in
 GapControl

---
 frontend/src/components/GapControl.vue | 42 +++++++++++++-------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/GapControl.vue b/frontend/src/components/GapControl.vue
index 7274e7d6c..76ef20f64 100644
--- a/frontend/src/components/GapControl.vue
+++ b/frontend/src/components/GapControl.vue
@@ -28,34 +28,34 @@ const isColumnDirection = computed(() =>
 const splits = computed(() => isColumnDirection.value ? [{ label: "H" }, { label: "V" }] : [{ label: "V" }, { label: "H" }]);
 
 const getBlockGap = (block: Block): [string, string] => {
-	const [exR, exC] = expandGapShorthand(block.getNativeStyle("gap"));
-	return [String(block.getNativeStyle("rowGap") ?? "").trim() || exR, String(block.getNativeStyle("columnGap") ?? "").trim() || exC];
+	const [existingRow, existingColumn] = expandGapShorthand(block.getNativeStyle("gap"));
+	return [String(block.getNativeStyle("rowGap") ?? "").trim() || existingRow, String(block.getNativeStyle("columnGap") ?? "").trim() || existingColumn];
 };
 
 const getEffectiveGap = (): [string, string] => {
 	const blocks = blockController.getSelectedBlocks();
 	if (!blocks.length) return ["", ""];
-	let [r, c] = getBlockGap(blocks[0]);
+	let [row, column] = getBlockGap(blocks[0]);
 	for (let i = 1; i < blocks.length; i++) {
-		const [bR, bC] = getBlockGap(blocks[i]);
-		if (r !== bR) r = "Mixed";
-		if (c !== bC) c = "Mixed";
+		const [blockRow, blockColumn] = getBlockGap(blocks[i]);
+		if (row !== blockRow) row = "Mixed";
+		if (column !== blockColumn) column = "Mixed";
 	}
-	return [r, c];
+	return [row, column];
 };
 
 const readValue = (state: string | null = null) => {
 	if (state) return String(blockController.getNativeStyle(`${state}:gap`) ?? "");
-	const [r, c] = getEffectiveGap();
-	if (r === "Mixed" || c === "Mixed") return r === "Mixed" && c === "Mixed" ? "Mixed" : collapseGapShorthand([r, c]);
-	return !r && !c ? "" : r === c ? r : collapseGapShorthand([r, c]);
+	const [row, column] = getEffectiveGap();
+	if (row === "Mixed" || column === "Mixed") return row === "Mixed" && column === "Mixed" ? "Mixed" : collapseGapShorthand([row, column]);
+	return !row && !column ? "" : row === column ? row : collapseGapShorthand([row, column]);
 };
 
 const getPlaceholder = () => String(blockController.getCascadingStyle("gap") ?? "unset");
 
 const toControlValues = (value: unknown) => {
-	const [r, c] = typeof value === "string" && value.includes("Mixed") ? getEffectiveGap() : expandGapShorthand(value);
-	return isColumnDirection.value ? [c, r] : [r, c];
+	const [row, column] = typeof value === "string" && value.includes("Mixed") ? getEffectiveGap() : expandGapShorthand(value);
+	return isColumnDirection.value ? [column, row] : [row, column];
 };
 
 const toModelValue = (parts: StyleValue[], changedIndex?: number) => ({
@@ -78,20 +78,20 @@ const setModelValue = (val: unknown) => {
 
 	blockController.getSelectedBlocks().forEach((block) => {
 		if (payload) {
-			const [exR, exC] = getBlockGap(block);
-			let r = (payload.changedAxis === "columnGap" ? exR : String(payload.rowGap ?? "").trim());
-			let c = (payload.changedAxis === "rowGap" ? exC : String(payload.colGap ?? "").trim());
-			r = r === "Mixed" ? "" : r;
-			c = c === "Mixed" ? "" : c;
+			const [existingRow, existingColumn] = getBlockGap(block);
+			let row = (payload.changedAxis === "columnGap" ? existingRow : String(payload.rowGap ?? "").trim());
+			let column = (payload.changedAxis === "rowGap" ? existingColumn : String(payload.colGap ?? "").trim());
+			row = row === "Mixed" ? "" : row;
+			column = column === "Mixed" ? "" : column;
 
 			block.setStyle("gap", null);
-			if (r && c && r === c) {
+			if (row && column && row === column) {
 				block.setStyle("rowGap", null);
 				block.setStyle("columnGap", null);
-				block.setStyle("gap", r);
+				block.setStyle("gap", row);
 			} else {
-				block.setStyle("rowGap", r || null);
-				block.setStyle("columnGap", c || null);
+				block.setStyle("rowGap", row || null);
+				block.setStyle("columnGap", column || null);
 			}
 		} else {
 			const value = String(val ?? "").trim();