@rlabs-inc/tui 0.1.0 → 0.2.0

package/src/engine/arrays/spacing.ts

@@ -4,97 +4,82 @@
  * Margin, padding, and gap values.
  * All values are in terminal cells (integers).
  *
- * 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.
  */
 
-import { bind, disconnectBinding, type Binding } from '@rlabs-inc/signals'
+import { slotArray, type SlotArray } from '@rlabs-inc/signals'
 
 // =============================================================================
 // MARGIN - Space outside the component (offsets position in parent)
 // =============================================================================
 
 /** Top margin - adds space above the component (in cells) */
-export const marginTop: Binding<number>[] = []
+export const marginTop: SlotArray<number> = slotArray<number>(0)
 
 /** Right margin - adds space to the right of the component (in cells) */
-export const marginRight: Binding<number>[] = []
+export const marginRight: SlotArray<number> = slotArray<number>(0)
 
 /** Bottom margin - adds space below the component (in cells) */
-export const marginBottom: Binding<number>[] = []
+export const marginBottom: SlotArray<number> = slotArray<number>(0)
 
 /** Left margin - adds space to the left of the component (in cells) */
-export const marginLeft: Binding<number>[] = []
+export const marginLeft: SlotArray<number> = slotArray<number>(0)
 
 // =============================================================================
 // PADDING - Space inside the component (reduces content area)
 // =============================================================================
 
 /** Top padding - pushes content down from top edge (in cells) */
-export const paddingTop: Binding<number>[] = []
+export const paddingTop: SlotArray<number> = slotArray<number>(0)
 
 /** Right padding - pushes content left from right edge (in cells) */
-export const paddingRight: Binding<number>[] = []
+export const paddingRight: SlotArray<number> = slotArray<number>(0)
 
 /** Bottom padding - pushes content up from bottom edge (in cells) */
-export const paddingBottom: Binding<number>[] = []
+export const paddingBottom: SlotArray<number> = slotArray<number>(0)
 
 /** Left padding - pushes content right from left edge (in cells) */
-export const paddingLeft: Binding<number>[] = []
+export const paddingLeft: SlotArray<number> = slotArray<number>(0)
 
 // =============================================================================
 // GAP - Space between flex items (CSS gap property)
 // =============================================================================
 
 /** Gap between flex items in both directions (in cells) */
-export const gap: Binding<number>[] = []
+export const gap: SlotArray<number> = slotArray<number>(0)
 
 /** Row gap - vertical space between wrapped lines (in cells) */
-export const rowGap: Binding<number>[] = []
+export const rowGap: SlotArray<number> = slotArray<number>(0)
 
 /** Column gap - horizontal space between items in a row (in cells) */
-export const columnGap: Binding<number>[] = []
+export const columnGap: SlotArray<number> = slotArray<number>(0)
 
-/** LAZY BINDING: Push undefined, primitives create bindings for used props only */
+/** Ensure capacity for all spacing arrays */
 export function ensureCapacity(index: number): void {
-  while (marginTop.length <= index) {
-    marginTop.push(undefined as any)
-    marginRight.push(undefined as any)
-    marginBottom.push(undefined as any)
-    marginLeft.push(undefined as any)
-    paddingTop.push(undefined as any)
-    paddingRight.push(undefined as any)
-    paddingBottom.push(undefined as any)
-    paddingLeft.push(undefined as any)
-    gap.push(undefined as any)
-    rowGap.push(undefined as any)
-    columnGap.push(undefined as any)
-  }
+  marginTop.ensureCapacity(index)
+  marginRight.ensureCapacity(index)
+  marginBottom.ensureCapacity(index)
+  marginLeft.ensureCapacity(index)
+  paddingTop.ensureCapacity(index)
+  paddingRight.ensureCapacity(index)
+  paddingBottom.ensureCapacity(index)
+  paddingLeft.ensureCapacity(index)
+  gap.ensureCapacity(index)
+  rowGap.ensureCapacity(index)
+  columnGap.ensureCapacity(index)
 }
 
+/** Clear slot at index (reset to default) */
 export function clearAtIndex(index: number): void {
-  if (index < marginTop.length) {
-    disconnectBinding(marginTop[index])
-    disconnectBinding(marginRight[index])
-    disconnectBinding(marginBottom[index])
-    disconnectBinding(marginLeft[index])
-    disconnectBinding(paddingTop[index])
-    disconnectBinding(paddingRight[index])
-    disconnectBinding(paddingBottom[index])
-    disconnectBinding(paddingLeft[index])
-    disconnectBinding(gap[index])
-    disconnectBinding(rowGap[index])
-    disconnectBinding(columnGap[index])
-    marginTop[index] = undefined as any
-    marginRight[index] = undefined as any
-    marginBottom[index] = undefined as any
-    marginLeft[index] = undefined as any
-    paddingTop[index] = undefined as any
-    paddingRight[index] = undefined as any
-    paddingBottom[index] = undefined as any
-    paddingLeft[index] = undefined as any
-    gap[index] = undefined as any
-    rowGap[index] = undefined as any
-    columnGap[index] = undefined as any
-  }
+  marginTop.clear(index)
+  marginRight.clear(index)
+  marginBottom.clear(index)
+  marginLeft.clear(index)
+  paddingTop.clear(index)
+  paddingRight.clear(index)
+  paddingBottom.clear(index)
+  paddingLeft.clear(index)
+  gap.clear(index)
+  rowGap.clear(index)
+  columnGap.clear(index)
 }

package/src/engine/arrays/text.ts

@@ -3,53 +3,45 @@
  *
  * Text content and styling for text/input components.
  *
- * 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.
+ * This fixes the bind() tracking bug where deriveds miss updates
+ * when binding objects are replaced.
  *
- * Flow: user signal → bind() → Binding stored → unwrap() reads .value → dependency!
+ * Flow: user signal → setSource() → Slot tracks → arr[i] reads value → dependency!
  */
 
-import { bind, disconnectBinding, type Binding } from '@rlabs-inc/signals'
+import { slotArray, type SlotArray } from '@rlabs-inc/signals'
 import type { CellAttrs } from '../../types'
-import { Attr } from '../../types'
 
-// Text content - Regular array to preserve binding getters
-export const textContent: Binding<string>[] = []
+// Text content - SlotArray auto-tracks and auto-unwraps
+export const textContent: SlotArray<string> = slotArray<string>('')
 
 // Text styling (CellAttrs bitfield)
-export const textAttrs: Binding<CellAttrs>[] = []
+export const textAttrs: SlotArray<CellAttrs> = slotArray<CellAttrs>(0)
 
 // Text alignment: 0=left, 1=center, 2=right
-export const textAlign: Binding<number>[] = []
+export const textAlign: SlotArray<number> = slotArray<number>(0)
 
 // Text wrapping: 0=nowrap, 1=wrap, 2=truncate
-export const textWrap: Binding<number>[] = []
+export const textWrap: SlotArray<number> = slotArray<number>(1)  // wrap by default
 
 // Ellipsis for truncated text
-export const ellipsis: Binding<string>[] = []
+export const ellipsis: SlotArray<string> = slotArray<string>('...')
 
-/** LAZY BINDING: Push undefined, primitives create bindings for used props only */
+/** Ensure capacity for all text arrays */
 export function ensureCapacity(index: number): void {
-  while (textContent.length <= index) {
-    textContent.push(undefined as any)
-    textAttrs.push(undefined as any)
-    textAlign.push(undefined as any)
-    textWrap.push(undefined as any)
-    ellipsis.push(undefined as any)
-  }
+  textContent.ensureCapacity(index)
+  textAttrs.ensureCapacity(index)
+  textAlign.ensureCapacity(index)
+  textWrap.ensureCapacity(index)
+  ellipsis.ensureCapacity(index)
 }
 
+/** Clear slot at index (reset to default) */
 export function clearAtIndex(index: number): void {
-  if (index < textContent.length) {
-    disconnectBinding(textContent[index])
-    disconnectBinding(textAttrs[index])
-    disconnectBinding(textAlign[index])
-    disconnectBinding(textWrap[index])
-    disconnectBinding(ellipsis[index])
-    textContent[index] = undefined as any
-    textAttrs[index] = undefined as any
-    textAlign[index] = undefined as any
-    textWrap[index] = undefined as any
-    ellipsis[index] = undefined as any
-  }
+  textContent.clear(index)
+  textAttrs.clear(index)
+  textAlign.clear(index)
+  textWrap.clear(index)
+  ellipsis.clear(index)
 }

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)