@effect-tui/react 0.2.1 → 0.2.3

package/src/utils/flex-layout.ts

@@ -17,6 +17,13 @@ export interface FlexMeasureResult {
 /**
  * Measure children along a flex axis.
  * Returns cached sizes and total size.
+ *
+ * SwiftUI-style measure:
+ * 1. First measure all non-greedy children with full available space
+ * 2. Then measure greedy children with remaining space
+ *
+ * This ensures non-greedy elements always get their natural size,
+ * even when sibling greedy elements have large content.
  */
 export function measureFlex(
 	axis: FlexAxis,
@@ -25,26 +32,57 @@ export function measureFlex(
 	maxMain: number,
 	maxCross: number,
 ): FlexMeasureResult {
-	const sizes: Size[] = []
-	let totalMain = 0
+	const sizes: Size[] = new Array(children.length)
 	let maxChildCross = 0
+	const totalSpacing = Math.max(0, (children.length - 1) * spacing)
 
+	// Pass 1: Measure non-greedy children first with full available space
+	let nonGreedyTotal = 0
 	for (let i = 0; i < children.length; i++) {
 		const child = children[i]
-		const remainingMain = Math.max(0, maxMain - totalMain)
+		const greedyWeight = getGreedyWeight(child)
+
+		if (greedyWeight === 0) {
+			// Non-greedy: measure with full available space
+			const childMaxW = axis === "vertical" ? maxCross : maxMain
+			const childMaxH = axis === "vertical" ? maxMain : maxCross
+			const size = child.measure(childMaxW, childMaxH)
+			sizes[i] = size
+			nonGreedyTotal += mainSize(axis, size)
+			maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		}
+	}
 
-		// Convert main/cross back to width/height for child measure
-		const childMaxW = axis === "vertical" ? maxCross : remainingMain
-		const childMaxH = axis === "vertical" ? remainingMain : maxCross
+	// Pass 2: Measure greedy children with remaining space
+	const remainingForGreedy = Math.max(0, maxMain - nonGreedyTotal - totalSpacing)
+	let totalGreedyWeight = 0
+	for (let i = 0; i < children.length; i++) {
+		const greedyWeight = getGreedyWeight(children[i])
+		if (greedyWeight > 0) totalGreedyWeight += greedyWeight
+	}
 
-		const size = child.measure(childMaxW, childMaxH)
-		sizes.push(size)
+	let greedyMeasuredTotal = 0
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i]
+		const greedyWeight = getGreedyWeight(child)
 
-		totalMain += mainSize(axis, size)
-		if (i < children.length - 1) totalMain += spacing
-		maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		if (greedyWeight > 0) {
+			// Greedy: measure with proportional share of remaining space
+			const greedyMain =
+				totalGreedyWeight > 0 ? (remainingForGreedy * greedyWeight) / totalGreedyWeight : remainingForGreedy
+			const childMaxW = axis === "vertical" ? maxCross : greedyMain
+			const childMaxH = axis === "vertical" ? greedyMain : maxCross
+			const size = child.measure(childMaxW, childMaxH)
+			sizes[i] = size
+			greedyMeasuredTotal += mainSize(axis, size)
+			maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+		}
 	}
 
+	// Calculate total main dimension
+	// Use actual measured sizes, not the constraint
+	const totalMain = nonGreedyTotal + greedyMeasuredTotal + totalSpacing
+
 	// Build total size from main/cross dimensions
 	const totalW = axis === "vertical" ? maxChildCross : totalMain
 	const totalH = axis === "vertical" ? totalMain : maxChildCross
@@ -68,6 +106,13 @@ function getGreedyWeight(child: HostInstance): number {
 
 /**
  * Layout children along a flex axis using cached sizes.
+ *
+ * SwiftUI-style layout:
+ * 1. Non-greedy children get their natural (measured) size
+ * 2. Greedy children share the REMAINING space proportionally
+ *
+ * This ensures non-greedy elements (like footers) are always visible,
+ * even when greedy elements (like scroll views) have overflowing content.
  */
 export function layoutFlex(
 	axis: FlexAxis,
@@ -78,23 +123,29 @@ export function layoutFlex(
 	alignment: FlexAlignment,
 	stretchCross: boolean,
 ): void {
-	// Calculate totals
-	let totalNaturalMain = 0
-	let totalGreedyWeight = 0
 	const totalSpacing = Math.max(0, (children.length - 1) * spacing)
+	const availableMain = mainDim(axis, rect)
+
+	// Pass 1: Calculate space needed by non-greedy children
+	let nonGreedyTotal = 0
+	let totalGreedyWeight = 0
 
 	for (let i = 0; i < children.length; i++) {
 		const child = children[i]
 		const size = cachedSizes[i] ?? child.measure(rect.w, rect.h)
-		totalNaturalMain += mainSize(axis, size)
-		totalGreedyWeight += getGreedyWeight(child)
+		const greedyWeight = getGreedyWeight(child)
+
+		if (greedyWeight === 0) {
+			// Non-greedy: use natural size
+			nonGreedyTotal += mainSize(axis, size)
+		}
+		totalGreedyWeight += greedyWeight
 	}
 
-	// Calculate extra space to distribute to greedy children
-	const availableMain = mainDim(axis, rect)
-	const extraSpace = Math.max(0, availableMain - totalNaturalMain - totalSpacing)
+	// Remaining space for greedy children (after non-greedy + spacing)
+	const remainingForGreedy = Math.max(0, availableMain - nonGreedyTotal - totalSpacing)
 
-	// Layout children
+	// Pass 2: Layout all children
 	let curMainPos = mainPos(axis, rect)
 	const crossStartPos = crossPos(axis, rect)
 	const crossDimVal = crossDim(axis, rect)
@@ -103,9 +154,16 @@ export function layoutFlex(
 		const child = children[i]
 		const size = cachedSizes[i] ?? { w: 0, h: 0 }
 		const greedyWeight = getGreedyWeight(child)
-		const greedyExtra = totalGreedyWeight > 0 ? (extraSpace * greedyWeight) / totalGreedyWeight : 0
 
-		const childMainDim = mainSize(axis, size) + greedyExtra
+		let childMainDim: number
+		if (greedyWeight > 0 && totalGreedyWeight > 0) {
+			// Greedy: gets proportional share of remaining space
+			childMainDim = (remainingForGreedy * greedyWeight) / totalGreedyWeight
+		} else {
+			// Non-greedy: gets natural size
+			childMainDim = mainSize(axis, size)
+		}
+
 		const childCrossDim = crossSize(axis, size)
 
 		// Calculate cross position based on alignment