@solidrt/components 0.0.11 → 0.0.14

package/AGENTS.md

@@ -35,6 +35,14 @@ Most components group props into two objects, plus top-level event handlers:
 - `Image` - fetches/decodes/uploads an image: `src: string | Uint8Array`.
 - `TextInput` - single-line input; `value`/`onInput`/`onSubmit`, controlled or
   uncontrolled, plus `placeholder`, `maxLength`, `autoFocus`, `disabled`.
+- `ScrollView` - scrollable region; vertical by default, `horizontal` to flip.
+  Wheel + drag, no momentum yet. Backed by `createScroll` from
+  `@solidrt/core/scroll` (headless offset+clamp geometry).
+- `Pressable` - pressable box; `onPress` on a primary press released inside,
+  `disabled` opts out. `children`/`style` can be functions of `{ pressed,
+  hovered }`. No pointer capture: a drag out cancels via onPointerLeave.
+- `Button` - themed Pressable: accent box + label (string/number child), scales
+  on press (via reactive style); colors from `theme.color.primary`/`onPrimary`.
 - `SafeArea` - pads children clear of system UI (notches, status bars); top and
   bottom on by default, pass `false`/a number per edge.
 - `theme` / `setTheme` - shared appearance (colors, spacing, radii, font sizes);

package/README.md

@@ -217,6 +217,82 @@ Top and bottom insets are applied by default. Pass `false` to opt out of an edge
 | `right`    | `boolean \| number` | `false` | Apply right inset. A number sets the minimum padding.  |
 | `children` | `any`               | -       | Content to render inside the safe area.                |
 
+### ScrollView
+
+A scrollable region. Scrolls vertically by default; pass `horizontal` to scroll the other axis instead. Both the wheel and dragging scroll the content. There is no momentum/fling yet, and (with no pointer capture) a drag that leaves the box ends the gesture.
+
+```jsx
+import { ScrollView, Text } from "@solidrt/components"
+import { For } from "@solidrt/core"
+
+<ScrollView layout={{ height: 300 }} style={{ backgroundColor: "#111", borderRadius: 8 }}>
+  <For each={items()}>{(item) => <Text style={{ color: "#fff" }}>{item}</Text>}</For>
+</ScrollView>
+```
+
+**Props**
+
+Accepts all pointer event props, plus:
+
+| Prop         | Type                             | Description                                  |
+| ------------ | -------------------------------- | -------------------------------------------- |
+| `horizontal` | `boolean`                        | Scroll the horizontal axis instead of vertical. |
+| `layout`     | `LayoutProps`                    | Layout of the outer box (e.g. `height`).     |
+| `style`      | `StyleProps`                     | Background, border, and transform.           |
+| `ref`        | `(node: { id: number }) => void` | Reference to the outer box.                   |
+| `children`   | `any`                            | Scrollable content.                          |
+
+The underlying geometry primitive `createScroll` is available from `@solidrt/core/scroll` for building custom scrollers.
+
+### Pressable
+
+A pressable box. `onPress` fires on a primary-button press released over the box; a drag out of the box (or a non-primary button) does not fire it. `children` and `style` may each be a function of the `{ pressed, hovered }` state, so the box can restyle on press/hover without extra signals.
+
+```jsx
+import { Pressable, Text } from "@solidrt/components"
+
+<Pressable
+  onPress={() => setCount((c) => c + 1)}
+  layout={{ padding: 12 }}
+  style={(s) => ({ backgroundColor: s.pressed ? "#333" : "#222", borderRadius: 8 })}
+>
+  <Text style={{ color: "#fff" }}>Tap me</Text>
+</Pressable>
+```
+
+**Props**
+
+Accepts all pointer event props, plus:
+
+| Prop       | Type                                                | Description                                  |
+| ---------- | --------------------------------------------------- | -------------------------------------------- |
+| `onPress`  | `() => void`                                        | Fires on a completed press.                  |
+| `disabled` | `boolean`                                           | Takes no pointer events when true.           |
+| `layout`   | `LayoutProps`                                        | Layout properties.                           |
+| `style`    | `StyleProps \| (state) => StyleProps`               | Paint properties, or a function of state.    |
+| `children` | `any \| (state) => any`                             | Content, or a function of state.             |
+| `ref`      | `(node: { id: number }) => void`                    | Node reference.                              |
+
+### Button
+
+Themed convenience over `Pressable`: a padded, centered, accent-colored box with a label that scales slightly on press. A string or number child is rendered as the themed label; any other child renders as-is. Colors come from the theme (`color.primary`, `color.onPrimary`); override per-button via `style`.
+
+```jsx
+import { Button } from "@solidrt/components"
+
+<Button onPress={save} layout={{ minWidth: 120 }}>Save</Button>
+```
+
+**Props**
+
+| Prop       | Type          | Description                                    |
+| ---------- | ------------- | ---------------------------------------------- |
+| `onPress`  | `() => void`  | Fires on a completed press.                    |
+| `disabled` | `boolean`     | Mutes colors and ignores presses.              |
+| `layout`   | `LayoutProps` | Overrides padding/sizing.                      |
+| `style`    | `StyleProps`  | Overrides background, radius, etc.             |
+| `children` | `any`         | Label text, or custom content.                 |
+
 ## License
 
 MIT. Copyright (c) 2026 Antoine van Wel.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -13,7 +13,7 @@
     "AGENTS.md"
   ],
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-beta.14",
-    "@solidrt/core": "0.0.11"
+    "@solidjs/signals": "2.0.0-beta.15",
+    "@solidrt/core": "0.0.0"
   }
 }

package/src/button.tsx

@@ -0,0 +1,62 @@
+import { Show } from "@solidrt/core"
+import { Pressable, type PressState } from "./pressable"
+import { theme } from "./theme"
+import type { LayoutProps } from "@solidrt/core"
+import type { StyleProps } from "./types"
+
+export interface ButtonProps {
+  // A string/number is rendered as the themed label; anything else is rendered
+  // as-is, so a button can hold custom content (an icon, a row, ...).
+  children?: any
+  onPress?: () => void
+  disabled?: boolean
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// Themed convenience over Pressable: a padded, centered, accent-colored box with
+// a label. Press feedback is a slight scale, driven through Pressable's reactive
+// style so no nodes are recreated on press. Override the box via style and the
+// padding/sizing via layout.
+export function Button(props: ButtonProps) {
+  let bg = () => props.style?.backgroundColor ?? (props.disabled ? theme.color.surface : theme.color.primary)
+  let radius = () => props.style?.borderRadius ?? theme.radius.sm
+  let label = () => (props.disabled ? theme.color.textMuted : theme.color.onPrimary)
+  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+
+  return (
+    <Pressable
+      onPress={props.onPress}
+      disabled={props.disabled}
+      layout={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingTop: theme.spacing.sm,
+        paddingBottom: theme.spacing.sm,
+        paddingLeft: theme.spacing.md,
+        paddingRight: theme.spacing.md,
+        ...props.layout,
+      }}
+      style={(s: PressState) => ({
+        ...props.style,
+        backgroundColor: bg(),
+        borderRadius: radius(),
+        // Always a number: a scale that flips from a number back to undefined
+        // hits the transform decoder, which rejects null. Multiply so a
+        // caller-set scale is preserved under the press feedback.
+        scale: (props.style?.scale ?? 1) * (s.pressed ? 0.97 : 1),
+      })}
+    >
+      <Show when={isText()} fallback={props.children}>
+        <text
+          color={label()}
+          fontSize={theme.text.body.size}
+          lineHeight={theme.text.body.lineHeight}
+        >
+          {props.children}
+        </text>
+      </Show>
+    </Pressable>
+  )
+}

package/src/image.tsx

@@ -1,5 +1,6 @@
 import { createSignal, createEffect, onCleanup } from "@solidjs/signals"
-import { decodeImage, createTexture } from "@solidrt/core/gpu"
+import { createTexture, destroyTexture } from "@solidrt/core/gpu"
+import { decodeImage } from "@solidrt/core/image"
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
@@ -10,13 +11,14 @@ export interface ImageProps extends PointerProps {
 }
 
 //TODO onLoad, onError
-//TODO release texture in onCleanup
 export function Image(props: ImageProps) {
   let [res, setRes] = createSignal<{ id: number; width: number; height: number }>()
 
   // Load (and decode) whenever src changes. A url is fetched; bytes are used
   // directly. The async result is pushed into the signal so the texture shows
-  // once ready; a stale flag drops results from a superseded src.
+  // once ready; a stale flag drops results from a superseded src. The old
+  // texture is destroyed before installing the new one; on unmount the current
+  // texture is destroyed by onCleanup below.
   createEffect(
     () => props.src,
     (source) => {
@@ -33,7 +35,9 @@ export function Image(props: ImageProps) {
         if (stale) return
         let { data, width, height } = decodeImage(bytes)
         let id = createTexture(data, width, height)
+        let old = res()
         setRes({ id, width, height })
+        if (old !== undefined) destroyTexture(old.id)
       })()
 
       return () => {
@@ -52,7 +56,8 @@ export function Image(props: ImageProps) {
   let texH = () => (typeof props.layout?.height === "number" ? props.layout.height : undefined)
 
   onCleanup(() => {
-    //TODO release texture
+    let r = res()
+    if (r !== undefined) destroyTexture(r.id)
   })
 
   return (

package/src/index.ts

@@ -4,5 +4,10 @@ export { Text, type TextProps } from "./text"
 export { Image, type ImageProps } from "./image"
 export { SafeArea } from "./safe-area"
 export { TextInput, type TextInputProps } from "./text-input"
+export { ScrollView, type ScrollViewProps } from "./scroll-view"
+export { Pressable, type PressableProps, type PressState } from "./pressable"
+export { Button, type ButtonProps } from "./button"
+export { Portal, type PortalProps } from "./portal"
+export { Modal, type ModalProps } from "./modal"
 export { theme, setTheme, type Theme } from "./theme"
 export type { StyleProps, TextLayoutProps } from "./types"

package/src/modal.tsx

@@ -0,0 +1,58 @@
+import { createPortal } from "@solidrt/core"
+import type { Color, PointerEvent } from "@solidrt/core"
+import { theme } from "./theme"
+
+export interface ModalProps {
+  // Called when the backdrop (the area around the content) is pressed, unless
+  // `dismissable` is false.
+  onClose?: () => void
+  // The modal content, centered over the backdrop.
+  children?: any
+  // Scrim color behind the content. Defaults to the theme scrim; pass
+  // "transparent" for no dim.
+  backdropColor?: Color
+  // Whether pressing the backdrop calls onClose. Defaults to true.
+  dismissable?: boolean
+}
+
+/**
+ * A centered overlay rendered at the window root via core's createPortal, so it
+ * escapes the layout and stacking of its surrounding tree. It fills the window
+ * with a dimming backdrop and centers `children` on top. Control visibility by
+ * mounting/unmounting it, e.g. `<Show when={open()}><Modal .../></Show>`: the
+ * portal's onCleanup removes it when the surrounding scope disposes.
+ *
+ * Pressing the backdrop calls `onClose`; pressing the content does not. This
+ * works because pointer events dispatch to the whole hit path with no
+ * stopPropagation, so the content is kept a sibling of the backdrop (not a
+ * child): a press on the content never has the backdrop on its path.
+ */
+export function Modal(props: ModalProps) {
+  let dismiss = (_e: PointerEvent) => {
+    if (props.dismissable !== false) props.onClose?.()
+  }
+
+  return createPortal(
+    <view
+      position="absolute"
+      top={0}
+      left={0}
+      right={0}
+      bottom={0}
+      alignItems="center"
+      justifyContent="center"
+    >
+      <view
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        onPointerDown={dismiss}
+      >
+        <d-rect color={props.backdropColor ?? theme.color.scrim} />
+      </view>
+      {props.children}
+    </view> as any,
+  )
+}

package/src/portal.tsx

@@ -0,0 +1,21 @@
+import { createPortal } from "@solidrt/core"
+
+export interface PortalProps {
+  children?: any
+  // Where to mount the content. A node, typically captured from another
+  // element's `ref`. Defaults to the window root.
+  mount?: { id: number }
+}
+
+/**
+ * Renders its child somewhere other than its lexical position: by default at the
+ * window root, so overlays (modals, menus, tooltips) escape the clipping and
+ * stacking of their surrounding layout. Thin JSX wrapper over core's
+ * createPortal; the child should be a single element positioned absolutely
+ * (`position="absolute"`), since it is inserted into the window's flex root.
+ */
+export function Portal(props: PortalProps) {
+  // A JSX element's runtime value is the built node; createPortal relocates it.
+  createPortal(props.children, props.mount as any)
+  return undefined
+}

package/src/pressable.tsx

@@ -0,0 +1,92 @@
+import { createSignal } from "@solidjs/signals"
+import type { LayoutProps, PointerEvent, PointerProps } from "@solidrt/core"
+import type { StyleProps } from "./types"
+
+export type PressState = { pressed: boolean; hovered: boolean }
+
+export interface PressableProps extends PointerProps {
+  // children and style may be functions of the press state, so a caller can
+  // restyle on press/hover without wiring their own signals.
+  children?: any | ((state: PressState) => any)
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps | ((state: PressState) => StyleProps)
+  onPress?: () => void
+  disabled?: boolean
+}
+
+// A pressable box. onPress fires on a primary-button down followed by an up over
+// the same node. Because there is no pointer capture, a drag that leaves the box
+// fires onPointerLeave, which cancels the press (no onPress) and clears hover --
+// this also covers the no-up-outside case. Non-primary buttons (right/middle) do
+// not start a press. When disabled, it takes no pointer events at all.
+export function Pressable(props: PressableProps) {
+  let [pressed, setPressed] = createSignal(false)
+  let [hovered, setHovered] = createSignal(false)
+
+  let state = (): PressState => ({ pressed: pressed(), hovered: hovered() })
+  let style = () => (typeof props.style === "function" ? props.style(state()) : props.style)
+  let kids = () => (typeof props.children === "function" ? props.children(state()) : props.children)
+
+  let handleDown = (e: PointerEvent) => {
+    if (e.button != null && e.button !== 0) return
+    setPressed(true)
+    props.onPointerDown?.(e)
+  }
+  let handleUp = (e: PointerEvent) => {
+    if (pressed()) props.onPress?.()
+    setPressed(false)
+    props.onPointerUp?.(e)
+  }
+  let handleEnter = (e: PointerEvent) => {
+    setHovered(true)
+    props.onPointerEnter?.(e)
+  }
+  let handleLeave = (e: PointerEvent) => {
+    setHovered(false)
+    setPressed(false)
+    props.onPointerLeave?.(e)
+  }
+
+  let hasBackground = () => style()?.backgroundColor != null || style()?.borderRadius != null
+  let hasBorder = () => (style()?.borderWidth ?? 0) > 0
+
+  return (
+    <view
+      ref={props.ref}
+      {...props.layout}
+      x={style()?.x}
+      y={style()?.y}
+      scale={style()?.scale}
+      rotate={style()?.rotate}
+      onPointerEnter={handleEnter}
+      onPointerLeave={handleLeave}
+      onPointerDown={handleDown}
+      onPointerUp={handleUp}
+      onPointerMove={props.onPointerMove}
+      onWheel={props.onWheel}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      onKeyDown={props.onKeyDown}
+      onKeyUp={props.onKeyUp}
+      onTextInput={props.onTextInput}
+      pointerEvents={props.disabled ? "none" : props.pointerEvents}
+    >
+      {hasBackground() ? (
+        <d-rect
+          color={style()?.backgroundColor ?? "transparent"}
+          radius={style()?.borderRadius}
+        />
+      ) : null}
+      {kids()}
+      {hasBorder() ? (
+        <d-rect
+          drawStyle="stroke"
+          color={style()?.borderColor ?? "transparent"}
+          strokeWidth={style()?.borderWidth}
+          radius={style()?.borderRadius}
+        />
+      ) : null}
+    </view>
+  )
+}

package/src/safe-area.tsx

@@ -1,5 +1,4 @@
-import { createSignal } from "@solidjs/signals"
-import { onResize } from "@solidrt/core"
+import { safeArea } from "@solidrt/core"
 
 export function SafeArea(props: {
   top?: boolean | number
@@ -9,21 +8,12 @@ export function SafeArea(props: {
   relative?: boolean
   children?: any
 }) {
-  let [insets, setInsets] = createSignal({ top: 0, bottom: 0, left: 0, right: 0 })
-  onResize(({ width, height, safeArea }) => {
-    setInsets({
-      top: safeArea.top,
-      left: safeArea.left,
-      bottom: height - safeArea.bottom,
-      right: width - safeArea.right,
-    })
-  })
   let pad = (edge: "top" | "bottom" | "left" | "right") => {
     let defaultOn = edge === "top" || edge === "bottom"
     let p = props[edge] ?? defaultOn
     if (p === false) return 0
-    if (p === true) return insets()[edge]
-    return Math.max(insets()[edge], p as number)
+    if (p === true) return safeArea()[edge]
+    return Math.max(safeArea()[edge], p as number)
   }
   return (
     <view

package/src/scroll-view.tsx

@@ -0,0 +1,106 @@
+import { createScroll } from "@solidrt/core/scroll"
+import type { LayoutProps, PointerEvent, PointerProps, WheelEvent } from "@solidrt/core"
+import type { StyleProps } from "./types"
+
+export interface ScrollViewProps extends PointerProps {
+  children?: any
+  ref?: (node: { id: number }) => void
+  layout?: LayoutProps
+  style?: StyleProps
+  /** Scroll the horizontal axis instead of the vertical one. */
+  horizontal?: boolean
+}
+
+// A scrollable region. The outer box carries layout/style/transform and the
+// optional background and border; inside it a clipping viewport (overflow
+// hidden) holds a content wrapper that takes the children's natural size. The
+// offset from createScroll translates the content via scrollX/scrollY. Wheel and
+// drag map to scroll deltas: positive moves the content up/left, so dragging a
+// finger up reveals content below (natural scrolling). There is no momentum yet;
+// a fling stops when the finger lifts. With no pointer capture, a drag that
+// leaves the box stops scrolling (pointerLeave ends the gesture).
+export function ScrollView(props: ScrollViewProps) {
+  let viewport: { id: number } | undefined
+  let content: { id: number } | undefined
+
+  let scroll = createScroll(
+    () => viewport,
+    () => content,
+    { axis: props.horizontal ? "horizontal" : "vertical" },
+  )
+
+  // Last pointer position during an active drag, in window coordinates. null
+  // when no drag is in progress.
+  let last: { x: number; y: number } | null = null
+
+  let onPointerDown = (e: PointerEvent) => {
+    last = { x: e.clientX, y: e.clientY }
+  }
+  let onPointerMove = (e: PointerEvent) => {
+    if (!last) return
+    scroll.scrollBy(last.x - e.clientX, last.y - e.clientY)
+    last = { x: e.clientX, y: e.clientY }
+  }
+  let endDrag = () => {
+    last = null
+  }
+  let onWheel = (e: WheelEvent) => {
+    scroll.scrollBy(e.deltaX, e.deltaY)
+  }
+
+  let direction = () => (props.horizontal ? "row" : "column")
+  let hasBackground = () =>
+    props.style?.backgroundColor != null || props.style?.borderRadius != null
+  let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
+
+  return (
+    <view
+      ref={props.ref}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+      onPointerEnter={props.onPointerEnter}
+      onPointerLeave={props.onPointerLeave}
+      onPointerDown={props.onPointerDown}
+      onPointerUp={props.onPointerUp}
+      onPointerMove={props.onPointerMove}
+      onWheel={props.onWheel}
+      pointerEvents={props.pointerEvents}
+    >
+      {hasBackground() ? (
+        <d-rect
+          color={props.style?.backgroundColor ?? "transparent"}
+          radius={props.style?.borderRadius}
+        />
+      ) : null}
+      <view
+        ref={(n: { id: number }) => (viewport = n)}
+        flex={1}
+        overflow="hidden"
+        clipRadius={props.style?.borderRadius}
+        flexDirection={direction()}
+        scrollX={scroll.offset().x}
+        scrollY={scroll.offset().y}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endDrag}
+        onPointerLeave={endDrag}
+        onWheel={onWheel}
+      >
+        <view ref={(n: { id: number }) => (content = n)} flexShrink={0} flexDirection={direction()}>
+          {props.children}
+        </view>
+      </view>
+      {hasBorder() ? (
+        <d-rect
+          drawStyle="stroke"
+          color={props.style?.borderColor ?? "transparent"}
+          strokeWidth={props.style?.borderWidth}
+          radius={props.style?.borderRadius}
+        />
+      ) : null}
+    </view>
+  )
+}

package/src/text-input.tsx

@@ -1,9 +1,14 @@
-import { createSignal, flush, onCleanup } from "@solidjs/signals"
-import { getBoundingBox, measureText, onLayout, setFocus } from "@solidrt/core"
+import { createEffect, createSignal, onCleanup } from "@solidjs/signals"
+import { setFocus } from "@solidrt/core"
+import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
 import type { LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { theme } from "./theme"
 
+// Caret thickness. Shared so the drawn caret and the scroll offset's reserved
+// edge column cannot drift apart.
+const CARET_WIDTH = 1
+
 export interface TextInputProps {
   value?: string
   defaultValue?: string
@@ -21,28 +26,38 @@ export interface TextInputProps {
   style?: StyleProps
 }
 
-// V1: single-line, caret-at-end only, no selection, no mid-string editing.
-// Printable text arrives via onTextInput (post-IME commit). onKeyDown handles
-// Backspace, Enter, Escape. Outside-click-to-blur is the caller's job.
+// Single-line. The caret moves through the text (Left/Right/Home/End), edits
+// happen at the caret, and the inner box scrolls to keep it in view. Printable
+// text arrives via onTextInput (post-IME commit). onKeyDown handles caret
+// movement, Backspace/Delete, Enter, Escape. Range selection (shift-movement,
+// highlight, click-to-position) is not wired yet. Outside-click-to-blur is the
+// caller's job.
 export function TextInput(props: TextInputProps) {
-  let [internalValue, setInternalValue] = createSignal(props.defaultValue ?? "")
   let [focused, setFocused] = createSignal(false)
   let [caretOn, setCaretOn] = createSignal(true)
-  let [viewportWidth, setViewportWidth] = createSignal(0)
 
   let node: { id: number } | undefined
   let viewport: { id: number } | undefined
   let blinkId: any = null
 
-  let value = () => props.value ?? internalValue()
-
-  let commit = (next: string) => {
-    if (props.maxLength != null && next.length > props.maxLength) {
-      next = next.slice(0, props.maxLength)
-    }
-    if (props.value == null) setInternalValue(next)
-    props.onInput?.(next)
-  }
+  let buffer = createTextBuffer({
+    value: () => props.value,
+    defaultValue: props.defaultValue,
+    onInput: (v) => props.onInput?.(v),
+    maxLength: () => props.maxLength,
+  })
+  let value = buffer.value
+
+  // autoFocus runs in an effect, not the ref: setFocus fires onFocus and reads
+  // the node's onTextInput handler to toggle the keyboard, and those handlers
+  // are only registered after the element's props are applied. The ref can fire
+  // before that, so focusing there would no-op.
+  createEffect(
+    () => props.autoFocus,
+    (autoFocus) => {
+      if (autoFocus && node) setFocus(node.id)
+    },
+  )
 
   let handlePointerDown = () => {
     if (props.disabled) return
@@ -70,11 +85,26 @@ export function TextInput(props: TextInputProps) {
   let handleKeyDown = (e: any) => {
     if (props.disabled) return
     if (e.key === "Backspace") {
-      let v = value()
-      if (v.length > 0) commit(v.slice(0, -1))
+      buffer.deleteBackward()
+      setCaretOn(true)
+    } else if (e.key === "Delete") {
+      buffer.deleteForward()
+      setCaretOn(true)
+    } else if (e.key === "Left") {
+      buffer.move("left")
+      setCaretOn(true)
+    } else if (e.key === "Right") {
+      buffer.move("right")
+      setCaretOn(true)
+    } else if (e.key === "Home") {
+      buffer.move("start")
+      setCaretOn(true)
+    } else if (e.key === "End") {
+      buffer.move("end")
       setCaretOn(true)
     } else if (e.key === "Return" || e.key === "Enter") {
       props.onSubmit?.(value())
+      setFocus(null)
     } else if (e.key === "Escape") {
       if (node) setFocus(null)
     }
@@ -82,7 +112,7 @@ export function TextInput(props: TextInputProps) {
 
   let handleTextInput = (e: any) => {
     if (props.disabled) return
-    commit(value() + (e.text ?? ""))
+    buffer.insertText(e.text ?? "")
     setCaretOn(true)
   }
 
@@ -98,37 +128,44 @@ export function TextInput(props: TextInputProps) {
   let borderRadius = () => props.style?.borderRadius ?? theme.radius.sm
 
   let showPlaceholder = () => !focused() && value().length === 0 && (props.placeholder ?? "").length > 0
-  let displayText = () => (showPlaceholder() ? (props.placeholder ?? "") : value())
-  let displayColor = () => (showPlaceholder() ? theme.color.textMuted : textColor())
-
-  // Viewport width is the inner scroll container's own laid-out width, read
-  // after layout. This works for numeric, "auto" and "%" widths alike (no need
-  // to subtract padding: the padding lives on the outer view). getBoundingBox
-  // is a snapshot, so we push it into a signal from onLayout. The flush drains
-  // the resulting scrollX update synchronously, before paint, so the scroll
-  // tracks the width in the same frame instead of trailing it by one.
-  onLayout(() => {
-    if (!viewport) return
-    let w = getBoundingBox(viewport)?.width ?? 0
-    if (w !== viewportWidth()) setViewportWidth(w)
-    flush()
-  })
+  let showCaret = () => focused() && caretOn() && !showPlaceholder()
+
+  // The text is split at the caret into two nodes with a zero-size anchor view
+  // between them. Flow places the anchor at the caret x (the before-text width),
+  // and the caret is a detached d-rect inside it: detached nodes take no layout
+  // slot, so the anchor stays zero-width and the after-text is not shifted. The
+  // anchor sits at the row's vertical center (alignItems center, zero height),
+  // so the caret is offset up by half its height to straddle it. While the
+  // placeholder shows, value() is "" so the slices and the scroll offset are 0
+  // with no special case. The viewport node is the inner scroll container;
+  // createCaretScroll reads its laid-out width after layout, keeps the caret in
+  // view, and flushes the offset before paint.
+  let beforeCaret = () => value().slice(0, buffer.caret())
+  let afterCaret = () => value().slice(buffer.caret())
+  let scrollX = createCaretScroll(
+    () => viewport,
+    () => ({
+      text: value(),
+      fontSize: theme.text.body.size,
+      caret: buffer.caret(),
+      // Constant, not tied to caret visibility: the caret's footprint does not
+      // change as it blinks, so reserving the column only when shown would swing
+      // the scroll offset every blink and shift text that exactly fills the box.
+      caretWidth: CARET_WIDTH,
+    }),
+  )
 
-  let caretWidth = () => (focused() && !showPlaceholder() ? 1 : 0)
-  let scrollX = () => {
-    if (showPlaceholder()) return 0
-    let tw = measureText(value(), { fontSize: theme.text.body.size }).width
-    let vw = viewportWidth()
-    if (vw <= 0) return 0
-    return Math.max(0, tw + caretWidth() - vw)
-  }
+  let textStyle = (color: string) => ({
+    fontSize: theme.text.body.size,
+    lineHeight: theme.text.body.lineHeight,
+    color,
+    maxLines: 1,
+    flexShrink: 0,
+  })
 
   return (
     <view
-      ref={(n: { id: number }) => {
-        node = n
-        if (props.autoFocus) setFocus(n.id)
-      }}
+      ref={(n: { id: number }) => (node = n)}
       flexDirection="row"
       alignItems="center"
       paddingLeft={theme.spacing.md}
@@ -161,18 +198,24 @@ export function TextInput(props: TextInputProps) {
         overflow="hidden"
         scrollX={scrollX()}
       >
-        <text
-          fontSize={theme.text.body.size}
-          lineHeight={theme.text.body.lineHeight}
-          color={displayColor()}
-          maxLines={1}
-          flexShrink={0}
-        >
-          {displayText()}
-        </text>
-        {focused() && caretOn() && !showPlaceholder() ? (
-          <rect color={theme.color.text} w={1} h={theme.text.body.size} flexShrink={0} />
-        ) : null}
+        {showPlaceholder() ? (
+          <text {...textStyle(theme.color.textMuted)}>{props.placeholder ?? ""}</text>
+        ) : (
+          <view flexDirection="row" alignItems="center" flexShrink={0}>
+            <text {...textStyle(textColor())}>{beforeCaret()}</text>
+            {showCaret() ? (
+              <view>
+                <d-rect
+                  color={textColor()}
+                  y={-theme.text.body.size / 2}
+                  w={CARET_WIDTH}
+                  h={theme.text.body.size}
+                />
+              </view>
+            ) : null}
+            <text {...textStyle(textColor())}>{afterCaret()}</text>
+          </view>
+        )}
       </view>
     </view>
   )

package/src/theme.ts

@@ -10,6 +10,9 @@ export type Theme = {
     textMuted: string
     surface: string
     border: string
+    primary: string
+    onPrimary: string
+    scrim: string
   }
   spacing: { sm: number; md: number }
   radius: { sm: number }
@@ -25,6 +28,9 @@ export let theme: Theme = {
     textMuted: "rgba(0,0,0,0.4)",
     surface: "#ccc",
     border: "rgba(0,0,0,0.2)",
+    primary: "#1f6feb",
+    onPrimary: "#ffffff",
+    scrim: "rgba(0,0,0,0.6)",
   },
   spacing: { sm: 4, md: 8 },
   radius: { sm: 4 },

package/src/window.tsx

@@ -1,7 +1,7 @@
-import type { LayoutProps } from "@solidrt/core"
+import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
-export interface WindowProps {
+export interface WindowProps extends PointerProps {
   children?: any
   title?: string
   fullscreen?: boolean
@@ -21,6 +21,18 @@ export function Window(props: WindowProps) {
       fullscreen={props.fullscreen}
       vsync={props.vsync}
       fps={props.fps}
+      onPointerEnter={props.onPointerEnter}
+      onPointerLeave={props.onPointerLeave}
+      onPointerDown={props.onPointerDown}
+      onPointerUp={props.onPointerUp}
+      onPointerMove={props.onPointerMove}
+      onWheel={props.onWheel}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+      onKeyDown={props.onKeyDown}
+      onKeyUp={props.onKeyUp}
+      onTextInput={props.onTextInput}
+      pointerEvents={props.pointerEvents}
     >
       {props.style?.backgroundColor != null ? (
         <d-rect color={props.style.backgroundColor} />