From f58aeee7cd0466884d28411890a1c4af450ed5cf Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Sat, 15 Aug 2026 19:49:28 +0200
Subject: [PATCH] More layout options for split-view

---
 .../jdd-components/split-view/split-view.css  | 39 +++++++++++--------
 .../split-view/split-view.jdd.tsx             | 27 ++++++++++++-
 2 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/back/jdd-components/split-view/split-view.css b/src/back/jdd-components/split-view/split-view.css
index d7e97b5..698ce78 100644
--- a/src/back/jdd-components/split-view/split-view.css
+++ b/src/back/jdd-components/split-view/split-view.css
@@ -86,32 +86,37 @@
 		grid-template-columns: subgrid;
 		row-gap: var(--row-gap);
 
-		.split-view__half:nth-child(1),
-		.split-view__half:nth-child(2) {
+		&.split-view--bleed-top-mobile--none .split-view__half:nth-child(1) {
 			grid-column: content !important;
 		}
 
-		&.split-view--bleed-right--bleed {
-			.split-view__half:nth-child(2) {
-				grid-column: bleed !important;
-			}
+		&.split-view--bleed-top-mobile--bleed .split-view__half:nth-child(1) {
+			grid-column: bleed !important;
 		}
 
-		&.split-view--bleed-left--bleed {
+		&.split-view--bleed-top-mobile--screen .split-view__half:nth-child(1) {
+			grid-column: screen !important;
+		}
+
+		&.split-view--bleed-bottom-mobile--none .split-view__half:nth-child(2) {
+			grid-column: content !important;
+		}
+
+		&.split-view--bleed-bottom-mobile--bleed .split-view__half:nth-child(2) {
+			grid-column: bleed !important;
+		}
+
+		&.split-view--bleed-bottom-mobile--screen .split-view__half:nth-child(2) {
+			grid-column: screen !important;
+		}
+
+		&.split-view--swap-on-mobile {
 			.split-view__half:nth-child(1) {
-				grid-column: bleed !important;
+				grid-row: 2/3;
 			}
-		}
 
-		&.split-view--bleed-right--screen {
 			.split-view__half:nth-child(2) {
-				grid-column: screen !important;
-			}
-		}
-
-		&.split-view--bleed-left--screen {
-			.split-view__half:nth-child(1) {
-				grid-column: screen !important;
+				grid-row: 1/2;
 			}
 		}
 	}
diff --git a/src/back/jdd-components/split-view/split-view.jdd.tsx b/src/back/jdd-components/split-view/split-view.jdd.tsx
index 4aad610..6acab67 100644
--- a/src/back/jdd-components/split-view/split-view.jdd.tsx
+++ b/src/back/jdd-components/split-view/split-view.jdd.tsx
@@ -13,8 +13,19 @@ const component_arguments = {
 	bleed_right: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
 		"none"
 	),
+	bleed_top_mobile: new ComponentArguments.Enum([
+		"none",
+		"bleed",
+		"screen",
+	]).setDefaultValue("none"),
+	bleed_bottom_mobile: new ComponentArguments.Enum([
+		"none",
+		"bleed",
+		"screen",
+	]).setDefaultValue("none"),
 	column_gap: new ComponentArguments.Boolean(),
 	row_gap: new ComponentArguments.Boolean(),
+	swap_on_mobile: new ComponentArguments.Boolean(),
 	component1: new ComponentArguments.NestedComponent(),
 	component2: new ComponentArguments.NestedComponent(),
 } as const;
@@ -36,7 +47,17 @@ export class SplitView extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { component1, component2, bleed_left, bleed_right, column_gap, row_gap },
+		args: {
+			component1,
+			component2,
+			bleed_left,
+			bleed_right,
+			bleed_top_mobile,
+			bleed_bottom_mobile,
+			column_gap,
+			row_gap,
+			swap_on_mobile,
+		},
 		classes,
 		jdd_context,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@@ -46,9 +67,11 @@ export class SplitView extends Component<typeof component_arguments> {
 					"split-view",
 					`split-view--bleed-left--${bleed_left}`,
 					`split-view--bleed-right--${bleed_right}`,
+					`split-view--bleed-top-mobile--${bleed_top_mobile}`,
+					`split-view--bleed-bottom-mobile--${bleed_bottom_mobile}`,
 					`split-view--with${column_gap ? "" : "out"}-column-gap`,
 					`split-view--with${row_gap ? "" : "out"}-row-gap`,
-
+					{ "split-view--swap-on-mobile": swap_on_mobile },
 					...classes,
 				]}
 			>