@rlabs-inc/tui 0.1.0 → 0.2.0

package/src/engine/arrays/index.ts

@@ -4,8 +4,11 @@
  * All component state lives in these parallel arrays.
  * Each array index corresponds to one component.
  *
- * Components write directly to these arrays.
- * Deriveds read from these arrays and RETURN computed values.
+ * Components write directly to these arrays using setSource().
+ * Deriveds read from these arrays directly (no unwrap needed).
+ *
+ * All arrays use slotArray for stable reactive cells that NEVER get replaced.
+ * This fixes the bind() tracking bug where deriveds miss updates.
  *
  * Array categories:
  * - core: Component type, parent, visibility
@@ -25,7 +28,7 @@ export * as visual from './visual'
 export * as text from './text'
 export * as interaction from './interaction'
 
-import { disconnectBinding } from '@rlabs-inc/signals'
+import { type SlotArray } from '@rlabs-inc/signals'
 import * as core from './core'
 import * as dimensions from './dimensions'
 import * as spacing from './spacing'
@@ -62,12 +65,11 @@ export function clearAllAtIndex(index: number): void {
   interaction.clearAtIndex(index)
 }
 
-/** Disconnect all bindings in an array before truncating */
-function disconnectArray(arr: unknown[]): void {
+/** Clear all slots in a SlotArray (slots are stable, just reset to defaults) */
+function clearSlotArray<T>(arr: SlotArray<T>): void {
   for (let i = 0; i < arr.length; i++) {
-    disconnectBinding(arr[i] as any)
+    arr.clear(i)
   }
-  arr.length = 0
 }
 
 /**
@@ -75,92 +77,92 @@ function disconnectArray(arr: unknown[]): void {
  * Called automatically when all components are destroyed (allocatedIndices.size === 0).
  * This is the "reset on zero" cleanup - no manual API needed!
  *
- * IMPORTANT: Disconnects all bindings before truncating to break circular refs.
+ * SlotArrays are stable - we just clear them to defaults.
  */
 export function resetAllArrays(): void {
-  // Core arrays
+  // Core arrays (componentType is plain array, rest are slotArrays)
   core.componentType.length = 0
-  disconnectArray(core.parentIndex)
-  disconnectArray(core.visible)
-  disconnectArray(core.componentId)
+  clearSlotArray(core.parentIndex)
+  clearSlotArray(core.visible)
+  clearSlotArray(core.componentId)
 
-  // Dimension arrays
-  disconnectArray(dimensions.width)
-  disconnectArray(dimensions.height)
-  disconnectArray(dimensions.minWidth)
-  disconnectArray(dimensions.minHeight)
-  disconnectArray(dimensions.maxWidth)
-  disconnectArray(dimensions.maxHeight)
+  // Dimension arrays (all slotArrays)
+  clearSlotArray(dimensions.width)
+  clearSlotArray(dimensions.height)
+  clearSlotArray(dimensions.minWidth)
+  clearSlotArray(dimensions.minHeight)
+  clearSlotArray(dimensions.maxWidth)
+  clearSlotArray(dimensions.maxHeight)
 
-  // Spacing arrays
-  disconnectArray(spacing.marginTop)
-  disconnectArray(spacing.marginRight)
-  disconnectArray(spacing.marginBottom)
-  disconnectArray(spacing.marginLeft)
-  disconnectArray(spacing.paddingTop)
-  disconnectArray(spacing.paddingRight)
-  disconnectArray(spacing.paddingBottom)
-  disconnectArray(spacing.paddingLeft)
-  disconnectArray(spacing.gap)
-  disconnectArray(spacing.rowGap)
-  disconnectArray(spacing.columnGap)
+  // Spacing arrays (all slotArrays)
+  clearSlotArray(spacing.marginTop)
+  clearSlotArray(spacing.marginRight)
+  clearSlotArray(spacing.marginBottom)
+  clearSlotArray(spacing.marginLeft)
+  clearSlotArray(spacing.paddingTop)
+  clearSlotArray(spacing.paddingRight)
+  clearSlotArray(spacing.paddingBottom)
+  clearSlotArray(spacing.paddingLeft)
+  clearSlotArray(spacing.gap)
+  clearSlotArray(spacing.rowGap)
+  clearSlotArray(spacing.columnGap)
 
-  // Layout arrays
-  disconnectArray(layout.flexDirection)
-  disconnectArray(layout.flexWrap)
-  disconnectArray(layout.justifyContent)
-  disconnectArray(layout.alignItems)
-  disconnectArray(layout.alignContent)
-  disconnectArray(layout.flexGrow)
-  disconnectArray(layout.flexShrink)
-  disconnectArray(layout.flexBasis)
-  disconnectArray(layout.alignSelf)
-  disconnectArray(layout.order)
-  disconnectArray(layout.position)
-  disconnectArray(layout.top)
-  disconnectArray(layout.right)
-  disconnectArray(layout.bottom)
-  disconnectArray(layout.left)
-  disconnectArray(layout.borderTop)
-  disconnectArray(layout.borderRight)
-  disconnectArray(layout.borderBottom)
-  disconnectArray(layout.borderLeft)
-  disconnectArray(layout.zIndex)
-  disconnectArray(layout.overflow)
+  // Layout arrays (all slotArrays)
+  clearSlotArray(layout.flexDirection)
+  clearSlotArray(layout.flexWrap)
+  clearSlotArray(layout.justifyContent)
+  clearSlotArray(layout.alignItems)
+  clearSlotArray(layout.alignContent)
+  clearSlotArray(layout.flexGrow)
+  clearSlotArray(layout.flexShrink)
+  clearSlotArray(layout.flexBasis)
+  clearSlotArray(layout.alignSelf)
+  clearSlotArray(layout.order)
+  clearSlotArray(layout.position)
+  clearSlotArray(layout.top)
+  clearSlotArray(layout.right)
+  clearSlotArray(layout.bottom)
+  clearSlotArray(layout.left)
+  clearSlotArray(layout.borderTop)
+  clearSlotArray(layout.borderRight)
+  clearSlotArray(layout.borderBottom)
+  clearSlotArray(layout.borderLeft)
+  clearSlotArray(layout.zIndex)
+  clearSlotArray(layout.overflow)
 
-  // Visual arrays
-  disconnectArray(visual.fgColor)
-  disconnectArray(visual.bgColor)
-  disconnectArray(visual.opacity)
-  disconnectArray(visual.borderStyle)
-  disconnectArray(visual.borderColor)
-  disconnectArray(visual.borderTop)
-  disconnectArray(visual.borderRight)
-  disconnectArray(visual.borderBottom)
-  disconnectArray(visual.borderLeft)
-  disconnectArray(visual.borderColorTop)
-  disconnectArray(visual.borderColorRight)
-  disconnectArray(visual.borderColorBottom)
-  disconnectArray(visual.borderColorLeft)
-  disconnectArray(visual.showFocusRing)
-  disconnectArray(visual.focusRingColor)
+  // Visual arrays (all slotArrays)
+  clearSlotArray(visual.fgColor)
+  clearSlotArray(visual.bgColor)
+  clearSlotArray(visual.opacity)
+  clearSlotArray(visual.borderStyle)
+  clearSlotArray(visual.borderColor)
+  clearSlotArray(visual.borderTop)
+  clearSlotArray(visual.borderRight)
+  clearSlotArray(visual.borderBottom)
+  clearSlotArray(visual.borderLeft)
+  clearSlotArray(visual.borderColorTop)
+  clearSlotArray(visual.borderColorRight)
+  clearSlotArray(visual.borderColorBottom)
+  clearSlotArray(visual.borderColorLeft)
+  clearSlotArray(visual.showFocusRing)
+  clearSlotArray(visual.focusRingColor)
 
-  // Text arrays
-  disconnectArray(text.textContent)
-  disconnectArray(text.textAttrs)
-  disconnectArray(text.textAlign)
-  disconnectArray(text.textWrap)
-  disconnectArray(text.ellipsis)
+  // Text arrays (all slotArrays)
+  clearSlotArray(text.textContent)
+  clearSlotArray(text.textAttrs)
+  clearSlotArray(text.textAlign)
+  clearSlotArray(text.textWrap)
+  clearSlotArray(text.ellipsis)
 
-  // Interaction arrays
-  disconnectArray(interaction.scrollOffsetX)
-  disconnectArray(interaction.scrollOffsetY)
-  disconnectArray(interaction.focusable)
-  disconnectArray(interaction.tabIndex)
-  disconnectArray(interaction.hovered)
-  disconnectArray(interaction.pressed)
-  disconnectArray(interaction.mouseEnabled)
-  disconnectArray(interaction.cursorPosition)
-  disconnectArray(interaction.selectionStart)
-  disconnectArray(interaction.selectionEnd)
+  // Interaction arrays (all slotArrays)
+  clearSlotArray(interaction.scrollOffsetX)
+  clearSlotArray(interaction.scrollOffsetY)
+  clearSlotArray(interaction.focusable)
+  clearSlotArray(interaction.tabIndex)
+  clearSlotArray(interaction.hovered)
+  clearSlotArray(interaction.pressed)
+  clearSlotArray(interaction.mouseEnabled)
+  clearSlotArray(interaction.cursorPosition)
+  clearSlotArray(interaction.selectionStart)
+  clearSlotArray(interaction.selectionEnd)
 }

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