@effect-tui/react 0.1.1 → 0.1.4

package/src/utils/flex-layout.ts

@@ -4,13 +4,14 @@
 
 import type { HostInstance, Rect, Size } from "../reconciler/types.js"
 import type { BaseHost } from "../hosts/base.js"
+import { type Axis, mainSize, crossSize, mainPos, crossPos, mainDim, crossDim, makeRect } from "@effect-tui/core"
 
-export type FlexAxis = "vertical" | "horizontal"
+export type FlexAxis = Axis
 export type FlexAlignment = "start" | "center" | "end"
 
 export interface FlexMeasureResult {
-  sizes: Size[]
-  totalSize: Size
+	sizes: Size[]
+	totalSize: Size
 }
 
 /**
@@ -18,108 +19,94 @@ export interface FlexMeasureResult {
  * Returns cached sizes and total size.
  */
 export function measureFlex(
-  axis: FlexAxis,
-  children: HostInstance[],
-  spacing: number,
-  maxMain: number,
-  maxCross: number,
+	axis: FlexAxis,
+	children: HostInstance[],
+	spacing: number,
+	maxMain: number,
+	maxCross: number,
 ): FlexMeasureResult {
-  const sizes: Size[] = []
-  let totalMain = 0
-  let maxChildCross = 0
+	const sizes: Size[] = []
+	let totalMain = 0
+	let maxChildCross = 0
 
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i]
-    const remainingMain = Math.max(0, maxMain - totalMain)
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i]
+		const remainingMain = Math.max(0, maxMain - totalMain)
 
-    // For vertical: maxW=maxCross, maxH=remainingMain
-    // For horizontal: maxW=remainingMain, maxH=maxCross
-    const [childMaxW, childMaxH] = axis === "vertical" ? [maxCross, remainingMain] : [remainingMain, maxCross]
+		// Convert main/cross back to width/height for child measure
+		const childMaxW = axis === "vertical" ? maxCross : remainingMain
+		const childMaxH = axis === "vertical" ? remainingMain : maxCross
 
-    const size = child.measure(childMaxW, childMaxH)
-    sizes.push(size)
+		const size = child.measure(childMaxW, childMaxH)
+		sizes.push(size)
 
-    const childMain = axis === "vertical" ? size.h : size.w
-    const childCross = axis === "vertical" ? size.w : size.h
+		totalMain += mainSize(axis, size)
+		if (i < children.length - 1) totalMain += spacing
+		maxChildCross = Math.max(maxChildCross, crossSize(axis, size))
+	}
 
-    totalMain += childMain
-    if (i < children.length - 1) totalMain += spacing
-    maxChildCross = Math.max(maxChildCross, childCross)
-  }
+	// Build total size from main/cross dimensions
+	const totalW = axis === "vertical" ? maxChildCross : totalMain
+	const totalH = axis === "vertical" ? totalMain : maxChildCross
+	const totalSize: Size = { w: totalW, h: totalH }
 
-  const totalSize: Size = axis === "vertical" ? { w: maxChildCross, h: totalMain } : { w: totalMain, h: maxChildCross }
-
-  return { sizes, totalSize }
+	return { sizes, totalSize }
 }
 
 /**
  * Layout children along a flex axis using cached sizes.
  */
 export function layoutFlex(
-  axis: FlexAxis,
-  children: HostInstance[],
-  cachedSizes: Size[],
-  rect: Rect,
-  spacing: number,
-  alignment: FlexAlignment,
-  stretchCross: boolean,
+	axis: FlexAxis,
+	children: HostInstance[],
+	cachedSizes: Size[],
+	rect: Rect,
+	spacing: number,
+	alignment: FlexAlignment,
+	stretchCross: boolean,
 ): void {
-  // Calculate totals
-  let totalNaturalMain = 0
-  let totalFlexGrow = 0
-  const totalSpacing = Math.max(0, (children.length - 1) * spacing)
-
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i]
-    const size = cachedSizes[i] ?? child.measure(rect.w, rect.h)
-    const childMain = axis === "vertical" ? size.h : size.w
-    totalNaturalMain += childMain
-    totalFlexGrow += (child as BaseHost).flexGrow ?? 0
-  }
-
-  // Calculate extra space to distribute
-  const availableMain = axis === "vertical" ? rect.h : rect.w
-  const extraSpace = Math.max(0, availableMain - totalNaturalMain - totalSpacing)
-
-  // Layout children
-  let mainPos = axis === "vertical" ? rect.y : rect.x
-
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i]
-    const size = cachedSizes[i] ?? { w: 0, h: 0 }
-    const flexGrow = (child as BaseHost).flexGrow ?? 0
-    const flexExtra = totalFlexGrow > 0 ? (extraSpace * flexGrow) / totalFlexGrow : 0
-
-    const childMain = (axis === "vertical" ? size.h : size.w) + flexExtra
-    const childCross = axis === "vertical" ? size.w : size.h
-    const crossSize = axis === "vertical" ? rect.w : rect.h
-    const crossStart = axis === "vertical" ? rect.x : rect.y
-
-    // Calculate cross position based on alignment
-    let crossPos = crossStart
-    if (alignment === "center") {
-      crossPos = crossStart + Math.floor((crossSize - childCross) / 2)
-    } else if (alignment === "end") {
-      crossPos = crossStart + crossSize - childCross
-    }
-
-    // Build child rect
-    const childRect: Rect =
-      axis === "vertical"
-        ? {
-            x: crossPos,
-            y: mainPos,
-            w: stretchCross ? crossSize : childCross,
-            h: childMain,
-          }
-        : {
-            x: mainPos,
-            y: crossPos,
-            w: childMain,
-            h: stretchCross ? crossSize : childCross,
-          }
-
-    child.layout(childRect)
-    mainPos += childMain + spacing
-  }
+	// Calculate totals
+	let totalNaturalMain = 0
+	let totalFlexGrow = 0
+	const totalSpacing = Math.max(0, (children.length - 1) * spacing)
+
+	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)
+		totalFlexGrow += (child as BaseHost).flexGrow ?? 0
+	}
+
+	// Calculate extra space to distribute
+	const availableMain = mainDim(axis, rect)
+	const extraSpace = Math.max(0, availableMain - totalNaturalMain - totalSpacing)
+
+	// Layout children
+	let curMainPos = mainPos(axis, rect)
+	const crossStartPos = crossPos(axis, rect)
+	const crossDimVal = crossDim(axis, rect)
+
+	for (let i = 0; i < children.length; i++) {
+		const child = children[i]
+		const size = cachedSizes[i] ?? { w: 0, h: 0 }
+		const flexGrow = (child as BaseHost).flexGrow ?? 0
+		const flexExtra = totalFlexGrow > 0 ? (extraSpace * flexGrow) / totalFlexGrow : 0
+
+		const childMainDim = mainSize(axis, size) + flexExtra
+		const childCrossDim = crossSize(axis, size)
+
+		// Calculate cross position based on alignment
+		let curCrossPos = crossStartPos
+		if (alignment === "center") {
+			curCrossPos = crossStartPos + Math.floor((crossDimVal - childCrossDim) / 2)
+		} else if (alignment === "end") {
+			curCrossPos = crossStartPos + crossDimVal - childCrossDim
+		}
+
+		// Build child rect
+		const childRect = makeRect(axis, curMainPos, curCrossPos, childMainDim, stretchCross ? crossDimVal : childCrossDim)
+
+		child.layout(childRect)
+		curMainPos += childMainDim + spacing
+	}
 }

package/src/utils/index.ts

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

package/src/utils/padding.ts

@@ -3,15 +3,15 @@
  */
 
 export interface Padding {
-  top: number
-  right: number
-  bottom: number
-  left: number
+	top: number
+	right: number
+	bottom: number
+	left: number
 }
 
 export type PaddingInput =
-  | number
-  | { x?: number; y?: number; top?: number; right?: number; bottom?: number; left?: number }
+	| number
+	| { x?: number; y?: number; top?: number; right?: number; bottom?: number; left?: number }
 
 /**
  * Resolve padding input to a normalized Padding object.
@@ -21,25 +21,25 @@ export type PaddingInput =
  * - { top, right, bottom, left }: individual sides
  */
 export function resolvePadding(p?: PaddingInput): Padding {
-  if (p === undefined) {
-    return { top: 0, right: 0, bottom: 0, left: 0 }
-  }
-  if (typeof p === "number") {
-    return { top: p, right: p, bottom: p, left: p }
-  }
-  // x/y shorthand takes precedence if specified
-  if (p.x !== undefined || p.y !== undefined) {
-    return {
-      top: p.y ?? 0,
-      bottom: p.y ?? 0,
-      left: p.x ?? 0,
-      right: p.x ?? 0,
-    }
-  }
-  return {
-    top: p.top ?? 0,
-    right: p.right ?? 0,
-    bottom: p.bottom ?? 0,
-    left: p.left ?? 0,
-  }
+	if (p === undefined) {
+		return { top: 0, right: 0, bottom: 0, left: 0 }
+	}
+	if (typeof p === "number") {
+		return { top: p, right: p, bottom: p, left: p }
+	}
+	// x/y shorthand takes precedence if specified
+	if (p.x !== undefined || p.y !== undefined) {
+		return {
+			top: p.y ?? 0,
+			bottom: p.y ?? 0,
+			left: p.x ?? 0,
+			right: p.x ?? 0,
+		}
+	}
+	return {
+		top: p.top ?? 0,
+		right: p.right ?? 0,
+		bottom: p.bottom ?? 0,
+		left: p.left ?? 0,
+	}
 }

package/src/utils/styles.ts

@@ -2,13 +2,56 @@
  * Style utilities for building palette-compatible style objects.
  */
 
-import type { ColorValue } from "@effect-tui/core"
+import { parseColor, type Color, type ColorValue, type Palette, type StyleSpec } from "@effect-tui/core"
 
 export interface StyleOptions {
-  fg?: ColorValue
-  bg?: ColorValue
-  bold?: boolean
-  italic?: boolean
-  underline?: boolean
-  inverse?: boolean
+	fg?: ColorValue
+	bg?: ColorValue
+	bold?: boolean
+	italic?: boolean
+	underline?: boolean
+	inverse?: boolean
+}
+
+export interface StyleInput {
+	fg?: Color
+	bg?: Color
+	bold?: boolean
+	italic?: boolean
+	underline?: boolean
+	inverse?: boolean
+}
+
+/** Convert Color to ColorValue (parse strings, pass through numbers/RGB) */
+export function toColorValue(c: Color | undefined): ColorValue | undefined {
+	if (c === undefined) return undefined
+	return typeof c === "string" ? parseColor(c) : c
+}
+
+/** Build a StyleSpec from a Color-based input object. */
+export function styleSpecFromProps(props: StyleInput): StyleSpec | undefined {
+	const spec: StyleSpec = {}
+	const fg = toColorValue(props.fg)
+	const bg = toColorValue(props.bg)
+
+	if (fg !== undefined) spec.fg = fg
+	if (bg !== undefined) spec.bg = bg
+	if (props.bold) spec.bold = true
+	if (props.italic) spec.italic = true
+	if (props.underline) spec.underline = true
+	if (props.inverse) spec.inverse = true
+
+	return Object.keys(spec).length > 0 ? spec : undefined
+}
+
+/** Resolve a palette style id from a Color-based input object. */
+export function styleIdFromProps(palette: Palette, props: StyleInput): number {
+	return palette.id(styleSpecFromProps(props))
+}
+
+/** Resolve background style info from a Color input. */
+export function resolveBgStyle(palette: Palette, bg?: Color): { value?: ColorValue; styleId: number } {
+	const value = toColorValue(bg)
+	const styleId = value === undefined ? 0 : palette.id({ bg: value })
+	return { value, styleId }
 }