@effect-tui/react 0.16.0 → 2.0.1

package/src/hosts/scroll.ts

@@ -80,6 +80,12 @@ export class ScrollHost extends SingleChildHost {
 	// Measured content dimensions (full size before clipping)
 	private contentWidth = 0
 	private contentHeight = 0
+	// Effective viewport dimensions (excludes scrollbar gutter when visible)
+	private viewportWidth = 0
+	private viewportHeight = 0
+	// Scrollbar visibility after accounting for content overflow
+	private showVerticalScrollbar = false
+	private showHorizontalScrollbar = false
 	// Track last reported sizes to avoid redundant callbacks
 	private lastReportedContentW = -1
 	private lastReportedContentH = -1
@@ -103,45 +109,114 @@ export class ScrollHost extends SingleChildHost {
 		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
-	measure(maxW: number, maxH: number): Size {
+	private computeViewport(baseW: number, baseH: number, contentW: number, contentH: number): {
+		viewportW: number
+		viewportH: number
+		showV: boolean
+		showH: boolean
+	} {
+		const allowV = this.showScrollbar && (this.axis === "vertical" || this.axis === "both")
+		const allowH = this.showScrollbar && (this.axis === "horizontal" || this.axis === "both")
+		let viewportW = Math.max(0, baseW)
+		let viewportH = Math.max(0, baseH)
+		let showV = false
+		let showH = false
+
+		for (let i = 0; i < 2; i++) {
+			const nextShowV = allowV && contentH > viewportH
+			const nextShowH = allowH && contentW > viewportW
+			if (nextShowV === showV && nextShowH === showH) break
+			showV = nextShowV
+			showH = nextShowH
+			viewportW = Math.max(0, baseW - (showV ? 1 : 0))
+			viewportH = Math.max(0, baseH - (showH ? 1 : 0))
+		}
+
+		return { viewportW, viewportH, showV, showH }
+	}
+
+	protected measureSelf(maxW: number, maxH: number): Size {
 		// Apply frame constraints to determine our size
 		const constrained = this.constrainProposal(maxW, maxH)
 
-		// Measure child with unbounded dimension(s) based on axis
-		let childMaxW = constrained.w
-		let childMaxH = constrained.h
-
-		if (this.axis === "vertical" || this.axis === "both") {
-			childMaxH = Number.MAX_SAFE_INTEGER
+		const child = this.child
+		if (!child) {
+			this.contentWidth = 0
+			this.contentHeight = 0
+			const viewport = this.computeViewport(constrained.w, constrained.h, 0, 0)
+			this.viewportWidth = viewport.viewportW
+			this.viewportHeight = viewport.viewportH
+			this.showVerticalScrollbar = viewport.showV
+			this.showHorizontalScrollbar = viewport.showH
+			return this.constrainResult({ w: 0, h: 0 })
 		}
-		if (this.axis === "horizontal" || this.axis === "both") {
-			childMaxW = Number.MAX_SAFE_INTEGER
+
+		const measureChild = (proposalW: number, proposalH: number): Size => {
+			let childMaxW = proposalW
+			let childMaxH = proposalH
+
+			if (this.axis === "vertical" || this.axis === "both") {
+				childMaxH = Number.MAX_SAFE_INTEGER
+			}
+			if (this.axis === "horizontal" || this.axis === "both") {
+				childMaxW = Number.MAX_SAFE_INTEGER
+			}
+
+			return child.measure(childMaxW, childMaxH)
 		}
 
-		// Measure single child (scroll should have at most one child)
-		const child = this.child
-		if (child) {
-			const childSize = child.measure(childMaxW, childMaxH)
-			this.contentWidth = childSize.w
-			this.contentHeight = childSize.h
-			// Note: onScrollLayoutChange callback is deferred to layout() to keep measure() pure
+		let viewportW = constrained.w
+		let viewportH = constrained.h
+		let contentW = 0
+		let contentH = 0
+		let showV = false
+		let showH = false
+
+		for (let i = 0; i < 3; i++) {
+			const childSize = measureChild(viewportW, viewportH)
+			contentW = childSize.w
+			contentH = childSize.h
+			const viewport = this.computeViewport(constrained.w, constrained.h, contentW, contentH)
+			if (viewport.viewportW === viewportW && viewport.viewportH === viewportH) {
+				showV = viewport.showV
+				showH = viewport.showH
+				break
+			}
+			viewportW = viewport.viewportW
+			viewportH = viewport.viewportH
+			showV = viewport.showV
+			showH = viewport.showH
 		}
 
+		this.contentWidth = contentW
+		this.contentHeight = contentH
+		this.viewportWidth = viewportW
+		this.viewportHeight = viewportH
+		this.showVerticalScrollbar = showV
+		this.showHorizontalScrollbar = showH
+
 		// Report natural content size (clamped to constrained bounds)
 		// Greedy expansion happens in layout phase via layoutFlex
-		const naturalW = Math.min(this.contentWidth, constrained.w)
-		const naturalH = Math.min(this.contentHeight, constrained.h)
+		const naturalW = Math.min(this.contentWidth + (this.showVerticalScrollbar ? 1 : 0), constrained.w)
+		const naturalH = Math.min(this.contentHeight + (this.showHorizontalScrollbar ? 1 : 0), constrained.h)
 
 		return this.constrainResult({ w: naturalW, h: naturalH })
 	}
 
-	override layout(rect: Rect): void {
+	protected override layoutSelf(rect: Rect): void {
 		const layoutRect = this.layoutWithConstraints(rect)
+		const viewport = this.computeViewport(layoutRect.w, layoutRect.h, this.contentWidth, this.contentHeight)
+		this.viewportWidth = viewport.viewportW
+		this.viewportHeight = viewport.viewportH
+		this.showVerticalScrollbar = viewport.showV
+		this.showHorizontalScrollbar = viewport.showH
+
 		const { x: alignX, y: alignY } = resolveAlign(this.align)
 
 		const contentChanged =
 			this.contentWidth !== this.lastReportedContentW || this.contentHeight !== this.lastReportedContentH
-		const viewportChanged = layoutRect.w !== this.lastViewportW || layoutRect.h !== this.lastViewportH
+		const viewportChanged =
+			this.viewportWidth !== this.lastViewportW || this.viewportHeight !== this.lastViewportH
 		const rectChanged =
 			layoutRect.x !== this.lastRectX ||
 			layoutRect.y !== this.lastRectY ||
@@ -152,8 +227,8 @@ export class ScrollHost extends SingleChildHost {
 		if (!child) return
 
 		// Calculate max scroll offsets
-		const maxScrollY = Math.max(0, this.contentHeight - layoutRect.h)
-		const maxScrollX = Math.max(0, this.contentWidth - layoutRect.w)
+		const maxScrollY = Math.max(0, this.contentHeight - this.viewportHeight)
+		const maxScrollX = Math.max(0, this.contentWidth - this.viewportWidth)
 
 		// Start with the offset from props (controlled by useScroll)
 		let scrollY = this.offsetY
@@ -200,18 +275,18 @@ export class ScrollHost extends SingleChildHost {
 		const offsetChanged = this.effectiveOffset !== this.lastOffsetY || this.effectiveOffsetX !== this.lastOffsetX
 
 		// Handle alignment when content is smaller than viewport
-		if (this.contentHeight < layoutRect.h && (this.axis === "vertical" || this.axis === "both")) {
+		if (this.contentHeight < this.viewportHeight && (this.axis === "vertical" || this.axis === "both")) {
 			if (alignY === "bottom") {
-				scrollY = -(layoutRect.h - this.contentHeight)
+				scrollY = -(this.viewportHeight - this.contentHeight)
 			} else if (alignY === "center") {
-				scrollY = -Math.floor((layoutRect.h - this.contentHeight) / 2)
+				scrollY = -Math.floor((this.viewportHeight - this.contentHeight) / 2)
 			}
 		}
-		if (this.contentWidth < layoutRect.w && (this.axis === "horizontal" || this.axis === "both")) {
+		if (this.contentWidth < this.viewportWidth && (this.axis === "horizontal" || this.axis === "both")) {
 			if (alignX === "right") {
-				scrollX = -(layoutRect.w - this.contentWidth)
+				scrollX = -(this.viewportWidth - this.contentWidth)
 			} else if (alignX === "center") {
-				scrollX = -Math.floor((layoutRect.w - this.contentWidth) / 2)
+				scrollX = -Math.floor((this.viewportWidth - this.contentWidth) / 2)
 			}
 		}
 
@@ -227,8 +302,8 @@ export class ScrollHost extends SingleChildHost {
 		if (this.onScrollLayoutChange && (contentChanged || viewportChanged || rectChanged || offsetChanged)) {
 			this.lastReportedContentW = this.contentWidth
 			this.lastReportedContentH = this.contentHeight
-			this.lastViewportW = layoutRect.w
-			this.lastViewportH = layoutRect.h
+			this.lastViewportW = this.viewportWidth
+			this.lastViewportH = this.viewportHeight
 			this.lastRectX = layoutRect.x
 			this.lastRectY = layoutRect.y
 			this.lastRectW = layoutRect.w
@@ -238,7 +313,7 @@ export class ScrollHost extends SingleChildHost {
 
 			this.onScrollLayoutChange({
 				content: { width: this.contentWidth, height: this.contentHeight },
-				viewport: { width: layoutRect.w, height: layoutRect.h },
+				viewport: { width: this.viewportWidth, height: this.viewportHeight },
 				offset: { x: this.effectiveOffsetX, y: this.effectiveOffset },
 				rect: { x: layoutRect.x, y: layoutRect.y, w: layoutRect.w, h: layoutRect.h },
 				axis: this.axis,
@@ -253,8 +328,8 @@ export class ScrollHost extends SingleChildHost {
 		// Fill background (inherit from parent if not explicitly set)
 		fillRectWithInheritedBg(buffer, palette, { x, y, w, h }, this.bg, this.parent)
 
-		// Render children with clipping
-		buffer.withClip(x, y, w, h, () => {
+		// Render children with clipping (exclude scrollbar gutters)
+		buffer.withClip(x, y, this.viewportWidth, this.viewportHeight, () => {
 			const child = this.child
 			if (child) {
 				child.render(buffer, palette)
@@ -272,18 +347,18 @@ export class ScrollHost extends SingleChildHost {
 		const { x, y, w, h } = this.rect
 
 		// Vertical scrollbar
-		if ((this.axis === "vertical" || this.axis === "both") && this.contentHeight > h) {
-			const maxScroll = this.contentHeight - h
+		if (this.showVerticalScrollbar) {
+			const maxScroll = Math.max(1, this.contentHeight - this.viewportHeight)
 			const scrollRatio = Math.min(1, this.effectiveOffset / maxScroll)
-			const thumbRatio = h / this.contentHeight
-			const thumbHeight = Math.max(1, Math.floor(h * thumbRatio))
-			const thumbY = Math.floor((h - thumbHeight) * scrollRatio)
+			const thumbRatio = this.viewportHeight / this.contentHeight
+			const thumbHeight = Math.max(1, Math.floor(this.viewportHeight * thumbRatio))
+			const thumbY = Math.floor((this.viewportHeight - thumbHeight) * scrollRatio)
 
 			const trackStyle = palette.id({ fg: 8 }) // dim
 			const thumbStyle = palette.id({ fg: 7 }) // brighter
 
 			// Draw track
-			for (let row = 0; row < h; row++) {
+			for (let row = 0; row < this.viewportHeight; row++) {
 				const char = row >= thumbY && row < thumbY + thumbHeight ? "┃" : "│"
 				const style = row >= thumbY && row < thumbY + thumbHeight ? thumbStyle : trackStyle
 				buffer.drawCP(x + w - 1, y + row, char.codePointAt(0)!, style)
@@ -291,18 +366,18 @@ export class ScrollHost extends SingleChildHost {
 		}
 
 		// Horizontal scrollbar
-		if ((this.axis === "horizontal" || this.axis === "both") && this.contentWidth > w) {
-			const maxScroll = this.contentWidth - w
+		if (this.showHorizontalScrollbar) {
+			const maxScroll = Math.max(1, this.contentWidth - this.viewportWidth)
 			const scrollRatio = Math.min(1, this.effectiveOffsetX / maxScroll)
-			const thumbRatio = w / this.contentWidth
-			const thumbWidth = Math.max(1, Math.floor(w * thumbRatio))
-			const thumbX = Math.floor((w - thumbWidth) * scrollRatio)
+			const thumbRatio = this.viewportWidth / this.contentWidth
+			const thumbWidth = Math.max(1, Math.floor(this.viewportWidth * thumbRatio))
+			const thumbX = Math.floor((this.viewportWidth - thumbWidth) * scrollRatio)
 
 			const trackStyle = palette.id({ fg: 8 })
 			const thumbStyle = palette.id({ fg: 7 })
 
 			// Draw track
-			for (let col = 0; col < w; col++) {
+			for (let col = 0; col < this.viewportWidth; col++) {
 				const char = col >= thumbX && col < thumbX + thumbWidth ? "━" : "─"
 				const style = col >= thumbX && col < thumbX + thumbWidth ? thumbStyle : trackStyle
 				buffer.drawCP(x + col, y + h - 1, char.codePointAt(0)!, style)
@@ -314,6 +389,14 @@ export class ScrollHost extends SingleChildHost {
 		super.updateProps(props)
 		// Scroll is greedy by default unless explicitly set to false
 		this.applyGreedyDefault(props, 1)
+		const prevAxis = this.axis
+		const prevOffsetY = this.offsetY
+		const prevOffsetX = this.offsetX
+		const prevAlign = this.align
+		const prevBg = this.bg
+		const prevShowScrollbar = this.showScrollbar
+		const prevSticky = this.sticky
+
 		if (props.axis !== undefined) this.axis = (props.axis as ScrollProps["axis"]) ?? "vertical"
 		if (props.offsetY !== undefined) this.offsetY = props.offsetY as number
 		if (props.offsetX !== undefined) this.offsetX = props.offsetX as number
@@ -322,5 +405,19 @@ export class ScrollHost extends SingleChildHost {
 		if (props.showScrollbar !== undefined) this.showScrollbar = props.showScrollbar as boolean
 		if (props.sticky !== undefined) this.sticky = props.sticky as boolean
 		this.onScrollLayoutChange = props.onScrollLayoutChange as ScrollProps["onScrollLayoutChange"]
+
+		const layoutChanged =
+			prevAxis !== this.axis ||
+			prevOffsetY !== this.offsetY ||
+			prevOffsetX !== this.offsetX ||
+			prevSticky !== this.sticky ||
+			prevAlign !== this.align ||
+			prevShowScrollbar !== this.showScrollbar
+
+		if (layoutChanged) {
+			this.invalidateLayout()
+		} else if (prevBg !== this.bg) {
+			this.invalidateRender()
+		}
 	}
 }

package/src/hosts/single-child.ts

@@ -26,6 +26,7 @@ export abstract class SingleChildHost extends BaseHost {
 			this.children.splice(0, 1)
 		}
 		child.parent = null
+		this.invalidateLayout()
 	}
 
 	private setSingleChild(child: HostInstance): void {
@@ -44,5 +45,6 @@ export abstract class SingleChildHost extends BaseHost {
 		}
 
 		child.parent = this
+		this.invalidateLayout()
 	}
 }

package/src/hosts/spacer.ts

@@ -21,7 +21,7 @@ export class SpacerHost extends LeafHost {
 		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
-	measure(_maxW: number, _maxH: number): Size {
+	protected measureSelf(_maxW: number, _maxH: number): Size {
 		// Spacers have no natural size, they expand via greedy
 		return { w: this.minWidth, h: this.minHeight }
 	}
@@ -34,7 +34,12 @@ export class SpacerHost extends LeafHost {
 		super.updateProps(props)
 		// Spacer is greedy by default unless explicitly set to false
 		this.applyGreedyDefault(props, 1)
+		const prevMinWidth = this.minWidth
+		const prevMinHeight = this.minHeight
 		if (props.minWidth !== undefined) this.minWidth = props.minWidth as number
 		if (props.minHeight !== undefined) this.minHeight = props.minHeight as number
+		if (prevMinWidth !== this.minWidth || prevMinHeight !== this.minHeight) {
+			this.invalidateLayout()
+		}
 	}
 }