@effect-tui/react 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.1.5",
+	"version": "0.1.7",
 	"description": "React bindings for @effect-tui/core",
 	"type": "module",
 	"files": [
@@ -83,7 +83,7 @@
 		"prepublishOnly": "bun run typecheck && bun run build"
 	},
 	"dependencies": {
-		"@effect-tui/core": "^0.1.5",
+		"@effect-tui/core": "^0.1.7",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/dev.tsx

@@ -395,8 +395,8 @@ export async function devRender(entryPath: string, options?: DevRenderOptions):
 	const renderer = createRenderer(options)
 	const root = createRoot(renderer)
 
-	// Dev mode always enables remote control
-	const stopRemote = enableRemote(renderer)
+	// Dev mode always enables remote control with entry path for identification
+	const stopRemote = enableRemote(renderer, { entryPath })
 
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null
 	let version = 0

package/src/hosts/base.ts

@@ -147,13 +147,13 @@ export abstract class BaseHost implements HostInstance {
 		this.flexGrow = (props.flexGrow as number | undefined) ?? 0
 		this.flexShrink = (props.flexShrink as number | undefined) ?? 1
 
-		// Frame constraints
-		this.frameWidth = props.width as number | undefined
-		this.frameHeight = props.height as number | undefined
-		this.frameMinWidth = props.minWidth as number | undefined
-		this.frameMaxWidth = props.maxWidth as number | undefined
-		this.frameMinHeight = props.minHeight as number | undefined
-		this.frameMaxHeight = props.maxHeight as number | undefined
+		// Frame constraints - only accept valid numbers (ignore strings like "100%")
+		this.frameWidth = typeof props.width === "number" ? props.width : undefined
+		this.frameHeight = typeof props.height === "number" ? props.height : undefined
+		this.frameMinWidth = typeof props.minWidth === "number" ? props.minWidth : undefined
+		this.frameMaxWidth = typeof props.maxWidth === "number" ? props.maxWidth : undefined
+		this.frameMinHeight = typeof props.minHeight === "number" ? props.minHeight : undefined
+		this.frameMaxHeight = typeof props.maxHeight === "number" ? props.maxHeight : undefined
 	}
 
 	destroy(): void {
@@ -183,4 +183,18 @@ export abstract class BaseHost implements HostInstance {
 		}
 		child.parent = this
 	}
+
+	/**
+	 * Render a child with optional clipping to its rect.
+	 * Common pattern used by containers (ZStack, Overlay, etc.)
+	 */
+	protected renderChildWithClip(child: HostInstance, buffer: CellBuffer, palette: Palette): void {
+		if (child.rect) {
+			buffer.withClip(child.rect.x, child.rect.y, child.rect.w, child.rect.h, () => {
+				child.render(buffer, palette)
+			})
+		} else {
+			child.render(buffer, palette)
+		}
+	}
 }

package/src/hosts/box.ts

@@ -1,7 +1,6 @@
 import type { CellBuffer, Palette, Color } from "@effect-tui/core"
 import { Colors } from "@effect-tui/core"
 import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
-import { getInheritedBg } from "./base.js"
 import { SingleChildHost } from "./single-child.js"
 import {
 	type BorderKind,
@@ -10,7 +9,7 @@ import {
 	type Padding,
 	type PaddingInput,
 	resolvePadding,
-	resolveBgStyle,
+	resolveInheritedBgStyle,
 	toColorValue,
 } from "../utils/index.js"
 
@@ -94,11 +93,9 @@ export class BoxHost extends SingleChildHost {
 		if (!this.rect) return
 		const { x, y, w, h } = this.rect
 
-		// If no explicit bg, inherit from parent (so child boxes are transparent over parents)
-		const rawBg: Color | undefined = this.bg ?? getInheritedBg(this.parent)
-
 		// Always clear our rect to ensure stale backgrounds are removed.
-		const { styleId: bgStyleId } = resolveBgStyle(palette, rawBg)
+		// If no explicit bg, inherit from parent (so child boxes are transparent over parents)
+		const { styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
 		buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
 
 		// Draw border

package/src/hosts/overlay-item.ts

@@ -7,7 +7,7 @@
 
 import type { CellBuffer, Palette, Rect, Size } from "@effect-tui/core"
 import type { HostContext, CommonProps } from "../reconciler/types.js"
-import { BaseHost } from "./base.js"
+import { SingleChildHost } from "./single-child.js"
 
 type HAlign = "left" | "center" | "right"
 type VAlign = "top" | "center" | "bottom"
@@ -17,7 +17,7 @@ export interface OverlayItemProps extends CommonProps {
 	alignment?: { h?: HAlign; v?: VAlign }
 }
 
-export class OverlayItemHost extends BaseHost {
+export class OverlayItemHost extends SingleChildHost {
 	/** Stored alignment for parent Overlay to read */
 	alignment: { h?: HAlign; v?: VAlign } = {}
 
@@ -29,37 +29,22 @@ export class OverlayItemHost extends BaseHost {
 	override measure(maxW: number, maxH: number): Size {
 		const constrained = this.constrainProposal(maxW, maxH)
 
-		// Size is determined by single child
-		const child = this.children[0]
-		if (!child) {
+		if (!this.child) {
 			return this.constrainResult({ w: 0, h: 0 })
 		}
 
-		const childSize = child.measure(constrained.w, constrained.h)
+		const childSize = this.child.measure(constrained.w, constrained.h)
 		return this.constrainResult(childSize)
 	}
 
 	override layout(rect: Rect): void {
 		this.rect = rect
-
-		// Pass rect to child
-		const child = this.children[0]
-		if (child) {
-			child.layout(rect)
-		}
+		this.child?.layout(rect)
 	}
 
 	override render(buffer: CellBuffer, palette: Palette): void {
-		// Render child
-		const child = this.children[0]
-		if (child) {
-			if (child.rect) {
-				buffer.withClip(child.rect.x, child.rect.y, child.rect.w, child.rect.h, () => {
-					child.render(buffer, palette)
-				})
-			} else {
-				child.render(buffer, palette)
-			}
+		if (this.child) {
+			this.renderChildWithClip(this.child, buffer, palette)
 		}
 	}
 

package/src/hosts/overlay.ts

@@ -19,6 +19,7 @@
 import type { CellBuffer, Palette, Rect, Size } from "@effect-tui/core"
 import type { HostContext, CommonProps } from "../reconciler/types.js"
 import { BaseHost } from "./base.js"
+import { alignInRect } from "../utils/index.js"
 import type { OverlayItemHost } from "./overlay-item.js"
 
 export interface OverlayProps extends CommonProps {}
@@ -70,36 +71,7 @@ export class OverlayHost extends BaseHost {
 
 			// Read alignment from OverlayItemHost (use type check, not instanceof, for bundler compatibility)
 			const alignment = child.type === "overlayItem" ? (child as OverlayItemHost).alignment : {}
-			const hAlign = alignment.h ?? "center"
-			const vAlign = alignment.v ?? "center"
-
-			// Calculate position based on alignment
-			let x = rect.x
-			let y = rect.y
-
-			switch (hAlign) {
-				case "left":
-					x = rect.x
-					break
-				case "center":
-					x = rect.x + Math.floor((rect.w - size.w) / 2)
-					break
-				case "right":
-					x = rect.x + rect.w - size.w
-					break
-			}
-
-			switch (vAlign) {
-				case "top":
-					y = rect.y
-					break
-				case "center":
-					y = rect.y + Math.floor((rect.h - size.h) / 2)
-					break
-				case "bottom":
-					y = rect.y + rect.h - size.h
-					break
-			}
+			const { x, y } = alignInRect(rect, size, alignment.h ?? "center", alignment.v ?? "center")
 
 			child.layout({
 				x,
@@ -113,13 +85,7 @@ export class OverlayHost extends BaseHost {
 	override render(buffer: CellBuffer, palette: Palette): void {
 		// Render all children in order (base first, then overlays)
 		for (const child of this.children) {
-			if (child.rect) {
-				buffer.withClip(child.rect.x, child.rect.y, child.rect.w, child.rect.h, () => {
-					child.render(buffer, palette)
-				})
-			} else {
-				child.render(buffer, palette)
-			}
+			this.renderChildWithClip(child, buffer, palette)
 		}
 	}
 }

package/src/hosts/scroll.ts

@@ -1,9 +1,8 @@
 // scroll.ts — Scrollable container host
 import type { CellBuffer, Palette, Color } from "@effect-tui/core"
 import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
-import { getInheritedBg } from "./base.js"
 import { SingleChildHost } from "./single-child.js"
-import { resolveBgStyle } from "../utils/index.js"
+import { resolveInheritedBgStyle } from "../utils/index.js"
 
 export interface ScrollProps extends CommonProps {
 	/** Scroll axis: "vertical" (default), "horizontal", or "both" */
@@ -175,9 +174,8 @@ export class ScrollHost extends SingleChildHost {
 		if (!this.rect) return
 		const { x, y, w, h } = this.rect
 
-		// Fill background
-		const rawBg: Color | undefined = this.bg ?? getInheritedBg(this.parent)
-		const { value: bgValue, styleId: bgStyleId } = resolveBgStyle(palette, rawBg)
+		// Fill background (inherit from parent if not explicitly set)
+		const { value: bgValue, styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
 		if (bgValue !== undefined) {
 			buffer.fillRect(x, y, w, h, " ".codePointAt(0)!, bgStyleId)
 		}

package/src/hosts/text.ts

@@ -1,7 +1,7 @@
 import { displayWidth, type CellBuffer, type Palette, type Color } from "@effect-tui/core"
 import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
 import { BaseHost, getInheritedBg } from "./base.js"
-import { resolveBgStyle, styleIdFromProps } from "../utils/index.js"
+import { resolveInheritedBgStyle, styleIdFromProps } from "../utils/index.js"
 
 export interface TextProps extends CommonProps {
 	fg?: Color
@@ -114,8 +114,8 @@ export class TextHost extends BaseHost {
 		if (!this.rect) return
 
 		// If text has no bg, inherit from parent box for proper highlight rendering
-		const inheritedBg: Color | undefined = this.bg ?? getInheritedBg(this.parent)
-		const { value: bgValue, styleId: bgStyleId } = resolveBgStyle(palette, inheritedBg)
+		const { value: bgValue, styleId: bgStyleId } = resolveInheritedBgStyle(palette, this.bg, this.parent)
+		const inheritedBg = this.bg ?? getInheritedBg(this.parent)
 
 		const styleId = styleIdFromProps(palette, {
 			fg: this.fg,

package/src/hosts/zstack.ts

@@ -1,6 +1,7 @@
 import type { CellBuffer, Palette } from "@effect-tui/core"
 import type { HostContext, Rect, Size, CommonProps } from "../reconciler/types.js"
 import { BaseHost } from "./base.js"
+import { alignInRect, type HAlign, type VAlign } from "../utils/index.js"
 
 export interface ZStackProps extends CommonProps {
 	alignment?: { h?: "leading" | "center" | "trailing"; v?: "top" | "center" | "bottom" }
@@ -8,8 +9,8 @@ export interface ZStackProps extends CommonProps {
 
 // Overlay children in the same rect, honoring alignment for each child.
 export class ZStackHost extends BaseHost {
-	alignmentH: "leading" | "center" | "trailing" = "center"
-	alignmentV: "top" | "center" | "bottom" = "center"
+	alignmentH: HAlign = "center"
+	alignmentV: VAlign = "center"
 	private cachedSizes: Size[] = []
 
 	constructor(props: ZStackProps, ctx: HostContext) {
@@ -47,15 +48,7 @@ export class ZStackHost extends BaseHost {
 		for (let i = 0; i < this.children.length; i++) {
 			const child = this.children[i]
 			const size = this.cachedSizes[i] ?? child.measure(rect.w, rect.h)
-
-			let x = rect.x
-			let y = rect.y
-
-			if (this.alignmentH === "center") x += Math.floor((rect.w - size.w) / 2)
-			else if (this.alignmentH === "trailing") x += Math.max(0, rect.w - size.w)
-
-			if (this.alignmentV === "center") y += Math.floor((rect.h - size.h) / 2)
-			else if (this.alignmentV === "bottom") y += Math.max(0, rect.h - size.h)
+			const { x, y } = alignInRect(rect, size, this.alignmentH, this.alignmentV)
 
 			child.layout({
 				x,
@@ -68,13 +61,7 @@ export class ZStackHost extends BaseHost {
 
 	render(buffer: CellBuffer, palette: Palette): void {
 		for (const child of this.children) {
-			if (child.rect) {
-				buffer.withClip(child.rect.x, child.rect.y, child.rect.w, child.rect.h, () => {
-					child.render(buffer, palette)
-				})
-			} else {
-				child.render(buffer, palette)
-			}
+			this.renderChildWithClip(child, buffer, palette)
 		}
 	}
 

package/src/remote/Procedures.ts

@@ -39,6 +39,10 @@ const Info = Rpc.make("Info", {
 		pid: Schema.Number,
 		width: Schema.Number,
 		height: Schema.Number,
+		/** Entry file path (e.g., /Users/kit/code/my-app/src/tui.tsx) */
+		entryPath: Schema.optional(Schema.String),
+		/** Short name derived from entry path (e.g., my-app/src/tui.tsx) */
+		name: Schema.optional(Schema.String),
 	}),
 })
 

package/src/remote/Router.ts

@@ -10,7 +10,13 @@ export interface TuiSessionImpl {
 	readonly dispatchKey: (key: KeyMsg) => void
 	readonly dispatchPaste: (text: string) => void
 	readonly dispatchResize: (width: number, height: number) => void
-	readonly getInfo: () => { pid: number; width: number; height: number }
+	readonly getInfo: () => {
+		pid: number
+		width: number
+		height: number
+		entryPath?: string
+		name?: string
+	}
 }
 
 export class TuiSession extends Context.Tag("TuiSession")<

package/src/remote/index.ts

@@ -17,19 +17,55 @@ import type { TuiRenderer } from "../renderer-types.js"
 import type { TuiSessionImpl } from "./Router.js"
 import { makeServerLayer, getSocketPath } from "./Server.js"
 
+export interface EnableRemoteOptions {
+	/** Custom socket path (defaults to /tmp/effect-tui-sessions/<pid>.sock) */
+	socketPath?: string
+	/** Entry file path for identification (e.g., import.meta.path) */
+	entryPath?: string
+}
+
+/**
+ * Derive a short name from the entry path.
+ * Uses the last directory + filename (e.g., "/Users/kit/code/my-app/src/tui.tsx" -> "my-app/src/tui.tsx")
+ */
+function deriveSessionName(entryPath: string): string {
+	const parts = entryPath.split("/")
+	// Find the last directory that looks like a project name (not src, lib, etc)
+	const commonDirs = ["src", "lib", "dist", "build", "packages"]
+	let srcIdx = -1
+	for (let i = parts.length - 1; i >= 0; i--) {
+		if (commonDirs.includes(parts[i])) {
+			srcIdx = i
+			break
+		}
+	}
+	if (srcIdx > 0) {
+		// Include project name + relative path from there
+		return parts.slice(srcIdx - 1).join("/")
+	}
+	// Fallback: last 3 path segments
+	return parts.slice(-3).join("/")
+}
+
 /**
  * Enable remote control for a TUI renderer.
  * Starts an RPC server on a Unix socket at /tmp/effect-tui-sessions/<pid>.sock
  *
  * @param renderer - The TUI renderer to control
- * @param socketPath - Optional custom socket path
+ * @param options - Socket path and entry path for session identification
  * @returns A cleanup function to stop the server
  */
 export function enableRemote(
 	renderer: TuiRenderer,
-	socketPath?: string,
+	options?: EnableRemoteOptions | string,
 ): () => void {
-	const actualPath = socketPath ?? getSocketPath()
+	// Support old API: enableRemote(renderer, socketPath?)
+	const opts: EnableRemoteOptions =
+		typeof options === "string" ? { socketPath: options } : options ?? {}
+	const actualPath = opts.socketPath ?? getSocketPath()
+
+	// Derive session name from entry path
+	const name = opts.entryPath ? deriveSessionName(opts.entryPath) : undefined
 
 	// Create session implementation from renderer
 	const session: TuiSessionImpl = {
@@ -41,6 +77,8 @@ export function enableRemote(
 			pid: process.pid,
 			width: renderer.width,
 			height: renderer.height,
+			entryPath: opts.entryPath,
+			name,
 		}),
 	}
 

package/src/renderer/modes/FullscreenRenderer.ts

@@ -1,4 +1,4 @@
-import { ANSI, emitRowWithReset, findChangeWindow } from "@effect-tui/core"
+import { ANSI, emitRowWithReset, rowChanged } from "@effect-tui/core"
 import type { RendererMode, RenderContext, RenderOutput } from "./RendererMode.js"
 
 /**
@@ -15,20 +15,22 @@ export class FullscreenRenderer implements RendererMode {
 		// If a full clear was requested (e.g., on resize), prepend it to output
 		// so clear + content are written atomically (no visible flash)
 		if (this.needsFullClear) {
-			output += ANSI.cursor.to(1, 1)
+			output += ANSI.screen.clear + ANSI.cursor.to(1, 1)
 			this.needsFullClear = false
 			// After clear, we must redraw everything - can't rely on diff
 			for (let y = 0; y < frameHeight; y++) {
 				if (y > 0) output += ANSI.cursor.to(1, y + 1)
+				output += palette.sgr(0) + ANSI.line.clear
 				output += emitRowWithReset(nextBuffer, palette, y, frameWidth)
 			}
 		} else if (enableDiff && prevBuffer) {
 			// Diff per line for minimal writes
 			for (let y = 0; y < frameHeight; y++) {
-				const change = findChangeWindow(prevBuffer, nextBuffer, y, frameWidth)
-				if (!change) continue
-				output += ANSI.cursor.to(change.left + 1, y + 1)
-				output += emitRowWithReset(nextBuffer, palette, y, frameWidth, change.left, change.right + 1)
+				if (!rowChanged(prevBuffer, nextBuffer, y, frameWidth)) continue
+				output += ANSI.cursor.to(1, y + 1)
+				// Clear the row using default style to avoid carrying stale backgrounds
+				output += palette.sgr(0) + ANSI.line.clear
+				output += emitRowWithReset(nextBuffer, palette, y, frameWidth)
 			}
 		} else {
 			// Full redraw (tests/manual mode)

package/src/renderer/modes/InlineRenderer.ts

@@ -32,6 +32,7 @@ export class InlineRenderer implements RendererMode {
 				output += ANSI.cursor.up(this.previousHeight)
 			}
 			output += ANSI.cursor.startOfLine
+			output += ANSI.screen.clearToEnd
 			this.previousStartRow = startRow
 			this.printedWidths = []
 		} else if (this.previousHeight > 0) {
@@ -80,7 +81,7 @@ export class InlineRenderer implements RendererMode {
 				const prevW = this.printedWidths[screenY] ?? 0
 				if (prevW > 0) {
 					moveToRow(screenY)
-					output += ANSI.cursor.toCol(1) + palette.sgr(0) + " ".repeat(prevW)
+					output += ANSI.cursor.toCol(1) + palette.sgr(0) + ANSI.line.clear
 					this.printedWidths[screenY] = 0
 				}
 				continue
@@ -94,7 +95,7 @@ export class InlineRenderer implements RendererMode {
 				// No change; maybe need to clear tail if content shrunk
 				if (prevW > newW) {
 					moveToRow(screenY)
-					output += ANSI.cursor.toCol(newW + 1) + palette.sgr(0) + " ".repeat(prevW - newW)
+					output += ANSI.cursor.toCol(newW + 1) + palette.sgr(0) + ANSI.line.clearToEnd
 					this.printedWidths[screenY] = newW
 				}
 				continue
@@ -108,9 +109,9 @@ export class InlineRenderer implements RendererMode {
 			// Clear tail if shrunk
 			const effectiveW = Math.max(newW, change.right + 1)
 			if (prevW > effectiveW) {
-				output += ANSI.cursor.toCol(effectiveW + 1) + palette.sgr(0) + " ".repeat(prevW - effectiveW)
+				output += ANSI.cursor.toCol(effectiveW + 1) + ANSI.line.clearToEnd
 			}
-			this.printedWidths[screenY] = newW
+			this.printedWidths[screenY] = effectiveW
 		}
 
 		// Ensure cursor ends just after the dynamic block for next frame positioning
@@ -128,8 +129,9 @@ export class InlineRenderer implements RendererMode {
 		for (let bufferY = startRow; bufferY < endRow; bufferY++) {
 			const screenY = bufferY - startRow
 			const trimmedWidth = rowContentWidth(nextBuffer, bufferY, frameWidth)
-			// Full-width emit avoids reliance on line clears.
-			output += emitRowWithReset(nextBuffer, palette, bufferY, frameWidth, 0, frameWidth)
+			// Clear ENTIRE line first to handle resize artifacts
+			output += ANSI.line.clear
+			output += emitRowWithReset(nextBuffer, palette, bufferY, frameWidth, 0, trimmedWidth)
 			output += "\r\n"
 			// Track line widths for resize reflow calculation
 			this.printedWidths[screenY] = trimmedWidth
@@ -137,7 +139,7 @@ export class InlineRenderer implements RendererMode {
 
 		// Clear any extra lines if content shrank
 		for (let screenY = rowCount; screenY < this.previousHeight; screenY++) {
-			output += palette.sgr(0) + " ".repeat(frameWidth) + "\r\n"
+			output += palette.sgr(0) + ANSI.line.clear + "\r\n"
 			this.printedWidths[screenY] = 0
 		}
 

package/src/utils/alignment.ts

@@ -0,0 +1,50 @@
+/**
+ * Alignment utilities for layout positioning.
+ */
+
+import type { Rect, Size } from "../reconciler/types.js"
+
+export type HAlign = "left" | "center" | "right" | "leading" | "trailing"
+export type VAlign = "top" | "center" | "bottom"
+
+/**
+ * Calculate position to align a child size within a container rect.
+ * Returns the x,y coordinates for the child's top-left corner.
+ */
+export function alignInRect(
+	rect: Rect,
+	size: Size,
+	hAlign: HAlign = "center",
+	vAlign: VAlign = "center",
+): { x: number; y: number } {
+	let x = rect.x
+	let y = rect.y
+
+	switch (hAlign) {
+		case "left":
+		case "leading":
+			x = rect.x
+			break
+		case "center":
+			x = rect.x + Math.floor((rect.w - size.w) / 2)
+			break
+		case "right":
+		case "trailing":
+			x = rect.x + Math.max(0, rect.w - size.w)
+			break
+	}
+
+	switch (vAlign) {
+		case "top":
+			y = rect.y
+			break
+		case "center":
+			y = rect.y + Math.floor((rect.h - size.h) / 2)
+			break
+		case "bottom":
+			y = rect.y + Math.max(0, rect.h - size.h)
+			break
+	}
+
+	return { x, y }
+}

package/src/utils/index.ts

@@ -1,4 +1,13 @@
+export { type HAlign, type VAlign, alignInRect } from "./alignment.js"
 export { type BorderKind, type BorderChars, borderChars, type ClipRect, drawBorder } from "./border.js"
 export { type Padding, type PaddingInput, resolvePadding } from "./padding.js"
-export { type StyleOptions, type StyleInput, toColorValue, styleSpecFromProps, styleIdFromProps, resolveBgStyle } from "./styles.js"
+export {
+	type StyleOptions,
+	type StyleInput,
+	toColorValue,
+	styleSpecFromProps,
+	styleIdFromProps,
+	resolveBgStyle,
+	resolveInheritedBgStyle,
+} from "./styles.js"
 export { type FlexAxis, type FlexAlignment, type FlexMeasureResult, measureFlex, layoutFlex } from "./flex-layout.js"

package/src/utils/styles.ts

@@ -55,3 +55,19 @@ export function resolveBgStyle(palette: Palette, bg?: Color): { value?: ColorVal
 	const styleId = value === undefined ? 0 : palette.id({ bg: value })
 	return { value, styleId }
 }
+
+import type { HostInstance } from "../reconciler/types.js"
+import { getInheritedBg } from "../hosts/base.js"
+
+/**
+ * Resolve background style, inheriting from parent if not explicitly set.
+ * Common pattern used by hosts that need background color inheritance.
+ */
+export function resolveInheritedBgStyle(
+	palette: Palette,
+	explicitBg: Color | undefined,
+	parent: HostInstance | null,
+): { value?: ColorValue; styleId: number } {
+	const bg = explicitBg ?? getInheritedBg(parent)
+	return resolveBgStyle(palette, bg)
+}