@effect-tui/core 0.1.0-alpha.1

package/src/ui/inlinetext.ts

@@ -0,0 +1,135 @@
+import type { Palette, Surface, StyleSpec } from "../render/surface.js"
+import { View } from "./core/view.js"
+import type { Rect } from "./core/geometry.js"
+import type { WrappingOptions } from "./primitives/wrapped-text.js"
+
+export type TextFragment = {
+  text: string
+  style?: StyleSpec
+}
+
+type Token = { text: string; style?: StyleSpec; kind: "word" | "space" }
+
+function toTokens(fragments: TextFragment[]): Token[] {
+  const tokens: Token[] = []
+  for (const frag of fragments) {
+    const parts = frag.text.split(/(\s+)/)
+    for (const p of parts) {
+      if (p.length === 0) continue
+      if (/^\s+$/.test(p)) tokens.push({ text: p.replace(/\s+/g, " "), style: frag.style, kind: "space" })
+      else tokens.push({ text: p, style: frag.style, kind: "word" })
+    }
+  }
+  return tokens
+}
+
+function strlen(s: string): number {
+  // Best-effort: count code points. Rendering will use wcwidth-aware clipping.
+  return [...s].length
+}
+
+export class InlineText extends View {
+  constructor(
+    readonly fragments: TextFragment[],
+    readonly options: WrappingOptions = {},
+  ) {
+    super()
+  }
+
+  private layout(maxW: number): Array<Array<Token>> {
+    const { wordWrap = true, breakWords = true } = this.options
+    const toks = toTokens(this.fragments)
+    const lines: Array<Array<Token>> = []
+    let line: Token[] = []
+    let used = 0
+    const flush = () => {
+      if (line.length === 0) return
+      lines.push(line)
+      line = []
+      used = 0
+    }
+    for (const t of toks) {
+      if (t.kind === "space") {
+        if (used === 0) continue // skip leading spaces
+        const w = 1
+        if (used + w <= maxW) {
+          line.push({ ...t, text: " " })
+          used += w
+        } else {
+          flush()
+        }
+        continue
+      }
+      const w = strlen(t.text)
+      if (!wordWrap) {
+        // No wrapping: push to current line; if overflow, start new line first
+        if (used + w > maxW && used > 0) flush()
+        line.push(t)
+        used = Math.min(maxW, used + w)
+        continue
+      }
+      if (w > maxW) {
+        if (breakWords) {
+          const remaining = [...t.text]
+          while (remaining.length > 0) {
+            const room = Math.max(0, maxW - used)
+            if (room === 0) flush()
+            const take = Math.min(remaining.length, Math.max(1, maxW - used))
+            const chunk = remaining.splice(0, take).join("")
+            line.push({ ...t, text: chunk })
+            used += strlen(chunk)
+            if (remaining.length > 0) flush()
+          }
+        } else {
+          // Place as its own line (will clip visually)
+          if (used > 0) flush()
+          line.push(t)
+          flush()
+        }
+      } else if (used + w <= maxW) {
+        line.push(t)
+        used += w
+      } else {
+        flush()
+        line.push(t)
+        used = w
+      }
+    }
+    flush()
+    if (lines.length === 0) lines.push([])
+    return lines
+  }
+
+  protected measureContent(maxW: number, maxH: number) {
+    const lines = this.layout(maxW)
+    const h = Math.min(maxH, Math.max(1, lines.length))
+    return { w: maxW, h }
+  }
+
+  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
+    const lines = this.layout(rect.w)
+    const h = Math.min(rect.h, lines.length)
+    for (let y = 0; y < h; y++) {
+      let x = 0
+      for (const seg of lines[y]) {
+        if (x >= rect.w) break
+        const id = pal.id(seg.style)
+        const max = Math.max(0, rect.w - x)
+        if (max <= 0) break
+        s.drawText(rect.x + x, rect.y + y, seg.text, id, max)
+        x += strlen(seg.text)
+      }
+    }
+  }
+}
+
+// Builder contribution (optional if needed later)
+export type ViewInlineTextExt = {
+  inline(fragments: TextFragment[], opts?: WrappingOptions): InlineText
+}
+
+export const viewInlineText: ViewInlineTextExt = {
+  inline(fragments: TextFragment[], opts?: WrappingOptions): InlineText {
+    return new InlineText(fragments, opts)
+  },
+}

package/src/ui/install.ts

@@ -0,0 +1,110 @@
+/* install.ts — Installer for View modifier chainers
+ *
+ * This module installs chainable modifier methods on View.prototype using
+ * a clean installer pattern with TypeScript declaration merging.
+ */
+
+import { View } from "./core/view.js"
+import type { BorderOptions } from "./modifiers/border.js"
+import type { FrameSpec } from "./modifiers/frame.js"
+import type { StyleSpec, ColorLike } from "../render/surface.js"
+import { parseColor } from "../render/surface.js"
+
+// Import all modifier classes
+import { Border } from "./modifiers/border.js"
+import { Offset } from "./modifiers/offset.js"
+import { Fill } from "./modifiers/fill.js"
+import { Opacity } from "./modifiers/opacity.js"
+import { Padding } from "./modifiers/padding.js"
+import { Frame } from "./modifiers/frame.js"
+import { Styled } from "./modifiers/styled.js"
+
+// Define modifier methods with proper typing
+const modifierMethods = {
+  // Layout modifiers
+  border(this: View, opts?: BorderOptions): View {
+    return new Border(this, opts)
+  },
+
+  offset(this: View, dx = 0, dy = 0): View {
+    return new Offset(this, dx, dy)
+  },
+
+  fillWidth(this: View): View {
+    return new Fill(this, "horizontal")
+  },
+
+  fillHeight(this: View): View {
+    return new Fill(this, "vertical")
+  },
+
+  padding(this: View, t: number, r?: number, b?: number, l?: number): View {
+    return new Padding(this, t, r, b, l)
+  },
+
+  frame(this: View, opts: FrameSpec): View {
+    return new Frame(this, opts)
+  },
+
+  // Style modifiers
+  style(this: View, spec?: StyleSpec): View {
+    return spec ? new Styled(this, spec) : this
+  },
+
+  fg(this: View, color: ColorLike): View {
+    return new Styled(this, { fg: parseColor(color) })
+  },
+
+  bg(this: View, color: ColorLike): View {
+    return new Styled(this, { bg: parseColor(color) })
+  },
+
+  bold(this: View, on = true): View {
+    return new Styled(this, { bold: on })
+  },
+
+  italic(this: View, on = true): View {
+    return new Styled(this, { italic: on })
+  },
+
+  underline(this: View, on = true): View {
+    return new Styled(this, { underline: on })
+  },
+
+  inverse(this: View, on = true): View {
+    return new Styled(this, { inverse: on })
+  },
+
+  // Visual effect modifiers
+  opacity(this: View, alpha: number): View {
+    return new Opacity(this, alpha)
+  },
+}
+
+// Install methods on View prototype
+Object.assign(View.prototype, modifierMethods)
+
+// TypeScript declaration merging to add method signatures
+declare module "./core/view.js" {
+  interface View {
+    // Layout modifiers
+    border(opts?: BorderOptions): View
+    offset(dx?: number, dy?: number): View
+    fillWidth(): View
+    fillHeight(): View
+    padding(t: number, r?: number, b?: number, l?: number): View
+    frame(opts: FrameSpec): View
+
+    // Style modifiers
+    style(spec?: StyleSpec): View
+    fg(color: ColorLike): View
+    bg(color: ColorLike): View
+    bold(on?: boolean): View
+    italic(on?: boolean): View
+    underline(on?: boolean): View
+    inverse(on?: boolean): View
+
+    // Visual effect modifiers
+    opacity(alpha: number): View
+  }
+}

package/src/ui/markdown.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "@effect/vitest"
+import { Surface, Palette } from "../render/surface"
+import { Markdown } from "./markdown"
+
+describe("Markdown", () => {
+  it("renders paragraph with inline formatting", () => {
+    const md = new Markdown("This is **bold** and *italic*, plus `code` and ~~strike~~ and [link](https://ex.com).")
+    const palette = new Palette()
+    const m = md.measure(120, 10)
+    const surface = new Surface(120, m.h)
+    md.render(surface, palette, { x: 0, y: 0, w: 120, h: m.h })
+    const output = surface.toString()
+    expect(output).toBe("This is bold and italic, plus code and strike and link (https://ex.com).")
+  })
+
+  it("renders heading and paragraph with spacing", () => {
+    const text = "# Title\n\nBody with *italic* and **bold**."
+    const md = new Markdown(text)
+    const palette = new Palette()
+    const m = md.measure(80, 10)
+    const surface = new Surface(80, m.h)
+    md.render(surface, palette, { x: 0, y: 0, w: 80, h: m.h })
+    const output = surface.toString({ trimEnd: true })
+    expect(output).toBe("Title\n\nBody with italic and bold.")
+  })
+
+  it("renders unordered and ordered lists with inline", () => {
+    const text = ["- first **item**", "- second with [link](u)", "", "1. one", "2. two and *italic*"].join("\n")
+    const md = new Markdown(text)
+    const palette = new Palette()
+    const m = md.measure(80, 20)
+    const surface = new Surface(80, m.h)
+    md.render(surface, palette, { x: 0, y: 0, w: 80, h: m.h })
+    const output = surface.toString({ trimEnd: true })
+    const expected = ["• first item", "", "• second with link (u)", "", "1. one", "", "2. two and italic"].join("\n")
+    expect(output).toBe(expected)
+  })
+
+  it("supports • bullets and 1) ordered markers", () => {
+    const text = ["• apple", "• banana", "", "1) first", "2) second"].join("\n")
+    const md = new Markdown(text)
+    const palette = new Palette()
+    const m = md.measure(80, 20)
+    const surface = new Surface(80, m.h)
+    md.render(surface, palette, { x: 0, y: 0, w: 80, h: m.h })
+    const output = surface.toString({ trimEnd: true })
+    const expected = ["• apple", "", "• banana", "", "1. first", "", "2. second"].join("\n")
+    expect(output).toBe(expected)
+  })
+
+  it("renders blockquote with prefix", () => {
+    const text = ["> quoted *text* with [ref](x)", "> and more ~~stuff~~"].join("\n")
+    const md = new Markdown(text)
+    const palette = new Palette()
+    const m = md.measure(80, 10)
+    const surface = new Surface(80, m.h)
+    md.render(surface, palette, { x: 0, y: 0, w: 80, h: m.h })
+    const output = surface.toString({ trimEnd: true })
+    const expected = ["│ quoted text with ref (x)", "│ and more stuff"].join("\n")
+    expect(output).toBe(expected)
+  })
+
+  it("renders fenced code blocks (no inline parsing inside)", () => {
+    const text = ["```ts", "const x = 1 // **not bold**", "console.log(x) // [link](u)", "```"].join("\n")
+    const md = new Markdown(text)
+    const palette = new Palette()
+    const m = md.measure(80, 10)
+    const surface = new Surface(80, m.h)
+    md.render(surface, palette, { x: 0, y: 0, w: 80, h: m.h })
+    const output = surface.toString({ trimEnd: true })
+    const expected = ["const x = 1 // **not bold**", "console.log(x) // [link](u)"].join("\n")
+    expect(output).toBe(expected)
+  })
+})

package/src/ui/markdown.ts

@@ -0,0 +1,388 @@
+import type { Palette, Surface, StyleSpec, ColorLike } from "../render/surface.js"
+import { Colors, mergeStyle } from "../render/surface.js"
+import { View } from "./core/view.js"
+import type { Rect } from "./core/geometry.js"
+import { VStack } from "./containers/vstack.js"
+import { WrappedText } from "./primitives/wrapped-text.js"
+import { InlineText, type TextFragment } from "./inlinetext.js"
+
+export type MarkdownOptions = {
+  spacing?: number // vertical space between blocks (lines)
+  styles?: {
+    heading?: Partial<Record<1 | 2 | 3 | 4 | 5 | 6, StyleSpec>>
+    paragraph?: StyleSpec
+    code?: StyleSpec
+    codeBorder?: {
+      kind?: "none" | "rounded" | "square" | "ascii"
+      color?: ColorLike
+      padding?: number | { x?: number; y?: number }
+    }
+    quote?: StyleSpec
+    listBullet?: StyleSpec
+  }
+}
+
+type Block =
+  | { type: "heading"; level: number; text: string }
+  | { type: "paragraph"; text: string }
+  | { type: "code"; lang?: string; text: string }
+  | { type: "list"; ordered: boolean; items: string[] }
+  | { type: "quote"; text: string }
+
+/** Minimal Markdown renderer for terminal UI: block-level only. */
+export class Markdown extends View {
+  constructor(
+    readonly text: string,
+    readonly opts: MarkdownOptions = {},
+  ) {
+    super()
+  }
+
+  private parseBlocks(): Block[] {
+    const lines = this.text.replace(/\r\n?/g, "\n").split("\n")
+    const blocks: Block[] = []
+    let i = 0
+    const isBlank = (s: string) => /^\s*$/.test(s)
+
+    while (i < lines.length) {
+      const line = lines[i]
+      if (isBlank(line)) {
+        i++
+        continue
+      }
+
+      // Code fence
+      const fence = line.match(/^```(?:(\w+))?\s*$/)
+      if (fence) {
+        const lang = fence[1]
+        const buf: string[] = []
+        i++
+        while (i < lines.length && !/^```\s*$/.test(lines[i])) {
+          buf.push(lines[i])
+          i++
+        }
+        // skip closing fence if present
+        if (i < lines.length && /^```\s*$/.test(lines[i])) i++
+        blocks.push({ type: "code", lang, text: buf.join("\n") })
+        continue
+      }
+
+      // Heading
+      const h = line.match(/^(#{1,6})\s+(.*)$/)
+      if (h) {
+        blocks.push({ type: "heading", level: h[1].length, text: h[2] })
+        i++
+        continue
+      }
+
+      // Blockquote (consume contiguous ">" lines)
+      if (/^>\s?/.test(line)) {
+        const buf: string[] = []
+        while (i < lines.length && /^>\s?/.test(lines[i])) {
+          buf.push(lines[i].replace(/^>\s?/, ""))
+          i++
+        }
+        blocks.push({ type: "quote", text: buf.join("\n") })
+        continue
+      }
+
+      // List (unordered or ordered) — support -,*,+, • and 1., 1)
+      let m = line.match(/^\s*([-*+]|•)\s+(.*)$/)
+      let ordered = false
+      if (!m) {
+        const om = line.match(/^\s*(\d+)[.)]\s+(.*)$/)
+        if (om) {
+          ordered = true
+          m = [om[0], om[1], om[2]] as any
+        }
+      }
+      if (m) {
+        const items: string[] = []
+        while (i < lines.length) {
+          const l = lines[i]
+          const um = l.match(/^\s*([-*+]|•)\s+(.*)$/)
+          const om = l.match(/^\s*(\d+)[.)]\s+(.*)$/)
+          if ((ordered && om) || (!ordered && um)) {
+            items.push((ordered ? om?.[2] : um?.[2])?.trimEnd() ?? "")
+            i++
+          } else if (isBlank(l)) {
+            i++
+            break
+          } else {
+            break
+          }
+        }
+        blocks.push({ type: "list", ordered, items })
+        continue
+      }
+
+      // Paragraph — consume until blank or next block
+      const buf: string[] = [line]
+      i++
+      while (i < lines.length) {
+        const l = lines[i]
+        if (isBlank(l)) {
+          i++
+          break
+        }
+        if (
+          /^```/.test(l) ||
+          /^(#{1,6})\s+/.test(l) ||
+          /^>\s?/.test(l) ||
+          /^\s*([-*+])\s+/.test(l) ||
+          /^\s*\d+\.\s+/.test(l)
+        ) {
+          break
+        }
+        buf.push(l)
+        i++
+      }
+      blocks.push({ type: "paragraph", text: buf.join("\n") })
+    }
+
+    return blocks
+  }
+
+  private parseInline(text: string, base?: StyleSpec): TextFragment[] {
+    // Recursive descent for bold/italic/strike/link; code spans take precedence and are not parsed inside.
+    const frags: TextFragment[] = []
+    const push = (t: string, style?: StyleSpec) => {
+      if (t.length === 0) return
+      frags.push({ text: t, style })
+    }
+    const walk = (s: string, inherited?: StyleSpec) => {
+      let i = 0
+      while (i < s.length) {
+        // Find nearest marker
+        const idxs: Array<{ i: number; kind: string }> = []
+        const find = (re: RegExp, kind: string) => {
+          const m = re.exec(s.slice(i))
+          if (m && m.index >= 0) idxs.push({ i: i + m.index, kind })
+        }
+        // Prioritize code and link first
+        find(/`/, "code")
+        find(/\[/, "link")
+        find(/\*\*|__/, "bold")
+        find(/\*|_/, "italic")
+        find(/~~/, "strike")
+        if (idxs.length === 0) {
+          push(s.slice(i), inherited)
+          break
+        }
+        idxs.sort((a, b) => a.i - b.i)
+        const next = idxs[0]
+        if (next.i > i) push(s.slice(i, next.i), inherited)
+        i = next.i
+        switch (next.kind) {
+          case "code": {
+            const j = s.indexOf("`", i + 1)
+            if (j === -1) {
+              push(s.slice(i), inherited)
+              i = s.length
+            } else {
+              const inner = s.slice(i + 1, j)
+              push(inner, mergeStyle(inherited, { bg: Colors.gray(2), fg: Colors.gray(15) }))
+              i = j + 1
+            }
+            break
+          }
+          case "link": {
+            const close = s.indexOf("]", i + 1)
+            if (close !== -1 && s[close + 1] === "(") {
+              const end = s.indexOf(")", close + 2)
+              if (end !== -1) {
+                const label = s.slice(i + 1, close)
+                const url = s.slice(close + 2, end)
+                // Style label as link; append a thin gray url in parentheses
+                const linkStyle = mergeStyle(inherited, { fg: Colors.brightBlue, underline: true })
+                walk(label, linkStyle)
+                push(` (${url})`, mergeStyle(inherited, { fg: Colors.gray(12), underline: false }))
+                i = end + 1
+                break
+              }
+            }
+            // Fallback: treat '[' as literal
+            push("[", inherited)
+            i += 1
+            break
+          }
+          case "bold": {
+            const marker = s.slice(i, i + 2)
+            const j = s.indexOf(marker, i + 2)
+            if (j === -1) {
+              push(s.slice(i), inherited)
+              i = s.length
+            } else {
+              const inner = s.slice(i + 2, j)
+              walk(inner, mergeStyle(inherited, { bold: true }))
+              i = j + 2
+            }
+            break
+          }
+          case "strike": {
+            const j = s.indexOf("~~", i + 2)
+            if (j === -1) {
+              push(s.slice(i), inherited)
+              i = s.length
+            } else {
+              const inner = s.slice(i + 2, j)
+              walk(inner, mergeStyle(inherited, { fg: Colors.gray(10) }))
+              i = j + 2
+            }
+            break
+          }
+          case "italic": {
+            const marker = s[i]
+            const j = s.indexOf(marker, i + 1)
+            if (j === -1) {
+              push(s.slice(i), inherited)
+              i = s.length
+            } else {
+              const inner = s.slice(i + 1, j)
+              walk(inner, mergeStyle(inherited, { italic: true }))
+              i = j + 1
+            }
+            break
+          }
+        }
+      }
+    }
+    walk(text, base)
+    return frags
+  }
+
+  private blockViews(_maxW: number): View[] {
+    const spacing = this.opts.spacing ?? 1
+    const nodes: View[] = []
+    const blocks = this.parseBlocks()
+
+    const styles = this.opts.styles ?? {}
+    const headingDefault: Partial<Record<number, StyleSpec>> = {
+      1: { fg: Colors.brightCyan, bold: true },
+      2: { fg: Colors.brightBlue, bold: true },
+      3: { fg: Colors.brightMagenta, bold: true },
+    }
+
+    for (const b of blocks) {
+      switch (b.type) {
+        case "heading": {
+          const style =
+            styles.heading?.[b.level as 1 | 2 | 3 | 4 | 5 | 6] ?? (headingDefault[b.level] as StyleSpec | undefined)
+          const fr = this.parseInline(b.text, style)
+          nodes.push(new InlineText(fr, { wordWrap: true, breakWords: true }))
+          break
+        }
+        case "paragraph": {
+          const fr = this.parseInline(b.text, styles.paragraph)
+          nodes.push(new InlineText(fr, { wordWrap: true, breakWords: true }))
+          break
+        }
+        case "code": {
+          let node: View = new WrappedText(b.text, { wordWrap: false }).style(
+            styles.code ?? { fg: Colors.gray(15), bg: Colors.gray(2) },
+          )
+          // Use border if requested
+          if (this.opts.styles?.codeBorder) {
+            node = node.border({
+              kind: this.opts.styles.codeBorder.kind ?? "rounded",
+              color: this.opts.styles.codeBorder.color ?? Colors.gray(8),
+              padding: this.opts.styles.codeBorder.padding ?? { x: 1, y: 0 },
+            })
+          }
+          nodes.push(node)
+          break
+        }
+        case "quote": {
+          // Custom node draws a left bar and renders wrapped lines with a 2-col indent.
+          class QuoteBlock extends View {
+            constructor(readonly child: View) {
+              super()
+            }
+            protected measureContent(maxW: number, maxH: number) {
+              const innerW = Math.max(0, maxW - 2)
+              const m = this.child.measure(innerW, maxH)
+              return { w: Math.min(maxW, m.w + 2), h: m.h }
+            }
+            protected renderContent(s: Surface, pal: Palette, rect: Rect) {
+              const idBar = pal.id({ fg: Colors.gray(10) })
+              for (let yy = 0; yy < rect.h; yy++) s.drawCP(rect.x, rect.y + yy, "│".codePointAt(0)!, idBar)
+              const r = { x: rect.x + 2, y: rect.y, w: Math.max(0, rect.w - 2), h: rect.h }
+              this.child.render(s, pal, r)
+            }
+          }
+          const quoteStyle = styles.quote ?? { fg: Colors.gray(14) }
+          const rows = b.text.split("\n").map(
+            (line) =>
+              new InlineText(this.parseInline(line, quoteStyle), {
+                wordWrap: true,
+                breakWords: true,
+              }),
+          )
+          const body = new VStack(rows, 0)
+          nodes.push(new QuoteBlock(body))
+          break
+        }
+        case "list": {
+          const bulletStyle = styles.listBullet ?? { fg: Colors.gray(12), bold: true }
+          b.items.forEach((item, idx) => {
+            const mark = b.ordered ? `${idx + 1}. ` : "• "
+            const fragments: TextFragment[] = [
+              { text: mark, style: bulletStyle },
+              ...this.parseInline(item, { fg: Colors.white }),
+            ]
+            const row = new InlineText(fragments, { wordWrap: true, breakWords: true })
+            nodes.push(row)
+            // Add explicit spacer between list items to keep things readable
+            if (idx < b.items.length - 1 && spacing > 0) nodes.push(new WrappedText("", { wordWrap: false }))
+          })
+          break
+        }
+      }
+      // Vertical spacing between blocks
+      if (spacing > 0) nodes.push(new WrappedText("", { wordWrap: false }))
+    }
+
+    // Trim trailing spacer
+    if (nodes.length > 0) {
+      // Heuristic: empty WrappedText measures height 1 and no content; leave one blank line at most
+      nodes.pop()
+    }
+
+    return nodes
+  }
+
+  protected measureContent(maxW: number, maxH: number) {
+    const nodes = this.blockViews(maxW)
+    let w = 0
+    let h = 0
+    for (const n of nodes) {
+      const m = n.measure(maxW, Math.max(0, maxH - h))
+      w = Math.max(w, m.w)
+      h = Math.min(maxH, h + m.h)
+      if (h >= maxH) break
+    }
+    return { w: Math.min(maxW, w), h }
+  }
+
+  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
+    const nodes = this.blockViews(rect.w)
+    let y = rect.y
+    for (const n of nodes) {
+      if (y >= rect.y + rect.h) break
+      const m = n.measure(rect.w, Math.max(0, rect.y + rect.h - y))
+      n.render(s, pal, { x: rect.x, y, w: Math.min(rect.w, m.w), h: Math.min(rect.h, m.h) })
+      y += m.h
+    }
+  }
+}
+
+// Builder contribution for the View object
+export type ViewMarkdownExt = {
+  markdown(text: string, opts?: MarkdownOptions): View
+}
+
+export const viewMarkdown: ViewMarkdownExt = {
+  markdown(text: string, opts?: MarkdownOptions): View {
+    return new Markdown(text, opts)
+  },
+}