@effect-tui/core 0.1.0 → 0.1.4

package/src/ui/modifiers/frame.ts

@@ -1,74 +0,0 @@
-import type { Palette, Surface } from "../../render/surface.js"
-import { View } from "../core/view.js"
-import type { Rect, Align2D } from "../core/geometry.js"
-
-export interface FrameSpec {
-  width?: number
-  height?: number
-  minWidth?: number
-  maxWidth?: number
-  minHeight?: number
-  maxHeight?: number
-  alignment?: Align2D
-}
-
-export class Frame extends View {
-  constructor(
-    readonly child: View,
-    readonly opts: FrameSpec,
-  ) {
-    super()
-  }
-
-  protected measureContent(maxW: number, maxH: number) {
-    const childMeasure = this.child.measure(maxW, maxH)
-
-    const fs = this.opts
-    const capW = Math.min(maxW, fs.maxWidth ?? maxW)
-    const capH = Math.min(maxH, fs.maxHeight ?? maxH)
-
-    let targetW = fs.width === Infinity ? capW : (fs.width ?? childMeasure.w)
-    let targetH = fs.height === Infinity ? capH : (fs.height ?? childMeasure.h)
-
-    targetW = Math.max(fs.minWidth ?? 0, Math.min(capW, targetW))
-    targetH = Math.max(fs.minHeight ?? 0, Math.min(capH, targetH))
-
-    return {
-      w: Math.min(maxW, targetW),
-      h: Math.min(maxH, targetH),
-    }
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
-    // Measure child within our rect bounds
-    const childMeasure = this.child.measure(rect.w, rect.h)
-    const childW = Math.min(rect.w, childMeasure.w)
-    const childH = Math.min(rect.h, childMeasure.h)
-
-    // Apply alignment
-    const alignment = this.opts.alignment ?? { h: "leading", v: "top" }
-    let offsetX = 0
-    let offsetY = 0
-
-    if (alignment.h === "center") {
-      offsetX = Math.floor((rect.w - childW) / 2)
-    } else if (alignment.h === "trailing") {
-      offsetX = Math.max(0, rect.w - childW)
-    }
-
-    if (alignment.v === "center") {
-      offsetY = Math.floor((rect.h - childH) / 2)
-    } else if (alignment.v === "bottom") {
-      offsetY = Math.max(0, rect.h - childH)
-    }
-
-    const childRect: Rect = {
-      x: rect.x + offsetX,
-      y: rect.y + offsetY,
-      w: childW,
-      h: childH,
-    }
-
-    this.child.render(s, pal, childRect)
-  }
-}

package/src/ui/modifiers/offset.ts

@@ -1,23 +0,0 @@
-import type { Palette, Surface } from "../../render/surface.js"
-import { View } from "../core/view.js"
-import type { Rect } from "../core/geometry.js"
-
-// Offset wrapper: translate child's render position by (dx, dy) without affecting measurement
-export class Offset extends View {
-  constructor(
-    readonly child: View,
-    readonly dx = 0,
-    readonly dy = 0,
-  ) {
-    super()
-  }
-
-  protected measureContent(maxW: number, maxH: number) {
-    return this.child.measure(maxW, maxH)
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
-    const r = { x: rect.x + (this.dx | 0), y: rect.y + (this.dy | 0), w: rect.w, h: rect.h }
-    this.child.render(s, pal, r)
-  }
-}

package/src/ui/modifiers/opacity.ts

@@ -1,93 +0,0 @@
-import type { Surface, StyleSpec, ColorValue } from "../../render/surface.js"
-import { mergeStyle, Palette } from "../../render/surface.js"
-import { clamp255, idxToRGB } from "../../render/color-utils.js"
-import { View } from "../core/view.js"
-import type { Rect } from "../core/geometry.js"
-
-// Minimal palette wrapper that applies a style transform before delegating to the base palette
-class FilterPalette extends Palette {
-  constructor(
-    private readonly base: Palette,
-    private readonly transform: (spec?: StyleSpec) => StyleSpec | undefined,
-  ) {
-    super()
-  }
-
-  override id(spec?: StyleSpec): number {
-    return this.base.id(this.transform(spec))
-  }
-  override sgr(id: number): string {
-    return this.base.sgr(id)
-  }
-}
-
-function toRGB(c?: ColorValue): { r: number; g: number; b: number } | undefined {
-  if (c == null) return undefined
-  if (typeof c === "number") return idxToRGB(c)
-  return { r: clamp255(c.r), g: clamp255(c.g), b: clamp255(c.b) }
-}
-
-function applyOpacity(spec: StyleSpec | undefined, alpha: number): StyleSpec | undefined {
-  if (!spec) return spec
-  const a = Math.max(0, Math.min(1, alpha))
-  if (a === 1) return spec
-  if (a <= 0) return {} // render as default style; caller may skip drawing entirely
-  const next: StyleSpec = { ...spec }
-  const fgc = toRGB(spec.fg)
-  const bgc = toRGB(spec.bg)
-  if (fgc) next.fg = { r: clamp255(fgc.r * a), g: clamp255(fgc.g * a), b: clamp255(fgc.b * a) }
-  if (bgc) next.bg = { r: clamp255(bgc.r * a), g: clamp255(bgc.g * a), b: clamp255(bgc.b * a) }
-  // Optionally taper bold to avoid harshness at low alpha
-  if (spec.bold && a < 0.5) next.bold = false
-  return next
-}
-
-export class Opacity extends View {
-  constructor(
-    readonly child: View,
-    readonly alpha = 1,
-  ) {
-    super()
-  }
-
-  protected measureContent(maxW: number, maxH: number) {
-    return this.child.measure(maxW, maxH)
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
-    const a = Math.max(0, Math.min(1, this.alpha))
-    if (a <= 0.001) return // invisible; keep layout but skip drawing
-    const filtered = new FilterPalette(pal, (spec) => applyOpacity(mergeStyle(undefined, spec), a))
-    this.child.render(s, filtered, rect)
-  }
-}
-
-/*
- * opacity.ts — composable opacity modifier for terminal views
- *
- * How it works (no real alpha in terminals):
- * - Terminals don’t support true alpha blending, and we can’t read the
- *   current screen contents to composite. To approximate “opacity”, we
- *   dim colors toward black by scaling their RGB channels by `alpha`.
- *   At alpha=1 the colors are unchanged; at alpha=0 they become black.
- *
- * Implementation:
- * - We wrap the palette with a tiny FilterPalette that transforms any
- *   StyleSpec handed to `palette.id()` before it is converted to SGR.
- * - The transform scales fg/bg colors by `alpha` and optionally disables
- *   bold at low alpha to avoid harsh flashes.
- * - Rendering is skipped entirely when alpha ≤ ~0.001 (keeps layout but
- *   avoids drawing noise while effectively invisible).
- *
- * Composition:
- * - This is a real modifier (wrapper node). You can chain it on any view:
- *     View.text("Loading").opacity(0.5)
- *     ShinyText.view(model).opacity(alpha).padding(0,1,0,1)
- * - Multiple opacities compound (roughly multiplicative dimming).
- * - Use it for fade in/out by driving `alpha` with a spring/motion value.
- *
- * Trade-offs:
- * - Fades toward black, not toward the terminal background color. For most
- *   themes this reads as a natural fade. If you prefer a different look,
- *   we could add a color-tint/brightness modifier using the same pattern.
- */

package/src/ui/modifiers/padding.ts

@@ -1,53 +0,0 @@
-import type { Palette, Surface } from "../../render/surface.js"
-import { View } from "../core/view.js"
-import type { Rect } from "../core/geometry.js"
-
-export interface PaddingSpec {
-  t: number
-  r: number
-  b: number
-  l: number
-}
-
-function resolvePadding(t: number, r?: number, b?: number, l?: number): PaddingSpec {
-  const top = Math.max(0, t | 0)
-  const right = r == null ? top : Math.max(0, r | 0)
-  const bottom = b == null ? top : Math.max(0, b | 0)
-  const left = l == null ? right : Math.max(0, l | 0)
-  return { t: top, r: right, b: bottom, l: left }
-}
-
-export class Padding extends View {
-  private readonly pad: PaddingSpec
-
-  constructor(
-    readonly child: View,
-    t: number,
-    r?: number,
-    b?: number,
-    l?: number,
-  ) {
-    super()
-    this.pad = resolvePadding(t, r, b, l)
-  }
-
-  protected measureContent(maxW: number, maxH: number) {
-    const innerW = Math.max(0, maxW - this.pad.l - this.pad.r)
-    const innerH = Math.max(0, maxH - this.pad.t - this.pad.b)
-    const m = this.child.measure(innerW, innerH)
-    return {
-      w: Math.min(maxW, m.w + this.pad.l + this.pad.r),
-      h: Math.min(maxH, m.h + this.pad.t + this.pad.b),
-    }
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
-    const inner: Rect = {
-      x: rect.x + this.pad.l,
-      y: rect.y + this.pad.t,
-      w: Math.max(0, rect.w - this.pad.l - this.pad.r),
-      h: Math.max(0, rect.h - this.pad.t - this.pad.b),
-    }
-    this.child.render(s, pal, inner)
-  }
-}

package/src/ui/modifiers/styled.ts

@@ -1,31 +0,0 @@
-import type { Palette, Surface, StyleSpec } from "../../render/surface.js"
-import { derivePalette } from "../../render/surface.js"
-import { View } from "../core/view.js"
-import type { Rect } from "../core/geometry.js"
-
-export class Styled extends View {
-  constructor(
-    readonly child: View,
-    readonly styleSpec: StyleSpec,
-  ) {
-    super()
-  }
-
-  protected measureContent(maxW: number, maxH: number) {
-    return this.child.measure(maxW, maxH)
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
-    // Create derived palette with our style applied
-    const derivedPal = derivePalette(pal, this.styleSpec)
-
-    // If we have a background color, fill the entire rect
-    if (this.styleSpec.bg != null) {
-      const id = derivedPal.id(this.styleSpec)
-      s.fillRect(rect.x, rect.y, rect.w, rect.h, 32, id) // 32 = space character
-    }
-
-    // Render child with the styled palette
-    this.child.render(s, derivedPal, rect)
-  }
-}

package/src/ui/primitives/rectangle.ts

@@ -1,25 +0,0 @@
-import type { Palette, Surface } from "../../render/surface.js"
-import { View } from "../core/view.js"
-import type { Rect } from "../core/geometry.js"
-
-// Rectangle primitive (fills area with a codepoint, default space). Useful as a block element.
-export class Rectangle extends View {
-  constructor(
-    readonly width: number,
-    readonly height: number,
-    readonly fillCP = 32, // space character
-  ) {
-    super()
-  }
-
-  protected measureContent(maxW: number, maxH: number) {
-    const w = Math.min(maxW, Math.max(0, this.width | 0))
-    const h = Math.min(maxH, Math.max(0, this.height | 0))
-    return { w, h }
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
-    const id = pal.id()
-    s.fillRect(rect.x, rect.y, rect.w, rect.h, this.fillCP, id)
-  }
-}

package/src/ui/primitives/spacer.ts

@@ -1,18 +0,0 @@
-import type { Palette, Surface } from "../../render/surface.js"
-import { View } from "../core/view.js"
-import type { Rect } from "../core/geometry.js"
-
-// Spacer (flexible in stacks)
-export class Spacer extends View {
-  constructor(readonly minLength = 0) {
-    super()
-  }
-
-  protected measureContent(_maxW: number, _maxH: number) {
-    return { w: 0, h: 0 }
-  }
-
-  protected renderContent(_s: Surface, _pal: Palette, _rect: Rect) {
-    // Spacers render nothing
-  }
-}

package/src/ui/primitives/text.ts

@@ -1,85 +0,0 @@
-import type { Palette, Surface } from "../../render/surface.js"
-import { displayWidth } from "../../render/measure.js"
-import { View } from "../core/view.js"
-import type { Rect } from "../core/geometry.js"
-
-export class Text extends View {
-  constructor(
-    readonly text: string,
-    readonly wrap?: boolean,
-  ) {
-    super()
-  }
-
-  protected measureContent(maxW: number, maxH: number) {
-    if (!this.wrap) {
-      const w = Math.min(maxW, displayWidth(this.text))
-      return { w, h: 1 }
-    }
-
-    // Wrapped text measurement
-    const lines = this.wrapText(maxW)
-    const height = Math.min(maxH, lines.length)
-    let width = 0
-    for (let i = 0; i < height; i++) {
-      width = Math.max(width, Math.min(maxW, displayWidth(lines[i])))
-    }
-    return { w: width, h: height }
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
-    const id = pal.id()
-    if (this.wrap) {
-      // Use wrapping logic for rendering
-      const lines = this.wrapText(rect.w)
-      for (let i = 0; i < Math.min(lines.length, rect.h); i++) {
-        const line = lines[i]
-        if (line.length > 0) {
-          s.drawText(rect.x, rect.y + i, line, id, rect.w)
-        }
-      }
-    } else {
-      s.drawText(rect.x, rect.y, this.text, id, rect.w)
-    }
-  }
-
-  private wrapText(maxWidth: number): string[] {
-    if (maxWidth <= 0) return [""]
-    if (!this.text) return [""]
-
-    const lines = this.text.split("\n")
-    const result: string[] = []
-
-    for (const line of lines) {
-      if (line.length === 0) {
-        result.push("")
-        continue
-      }
-
-      const words = line.split(" ")
-      let currentLine = ""
-
-      for (const word of words) {
-        const testLine = currentLine + (currentLine ? " " : "") + word
-        if (displayWidth(testLine) <= maxWidth) {
-          currentLine = testLine
-        } else {
-          if (currentLine) {
-            result.push(currentLine)
-            currentLine = word
-          } else {
-            // Single word longer than maxWidth
-            result.push(word.slice(0, maxWidth))
-            currentLine = word.slice(maxWidth)
-          }
-        }
-      }
-
-      if (currentLine) {
-        result.push(currentLine)
-      }
-    }
-
-    return result.length > 0 ? result : [""]
-  }
-}

package/src/ui/primitives/wrapped-text.ts

@@ -1,131 +0,0 @@
-import type { Palette, Surface } from "../../render/surface.js"
-import type { Rect } from "../core/geometry.js"
-import { View } from "../core/view.js"
-import { displayWidth, sliceByWidth } from "../../render/measure.js"
-
-export type WrappingOptions = {
-  wordWrap?: boolean // default true - wrap at word boundaries
-  breakWords?: boolean // default false - break long words that exceed width
-}
-
-export class WrappedText extends View {
-  constructor(
-    readonly text: string,
-    readonly options: WrappingOptions = {},
-  ) {
-    super()
-  }
-
-  /**
-   * Split text into lines, respecting wrapping rules
-   */
-  private wrapText(maxWidth: number): string[] {
-    if (maxWidth <= 0) return [""]
-    if (!this.text) return []
-
-    const { wordWrap = true, breakWords = false } = this.options
-
-    // First split on explicit line breaks
-    const inputLines = this.text.split("\n")
-    const wrappedLines: string[] = []
-
-    for (const line of inputLines) {
-      if (line.length === 0) {
-        wrappedLines.push("")
-        continue
-      }
-
-      if (line.length <= maxWidth) {
-        wrappedLines.push(line)
-        continue
-      }
-
-      // Line needs wrapping
-      if (wordWrap) {
-        this.wrapLineByWords(line, maxWidth, breakWords, wrappedLines)
-      } else {
-        this.wrapLineByCharacters(line, maxWidth, wrappedLines)
-      }
-    }
-
-    return wrappedLines
-  }
-
-  /**
-   * Wrap a line by word boundaries
-   */
-  private wrapLineByWords(line: string, maxWidth: number, breakWords: boolean, output: string[]): void {
-    const words = line.split(/(\s+)/) // Keep whitespace in results
-    let currentLine = ""
-
-    for (const word of words) {
-      // Skip empty strings
-      if (word.length === 0) continue
-
-      // If this is whitespace and we're at the start of a line, skip it
-      if (/^\s+$/.test(word) && currentLine.length === 0) continue
-
-      // If adding this word would exceed width
-      if (displayWidth(currentLine + word) > maxWidth) {
-        // If we have content on current line, save it and start new line
-        if (currentLine.length > 0) {
-          output.push(currentLine.trimEnd())
-          currentLine = ""
-        }
-
-        // Handle long words
-        if (displayWidth(word.trim()) > maxWidth) {
-          if (breakWords) {
-            this.wrapLineByCharacters(word.trim(), maxWidth, output)
-          } else {
-            // Don't break the word, just put it on its own line (may overflow)
-            output.push(word.trim())
-          }
-        } else if (word.trim().length > 0) {
-          // Start new line with this word (skip leading whitespace)
-          currentLine = word.trim()
-        }
-      } else {
-        currentLine += word
-      }
-    }
-
-    // Add remaining content
-    if (currentLine.length > 0) {
-      output.push(currentLine.trimEnd())
-    }
-  }
-
-  /**
-   * Wrap a line by character boundaries
-   */
-  private wrapLineByCharacters(line: string, maxWidth: number, output: string[]): void {
-    let rest = line
-    while (rest.length > 0) {
-      const { text } = sliceByWidth(rest, maxWidth)
-      if (text.length === 0) break
-      output.push(text)
-      rest = rest.slice(text.length)
-    }
-  }
-
-  protected measureContent(maxW: number, maxH: number): { w: number; h: number } {
-    const lines = this.wrapText(maxW)
-    const h = Math.min(maxH, Math.max(1, lines.length))
-    // WrappedText is greedy horizontally - takes full available width when content exists
-    const w = maxW
-    return { w, h }
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect): void {
-    const lines = this.wrapText(rect.w)
-    const styleId = pal.id()
-
-    for (let i = 0; i < Math.min(lines.length, rect.h); i++) {
-      const line = lines[i]
-      if (line.length > 0) {
-        s.drawText(rect.x, rect.y + i, line, styleId, rect.w)
-      }
-    }
-  }
-}

package/src/ui/shinytext.ts

@@ -1,159 +0,0 @@
-/* shinytext.ts — reusable shining text component */
-
-import type { Palette, Surface } from "../render/surface.js"
-import { Colors } from "../render/surface.js"
-import type { Rect } from "./core/geometry.js"
-import { Step, type Stepper } from "../anim.js"
-import { View } from "./core/view.js"
-
-export type ShineTextOptions = {
-  /**
-   * Center position of the shine in character coordinates (can be fractional).
-   * 0 = before first char, length-1 = last char. Values outside are fine for overscan.
-   */
-  center?: number
-  /**
-   * Alternative to center: normalized progress 0..1 across the text.
-   * If provided, takes precedence and maps to center internally.
-   */
-  progress?: number
-  /** Gaussian falloff spread; larger = wider shine. Default 2.25 */
-  spread?: number
-  /** Base gray level (0..23). Default 12 */
-  baseGray?: number
-  /** Max additional gray levels added at peak (0..23). Default 8 */
-  boost?: number
-  /** Bold threshold on intensity (0..1). Default 0.75 */
-  boldThreshold?: number
-}
-
-export class ShinyText extends View {
-  constructor(
-    readonly text: string,
-    readonly opts?: ShineTextOptions,
-  ) {
-    super()
-  }
-
-  private getChars(): string[] {
-    return [...this.text]
-  }
-
-  protected measureContent(maxW: number, _maxH: number) {
-    const w = Math.min(maxW, this.getChars().length)
-    return { w, h: 1 }
-  }
-
-  protected renderContent(s: Surface, pal: Palette, rect: Rect) {
-    const chars = this.getChars()
-    const n = Math.min(rect.w, chars.length)
-    if (rect.h <= 0 || n <= 0) return
-
-    const spread = this.opts?.spread ?? 2.25
-    const base = Math.max(0, Math.min(23, (this.opts?.baseGray ?? 12) | 0))
-    const boost = Math.max(0, Math.min(23, (this.opts?.boost ?? 8) | 0))
-    const boldTh = this.opts?.boldThreshold ?? 0.75
-
-    const progress = this.opts?.progress
-    const center = progress != null ? progress * (chars.length - 1) : (this.opts?.center ?? 0)
-
-    const styleFor = (i: number) => {
-      const d = (i - center) / Math.max(1e-3, spread)
-      const intensity = Math.exp(-d * d)
-      const level = Math.max(0, Math.min(23, base + Math.round(intensity * boost)))
-      const bold = intensity > boldTh
-      return pal.id({ fg: Colors.gray(level), bold })
-    }
-
-    // Emit minimal runs per style id
-    const y = rect.y
-    let x = rect.x
-    let runStyle = -1
-    let runStart = x
-    let runText = ""
-    const flush = () => {
-      if (runText.length > 0) {
-        const maxW = Math.max(0, rect.x + rect.w - runStart)
-        if (maxW > 0) s.drawText(runStart, y, runText, runStyle, maxW)
-        runText = ""
-      }
-    }
-    for (let i = 0; i < n; i++) {
-      const ch = chars[i]
-      const id = styleFor(i)
-      if (id !== runStyle) {
-        flush()
-        runStyle = id
-        runStart = x
-      }
-      runText += ch
-      x++
-    }
-    flush()
-  }
-}
-
-// Optional builder contribution for the View object
-export type ViewShinyTextExt = {
-  shineText(text: string, opts?: ShineTextOptions): View
-}
-export const viewShinyText: ViewShinyTextExt = {
-  shineText(text: string, opts?: ShineTextOptions): View {
-    return new ShinyText(text, opts)
-  },
-}
-
-// ----------------------------------------------------------------------------
-// Stateful convenience API (init/tick/setSpeed + node factory)
-// ----------------------------------------------------------------------------
-
-export type ShinyTextModel = {
-  text: string
-  step: Stepper
-  speedMs: number
-  overscan: number
-  shine?: Omit<ShineTextOptions, "center" | "progress">
-}
-
-export type InitShinyOptions = {
-  speedMs?: number
-  overscan?: number
-  shine?: Omit<ShineTextOptions, "center" | "progress">
-}
-
-export function initShinyText(text: string, opts?: InitShinyOptions): ShinyTextModel {
-  const speedMs = Math.max(1, (opts?.speedMs ?? 40) | 0)
-  const overscan = Math.max(0, (opts?.overscan ?? 6) | 0)
-  const width = [...text].length
-  const step = Step.init(width + overscan * 2, speedMs, 0)
-  return { text, step, speedMs, overscan, shine: opts?.shine }
-}
-
-export function tickShinyText(state: ShinyTextModel, nowMs: number): ShinyTextModel {
-  const step = Step.tick(state.step, nowMs)
-  return { ...state, step }
-}
-
-export function setShinySpeed(state: ShinyTextModel, speedMs: number): ShinyTextModel {
-  const ms = Math.max(1, speedMs | 0)
-  const step = { ...state.step, intervalMs: ms }
-  return { ...state, speedMs: ms, step }
-}
-
-/** Create a ShinyText node from state. Use with chainers like .frame/.padding. */
-export function shinyText(state: ShinyTextModel): View {
-  const center = state.step.index - state.overscan
-  return new ShinyText(state.text, { ...state.shine, center })
-}
-
-// Merged namespace to expose a cohesive API: ShinyText.make(), ShinyText.tick(), ShinyText.setSpeed(), ShinyText.view()
-export namespace ShinyText {
-  export type Model = ShinyTextModel
-  export type Options = ShineTextOptions
-  export type MakeOptions = InitShinyOptions
-
-  export const make = initShinyText
-  export const tick = tickShinyText
-  export const setSpeed = setShinySpeed
-  export const view = shinyText
-}