@rlabs-inc/tui 0.1.0 → 0.2.1

package/src/engine/arrays/interaction.ts

@@ -3,8 +3,7 @@
  *
  * State for scroll, focus, and mouse interactions.
  *
- * 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.
  *
  * Exception: focusedIndex is a single signal, not an array.
  *
@@ -12,17 +11,17 @@
  * and live in ComputedLayout, not here. Only scroll OFFSETS (user state) are here.
  */
 
-import { signal, bind, disconnectBinding, type Binding } from '@rlabs-inc/signals'
+import { signal, slotArray, type SlotArray } from '@rlabs-inc/signals'
 
 // =============================================================================
 // SCROLL STATE (user-controlled position only)
 // =============================================================================
 
 /** Current vertical scroll offset (user state) */
-export const scrollOffsetY: Binding<number>[] = []
+export const scrollOffsetY: SlotArray<number> = slotArray<number>(0)
 
 /** Current horizontal scroll offset (user state) */
-export const scrollOffsetX: Binding<number>[] = []
+export const scrollOffsetX: SlotArray<number> = slotArray<number>(0)
 
 // NOTE: scrollable, maxScrollX, maxScrollY are COMPUTED values from TITAN.
 // Read them from layoutDerived.value, not from interaction arrays.
@@ -32,10 +31,10 @@ export const scrollOffsetX: Binding<number>[] = []
 // =============================================================================
 
 /** Can this component receive focus */
-export const focusable: Binding<number>[] = [] // 0=no, 1=yes
+export const focusable: SlotArray<number> = slotArray<number>(0) // 0=no, 1=yes
 
 /** Tab order for focus navigation (-1 = not in tab order) */
-export const tabIndex: Binding<number>[] = []
+export const tabIndex: SlotArray<number> = slotArray<number>(-1)
 
 /** Currently focused component index (-1 = none) - SINGLE SIGNAL, not array */
 export const focusedIndex = signal(-1)
@@ -45,68 +44,55 @@ export const focusedIndex = signal(-1)
 // =============================================================================
 
 /** Is mouse currently hovering over this component */
-export const hovered: Binding<number>[] = [] // 0=no, 1=yes
+export const hovered: SlotArray<number> = slotArray<number>(0) // 0=no, 1=yes
 
 /** Is mouse button currently pressed on this component */
-export const pressed: Binding<number>[] = [] // 0=no, 1=yes
+export const pressed: SlotArray<number> = slotArray<number>(0) // 0=no, 1=yes
 
 /** Is mouse events enabled for this component */
-export const mouseEnabled: Binding<number>[] = [] // 0=no, 1=yes
+export const mouseEnabled: SlotArray<number> = slotArray<number>(0) // 0=no, 1=yes
 
 // =============================================================================
 // CURSOR STATE (for input components)
 // =============================================================================
 
 /** Cursor position in text content */
-export const cursorPosition: Binding<number>[] = []
+export const cursorPosition: SlotArray<number> = slotArray<number>(0)
 
 /** Selection start position (-1 = no selection) */
-export const selectionStart: Binding<number>[] = []
+export const selectionStart: SlotArray<number> = slotArray<number>(-1)
 
 /** Selection end position */
-export const selectionEnd: Binding<number>[] = []
+export const selectionEnd: SlotArray<number> = slotArray<number>(-1)
 
 // =============================================================================
 // CAPACITY MANAGEMENT
 // =============================================================================
 
-/** LAZY BINDING: Push undefined, primitives create bindings for used props only */
+/** Ensure capacity for all interaction arrays */
 export function ensureCapacity(index: number): void {
-  while (scrollOffsetY.length <= index) {
-    scrollOffsetY.push(undefined as any)
-    scrollOffsetX.push(undefined as any)
-    focusable.push(undefined as any)
-    tabIndex.push(undefined as any)
-    hovered.push(undefined as any)
-    pressed.push(undefined as any)
-    mouseEnabled.push(undefined as any)
-    cursorPosition.push(undefined as any)
-    selectionStart.push(undefined as any)
-    selectionEnd.push(undefined as any)
-  }
+  scrollOffsetY.ensureCapacity(index)
+  scrollOffsetX.ensureCapacity(index)
+  focusable.ensureCapacity(index)
+  tabIndex.ensureCapacity(index)
+  hovered.ensureCapacity(index)
+  pressed.ensureCapacity(index)
+  mouseEnabled.ensureCapacity(index)
+  cursorPosition.ensureCapacity(index)
+  selectionStart.ensureCapacity(index)
+  selectionEnd.ensureCapacity(index)
 }
 
+/** Clear slot at index (reset to default) */
 export function clearAtIndex(index: number): void {
-  if (index < scrollOffsetY.length) {
-    disconnectBinding(scrollOffsetY[index])
-    disconnectBinding(scrollOffsetX[index])
-    disconnectBinding(focusable[index])
-    disconnectBinding(tabIndex[index])
-    disconnectBinding(hovered[index])
-    disconnectBinding(pressed[index])
-    disconnectBinding(mouseEnabled[index])
-    disconnectBinding(cursorPosition[index])
-    disconnectBinding(selectionStart[index])
-    disconnectBinding(selectionEnd[index])
-    scrollOffsetY[index] = undefined as any
-    scrollOffsetX[index] = undefined as any
-    focusable[index] = undefined as any
-    tabIndex[index] = undefined as any
-    hovered[index] = undefined as any
-    pressed[index] = undefined as any
-    mouseEnabled[index] = undefined as any
-    cursorPosition[index] = undefined as any
-    selectionStart[index] = undefined as any
-    selectionEnd[index] = undefined as any
-  }
+  scrollOffsetY.clear(index)
+  scrollOffsetX.clear(index)
+  focusable.clear(index)
+  tabIndex.clear(index)
+  hovered.clear(index)
+  pressed.clear(index)
+  mouseEnabled.clear(index)
+  cursorPosition.clear(index)
+  selectionStart.clear(index)
+  selectionEnd.clear(index)
 }

package/src/engine/arrays/layout.ts

@@ -4,8 +4,7 @@
  * Flexbox properties, positioning, and stacking.
  * Uses numeric enums for compact storage.
  *
- * 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.
  *
  * Flex direction: 0=column, 1=row, 2=column-reverse, 3=row-reverse
  * Flex wrap: 0=nowrap, 1=wrap, 2=wrap-reverse
@@ -15,161 +14,137 @@
  * Overflow: 0=visible, 1=hidden, 2=scroll
  */
 
-import { bind, disconnectBinding, type Binding } from '@rlabs-inc/signals'
+import { slotArray, type SlotArray } from '@rlabs-inc/signals'
 
 // =============================================================================
 // FLEX CONTAINER PROPERTIES
 // =============================================================================
 
 /** Main axis direction: 0=column, 1=row, 2=column-reverse, 3=row-reverse */
-export const flexDirection: Binding<number>[] = []
+export const flexDirection: SlotArray<number> = slotArray<number>(0)
 
 /** Wrap behavior: 0=nowrap, 1=wrap, 2=wrap-reverse */
-export const flexWrap: Binding<number>[] = []
+export const flexWrap: SlotArray<number> = slotArray<number>(0)
 
 /** Main axis alignment: 0=flex-start, 1=center, 2=flex-end, 3=space-between, 4=space-around, 5=space-evenly */
-export const justifyContent: Binding<number>[] = []
+export const justifyContent: SlotArray<number> = slotArray<number>(0)
 
 /** Cross axis alignment for items: 0=stretch, 1=flex-start, 2=center, 3=flex-end, 4=baseline */
-export const alignItems: Binding<number>[] = []
+export const alignItems: SlotArray<number> = slotArray<number>(0)
 
 /** Cross axis alignment for wrapped lines: 0=stretch, 1=flex-start, 2=center, 3=flex-end */
-export const alignContent: Binding<number>[] = []
+export const alignContent: SlotArray<number> = slotArray<number>(0)
 
 // =============================================================================
 // FLEX ITEM PROPERTIES
 // =============================================================================
 
 /** Grow factor - how much item grows to fill space (0 = don't grow) */
-export const flexGrow: Binding<number>[] = []
+export const flexGrow: SlotArray<number> = slotArray<number>(0)
 
 /** Shrink factor - how much item shrinks when overflow (1 = default, 0 = don't shrink) */
-export const flexShrink: Binding<number>[] = []
+export const flexShrink: SlotArray<number> = slotArray<number>(1)
 
 /** Initial size before growing/shrinking (0 = use width/height) */
-export const flexBasis: Binding<number>[] = []
+export const flexBasis: SlotArray<number> = slotArray<number>(0)
 
 /** Override alignItems for this item: 0=auto, 1=stretch, 2=flex-start, 3=center, 4=flex-end */
-export const alignSelf: Binding<number>[] = []
+export const alignSelf: SlotArray<number> = slotArray<number>(0)
 
 /** Visual order override (not used yet) */
-export const order: Binding<number>[] = []
+export const order: SlotArray<number> = slotArray<number>(0)
 
 // =============================================================================
 // POSITIONING
 // =============================================================================
 
 /** Position mode: 0=relative (in flow), 1=absolute (out of flow) */
-export const position: Binding<number>[] = []
+export const position: SlotArray<number> = slotArray<number>(0)
 
 /** Offset from top of positioned ancestor (for absolute) or normal position (for relative) */
-export const top: Binding<number>[] = []
+export const top: SlotArray<number> = slotArray<number>(0)
 
 /** Offset from right of positioned ancestor */
-export const right: Binding<number>[] = []
+export const right: SlotArray<number> = slotArray<number>(0)
 
 /** Offset from bottom of positioned ancestor */
-export const bottom: Binding<number>[] = []
+export const bottom: SlotArray<number> = slotArray<number>(0)
 
 /** Offset from left of positioned ancestor */
-export const left: Binding<number>[] = []
+export const left: SlotArray<number> = slotArray<number>(0)
 
 // =============================================================================
 // BORDER (for layout calculations)
 // =============================================================================
 
 /** Has top border? 0=no, 1+=yes (takes 1 cell) */
-export const borderTop: Binding<number>[] = []
+export const borderTop: SlotArray<number> = slotArray<number>(0)
 
 /** Has right border? 0=no, 1+=yes (takes 1 cell) */
-export const borderRight: Binding<number>[] = []
+export const borderRight: SlotArray<number> = slotArray<number>(0)
 
 /** Has bottom border? 0=no, 1+=yes (takes 1 cell) */
-export const borderBottom: Binding<number>[] = []
+export const borderBottom: SlotArray<number> = slotArray<number>(0)
 
 /** Has left border? 0=no, 1+=yes (takes 1 cell) */
-export const borderLeft: Binding<number>[] = []
+export const borderLeft: SlotArray<number> = slotArray<number>(0)
 
 // =============================================================================
 // STACKING & OVERFLOW
 // =============================================================================
 
 /** Z-index for overlapping components (higher = on top) */
-export const zIndex: Binding<number>[] = []
+export const zIndex: SlotArray<number> = slotArray<number>(0)
 
 /** Overflow handling: 0=visible, 1=hidden, 2=scroll, 3=auto */
-export const overflow: Binding<number>[] = []
+export const overflow: SlotArray<number> = slotArray<number>(0)
 
-/** LAZY BINDING: Push undefined, primitives create bindings for used props only */
+/** Ensure capacity for all layout arrays */
 export function ensureCapacity(index: number): void {
-  while (flexDirection.length <= index) {
-    flexDirection.push(undefined as any)
-    flexWrap.push(undefined as any)
-    justifyContent.push(undefined as any)
-    alignItems.push(undefined as any)
-    alignContent.push(undefined as any)
-    flexGrow.push(undefined as any)
-    flexShrink.push(undefined as any)
-    flexBasis.push(undefined as any)
-    alignSelf.push(undefined as any)
-    order.push(undefined as any)
-    position.push(undefined as any)
-    top.push(undefined as any)
-    right.push(undefined as any)
-    bottom.push(undefined as any)
-    left.push(undefined as any)
-    borderTop.push(undefined as any)
-    borderRight.push(undefined as any)
-    borderBottom.push(undefined as any)
-    borderLeft.push(undefined as any)
-    zIndex.push(undefined as any)
-    overflow.push(undefined as any)
-  }
+  flexDirection.ensureCapacity(index)
+  flexWrap.ensureCapacity(index)
+  justifyContent.ensureCapacity(index)
+  alignItems.ensureCapacity(index)
+  alignContent.ensureCapacity(index)
+  flexGrow.ensureCapacity(index)
+  flexShrink.ensureCapacity(index)
+  flexBasis.ensureCapacity(index)
+  alignSelf.ensureCapacity(index)
+  order.ensureCapacity(index)
+  position.ensureCapacity(index)
+  top.ensureCapacity(index)
+  right.ensureCapacity(index)
+  bottom.ensureCapacity(index)
+  left.ensureCapacity(index)
+  borderTop.ensureCapacity(index)
+  borderRight.ensureCapacity(index)
+  borderBottom.ensureCapacity(index)
+  borderLeft.ensureCapacity(index)
+  zIndex.ensureCapacity(index)
+  overflow.ensureCapacity(index)
 }
 
+/** Clear slot at index (reset to default) */
 export function clearAtIndex(index: number): void {
-  if (index < flexDirection.length) {
-    disconnectBinding(flexDirection[index])
-    disconnectBinding(flexWrap[index])
-    disconnectBinding(justifyContent[index])
-    disconnectBinding(alignItems[index])
-    disconnectBinding(alignContent[index])
-    disconnectBinding(flexGrow[index])
-    disconnectBinding(flexShrink[index])
-    disconnectBinding(flexBasis[index])
-    disconnectBinding(alignSelf[index])
-    disconnectBinding(order[index])
-    disconnectBinding(position[index])
-    disconnectBinding(top[index])
-    disconnectBinding(right[index])
-    disconnectBinding(bottom[index])
-    disconnectBinding(left[index])
-    disconnectBinding(borderTop[index])
-    disconnectBinding(borderRight[index])
-    disconnectBinding(borderBottom[index])
-    disconnectBinding(borderLeft[index])
-    disconnectBinding(zIndex[index])
-    disconnectBinding(overflow[index])
-    flexDirection[index] = undefined as any
-    flexWrap[index] = undefined as any
-    justifyContent[index] = undefined as any
-    alignItems[index] = undefined as any
-    alignContent[index] = undefined as any
-    flexGrow[index] = undefined as any
-    flexShrink[index] = undefined as any
-    flexBasis[index] = undefined as any
-    alignSelf[index] = undefined as any
-    order[index] = undefined as any
-    position[index] = undefined as any
-    top[index] = undefined as any
-    right[index] = undefined as any
-    bottom[index] = undefined as any
-    left[index] = undefined as any
-    borderTop[index] = undefined as any
-    borderRight[index] = undefined as any
-    borderBottom[index] = undefined as any
-    borderLeft[index] = undefined as any
-    zIndex[index] = undefined as any
-    overflow[index] = undefined as any
-  }
+  flexDirection.clear(index)
+  flexWrap.clear(index)
+  justifyContent.clear(index)
+  alignItems.clear(index)
+  alignContent.clear(index)
+  flexGrow.clear(index)
+  flexShrink.clear(index)
+  flexBasis.clear(index)
+  alignSelf.clear(index)
+  order.clear(index)
+  position.clear(index)
+  top.clear(index)
+  right.clear(index)
+  bottom.clear(index)
+  left.clear(index)
+  borderTop.clear(index)
+  borderRight.clear(index)
+  borderBottom.clear(index)
+  borderLeft.clear(index)
+  zIndex.clear(index)
+  overflow.clear(index)
 }

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)
 }