From 771a5fb790ed332dc1a5291c12301a490db3e088 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Mon, 10 Aug 2026 18:04:26 +0200
Subject: [PATCH] Configurable vertical padding in subtree

---
 .../split-view/split-view.jdd.tsx             | 10 +++++--
 src/back/jdd-components/subtree/subtree.css   | 27 +++++++++++++++++++
 .../jdd-components/subtree/subtree.jdd.tsx    | 26 +++++++++++++++---
 3 files changed, 58 insertions(+), 5 deletions(-)

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 bd36f62..caee266 100644
--- a/src/back/jdd-components/split-view/split-view.jdd.tsx
+++ b/src/back/jdd-components/split-view/split-view.jdd.tsx
@@ -7,8 +7,14 @@ import type {
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
 const component_arguments = {
-	bleed_left: new ComponentArguments.Enum(["none", "bleed", "screen"]),
-	bleed_right: new ComponentArguments.Enum(["none", "bleed", "screen"]),
+	bleed_left: new ComponentArguments.Enum(["none", "bleed", "screen"]).setExampleValues(
+		["none"]
+	),
+	bleed_right: new ComponentArguments.Enum([
+		"none",
+		"bleed",
+		"screen",
+	]).setExampleValues(["none"]),
 	column_gap: new ComponentArguments.Boolean(),
 	row_gap: new ComponentArguments.Boolean(),
 	component1: new ComponentArguments.NestedComponent(),
diff --git a/src/back/jdd-components/subtree/subtree.css b/src/back/jdd-components/subtree/subtree.css
index dce8269..0746624 100644
--- a/src/back/jdd-components/subtree/subtree.css
+++ b/src/back/jdd-components/subtree/subtree.css
@@ -1,6 +1,9 @@
 .subtree {
 	display: flex;
 	flex-flow: column;
+	--vertical-padding: 0px;
+	--horizontal-padding: 0px;
+	padding: var(--vertical-padding) var(--horizontal-padding);
 
 	&.subtree--gap-none {
 		gap: 0px;
@@ -17,4 +20,28 @@
 	&.subtree--gap-wide {
 		gap: 24px;
 	}
+
+	&.subtree--padding-vertical-none {
+		--vertical-padding: 0px;
+	}
+
+	&.subtree--padding-vertical-narrow {
+		--vertical-padding: 8px;
+	}
+
+	&.subtree--padding-vertical-medium {
+		--vertical-padding: 16px;
+	}
+
+	&.subtree--padding-vertical-wide {
+		--vertical-padding: 24px;
+	}
+
+	&.subtree--padding-vertical-extra-wide {
+		--vertical-padding: 48px;
+	}
+
+	&.subtree--padding-vertical-super-wide {
+		--vertical-padding: 96px;
+	}
 }
diff --git a/src/back/jdd-components/subtree/subtree.jdd.tsx b/src/back/jdd-components/subtree/subtree.jdd.tsx
index 64ff246..2a058e2 100644
--- a/src/back/jdd-components/subtree/subtree.jdd.tsx
+++ b/src/back/jdd-components/subtree/subtree.jdd.tsx
@@ -7,7 +7,20 @@ import type {
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
 const component_arguments = {
-	gap: new ComponentArguments.Enum(["none", "narrow", "medium", "wide"]),
+	gap: new ComponentArguments.Enum([
+		"none",
+		"narrow",
+		"medium",
+		"wide",
+	]).setExampleValues(["medium"]),
+	padding_vertical: new ComponentArguments.Enum([
+		"none",
+		"narrow",
+		"medium",
+		"wide",
+		"extra-wide",
+		"super-wide",
+	]).setExampleValues(["medium"]),
 	components: new ComponentArguments.List(new ComponentArguments.NestedComponent()),
 } as const;
 
@@ -27,12 +40,19 @@ export class Subtree extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { components, gap },
+		args: { components, gap, padding_vertical },
 		classes,
 		jdd_context,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
 		return (
-			<div class={["subtree", `subtree--gap-${gap}`, ...classes]}>
+			<div
+				class={[
+					"subtree",
+					`subtree--gap-${gap}`,
+					`subtree--padding-vertical-${padding_vertical}`,
+					...classes,
+				]}
+			>
 				{components?.map((component) => component.render(jdd_context))}
 			</div>
 		);