@fairyhunter13/opentui-core 0.1.112 → 0.1.114

package/src/post/matrices.ts

@@ -0,0 +1,288 @@
+// Standard sepia transformation matrix (4x4 RGBA with alpha identity)
+export const SEPIA_MATRIX = new Float32Array([
+  0.393,
+  0.769,
+  0.189,
+  0, // Red output (r->r, g->r, b->r, a->r)
+  0.349,
+  0.686,
+  0.168,
+  0, // Green output (r->g, g->g, b->g, a->g)
+  0.272,
+  0.534,
+  0.131,
+  0, // Blue output (r->b, g->b, b->b, a->b)
+  0,
+  0,
+  0,
+  1, // Alpha output (r->a, g->a, b->a, a->a) - identity
+])
+
+/**
+ * Colorblindness simulation and compensation filters using color matrix transformations.
+ */
+
+// Protanopia (Red-blind) simulation matrix - shows how colors appear to someone with red-blindness
+export const PROTANOPIA_SIM_MATRIX = new Float32Array([
+  0.567,
+  0.433,
+  0.0,
+  0, // Red output
+  0.558,
+  0.442,
+  0.0,
+  0, // Green output
+  0.0,
+  0.242,
+  0.758,
+  0, // Blue output
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Deuteranopia (Green-blind) simulation matrix - shows how colors appear to someone with green-blindness
+export const DEUTERANOPIA_SIM_MATRIX = new Float32Array([
+  0.625,
+  0.375,
+  0.0,
+  0, // Red output
+  0.7,
+  0.3,
+  0.0,
+  0, // Green output
+  0.0,
+  0.3,
+  0.7,
+  0, // Blue output
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Tritanopia (Blue-blind) simulation matrix - shows how colors appear to someone with blue-blindness
+export const TRITANOPIA_SIM_MATRIX = new Float32Array([
+  0.95,
+  0.05,
+  0.0,
+  0, // Red output
+  0.0,
+  0.433,
+  0.567,
+  0, // Green output
+  0.0,
+  0.475,
+  0.525,
+  0, // Blue output
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Achromatopsia (Complete color blindness) - grayscale
+export const ACHROMATOPSIA_MATRIX = new Float32Array([
+  0.299,
+  0.587,
+  0.114,
+  0, // Red output (luminance)
+  0.299,
+  0.587,
+  0.114,
+  0, // Green output (luminance)
+  0.299,
+  0.587,
+  0.114,
+  0, // Blue output (luminance)
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Protanopia compensation matrix - shifts colors to make them more distinguishable
+export const PROTANOPIA_COMP_MATRIX = new Float32Array([
+  1.0,
+  0.2,
+  0.0,
+  0, // Boost red channel
+  0.0,
+  0.9,
+  0.1,
+  0, // Adjust green
+  0.0,
+  0.1,
+  0.9,
+  0, // Enhance blue
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Deuteranopia compensation matrix - shifts colors to make them more distinguishable
+export const DEUTERANOPIA_COMP_MATRIX = new Float32Array([
+  0.9,
+  0.1,
+  0.0,
+  0, // Adjust red
+  0.2,
+  0.8,
+  0.0,
+  0, // Boost green channel
+  0.0,
+  0.0,
+  1.0,
+  0, // Keep blue
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Tritanopia compensation matrix - shifts colors to make them more distinguishable
+export const TRITANOPIA_COMP_MATRIX = new Float32Array([
+  1.0,
+  0.0,
+  0.0,
+  0, // Keep red
+  0.0,
+  0.9,
+  0.1,
+  0, // Adjust green
+  0.1,
+  0.0,
+  0.9,
+  0, // Boost blue channel
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+/**
+ * Creative color effect matrices.
+ */
+
+// Technicolor effect - enhances reds and greens for a vintage Hollywood look
+export const TECHNICOLOR_MATRIX = new Float32Array([
+  1.5,
+  -0.2,
+  -0.3,
+  0, // Red output - boosted with reduced green/blue influence
+  -0.3,
+  1.4,
+  -0.1,
+  0, // Green output - boosted with reduced red/blue influence
+  -0.2,
+  -0.2,
+  1.4,
+  0, // Blue output - slightly boosted
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Solarization effect - partial negative that creates a surreal look
+// Inverts blue channel strongly, partially inverts others
+export const SOLARIZATION_MATRIX = new Float32Array([
+  -0.5,
+  0.5,
+  0.5,
+  0, // Red output - partial negative
+  0.5,
+  -0.5,
+  0.5,
+  0, // Green output - partial negative
+  0.5,
+  0.5,
+  -0.5,
+  0, // Blue output - partial negative
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Synthwave effect - eliminates green and shifts red toward magenta for that retro neon aesthetic
+export const SYNTHWAVE_MATRIX = new Float32Array([
+  1.0,
+  0.0,
+  0.25,
+  0, // Red output - full red + some blue = magenta when bright
+  0.1,
+  0.1,
+  0.1,
+  0, // Green output - heavily suppressed, minimal contribution
+  0.25,
+  0.0,
+  1.0,
+  0, // Blue output - full blue + some red = enhances magenta tones
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Greenscale effect - converts image to monochrome green by mapping luminance to green channel only
+export const GREENSCALE_MATRIX = new Float32Array([
+  0,
+  0,
+  0,
+  0, // Red output - zeroed out
+  0.299,
+  0.587,
+  0.114,
+  0, // Green output - full luminance from all channels
+  0,
+  0,
+  0,
+  0, // Blue output - zeroed out
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Grayscale effect - converts image to monochrome gray using luminance weights
+export const GRAYSCALE_MATRIX = new Float32Array([
+  0.299,
+  0.587,
+  0.114,
+  0, // Red output - luminance from all channels
+  0.299,
+  0.587,
+  0.114,
+  0, // Green output - luminance from all channels
+  0.299,
+  0.587,
+  0.114,
+  0, // Blue output - luminance from all channels
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])
+
+// Invert effect - inverts all color channels (photographic negative)
+export const INVERT_MATRIX = new Float32Array([
+  -1,
+  0,
+  0,
+  1, // Red output = 1 - R
+  0,
+  -1,
+  0,
+  1, // Green output = 1 - G
+  0,
+  0,
+  -1,
+  1, // Blue output = 1 - B
+  0,
+  0,
+  0,
+  1, // Alpha output - identity
+])

package/src/renderables/ASCIIFont.ts

@@ -0,0 +1,219 @@
+import {
+  getCharacterPositions,
+  measureText,
+  renderFontToFrameBuffer,
+  type ASCIIFontName,
+  type fonts,
+} from "../lib/ascii.font.js"
+import { parseColor, type ColorInput } from "../lib/RGBA.js"
+import {
+  ASCIIFontSelectionHelper,
+  convertGlobalToLocalSelection,
+  Selection,
+  type LocalSelectionBounds,
+} from "../lib/selection.js"
+import type { RenderableOptions } from "../Renderable.js"
+import type { RenderContext } from "../types.js"
+import { FrameBufferRenderable, type FrameBufferOptions } from "./FrameBuffer.js"
+
+export interface ASCIIFontOptions extends Omit<RenderableOptions<ASCIIFontRenderable>, "width" | "height"> {
+  text?: string
+  font?: ASCIIFontName
+  color?: ColorInput | ColorInput[]
+  backgroundColor?: ColorInput
+  selectionBg?: ColorInput
+  selectionFg?: ColorInput
+  selectable?: boolean
+}
+
+export class ASCIIFontRenderable extends FrameBufferRenderable {
+  public override selectable: boolean = true
+
+  protected static readonly _defaultOptions = {
+    text: "",
+    font: "tiny",
+    color: "#FFFFFF",
+    backgroundColor: "transparent",
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true,
+  } satisfies Partial<ASCIIFontOptions>
+
+  protected _text: string
+  protected _font: keyof typeof fonts
+  protected _color: ColorInput | ColorInput[]
+  protected _backgroundColor: ColorInput
+  protected _selectionBg: ColorInput | undefined
+  protected _selectionFg: ColorInput | undefined
+  protected lastLocalSelection: LocalSelectionBounds | null = null
+
+  private selectionHelper: ASCIIFontSelectionHelper
+
+  constructor(ctx: RenderContext, options: ASCIIFontOptions) {
+    const defaultOptions = ASCIIFontRenderable._defaultOptions
+    const font = options.font || defaultOptions.font
+    const text = options.text || defaultOptions.text
+    const measurements = measureText({ text: text, font })
+
+    super(ctx, {
+      flexShrink: 0,
+      ...options,
+      width: measurements.width || 1,
+      height: measurements.height || 1,
+      respectAlpha: true,
+    } as FrameBufferOptions)
+
+    this._text = text
+    this._font = font
+    this._color = options.color || defaultOptions.color
+    this._backgroundColor = options.backgroundColor || defaultOptions.backgroundColor
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined
+    this.selectable = options.selectable ?? true
+
+    this.selectionHelper = new ASCIIFontSelectionHelper(
+      () => this._text,
+      () => this._font,
+    )
+
+    this.renderFontToBuffer()
+  }
+
+  get text(): string {
+    return this._text
+  }
+
+  set text(value: string) {
+    this._text = value
+    this.updateDimensions()
+
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height)
+    }
+
+    this.renderFontToBuffer()
+    this.requestRender()
+  }
+
+  get font(): keyof typeof fonts {
+    return this._font
+  }
+
+  set font(value: keyof typeof fonts) {
+    this._font = value
+    this.updateDimensions()
+
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height)
+    }
+
+    this.renderFontToBuffer()
+    this.requestRender()
+  }
+
+  get color(): ColorInput | ColorInput[] {
+    return this._color
+  }
+
+  set color(value: ColorInput | ColorInput[]) {
+    this._color = value
+    this.renderFontToBuffer()
+    this.requestRender()
+  }
+
+  get backgroundColor(): ColorInput {
+    return this._backgroundColor
+  }
+
+  set backgroundColor(value: ColorInput) {
+    this._backgroundColor = value
+    this.renderFontToBuffer()
+    this.requestRender()
+  }
+
+  private updateDimensions(): void {
+    const measurements = measureText({ text: this._text, font: this._font })
+    this.width = measurements.width
+    this.height = measurements.height
+  }
+
+  override shouldStartSelection(x: number, y: number): boolean {
+    const localX = x - this.x
+    const localY = y - this.y
+    return this.selectionHelper.shouldStartSelection(localX, localY, this.width, this.height)
+  }
+
+  override onSelectionChanged(selection: Selection | null): boolean {
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y)
+    this.lastLocalSelection = localSelection
+    const changed = this.selectionHelper.onLocalSelectionChanged(localSelection, this.width, this.height)
+    if (changed) {
+      this.renderFontToBuffer()
+      this.requestRender()
+    }
+    return changed
+  }
+
+  override getSelectedText(): string {
+    const selection = this.selectionHelper.getSelection()
+    if (!selection) return ""
+    return this._text.slice(selection.start, selection.end)
+  }
+
+  override hasSelection(): boolean {
+    return this.selectionHelper.hasSelection()
+  }
+
+  protected override onResize(width: number, height: number): void {
+    super.onResize(width, height)
+    this.renderFontToBuffer()
+  }
+
+  private renderFontToBuffer(): void {
+    if (this.isDestroyed) return
+    this.frameBuffer.clear(parseColor(this._backgroundColor))
+
+    renderFontToFrameBuffer(this.frameBuffer, {
+      text: this._text,
+      x: 0,
+      y: 0,
+      color: this.color,
+      backgroundColor: this._backgroundColor,
+      font: this._font,
+    })
+
+    const selection = this.selectionHelper.getSelection()
+    if (selection && (this._selectionBg || this._selectionFg)) {
+      this.renderSelectionHighlight(selection)
+    }
+  }
+
+  private renderSelectionHighlight(selection: { start: number; end: number }): void {
+    if (!this._selectionBg && !this._selectionFg) return
+
+    const selectedText = this._text.slice(selection.start, selection.end)
+    if (!selectedText) return
+
+    const positions = getCharacterPositions(this._text, this._font)
+    const startX = positions[selection.start] || 0
+    const endX =
+      selection.end < positions.length
+        ? positions[selection.end]
+        : measureText({ text: this._text, font: this._font }).width
+
+    if (this._selectionBg) {
+      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, parseColor(this._selectionBg))
+    }
+
+    if (this._selectionFg || this._selectionBg) {
+      renderFontToFrameBuffer(this.frameBuffer, {
+        text: selectedText,
+        x: startX,
+        y: 0,
+        color: this._selectionFg ? this._selectionFg : this._color,
+        backgroundColor: this._selectionBg ? this._selectionBg : this._backgroundColor,
+        font: this._font,
+      })
+    }
+  }
+}

package/src/renderables/Box.test.ts

@@ -0,0 +1,205 @@
+import { test, expect, describe, beforeEach, afterEach, spyOn } from "bun:test"
+import { BoxRenderable, type BoxOptions } from "./Box.js"
+import { createTestRenderer, type TestRenderer } from "../testing/test-renderer.js"
+import type { BorderStyle } from "../lib/border.js"
+
+let testRenderer: TestRenderer
+let renderOnce: () => Promise<void>
+let captureFrame: () => string
+let warnSpy: ReturnType<typeof spyOn>
+
+beforeEach(async () => {
+  ;({ renderer: testRenderer, renderOnce, captureCharFrame: captureFrame } = await createTestRenderer({}))
+  warnSpy = spyOn(console, "warn").mockImplementation(() => {})
+})
+
+afterEach(() => {
+  testRenderer.destroy()
+  warnSpy.mockRestore()
+})
+
+describe("BoxRenderable - focusable option", () => {
+  test("is not focusable by default", async () => {
+    const box = new BoxRenderable(testRenderer, {
+      id: "test-box",
+      width: 10,
+      height: 5,
+    })
+
+    expect(box.focusable).toBe(false)
+    box.focus()
+    expect(box.focused).toBe(false)
+  })
+
+  test("can be made focusable via option", async () => {
+    const box = new BoxRenderable(testRenderer, {
+      id: "test-box",
+      focusable: true,
+      width: 10,
+      height: 5,
+    })
+
+    expect(box.focusable).toBe(true)
+    box.focus()
+    expect(box.focused).toBe(true)
+  })
+})
+
+describe("BoxRenderable - borderStyle validation", () => {
+  describe("regression: invalid borderStyle via constructor does not crash", () => {
+    test("handles invalid string borderStyle in constructor", async () => {
+      const box = new BoxRenderable(testRenderer, {
+        id: "test-box",
+        borderStyle: "invalid-style" as BorderStyle,
+        border: true,
+        width: 10,
+        height: 5,
+      })
+
+      testRenderer.root.add(box)
+      await renderOnce()
+
+      expect(box.borderStyle).toBe("single")
+      expect(box.isDestroyed).toBe(false)
+    })
+
+    test("handles undefined borderStyle in constructor", async () => {
+      const box = new BoxRenderable(testRenderer, {
+        id: "test-box",
+        borderStyle: undefined,
+        border: true,
+        width: 10,
+        height: 5,
+      })
+
+      testRenderer.root.add(box)
+      await renderOnce()
+
+      expect(box.borderStyle).toBe("single")
+      expect(box.isDestroyed).toBe(false)
+    })
+  })
+
+  describe("regression: invalid borderStyle via setter does not crash", () => {
+    test("handles invalid string borderStyle via setter", async () => {
+      const box = new BoxRenderable(testRenderer, {
+        id: "test-box",
+        borderStyle: "double",
+        border: true,
+        width: 10,
+        height: 5,
+      })
+
+      testRenderer.root.add(box)
+      await renderOnce()
+
+      expect(box.borderStyle).toBe("double")
+
+      box.borderStyle = "invalid-style" as BorderStyle
+      await renderOnce()
+
+      expect(box.borderStyle).toBe("single")
+      expect(box.isDestroyed).toBe(false)
+    })
+
+    test("renders correctly after fallback from invalid borderStyle", async () => {
+      const box = new BoxRenderable(testRenderer, {
+        id: "test-box",
+        borderStyle: "invalid" as BorderStyle,
+        border: true,
+        width: 10,
+        height: 5,
+      })
+
+      testRenderer.root.add(box)
+
+      // Should not throw during render
+      await expect(renderOnce()).resolves.toBeUndefined()
+      expect(box.isDestroyed).toBe(false)
+    })
+  })
+
+  describe("valid borderStyle values work correctly", () => {
+    test.each(["single", "double", "rounded", "heavy"] as BorderStyle[])(
+      "accepts valid borderStyle '%s' in constructor",
+      async (style) => {
+        const box = new BoxRenderable(testRenderer, {
+          id: "test-box",
+          borderStyle: style,
+          border: true,
+          width: 10,
+          height: 5,
+        })
+
+        testRenderer.root.add(box)
+        await renderOnce()
+
+        expect(box.borderStyle).toBe(style)
+      },
+    )
+
+    test.each(["single", "double", "rounded", "heavy"] as BorderStyle[])(
+      "accepts valid borderStyle '%s' via setter",
+      async (style) => {
+        const box = new BoxRenderable(testRenderer, {
+          id: "test-box",
+          border: true,
+          width: 10,
+          height: 5,
+        })
+
+        testRenderer.root.add(box)
+        await renderOnce()
+
+        box.borderStyle = style
+        await renderOnce()
+
+        expect(box.borderStyle).toBe(style)
+      },
+    )
+  })
+})
+
+describe("BoxRenderable - border titles (top and bottom)", () => {
+  test("renders top and bottom titles on their respective borders", async () => {
+    const box = new BoxRenderable(testRenderer, {
+      id: "border-title-box",
+      border: true,
+      width: 16,
+      height: 5,
+      title: "Top",
+      titleAlignment: "left",
+      bottomTitle: "Bot",
+      bottomTitleAlignment: "right",
+    })
+
+    testRenderer.root.add(box)
+    await renderOnce()
+
+    const lines = captureFrame().split("\n")
+
+    expect(lines[0].slice(0, 16)).toBe("┌─Top──────────┐")
+    expect(lines[4].slice(0, 16)).toBe("└──────────Bot─┘")
+  })
+
+  test.each([
+    ["left", "└─Bot────────────┘"],
+    ["center", "└──────Bot───────┘"],
+    ["right", "└────────────Bot─┘"],
+  ] as const)("renders bottom title with %s alignment", async (alignment, expectedBorder) => {
+    const box = new BoxRenderable(testRenderer, {
+      id: `bottom-title-${alignment}`,
+      border: true,
+      width: 18,
+      height: 5,
+      bottomTitle: "Bot",
+      bottomTitleAlignment: alignment,
+    })
+
+    testRenderer.root.add(box)
+    await renderOnce()
+
+    const lines = captureFrame().split("\n")
+    expect(lines[4].slice(0, 18)).toBe(expectedBorder)
+  })
+})