@solidrt/components 0.0.13 → 0.0.16

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.13",
+  "version": "0.0.16",
   "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.13"
+    "@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,6 +1,4 @@
-import { createSignal, createEffect, onCleanup } from "@solidjs/signals"
-import { createTexture, destroyTexture } from "@solidrt/core/gpu"
-import { decodeImage } from "@solidrt/core/image"
+import { createImage, Loading } from "@solidrt/core"
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
@@ -12,41 +10,11 @@ export interface ImageProps extends PointerProps {
 
 //TODO onLoad, onError
 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. The old
-  // texture is destroyed before installing the new one; on unmount the current
-  // texture is destroyed by onCleanup below.
-  createEffect(
-    () => props.src,
-    (source) => {
-      let stale = false
-
-      ;(async () => {
-        let bytes: Uint8Array
-        if (typeof source === "string") {
-          let response = await fetch(source)
-          bytes = await response.bytes()
-        } else {
-          bytes = source
-        }
-        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 () => {
-        stale = true
-      }
-    },
-  )
-
-  let src = () => res()?.id
+  // createImage fetches/decodes/uploads, swaps the texture when src changes, and
+  // frees it on cleanup, returning the texture id. Pass an accessor so a reactive
+  // src reloads. Reading src() suspends until ready (a SolidJS 2.0 async value),
+  // so the <texture> below sits in a <Loading> boundary.
+  let src = createImage(() => props.src)
   let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
 
   // A texture sizes from its own width/height (not the box around it), so the
@@ -55,11 +23,6 @@ export function Image(props: ImageProps) {
   let texW = () => (typeof props.layout?.width === "number" ? props.layout.width : undefined)
   let texH = () => (typeof props.layout?.height === "number" ? props.layout.height : undefined)
 
-  onCleanup(() => {
-    let r = res()
-    if (r !== undefined) destroyTexture(r.id)
-  })
-
   return (
     <view
       {...props.layout}
@@ -85,7 +48,9 @@ export function Image(props: ImageProps) {
       {props.style?.backgroundColor != null ? (
         <d-rect color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
       ) : null}
-      <texture src={src()} width={texW()} height={texH()} />
+      <Loading fallback={null}>
+        <texture src={src()} width={texW()} height={texH()} />
+      </Loading>
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"

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

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/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/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 },