@rlabs-inc/tui 0.1.0 → 0.2.1

package/src/engine/arrays/visual.ts

@@ -4,8 +4,7 @@
  * Colors, borders, and visual styling.
  * Colors stored as RGBA objects for alpha blending support.
  *
- * CRITICAL: Use regular arrays (NOT state!) to preserve binding getters.
- * state() proxies snapshot getter values, breaking reactivity.
+ * Uses slotArray for stable reactive cells that NEVER get replaced.
  *
  * Border styles:
  *   0 = none
@@ -23,118 +22,100 @@
  * Per-side borders can have independent styles.
  */
 
-import { bind, disconnectBinding, type Binding } from '@rlabs-inc/signals'
+import { slotArray, type SlotArray } from '@rlabs-inc/signals'
 import type { RGBA } from '../../types'
 
 // =============================================================================
-// COLORS - Regular arrays to preserve binding reactivity
+// DEFAULT VALUES
+// =============================================================================
+
+const DEFAULT_FOCUS_COLOR: RGBA = { r: 100, g: 149, b: 237, a: 255 } // cornflowerblue
+
+// =============================================================================
+// COLORS - SlotArrays for stable reactive cells
 // =============================================================================
 
 /** Foreground color (text) - null means inherit from parent */
-export const fgColor: Binding<RGBA | null>[] = []
+export const fgColor: SlotArray<RGBA | null> = slotArray<RGBA | null>(null)
 
 /** Background color - null means transparent/inherit */
-export const bgColor: Binding<RGBA | null>[] = []
+export const bgColor: SlotArray<RGBA | null> = slotArray<RGBA | null>(null)
 
 /** Opacity 0-1 (1 = fully opaque) */
-export const opacity: Binding<number>[] = []
+export const opacity: SlotArray<number> = slotArray<number>(1)
 
 // =============================================================================
 // BORDERS - Per-side independent styles
 // =============================================================================
 
 /** Default border style for all sides (0-10) */
-export const borderStyle: Binding<number>[] = []
+export const borderStyle: SlotArray<number> = slotArray<number>(0)
 
 /** Default border color for all sides - null means use foreground */
-export const borderColor: Binding<RGBA | null>[] = []
+export const borderColor: SlotArray<RGBA | null> = slotArray<RGBA | null>(null)
 
 /** Top border style (0=none or inherit from borderStyle, 1-10=specific style) */
-export const borderTop: Binding<number>[] = []
+export const borderTop: SlotArray<number> = slotArray<number>(0)
 
 /** Right border style */
-export const borderRight: Binding<number>[] = []
+export const borderRight: SlotArray<number> = slotArray<number>(0)
 
 /** Bottom border style */
-export const borderBottom: Binding<number>[] = []
+export const borderBottom: SlotArray<number> = slotArray<number>(0)
 
 /** Left border style */
-export const borderLeft: Binding<number>[] = []
+export const borderLeft: SlotArray<number> = slotArray<number>(0)
 
 /** Per-side border colors - null means use borderColor or foreground */
-export const borderColorTop: Binding<RGBA | null>[] = []
-export const borderColorRight: Binding<RGBA | null>[] = []
-export const borderColorBottom: Binding<RGBA | null>[] = []
-export const borderColorLeft: Binding<RGBA | null>[] = []
+export const borderColorTop: SlotArray<RGBA | null> = slotArray<RGBA | null>(null)
+export const borderColorRight: SlotArray<RGBA | null> = slotArray<RGBA | null>(null)
+export const borderColorBottom: SlotArray<RGBA | null> = slotArray<RGBA | null>(null)
+export const borderColorLeft: SlotArray<RGBA | null> = slotArray<RGBA | null>(null)
 
 // =============================================================================
 // FOCUS RING
 // =============================================================================
 
 /** Show focus ring when focused (1=yes, 0=no) */
-export const showFocusRing: Binding<number>[] = []
+export const showFocusRing: SlotArray<number> = slotArray<number>(0)
 
 /** Focus ring color */
-export const focusRingColor: Binding<RGBA>[] = []
-
-// =============================================================================
-// DEFAULT VALUES
-// =============================================================================
-
-const DEFAULT_FOCUS_COLOR: RGBA = { r: 100, g: 149, b: 237, a: 255 } // cornflowerblue
+export const focusRingColor: SlotArray<RGBA> = slotArray<RGBA>(DEFAULT_FOCUS_COLOR)
 
-/** LAZY BINDING: Push undefined, primitives create bindings for used props only */
+/** Ensure capacity for all visual arrays */
 export function ensureCapacity(index: number): void {
-  while (fgColor.length <= index) {
-    fgColor.push(undefined as any)
-    bgColor.push(undefined as any)
-    opacity.push(undefined as any)
-    borderStyle.push(undefined as any)
-    borderColor.push(undefined as any)
-    borderTop.push(undefined as any)
-    borderRight.push(undefined as any)
-    borderBottom.push(undefined as any)
-    borderLeft.push(undefined as any)
-    borderColorTop.push(undefined as any)
-    borderColorRight.push(undefined as any)
-    borderColorBottom.push(undefined as any)
-    borderColorLeft.push(undefined as any)
-    showFocusRing.push(undefined as any)
-    focusRingColor.push(undefined as any)
-  }
+  fgColor.ensureCapacity(index)
+  bgColor.ensureCapacity(index)
+  opacity.ensureCapacity(index)
+  borderStyle.ensureCapacity(index)
+  borderColor.ensureCapacity(index)
+  borderTop.ensureCapacity(index)
+  borderRight.ensureCapacity(index)
+  borderBottom.ensureCapacity(index)
+  borderLeft.ensureCapacity(index)
+  borderColorTop.ensureCapacity(index)
+  borderColorRight.ensureCapacity(index)
+  borderColorBottom.ensureCapacity(index)
+  borderColorLeft.ensureCapacity(index)
+  showFocusRing.ensureCapacity(index)
+  focusRingColor.ensureCapacity(index)
 }
 
+/** Clear slot at index (reset to default) */
 export function clearAtIndex(index: number): void {
-  if (index < fgColor.length) {
-    disconnectBinding(fgColor[index])
-    disconnectBinding(bgColor[index])
-    disconnectBinding(opacity[index])
-    disconnectBinding(borderStyle[index])
-    disconnectBinding(borderColor[index])
-    disconnectBinding(borderTop[index])
-    disconnectBinding(borderRight[index])
-    disconnectBinding(borderBottom[index])
-    disconnectBinding(borderLeft[index])
-    disconnectBinding(borderColorTop[index])
-    disconnectBinding(borderColorRight[index])
-    disconnectBinding(borderColorBottom[index])
-    disconnectBinding(borderColorLeft[index])
-    disconnectBinding(showFocusRing[index])
-    disconnectBinding(focusRingColor[index])
-    fgColor[index] = undefined as any
-    bgColor[index] = undefined as any
-    opacity[index] = undefined as any
-    borderStyle[index] = undefined as any
-    borderColor[index] = undefined as any
-    borderTop[index] = undefined as any
-    borderRight[index] = undefined as any
-    borderBottom[index] = undefined as any
-    borderLeft[index] = undefined as any
-    borderColorTop[index] = undefined as any
-    borderColorRight[index] = undefined as any
-    borderColorBottom[index] = undefined as any
-    borderColorLeft[index] = undefined as any
-    showFocusRing[index] = undefined as any
-    focusRingColor[index] = undefined as any
-  }
+  fgColor.clear(index)
+  bgColor.clear(index)
+  opacity.clear(index)
+  borderStyle.clear(index)
+  borderColor.clear(index)
+  borderTop.clear(index)
+  borderRight.clear(index)
+  borderBottom.clear(index)
+  borderLeft.clear(index)
+  borderColorTop.clear(index)
+  borderColorRight.clear(index)
+  borderColorBottom.clear(index)
+  borderColorLeft.clear(index)
+  showFocusRing.clear(index)
+  focusRingColor.clear(index)
 }

package/src/engine/inheritance.ts

@@ -19,9 +19,9 @@ export function getInheritedFg(index: number): RGBA {
   let current: number = index
 
   while (current >= 0) {
-    const fg = unwrap(visual.fgColor[current])
+    const fg = visual.fgColor[current]
     if (fg !== null && fg !== undefined) return fg
-    const parent = unwrap(core.parentIndex[current])
+    const parent = core.parentIndex[current]
     if (parent === undefined || parent < 0) break
     current = parent
   }
@@ -37,9 +37,9 @@ export function getInheritedBg(index: number): RGBA {
   let current: number = index
 
   while (current >= 0) {
-    const bg = unwrap(visual.bgColor[current])
+    const bg = visual.bgColor[current]
     if (bg !== null && bg !== undefined) return bg
-    const parent = unwrap(core.parentIndex[current])
+    const parent = core.parentIndex[current]
     if (parent === undefined || parent < 0) break
     current = parent
   }
@@ -59,11 +59,11 @@ export function getInheritedBorderColor(index: number, side: 'top' | 'right' | '
     left: visual.borderColorLeft,
   }[side]
 
-  const color = unwrap(colorArray[index])
+  const color = colorArray[index]
   if (color !== null && color !== undefined) return color
 
   // Try unified border color
-  const unifiedColor = unwrap(visual.borderColor[index])
+  const unifiedColor = visual.borderColor[index]
   if (unifiedColor !== null && unifiedColor !== undefined) return unifiedColor
 
   // Fall back to foreground color
@@ -80,14 +80,14 @@ export function getBorderColors(index: number): {
   left: RGBA
 } {
   const fg = getInheritedFg(index)
-  const unified = unwrap(visual.borderColor[index])
+  const unified = visual.borderColor[index]
   const fallback = unified ?? fg
 
   return {
-    top: unwrap(visual.borderColorTop[index]) ?? fallback,
-    right: unwrap(visual.borderColorRight[index]) ?? fallback,
-    bottom: unwrap(visual.borderColorBottom[index]) ?? fallback,
-    left: unwrap(visual.borderColorLeft[index]) ?? fallback,
+    top: visual.borderColorTop[index] ?? fallback,
+    right: visual.borderColorRight[index] ?? fallback,
+    bottom: visual.borderColorBottom[index] ?? fallback,
+    left: visual.borderColorLeft[index] ?? fallback,
   }
 }
 
@@ -101,13 +101,13 @@ export function getBorderStyles(index: number): {
   bottom: number
   left: number
 } {
-  const unified = unwrap(visual.borderStyle[index]) || 0
+  const unified = visual.borderStyle[index] || 0
 
   return {
-    top: unwrap(visual.borderTop[index]) || unified,
-    right: unwrap(visual.borderRight[index]) || unified,
-    bottom: unwrap(visual.borderBottom[index]) || unified,
-    left: unwrap(visual.borderLeft[index]) || unified,
+    top: visual.borderTop[index] || unified,
+    right: visual.borderRight[index] || unified,
+    bottom: visual.borderBottom[index] || unified,
+    left: visual.borderLeft[index] || unified,
   }
 }
 
@@ -127,11 +127,11 @@ export function getEffectiveOpacity(index: number): number {
   let current: number | undefined = index
 
   while (current !== undefined && current >= 0) {
-    const nodeOpacity = unwrap(visual.opacity[current])
+    const nodeOpacity = visual.opacity[current]
     if (nodeOpacity !== undefined && nodeOpacity !== 1) {
       opacity *= nodeOpacity
     }
-    current = unwrap(core.parentIndex[current])
+    current = core.parentIndex[current]
   }
 
   return opacity

package/src/engine/registry.ts

@@ -12,6 +12,7 @@
 
 import { ReactiveSet } from '@rlabs-inc/signals'
 import { ensureAllCapacity, clearAllAtIndex, resetAllArrays } from './arrays'
+import { parentIndex as parentIndexArray } from './arrays/core'
 import { resetTitanArrays } from '../pipeline/layout/titan-engine'
 
 // =============================================================================
@@ -101,6 +102,7 @@ export function allocateIndex(id?: string): number {
 
 /**
  * Release an index back to the pool.
+ * Also recursively releases all children!
  *
  * @param index - The index to release.
  */
@@ -108,6 +110,19 @@ export function releaseIndex(index: number): void {
   const id = indexToId.get(index)
   if (id === undefined) return
 
+  // FIRST: Find and release all children (recursive!)
+  // We collect children first to avoid modifying while iterating
+  const children: number[] = []
+  for (const childIndex of allocatedIndices) {
+    if (parentIndexArray[childIndex] === index) {
+      children.push(childIndex)
+    }
+  }
+  // Release children recursively
+  for (const childIndex of children) {
+    releaseIndex(childIndex)
+  }
+
   // Clean up mappings
   idToIndex.delete(id)
   indexToId.delete(index)

package/src/pipeline/frameBuffer.ts

@@ -16,7 +16,7 @@
  * HitGrid updates are returned as data to be applied by the render effect.
  */
 
-import { derived, unwrap } from '@rlabs-inc/signals'
+import { derived, neverEquals } from '@rlabs-inc/signals'
 import type { FrameBuffer, RGBA } from '../types'
 import { ComponentType } from '../types'
 import { Colors, TERMINAL_DEFAULT, rgbaBlend, rgbaLerp } from '../types/color'
@@ -46,10 +46,10 @@ import {
 // Import arrays
 import * as core from '../engine/arrays/core'
 import * as visual from '../engine/arrays/visual'
-import * as text from '../engine/arrays/text'
-import * as spacing from '../engine/arrays/spacing'
-import * as layout from '../engine/arrays/layout'
-import * as interaction from '../engine/arrays/interaction'
+import *as text from '../engine/arrays/text'
+import *as spacing from '../engine/arrays/spacing'
+import *as layout from '../engine/arrays/layout'
+import *as interaction from '../engine/arrays/interaction'
 
 // Import layout derived
 import { layoutDerived, terminalWidth, terminalHeight, renderMode } from './layout'
@@ -119,10 +119,10 @@ export const frameBufferDerived = derived((): FrameBufferResult => {
 
   for (const i of indices) {
     if (core.componentType[i] === ComponentType.NONE) continue
-    const vis = unwrap(core.visible[i])
+    const vis = core.visible[i]
     if (vis === 0 || vis === false) continue
 
-    const parent = unwrap(core.parentIndex[i]) ?? -1
+    const parent = core.parentIndex[i] ?? -1
     if (parent === -1) {
       rootIndices.push(i)
     } else {
@@ -136,11 +136,11 @@ export const frameBufferDerived = derived((): FrameBufferResult => {
   }
 
   // Sort roots by zIndex
-  rootIndices.sort((a, b) => (unwrap(layout.zIndex[a]) || 0) - (unwrap(layout.zIndex[b]) || 0))
+  rootIndices.sort((a, b) => (layout.zIndex[a] || 0) - (layout.zIndex[b] || 0))
 
   // Sort children by zIndex
   for (const children of childMap.values()) {
-    children.sort((a, b) => (unwrap(layout.zIndex[a]) || 0) - (unwrap(layout.zIndex[b]) || 0))
+    children.sort((a, b) => (layout.zIndex[a] || 0) - (layout.zIndex[b] || 0))
   }
 
   // Render tree recursively
@@ -180,7 +180,7 @@ function renderComponent(
   parentScrollX: number
 ): void {
   // Skip invisible/invalid components
-  const vis = unwrap(core.visible[index])
+  const vis = core.visible[index]
   if (vis === 0 || vis === false) return
   if (core.componentType[index] === ComponentType.NONE) return
 
@@ -239,10 +239,10 @@ function renderComponent(
   }
 
   // Calculate content area (inside borders and padding)
-  const padTop = (unwrap(spacing.paddingTop[index]) || 0) + (hasAnyBorder && borderStyles.top > 0 ? 1 : 0)
-  const padRight = (unwrap(spacing.paddingRight[index]) || 0) + (hasAnyBorder && borderStyles.right > 0 ? 1 : 0)
-  const padBottom = (unwrap(spacing.paddingBottom[index]) || 0) + (hasAnyBorder && borderStyles.bottom > 0 ? 1 : 0)
-  const padLeft = (unwrap(spacing.paddingLeft[index]) || 0) + (hasAnyBorder && borderStyles.left > 0 ? 1 : 0)
+  const padTop = (spacing.paddingTop[index] || 0) + (hasAnyBorder && borderStyles.top > 0 ? 1 : 0)
+  const padRight = (spacing.paddingRight[index] || 0) + (hasAnyBorder && borderStyles.right > 0 ? 1 : 0)
+  const padBottom = (spacing.paddingBottom[index] || 0) + (hasAnyBorder && borderStyles.bottom > 0 ? 1 : 0)
+  const padLeft = (spacing.paddingLeft[index] || 0) + (hasAnyBorder && borderStyles.left > 0 ? 1 : 0)
 
   const contentX = x + padLeft
   const contentY = y + padTop
@@ -292,8 +292,8 @@ function renderComponent(
 
     // Get this component's scroll offset (scrollable comes from layout, offset from interaction)
     const isScrollable = (computedLayout.scrollable[index] ?? 0) === 1
-    const scrollY = isScrollable ? (unwrap(interaction.scrollOffsetY[index]) || 0) : 0
-    const scrollX = isScrollable ? (unwrap(interaction.scrollOffsetX[index]) || 0) : 0
+    const scrollY = isScrollable ? (interaction.scrollOffsetY[index] || 0) : 0
+    const scrollX = isScrollable ? (interaction.scrollOffsetX[index] || 0) : 0
 
     // Accumulated scroll for children
     const childScrollY = parentScrollY + scrollY
@@ -331,13 +331,13 @@ function renderText(
   fg: RGBA,
   clip: ClipRect
 ): void {
+  // Read through slotArray proxy - same pattern as color reads in inheritance.ts
   const rawValue = text.textContent[index]
-  const unwrapped = unwrap(rawValue)
-  const content = unwrapped == null ? '' : String(unwrapped)
+  const content = rawValue == null ? '' : String(rawValue)
   if (!content) return
 
-  const attrs = unwrap(text.textAttrs[index]) || 0
-  const align = unwrap(text.textAlign[index]) || 0
+  const attrs = text.textAttrs[index] || 0
+  const align = text.textAlign[index] || 0
 
   // Word wrap the text
   const lines = wrapText(content, w)
@@ -376,9 +376,9 @@ function renderInput(
   fg: RGBA,
   clip: ClipRect
 ): void {
-  const content = unwrap(text.textContent[index]) || ''
-  const attrs = unwrap(text.textAttrs[index]) || 0
-  const cursorPos = unwrap(interaction.cursorPosition[index]) || 0
+  const content = text.textContent[index] || ''  // SlotArray auto-unwraps
+  const attrs = text.textAttrs[index] || 0
+  const cursorPos = interaction.cursorPosition[index] || 0
 
   if (w <= 0) return
 
@@ -427,7 +427,7 @@ function renderProgress(
   fg: RGBA,
   clip?: ClipRect
 ): void {
-  const valueStr = unwrap(text.textContent[index]) || '0'
+  const valueStr = text.textContent[index] || '0'  // SlotArray auto-unwraps
   const progress = Math.max(0, Math.min(1, parseFloat(valueStr) || 0))
   const filled = Math.round(progress * w)
 
@@ -458,8 +458,8 @@ function renderSelect(
   fg: RGBA,
   clip: ClipRect
 ): void {
-  const content = unwrap(text.textContent[index]) || ''
-  const attrs = unwrap(text.textAttrs[index]) || 0
+  const content = text.textContent[index] || ''  // SlotArray auto-unwraps
+  const attrs = text.textAttrs[index] || 0
 
   // For now, just show current selection
   const displayText = truncateText(content, w - 2) // Leave room for dropdown indicator

package/src/pipeline/layout/index.ts

@@ -15,7 +15,7 @@
  * - Return plain output arrays
  */
 
-import { derived, signal } from '@rlabs-inc/signals'
+import { derived, signal, neverEquals } from '@rlabs-inc/signals'
 import { getAllocatedIndices } from '../../engine/registry'
 import { computeLayoutTitan, resetTitanArrays } from './titan-engine'
 import type { ComputedLayout } from './types'
@@ -87,7 +87,7 @@ export const layoutDerived = derived((): ComputedLayout => {
   // TITAN ENGINE: Read arrays, compute, return.
   // Reactivity tracks dependencies as we read - no manual tracking needed.
   return computeLayoutTitan(tw, th, indices, constrainHeight)
-})
+}, { equals: neverEquals })
 
 // =============================================================================
 // EXPORTS