@effect-tui/react 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.3.1",
+	"version": "0.4.1",
 	"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.3.1",
+		"@effect-tui/core": "^0.4.1",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/Markdown.tsx

@@ -52,8 +52,8 @@ export interface MarkdownProps {
 	theme?: MarkdownTheme
 	/** Code block theme for syntax highlighting */
 	codeTheme?: BundledTheme
-	/** Maximum width for text wrapping (default: no wrap) */
-	maxWidth?: number
+	/** Enable text wrapping (default: false, text is truncated) */
+	wrap?: boolean
 }
 
 // Parsed markdown elements
@@ -226,39 +226,42 @@ function parseMarkdown(content: string): MdElement[] {
 }
 
 /**
- * Render inline spans as text elements
+ * Render inline spans as text elements.
+ * Uses <text wrap> for host-level wrapping when wrap=true.
  */
-function renderSpans(spans: MdSpan[], theme: Required<MarkdownTheme>) {
+function renderSpans(spans: MdSpan[], theme: Required<MarkdownTheme>, wrap = false) {
 	return spans.map((span, i) => {
 		switch (span.type) {
 			case "text":
 				return (
-					<text key={i} fg={theme.text}>
+					<text key={i} fg={theme.text} wrap={wrap}>
 						{span.text}
 					</text>
 				)
 			case "bold":
 				return (
-					<text key={i} fg={theme.bold} bold>
+					<text key={i} fg={theme.bold} bold wrap={wrap}>
 						{span.text}
 					</text>
 				)
 			case "italic":
 				return (
-					<text key={i} fg={theme.italic} italic>
+					<text key={i} fg={theme.italic} italic wrap={wrap}>
 						{span.text}
 					</text>
 				)
 			case "code":
 				return (
-					<text key={i} fg={theme.code} bg={theme.codeBg}>
+					<text key={i} fg={theme.code} bg={theme.codeBg} wrap={wrap}>
 						{span.text}
 					</text>
 				)
 			case "link":
 				return (
 					<hstack key={i}>
-						<text fg={theme.link}>{span.text}</text>
+						<text fg={theme.link} wrap={wrap}>
+							{span.text}
+						</text>
 						<text fg={theme.linkUrl}>{" ("}</text>
 						<text fg={theme.linkUrl}>{span.url}</text>
 						<text fg={theme.linkUrl}>{")"}</text>
@@ -294,7 +297,7 @@ function renderSpans(spans: MdSpan[], theme: Required<MarkdownTheme>) {
  * `} />
  * ```
  */
-export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }: MarkdownProps) {
+export function Markdown({ content, theme: themeOverrides, codeTheme = "nord", wrap = false }: MarkdownProps) {
 	const theme = { ...defaultTheme, ...themeOverrides }
 	const elements = parseMarkdown(content)
 
@@ -304,27 +307,27 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }:
 				switch (el.type) {
 					case "h1":
 						return (
-							<text key={i} fg={theme.h1} bold>
+							<text key={i} fg={theme.h1} bold wrap={wrap}>
 								{"# "}
 								{el.text}
 							</text>
 						)
 					case "h2":
 						return (
-							<text key={i} fg={theme.h2} bold>
+							<text key={i} fg={theme.h2} bold wrap={wrap}>
 								{"## "}
 								{el.text}
 							</text>
 						)
 					case "h3":
 						return (
-							<text key={i} fg={theme.h3} bold>
+							<text key={i} fg={theme.h3} bold wrap={wrap}>
 								{"### "}
 								{el.text}
 							</text>
 						)
 					case "paragraph":
-						return <hstack key={i}>{renderSpans(el.spans, theme)}</hstack>
+						return <hstack key={i}>{renderSpans(el.spans, theme, wrap)}</hstack>
 					case "code":
 						return (
 							<CodeBlock
@@ -340,7 +343,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }:
 						return (
 							<hstack key={i}>
 								<text fg={theme.quoteBorder}>{"│ "}</text>
-								{renderSpans(el.spans, theme)}
+								{renderSpans(el.spans, theme, wrap)}
 							</hstack>
 						)
 					case "ul":
@@ -349,7 +352,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }:
 								{el.items.map((item, j) => (
 									<hstack key={j}>
 										<text fg={theme.listMarker}>{"  • "}</text>
-										{renderSpans(item, theme)}
+										{renderSpans(item, theme, wrap)}
 									</hstack>
 								))}
 							</vstack>
@@ -360,7 +363,7 @@ export function Markdown({ content, theme: themeOverrides, codeTheme = "nord" }:
 								{el.items.map((item, j) => (
 									<hstack key={j}>
 										<text fg={theme.listMarker}>{`  ${el.start + j}. `}</text>
-										{renderSpans(item, theme)}
+										{renderSpans(item, theme, wrap)}
 									</hstack>
 								))}
 							</vstack>

package/src/hosts/text.ts

@@ -76,7 +76,7 @@ export class TextHost extends BaseHost {
 		return { w, h }
 	}
 
-	/** Wrap text to fit within maxWidth */
+	/** Wrap text to fit within maxWidth, preferring word boundaries */
 	private wrapText(text: string, maxWidth: number): string[] {
 		const result: string[] = []
 		for (const rawLine of text.split("\n")) {
@@ -84,20 +84,47 @@ export class TextHost extends BaseHost {
 				result.push("")
 				continue
 			}
+
+			// Split into words (keeping whitespace as separate tokens)
+			const tokens = rawLine.split(/(\s+)/)
 			let line = ""
 			let lineW = 0
-			for (const ch of rawLine) {
-				const w = displayWidth(ch)
-				if (lineW + w > maxWidth && line.length > 0) {
-					result.push(line)
-					line = ch
-					lineW = w
+
+			for (const token of tokens) {
+				const tokenW = displayWidth(token)
+				const isWhitespace = /^\s+$/.test(token)
+
+				if (lineW + tokenW <= maxWidth) {
+					// Token fits on current line
+					line += token
+					lineW += tokenW
+				} else if (isWhitespace) {
+					// Whitespace doesn't fit - just skip it (don't start new line with space)
+					continue
+				} else if (tokenW <= maxWidth) {
+					// Word doesn't fit but is smaller than maxWidth - start new line
+					if (line.trimEnd()) result.push(line.trimEnd())
+					line = token
+					lineW = tokenW
 				} else {
-					line += ch
-					lineW += w
+					// Word is longer than maxWidth - break it character by character
+					if (line.trimEnd()) result.push(line.trimEnd())
+					line = ""
+					lineW = 0
+					for (const ch of token) {
+						const chW = displayWidth(ch)
+						if (lineW + chW > maxWidth && line.length > 0) {
+							result.push(line)
+							line = ch
+							lineW = chW
+						} else {
+							line += ch
+							lineW += chW
+						}
+					}
 				}
 			}
-			if (line.length > 0) result.push(line)
+			if (line.trimEnd()) result.push(line.trimEnd())
 		}
 		return result.length > 0 ? result : [""]
 	}