@effect-tui/react 0.10.2 → 0.12.0

package/src/hosts/text.ts

@@ -11,8 +11,10 @@ export interface TextProps extends CommonProps {
 	fg?: ColorProp
 	bg?: ColorProp
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
 	inverse?: boolean
 	/** If true, wrap text to multiple lines (default: false, text is truncated) */
 	wrap?: boolean
@@ -22,8 +24,10 @@ export class TextHost extends BaseHost {
 	fg?: Color
 	bg?: Color
 	bold = false
+	dimmed = false
 	italic = false
 	underline = false
+	strikethrough = false
 	inverse = false
 	wrap = false // Default: truncate (no wrap)
 
@@ -38,7 +42,7 @@ export class TextHost extends BaseHost {
 
 	constructor(props: TextProps, ctx: HostContext) {
 		super("text", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	/** Check if we have SpanHost children (requires styled rendering) */
@@ -76,8 +80,11 @@ export class TextHost extends BaseHost {
 						fg: this.fg,
 						bg: this.bg,
 						bold: this.bold,
+						dimmed: this.dimmed,
 						italic: this.italic,
 						underline: this.underline,
+						strikethrough: this.strikethrough,
+						inverse: this.inverse,
 					})
 				}
 			} else if (child instanceof SpanHost) {
@@ -89,8 +96,11 @@ export class TextHost extends BaseHost {
 						fg: child.fg ?? this.fg,
 						bg: child.bg ?? this.bg,
 						bold: child.bold || this.bold,
+						dimmed: child.dimmed || this.dimmed,
 						italic: child.italic || this.italic,
 						underline: child.underline || this.underline,
+						strikethrough: child.strikethrough || this.strikethrough,
+						inverse: child.inverse || this.inverse,
 					})
 				}
 			}
@@ -297,8 +307,11 @@ export class TextHost extends BaseHost {
 						fg: span.fg ?? this.fg,
 						bg: span.bg ?? inheritedBg,
 						bold: span.bold,
+						dimmed: span.dimmed,
 						italic: span.italic,
 						underline: span.underline,
+						strikethrough: span.strikethrough,
+						inverse: span.inverse,
 					})
 					const availableWidth = this.rect.w - (x - this.rect.x)
 					if (availableWidth <= 0) break
@@ -315,8 +328,10 @@ export class TextHost extends BaseHost {
 			fg: this.fg,
 			bg: inheritedBg,
 			bold: this.bold,
+			dimmed: this.dimmed,
 			italic: this.italic,
 			underline: this.underline,
+			strikethrough: this.strikethrough,
 			inverse: this.inverse,
 		})
 		const content = this.getContent()
@@ -366,8 +381,10 @@ export class TextHost extends BaseHost {
 			this.bg = v as Color
 		}) as Color | undefined
 		this.bold = Boolean(props.bold)
+		this.dimmed = Boolean(props.dimmed)
 		this.italic = Boolean(props.italic)
 		this.underline = Boolean(props.underline)
+		this.strikethrough = Boolean(props.strikethrough)
 		this.inverse = Boolean(props.inverse)
 		this.wrap = Boolean(props.wrap)
 	}
@@ -415,8 +432,10 @@ export interface SpanStyle {
 	fg?: Color
 	bg?: Color
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
 	inverse?: boolean
 }
 
@@ -424,8 +443,10 @@ export interface SpanProps extends CommonProps {
 	fg?: Color
 	bg?: Color
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
 	inverse?: boolean
 	/** Reusable style object. Individual props override textStyle values. */
 	textStyle?: SpanStyle
@@ -441,13 +462,15 @@ export class SpanHost extends BaseHost {
 	fg?: Color
 	bg?: Color
 	bold = false
+	dimmed = false
 	italic = false
 	underline = false
+	strikethrough = false
 	inverse = false
 
 	constructor(props: SpanProps, ctx: HostContext) {
 		super("span", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	/** Get text content from RawTextHost children */
@@ -475,8 +498,11 @@ export class SpanHost extends BaseHost {
 		this.fg = props.fg !== undefined ? (props.fg as Color) : textStyle?.fg
 		this.bg = props.bg !== undefined ? (props.bg as Color) : textStyle?.bg
 		this.bold = props.bold !== undefined ? Boolean(props.bold) : Boolean(textStyle?.bold)
+		this.dimmed = props.dimmed !== undefined ? Boolean(props.dimmed) : Boolean(textStyle?.dimmed)
 		this.italic = props.italic !== undefined ? Boolean(props.italic) : Boolean(textStyle?.italic)
 		this.underline = props.underline !== undefined ? Boolean(props.underline) : Boolean(textStyle?.underline)
+		this.strikethrough =
+			props.strikethrough !== undefined ? Boolean(props.strikethrough) : Boolean(textStyle?.strikethrough)
 		this.inverse = props.inverse !== undefined ? Boolean(props.inverse) : Boolean(textStyle?.inverse)
 	}
 }
@@ -491,8 +517,11 @@ export interface StyledSpan {
 	fg?: Color
 	bg?: Color
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
+	inverse?: boolean
 }
 
 export interface StyledTextProps extends CommonProps {
@@ -523,7 +552,7 @@ export class StyledTextHost extends BaseHost {
 
 	constructor(props: StyledTextProps, ctx: HostContext) {
 		super("styledtext", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	measure(maxW: number, maxH: number): Size {
@@ -627,8 +656,11 @@ export class StyledTextHost extends BaseHost {
 					fg: span.fg ?? this.fg,
 					bg: span.bg ?? inheritedBg,
 					bold: span.bold,
+					dimmed: span.dimmed,
 					italic: span.italic,
 					underline: span.underline,
+					strikethrough: span.strikethrough,
+					inverse: span.inverse,
 				})
 				const availableWidth = this.rect.w - (x - this.rect.x)
 				if (availableWidth <= 0) break

package/src/hosts/zstack.ts

@@ -15,7 +15,7 @@ export class ZStackHost extends BaseHost {
 
 	constructor(props: ZStackProps, ctx: HostContext) {
 		super("zstack", props, ctx)
-		this.updateProps(props as Record<string, unknown>)
+		this.updateProps(props as unknown as Record<string, unknown>)
 	}
 
 	measure(maxW: number, maxH: number): Size {

package/src/reconciler/types.ts

@@ -148,10 +148,4 @@ export interface CommonProps {
 
 	/** React key prop for list reconciliation */
 	key?: string | number
-
-	/**
-	 * Index signature for Record<string, unknown> compatibility.
-	 * TODO: Remove this and properly type all props to catch typos like "grow" instead of "greedy"
-	 */
-	[key: string]: unknown
 }

package/src/utils/styles.ts

@@ -8,8 +8,10 @@ export interface StyleOptions {
 	fg?: ColorValue
 	bg?: ColorValue
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
 	inverse?: boolean
 }
 
@@ -17,8 +19,10 @@ export interface StyleInput {
 	fg?: Color
 	bg?: Color
 	bold?: boolean
+	dimmed?: boolean
 	italic?: boolean
 	underline?: boolean
+	strikethrough?: boolean
 	inverse?: boolean
 }
 
@@ -37,8 +41,10 @@ export function styleSpecFromProps(props: StyleInput): StyleSpec | undefined {
 	if (fg !== undefined) spec.fg = fg
 	if (bg !== undefined) spec.bg = bg
 	if (props.bold) spec.bold = true
+	if (props.dimmed) spec.dimmed = true
 	if (props.italic) spec.italic = true
 	if (props.underline) spec.underline = true
+	if (props.strikethrough) spec.strikethrough = true
 	if (props.inverse) spec.inverse = true
 
 	return Object.keys(spec).length > 0 ? spec : undefined