@cel-tui/core 0.6.2 → 0.7.0

package/src/index.ts

@@ -29,25 +29,24 @@
 
 export type {
   Color,
-  ThemeValue,
-  Theme,
-  StyleProps,
-  SizeValue,
+  ContainerNode,
   ContainerProps,
-  TextProps,
+  Node,
+  SizeValue,
+  StyleProps,
+  TextInputNode,
   TextInputProps,
   TextNode,
-  TextInputNode,
-  ContainerNode,
-  Node,
+  TextProps,
+  Theme,
+  ThemeValue,
 } from "@cel-tui/types";
-
-export { VStack, HStack } from "./primitives/stacks.js";
-export { Text } from "./primitives/text.js";
-export { TextInput } from "./primitives/text-input.js";
 export { cel } from "./cel.js";
+export { type Cell, CellBuffer, EMPTY_CELL } from "./cell-buffer.js";
+export { defaultTheme, emitBuffer } from "./emitter.js";
 export { measureContentHeight } from "./layout.js";
-export { CellBuffer, EMPTY_CELL, type Cell } from "./cell-buffer.js";
-export { emitBuffer, defaultTheme } from "./emitter.js";
-export { visibleWidth, extractAnsiCode } from "./width.js";
-export { type Terminal, ProcessTerminal, MockTerminal } from "./terminal.js";
+export { HStack, VStack } from "./primitives/stacks.js";
+export { Text } from "./primitives/text.js";
+export { TextInput } from "./primitives/text-input.js";
+export { MockTerminal, ProcessTerminal, type Terminal } from "./terminal.js";
+export { extractAnsiCode, visibleWidth } from "./width.js";

package/src/keys.ts

@@ -106,7 +106,7 @@ function decodeModifiers(param: number): string {
   if (bits & 4) parts.push("ctrl");
   if (bits & 2) parts.push("alt");
   if (bits & 1) parts.push("shift");
-  return parts.length > 0 ? parts.join("+") + "+" : "";
+  return parts.length > 0 ? `${parts.join("+")}+` : "";
 }
 
 /** Build a key string from a modifier prefix and base key name. */
@@ -125,6 +125,13 @@ const CSI_LETTER_RE = /^(?:1;(\d+))?([A-H])$/;
 /** Match CSI tilde format: ESC [ <number> ; <modifiers> ~ */
 const CSI_TILDE_RE = /^(\d+)(?:;(\d+))?~$/;
 
+function parseDecimal(value: string | undefined, description: string): number {
+  if (value === undefined) {
+    throw new Error(`Missing ${description}`);
+  }
+  return parseInt(value, 10);
+}
+
 function parseCsiSequence(seq: string): KeyInput {
   // Legacy Shift+Tab (CSI Z) — sent by tmux and some terminals
   if (seq === "Z") return { key: "shift+tab" };
@@ -132,8 +139,8 @@ function parseCsiSequence(seq: string): KeyInput {
   // CSI u format: codepoint [; modifiers] u
   let match = CSI_U_RE.exec(seq);
   if (match) {
-    const codepoint = parseInt(match[1]!, 10);
-    const modParam = match[2] ? parseInt(match[2]!, 10) : 0;
+    const codepoint = parseDecimal(match[1], "CSI-u codepoint");
+    const modParam = match[2] ? parseDecimal(match[2], "CSI-u modifier") : 0;
 
     const name = CODEPOINT_NAMES[codepoint];
     if (name) {
@@ -151,8 +158,13 @@ function parseCsiSequence(seq: string): KeyInput {
   // CSI letter format: [1 ; modifiers] <letter>
   match = CSI_LETTER_RE.exec(seq);
   if (match) {
-    const modParam = match[1] ? parseInt(match[1]!, 10) : 0;
-    const letter = match[2]!;
+    const modParam = match[1]
+      ? parseDecimal(match[1], "CSI-letter modifier")
+      : 0;
+    const letter = match[2];
+    if (letter === undefined) {
+      throw new Error("Missing CSI-letter key");
+    }
     const name = LETTER_NAMES[letter];
     if (name) return { key: withModifiers(modParam, name) };
   }
@@ -160,8 +172,10 @@ function parseCsiSequence(seq: string): KeyInput {
   // CSI tilde format: number [; modifiers] ~
   match = CSI_TILDE_RE.exec(seq);
   if (match) {
-    const num = parseInt(match[1]!, 10);
-    const modParam = match[2] ? parseInt(match[2]!, 10) : 0;
+    const num = parseDecimal(match[1], "CSI-tilde code");
+    const modParam = match[2]
+      ? parseDecimal(match[2], "CSI-tilde modifier")
+      : 0;
     const name = TILDE_NAMES[num];
     if (name) return { key: withModifiers(modParam, name) };
   }
@@ -240,7 +254,10 @@ export function decodeKeyEvents(data: string): KeyInput[] {
       continue;
     }
 
-    const char = data[index]!;
+    const char = data[index];
+    if (char === undefined) {
+      break;
+    }
     if (char === "\x1b") {
       const next = readCodePoint(data, index + 1);
       if (next && next.value !== "[") {
@@ -291,7 +308,10 @@ export function normalizeKey(key: string): string {
   const parts = key.toLowerCase().split("+");
   if (parts.length <= 1) return key.toLowerCase();
 
-  const base = parts[parts.length - 1]!;
+  const base = parts.at(-1);
+  if (!base) {
+    return key.toLowerCase();
+  }
   const mods = parts.slice(0, -1);
 
   const ordered: string[] = [];
@@ -306,8 +326,10 @@ export function normalizeKey(key: string): string {
  * Check whether a semantic key represents TextInput editing/navigation.
  *
  * Single-character semantic keys represent insertable text, while named keys
- * like `"enter"` and `"left"` represent editing/navigation actions. Modifier
- * combos (`ctrl+s`, `alt+x`) are NOT editing keys and should bubble.
+ * like `"enter"` and `"left"` represent editing/navigation actions. Most
+ * modifier combos (`ctrl+s`, `alt+x`) are NOT editing keys and should bubble,
+ * but TextInput consumes a small set of readline-style shortcuts for cursor
+ * movement and word deletion.
  */
 export function isEditingKey(key: string): boolean {
   if (key.length === 1) return true;
@@ -326,6 +348,14 @@ export function isEditingKey(key: string): boolean {
     "space",
     "plus",
     "shift+enter",
+    "ctrl+a",
+    "ctrl+e",
+    "alt+b",
+    "alt+f",
+    "ctrl+left",
+    "ctrl+right",
+    "ctrl+w",
+    "alt+d",
   ]);
 
   return editingKeys.has(key);

package/src/layout.ts

@@ -1,4 +1,4 @@
-import type { Node, ContainerProps, SizeValue } from "@cel-tui/types";
+import type { ContainerProps, Node, SizeValue } from "@cel-tui/types";
 import { layoutText } from "./text-layout.js";
 import { visibleWidth } from "./width.js";
 
@@ -33,7 +33,13 @@ function resolveSizeValue(
   if (value === undefined) return undefined;
   if (typeof value === "number") return value;
   const match = value.match(/^(\d+(?:\.\d+)?)%$/);
-  if (match) return Math.floor((parentSize * parseFloat(match[1]!)) / 100);
+  if (match) {
+    const percentage = match[1];
+    if (percentage === undefined) {
+      throw new Error(`Invalid percentage size: ${value}`);
+    }
+    return Math.floor((parentSize * parseFloat(percentage)) / 100);
+  }
   return undefined;
 }
 
@@ -46,6 +52,25 @@ function getProps(node: Node): ContainerProps | null {
   return node.props;
 }
 
+function requiredAt<T>(
+  items: readonly T[],
+  index: number,
+  description: string,
+): T {
+  const item = items[index];
+  if (item === undefined) {
+    throw new Error(`Missing ${description} at index ${index}`);
+  }
+  return item;
+}
+
+function getMainAxisGap(
+  gap: number,
+  justify: ContainerProps["justifyContent"] | undefined,
+): number {
+  return justify === "space-between" ? 0 : gap;
+}
+
 // --- Intrinsic size computation ---
 
 /**
@@ -93,6 +118,7 @@ function intrinsicMainSize(
   // If it's the cross axis, take the max of children on that axis.
   const props = node.props;
   const gap = props.gap ?? 0;
+  const mainAxisGap = getMainAxisGap(gap, props.justifyContent);
   const containerIsVertical = node.type === "vstack";
   const axisMatchesMain = isVertical === containerIsVertical;
 
@@ -108,7 +134,7 @@ function intrinsicMainSize(
     // Sum children along the main axis + gaps
     let total = 0;
     for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i]!;
+      const child = requiredAt(node.children, i, "child node");
       const cProps = getProps(child);
 
       let childMain: number;
@@ -131,7 +157,7 @@ function intrinsicMainSize(
         childMain = clamp(childMain, minMain, maxMain);
       }
       total += childMain;
-      if (i < node.children.length - 1) total += gap;
+      if (i < node.children.length - 1) total += mainAxisGap;
     }
     return total + padMain;
   }
@@ -167,12 +193,13 @@ function intrinsicMainSize(
       }
       wrapHeights.push(h);
     }
-    const wrapRows = assignWrapRows(wrapWidths, innerCross, gap);
+    const wrapRows = assignWrapRows(wrapWidths, innerCross, mainAxisGap);
     let total = 0;
     for (let ri = 0; ri < wrapRows.length; ri++) {
       let maxH = 0;
-      for (const idx of wrapRows[ri]!) {
-        if (wrapHeights[idx]! > maxH) maxH = wrapHeights[idx]!;
+      for (const idx of requiredAt(wrapRows, ri, "wrap row")) {
+        const height = requiredAt(wrapHeights, idx, "wrap height");
+        if (height > maxH) maxH = height;
       }
       total += maxH;
       if (ri < wrapRows.length - 1) total += gap;
@@ -230,7 +257,7 @@ function assignWrapRows(
   let rowWidth = 0;
 
   for (let i = 0; i < widths.length; i++) {
-    const w = widths[i]!;
+    const w = requiredAt(widths, i, "wrap width");
     if (currentRow.length === 0) {
       currentRow.push(i);
       rowWidth = w;
@@ -262,7 +289,8 @@ function largestRemainder(fractions: number[], total: number): number[] {
 
   for (const { i } of indices) {
     if (remainder <= 0) break;
-    floored[i]!++;
+    const value = requiredAt(floored, i, "rounded size");
+    floored[i] = value + 1;
     remainder--;
   }
 
@@ -339,6 +367,7 @@ function layoutWrapHStack(
   const gap = props.gap ?? 0;
   const align = props.alignItems ?? "stretch";
   const justify = props.justifyContent ?? "start";
+  const itemGap = getMainAxisGap(gap, justify);
 
   // Padding
   const padX = props.padding?.x ?? 0;
@@ -384,25 +413,26 @@ function layoutWrapHStack(
   }
 
   // Phase 2: Assign children to rows
-  const rows = assignWrapRows(baseWidths, innerW, gap);
+  const rows = assignWrapRows(baseWidths, innerW, itemGap);
 
   // Phase 3: Layout each row independently
   const layoutChildren: LayoutNode[] = [];
   let rowY = 0;
 
   for (let ri = 0; ri < rows.length; ri++) {
-    const rowIdx = rows[ri]!;
-    const rowGapTotal = gap * (rowIdx.length - 1);
+    const rowIdx = requiredAt(rows, ri, "wrap row");
+    const rowGapTotal = itemGap * (rowIdx.length - 1);
     const rowAvail = innerW - rowGapTotal;
 
     // Compute fixed and flex totals for this row
     let fixedMain = 0;
     let totalFlex = 0;
     for (const idx of rowIdx) {
-      if (flexValues[idx]! > 0) {
-        totalFlex += flexValues[idx]!;
+      const flexValue = requiredAt(flexValues, idx, "flex value");
+      if (flexValue > 0) {
+        totalFlex += flexValue;
       } else {
-        fixedMain += baseWidths[idx]!;
+        fixedMain += requiredAt(baseWidths, idx, "base width");
       }
     }
 
@@ -413,17 +443,25 @@ function layoutWrapHStack(
     if (totalFlex > 0) {
       const flexPositions: number[] = [];
       for (let ci = 0; ci < rowIdx.length; ci++) {
-        if (flexValues[rowIdx[ci]!]! > 0) flexPositions.push(ci);
+        const rowIndex = requiredAt(rowIdx, ci, "wrap row index");
+        if (requiredAt(flexValues, rowIndex, "flex value") > 0) {
+          flexPositions.push(ci);
+        }
       }
-      const rawSizes = flexPositions.map(
-        (ci) => (flexValues[rowIdx[ci]!]! / totalFlex) * flexSpace,
-      );
+      const rawSizes = flexPositions.map((ci) => {
+        const rowIndex = requiredAt(rowIdx, ci, "wrap row index");
+        return (
+          (requiredAt(flexValues, rowIndex, "flex value") / totalFlex) *
+          flexSpace
+        );
+      });
       const rounded = largestRemainder(rawSizes, flexSpace);
 
       for (let fi = 0; fi < flexPositions.length; fi++) {
-        const ci = flexPositions[fi]!;
-        let size = rounded[fi]!;
-        const cProps = getProps(children[rowIdx[ci]!]!);
+        const ci = requiredAt(flexPositions, fi, "flex position");
+        let size = requiredAt(rounded, fi, "rounded flex size");
+        const rowIndex = requiredAt(rowIdx, ci, "wrap row index");
+        const cProps = getProps(requiredAt(children, rowIndex, "child node"));
         if (cProps) {
           size = clamp(size, cProps.minWidth ?? 0, cProps.maxWidth ?? Infinity);
         }
@@ -434,20 +472,22 @@ function layoutWrapHStack(
     // Non-flex children keep their base width
     for (let ci = 0; ci < rowIdx.length; ci++) {
       if (childWidths[ci] === undefined) {
-        childWidths[ci] = baseWidths[rowIdx[ci]!]!;
+        const rowIndex = requiredAt(rowIdx, ci, "wrap row index");
+        childWidths[ci] = requiredAt(baseWidths, rowIndex, "base width");
       }
     }
 
     // Row height = max cross size of children in this row
     let rowHeight = 0;
     for (const idx of rowIdx) {
-      if (crossSizes[idx]! > rowHeight) rowHeight = crossSizes[idx]!;
+      const crossSize = requiredAt(crossSizes, idx, "cross size");
+      if (crossSize > rowHeight) rowHeight = crossSize;
     }
 
     // justifyContent: compute main-axis starting offset
     let totalUsedWidth = rowGapTotal;
     for (let ci = 0; ci < rowIdx.length; ci++) {
-      totalUsedWidth += childWidths[ci]!;
+      totalUsedWidth += requiredAt(childWidths, ci, "child width");
     }
     const remainingMain = Math.max(0, innerW - totalUsedWidth);
 
@@ -470,17 +510,17 @@ function layoutWrapHStack(
     // Position children in this row
     let xOffset = mainStart;
     for (let ci = 0; ci < rowIdx.length; ci++) {
-      const idx = rowIdx[ci]!;
-      const childW = childWidths[ci]!;
+      const idx = requiredAt(rowIdx, ci, "wrap row index");
+      const childW = requiredAt(childWidths, ci, "child width");
 
       // Cross-axis sizing: stretch fills row height, others keep their size
       let childH: number;
       if (align === "stretch") {
-        const cProps = getProps(children[idx]!);
+        const cProps = getProps(requiredAt(children, idx, "child node"));
         const explicitH = resolveSizeValue(cProps?.height, innerH);
         childH = explicitH ?? rowHeight;
       } else {
-        childH = crossSizes[idx]!;
+        childH = requiredAt(crossSizes, idx, "cross size");
       }
 
       // Cross-axis alignment within the row
@@ -495,14 +535,20 @@ function layoutWrapHStack(
       const childY = innerY + rowY + crossOffset;
 
       layoutChildren.push(
-        layoutNode(children[idx]!, childX, childY, childW, childH),
+        layoutNode(
+          requiredAt(children, idx, "child node"),
+          childX,
+          childY,
+          childW,
+          childH,
+        ),
       );
 
       xOffset += childW;
       if (ci < rowIdx.length - 1) {
-        xOffset += gap;
+        xOffset += itemGap;
         if (betweenGaps) {
-          xOffset += betweenGaps[ci]!;
+          xOffset += requiredAt(betweenGaps, ci, "justified gap");
         }
       }
     }
@@ -572,7 +618,9 @@ function layoutNode(
 
   // Gap
   const gap = props.gap ?? 0;
-  const totalGap = gap * (children.length - 1);
+  const justify = props.justifyContent ?? "start";
+  const mainAxisGap = getMainAxisGap(gap, justify);
+  const totalGap = mainAxisGap * (children.length - 1);
   const mainAvail = (isVertical ? innerH : innerW) - totalGap;
 
   // --- Measure phase: compute each child's main-axis and cross-axis size ---
@@ -675,8 +723,9 @@ function layoutNode(
     const rounded = largestRemainder(rawSizes, flexSpace);
 
     for (let i = 0; i < flexInfos.length; i++) {
-      let size = rounded[i]!;
-      const cProps = getProps(flexInfos[i]!.node);
+      let size = requiredAt(rounded, i, "rounded flex size");
+      const flexInfo = requiredAt(flexInfos, i, "flex child info");
+      const cProps = getProps(flexInfo.node);
       if (cProps) {
         const minMain = isVertical
           ? (cProps.minHeight ?? 0)
@@ -686,7 +735,7 @@ function layoutNode(
           : (cProps.maxWidth ?? Infinity);
         size = clamp(size, minMain, maxMain);
       }
-      flexInfos[i]!.mainSize = size;
+      flexInfo.mainSize = size;
     }
   }
 
@@ -700,7 +749,6 @@ function layoutNode(
   const remainingMain = Math.max(0, mainInner - totalContent);
 
   // justifyContent: compute main-axis starting offset and per-gap extra space
-  const justify = props.justifyContent ?? "start";
   let mainStart = 0;
   let betweenGaps: number[] | null = null;
 
@@ -722,7 +770,7 @@ function layoutNode(
   let mainOffset = mainStart;
 
   for (let i = 0; i < infos.length; i++) {
-    const info = infos[i]!;
+    const info = requiredAt(infos, i, "child layout info");
 
     // Cross-axis alignment
     let crossOffset = 0;
@@ -742,9 +790,9 @@ function layoutNode(
 
     mainOffset += info.mainSize;
     if (i < infos.length - 1) {
-      mainOffset += gap;
+      mainOffset += mainAxisGap;
       if (betweenGaps) {
-        mainOffset += betweenGaps[i]!;
+        mainOffset += requiredAt(betweenGaps, i, "justified gap");
       }
     }
   }

package/src/paint.ts

@@ -1,6 +1,5 @@
 import type { Color, StyleProps, TextInputProps } from "@cel-tui/types";
-import type { Cell } from "./cell-buffer.js";
-import { CellBuffer } from "./cell-buffer.js";
+import type { Cell, CellBuffer } from "./cell-buffer.js";
 import type { LayoutNode, Rect } from "./layout.js";
 import { getMaxScrollOffset } from "./scroll.js";
 import { layoutText } from "./text-layout.js";
@@ -233,23 +232,30 @@ function paintScrollbar(
 ): void {
   const { rect, children } = ln;
   const isVertical = ln.node.type === "vstack";
+  const props =
+    ln.node.type === "vstack" || ln.node.type === "hstack"
+      ? ln.node.props
+      : null;
+  if (!props) return;
 
   if (isVertical) {
-    // Compute total content height from children
+    // Compute total scrollable height from children plus bottom padding.
+    // Child positions already include top padding, so add only the trailing pad.
     let contentHeight = 0;
     for (const child of children) {
       const childBottom = child.rect.y + child.rect.height - rect.y;
       if (childBottom > contentHeight) contentHeight = childBottom;
     }
+    const scrollHeight = contentHeight + (props.padding?.y ?? 0);
     const viewportH = rect.height;
-    if (contentHeight <= viewportH) return; // no scrollbar needed
+    if (scrollHeight <= viewportH) return; // no scrollbar needed
 
     // Thumb size and position
     const thumbSize = Math.max(
       1,
-      Math.round((viewportH / contentHeight) * viewportH),
+      Math.round((viewportH / scrollHeight) * viewportH),
     );
-    const maxOffset = contentHeight - viewportH;
+    const maxOffset = scrollHeight - viewportH;
     const thumbPos =
       maxOffset > 0
         ? Math.round((scrollOffset / maxOffset) * (viewportH - thumbSize))
@@ -277,14 +283,15 @@ function paintScrollbar(
       const childRight = child.rect.x + child.rect.width - rect.x;
       if (childRight > contentWidth) contentWidth = childRight;
     }
+    const scrollWidth = contentWidth + (props.padding?.x ?? 0);
     const viewportW = rect.width;
-    if (contentWidth <= viewportW) return;
+    if (scrollWidth <= viewportW) return;
 
     const thumbSize = Math.max(
       1,
-      Math.round((viewportW / contentWidth) * viewportW),
+      Math.round((viewportW / scrollWidth) * viewportW),
     );
-    const maxOffset = contentWidth - viewportW;
+    const maxOffset = scrollWidth - viewportW;
     const thumbPos =
       maxOffset > 0
         ? Math.round((scrollOffset / maxOffset) * (viewportW - thumbSize))
@@ -414,8 +421,11 @@ function paintText(
 
   // Paint lines, clipped to rect (grapheme-aware)
   for (let row = 0; row < textLayout.lineCount && row < h; row++) {
-    const line = textLayout.lines[row]!.text;
-    paintLineGraphemes(line, x, y + row, w, clipRect, props, buf);
+    const line = textLayout.lines[row];
+    if (!line) {
+      break;
+    }
+    paintLineGraphemes(line.text, x, y + row, w, clipRect, props, buf);
   }
 }
 
@@ -494,8 +504,11 @@ function paintTextInput(
   for (let row = 0; row < ch; row++) {
     const lineIdx = scrollOffset + row;
     if (lineIdx >= textLayout.lineCount) break;
-    const line = textLayout.lines[lineIdx]!.text;
-    paintLineGraphemes(line, cx, cy + row, cw, clipRect, props, buf);
+    const line = textLayout.lines[lineIdx];
+    if (!line) {
+      break;
+    }
+    paintLineGraphemes(line.text, cx, cy + row, cw, clipRect, props, buf);
   }
 
   // Paint cursor if focused — invert colors at cursor position so it's
@@ -536,8 +549,6 @@ function paintTextInput(
 
 // --- Framework-managed state ---
 
-import type { ContainerProps } from "@cel-tui/types";
-
 /**
  * TextInput state is keyed on the `onChange` function reference, which is
  * a stable identity across re-renders (the app provides the same closure).

package/src/primitives/text-input.ts

@@ -12,9 +12,13 @@ import type { TextInputNode, TextInputProps } from "@cel-tui/types";
  * responds to mouse wheel automatically.
  *
  * TextInput is always focusable. When focused, it consumes insertable text
- * plus editing/navigation keys (arrows, backspace, delete, Enter, Tab).
- * Modifier combos (e.g., `ctrl+s`) and non-insertable control keys bubble
- * up to ancestor `onKeyPress` handlers.
+ * plus editing/navigation keys (arrows, backspace, delete, Enter, Tab),
+ * along with a small set of readline-style shortcuts: `ctrl+a` / `ctrl+e`,
+ * `alt+b` / `alt+f`, `ctrl+left` / `ctrl+right`, `ctrl+w`, and `alt+d`.
+ * Word movement and deletion use whitespace-delimited boundaries, and
+ * `up` / `down` follow visual wrapped lines. Other modifier combos (e.g.,
+ * `ctrl+s`) and non-insertable control keys bubble up to ancestor
+ * `onKeyPress` handlers.
  *
  * Use `onKeyPress` to intercept keys before editing. The handler receives a
  * normalized semantic key string; inserted text preserves the original

package/src/scroll.ts

@@ -1,3 +1,4 @@
+import type { ContainerProps } from "@cel-tui/types";
 import type { LayoutNode } from "./layout.js";
 import { layoutText } from "./text-layout.js";
 
@@ -5,8 +6,11 @@ function isVerticalScrollTarget(target: LayoutNode): boolean {
   return target.node.type === "vstack" || target.node.type === "textinput";
 }
 
-function getScrollTargetProps(target: LayoutNode): Record<string, any> {
-  return target.node.props as Record<string, any>;
+function getScrollTargetProps(target: LayoutNode): ContainerProps {
+  if (target.node.type === "text") {
+    throw new Error("Text nodes cannot be scroll targets");
+  }
+  return target.node.props;
 }
 
 function getScrollViewportMainAxisSize(target: LayoutNode): number {
@@ -26,7 +30,7 @@ function getScrollViewportMainAxisSize(target: LayoutNode): number {
  */
 export function getScrollStep(target: LayoutNode): number {
   const rawStep = getScrollTargetProps(target).scrollStep;
-  if (Number.isFinite(rawStep) && rawStep > 0) {
+  if (typeof rawStep === "number" && Number.isFinite(rawStep) && rawStep > 0) {
     return Math.max(1, Math.floor(rawStep));
   }
 
@@ -55,9 +59,9 @@ export function getMaxScrollOffset(target: LayoutNode): number {
   }
 
   const isVertical = target.node.type === "vstack";
-  const props = target.node.type !== "text" ? target.node.props : null;
-  const padX = (props as any)?.padding?.x ?? 0;
-  const padY = (props as any)?.padding?.y ?? 0;
+  const props = getScrollTargetProps(target);
+  const padX = props.padding?.x ?? 0;
+  const padY = props.padding?.y ?? 0;
 
   if (isVertical) {
     let contentHeight = 0;