@solidrt/components 0.0.35 → 0.0.37

package/src/press.ts

@@ -0,0 +1,109 @@
+import { createSignal, onSettled, getBoundingBoxViewport } from "@solidrt/core"
+import type { PointerEvent } from "@solidrt/core"
+import { claim, release } from "./arena"
+
+export type PressState = { pressed: boolean; hovered: boolean }
+
+export interface PressOptions {
+  onPress?: () => void
+  onPointerDown?: (e: PointerEvent) => void
+  onPointerUp?: (e: PointerEvent) => void
+  onPointerMove?: (e: PointerEvent) => void
+  onPointerEnter?: (e: PointerEvent) => void
+  onPointerLeave?: (e: PointerEvent) => void
+}
+
+// The press state machine shared by the pressable components. onPress fires on
+// a primary-button down followed by an up over the node. The down provisionally
+// claims the pointer in the arena; pointer events dispatch leaf to root, so the
+// innermost recognizer claims first and recognizers further up the same bubble
+// path find the pointer taken and fail silently (no pressed state, no onPress -
+// ancestors keep hover only). The claim is stealable: a pan recognizer crossing
+// its slop takes the pointer and this press is cancelled through the arena.
+//
+// Moves and the up arrive on the frozen down path, so the press survives
+// leaving the node: while outside its window-relative bounds the pressed state
+// clears (visual feedback retracts), wandering back in restores it (press
+// retention), and only an up inside fires onPress. Enter/leave drive hover
+// alone. Non-primary buttons (right/middle) do not start a press. cancel() is
+// the external-cancel hook; it ends the press without firing. Options are read
+// at event time, so passing a component's reactive props object keeps handler
+// changes live. The host view must attach `ref` for retention bounds; without
+// it every position counts as inside (the up always fires).
+// Deliberately framework-agnostic (no theme, no styling): a candidate for
+// promotion into core once the recognizer family grows
+// (okf/plans/component-gestures.md).
+export function createPress(options: PressOptions) {
+  let [pressed, setPressed] = createSignal(false)
+  let [hovered, setHovered] = createSignal(false)
+  let node: { id: number } | null = null
+  // The pointer this recognizer is tracking while a press is in flight, and
+  // the retention state at the last move (read on up; the signal itself is
+  // not readable same-dispatch because writes flush on the microtask).
+  let active: number | null = null
+  let inside = false
+
+  let state = (): PressState => ({ pressed: pressed(), hovered: hovered() })
+  let ref = (n: { id: number }) => {
+    node = n
+  }
+
+  let within = (e: PointerEvent) => {
+    let b = node && getBoundingBoxViewport(node)
+    if (!b) return true
+    return e.clientX >= b.x && e.clientX < b.x + b.width && e.clientY >= b.y && e.clientY < b.y + b.height
+  }
+
+  let disengage = () => {
+    if (active != null) {
+      release(active, owner)
+      active = null
+    }
+  }
+  let cancel = () => {
+    disengage()
+    setPressed(false)
+  }
+  let owner = { cancel }
+
+  // A press abandoned mid-flight (unmount during a drag) must not leave its
+  // claim behind, or that pointer id could never press anything again.
+  onSettled(() => disengage)
+
+  let handlers = {
+    onPointerDown: (e: PointerEvent) => {
+      if (e.button != null && e.button !== 0) return
+      if (active == null && claim(e.pointerId, owner)) {
+        active = e.pointerId
+        inside = true
+        setPressed(true)
+      }
+      options.onPointerDown?.(e)
+    },
+    onPointerMove: (e: PointerEvent) => {
+      if (active === e.pointerId) {
+        inside = within(e)
+        setPressed(inside)
+      }
+      options.onPointerMove?.(e)
+    },
+    onPointerUp: (e: PointerEvent) => {
+      if (active === e.pointerId) {
+        let fire = inside
+        cancel()
+        if (fire) options.onPress?.()
+      }
+      options.onPointerUp?.(e)
+    },
+    onPointerEnter: (e: PointerEvent) => {
+      setHovered(true)
+      options.onPointerEnter?.(e)
+    },
+    onPointerLeave: (e: PointerEvent) => {
+      setHovered(false)
+      options.onPointerLeave?.(e)
+    },
+  }
+
+  return { pressed, hovered, state, ref, handlers, cancel }
+}

package/src/pressable.tsx

@@ -1,8 +1,9 @@
-import { createSignal, children } from "@solidrt/core"
-import type { LayoutProps, PointerEvent, PointerProps } from "@solidrt/core"
+import { children } from "@solidrt/core"
+import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
+import { createPress, type PressState } from "./press"
 
-export type PressState = { pressed: boolean; hovered: boolean }
+export type { PressState } from "./press"
 
 export interface PressableProps extends PointerProps {
   // children and style may be functions of the press state, so a caller can
@@ -15,17 +16,12 @@ export interface PressableProps extends PointerProps {
   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.
+// A pressable box: the createPress semantics (see press.ts) on a styled view.
+// 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 press = createPress(props)
 
-  let state = (): PressState => ({ pressed: pressed(), hovered: hovered() })
-  let style = () => (typeof props.style === "function" ? props.style(state()) : props.style)
+  let style = () => (typeof props.style === "function" ? props.style(press.state()) : props.style)
   // Element-valued props build a fresh native subtree on every read, and a
   // subtree that is never inserted is never destroyed - probing the raw getter
   // with typeof would orphan one full copy per evaluation. children() memoizes
@@ -35,27 +31,7 @@ export function Pressable(props: PressableProps) {
   let resolved = children(() => props.children)
   let kids = () => {
     let c = resolved()
-    return typeof c === "function" ? c(state()) : c
-  }
-
-  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)
+    return typeof c === "function" ? c(press.state()) : c
   }
 
   let hasBackground = () => style()?.backgroundColor != null || style()?.borderRadius != null
@@ -63,7 +39,10 @@ export function Pressable(props: PressableProps) {
 
   return (
     <view
-      ref={props.ref}
+      ref={(n: { id: number }) => {
+        press.ref(n)
+        props.ref?.(n)
+      }}
       repaintBoundary
       {...props.layout}
       x={style()?.x}
@@ -71,11 +50,11 @@ export function Pressable(props: PressableProps) {
       scale={style()?.scale}
       rotate={style()?.rotate}
       opacity={style()?.opacity}
-      onPointerEnter={handleEnter}
-      onPointerLeave={handleLeave}
-      onPointerDown={handleDown}
-      onPointerUp={handleUp}
-      onPointerMove={props.onPointerMove}
+      onPointerEnter={press.handlers.onPointerEnter}
+      onPointerLeave={press.handlers.onPointerLeave}
+      onPointerDown={press.handlers.onPointerDown}
+      onPointerUp={press.handlers.onPointerUp}
+      onPointerMove={press.handlers.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}
       onBlur={props.onBlur}
@@ -101,4 +80,4 @@ export function Pressable(props: PressableProps) {
       ) : null}
     </view>
   )
-}
+}

package/src/radio.tsx

@@ -1,6 +1,6 @@
 import { createSignal, createContext, useContext, Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
-import { Pressable } from "./pressable"
+import { createPress } from "./press"
 import { theme } from "./theme"
 import { densityScale } from "./policy"
 import { typeStyle } from "./typography"
@@ -81,13 +81,27 @@ export function Radio(props: RadioProps) {
   // Inner dot inset as a fraction of the ring, so it scales with the density.
   let inset = () => ring() * 0.3
 
+  let press = createPress({ onPress: () => ctx.select(props.value) })
+
   return (
-    <Pressable
-      onPress={() => ctx.select(props.value)}
-      disabled={disabled()}
-      layout={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.md, ...props.layout }}
-      style={props.style}
+    <view
+      ref={press.ref}
+      repaintBoundary
+      flexDirection="row"
+      alignItems="center"
+      gap={theme.spacing.md}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
+      {...press.handlers}
+      pointerEvents={disabled() ? "none" : undefined}
     >
+      <Show when={props.style?.backgroundColor != null || props.style?.borderRadius != null}>
+        <d-rect color={props.style?.backgroundColor ?? "transparent"} radius={props.style?.borderRadius} />
+      </Show>
       <view width={ring()} height={ring()}>
         <d-oval x={1} y={1} w={ring() - 2} h={ring() - 2} drawStyle="stroke" color={ringColor()} strokeWidth={2} />
         <Show when={selected()}>
@@ -99,6 +113,14 @@ export function Radio(props: RadioProps) {
           {resolved()}
         </text>
       </Show>
-    </Pressable>
+      <Show when={(props.style?.borderWidth ?? 0) > 0}>
+        <d-rect
+          drawStyle="stroke"
+          color={props.style?.borderColor ?? "transparent"}
+          strokeWidth={props.style?.borderWidth}
+          radius={props.style?.borderRadius}
+        />
+      </Show>
+    </view>
   )
 }

package/src/scroll-view.tsx

@@ -1,5 +1,6 @@
 import { createScroll } from "@solidrt/core"
-import type { LayoutProps, PointerEvent, PointerProps, WheelEvent } from "@solidrt/core"
+import type { LayoutProps, PointerProps, WheelEvent } from "@solidrt/core"
+import { createPan } from "./pan"
 import type { StyleProps } from "./types"
 
 export interface ScrollViewProps extends PointerProps {
@@ -14,11 +15,13 @@ export interface ScrollViewProps extends PointerProps {
 // 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).
+// 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). The drag is
+// a pan recognizer: it activates on movement slop along the scroll axis,
+// stealing the pointer from a pressable the drag started on (its press
+// feedback retracts), and keeps scrolling when the pointer leaves the box.
+// There is no momentum yet; a fling stops when the finger lifts.
 export function ScrollView(props: ScrollViewProps) {
   let viewport: { id: number } | undefined
   let content: { id: number } | undefined
@@ -29,21 +32,13 @@ export function ScrollView(props: ScrollViewProps) {
     { 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
+  // Content follows the finger: it moves opposite to scroll offsets, which
+  // grow toward the bottom/right.
+  let pan = createPan({
+    axis: props.horizontal ? "horizontal" : "vertical",
+    onPanMove: (dx, dy) => scroll.scrollBy(-dx, -dy),
+  })
 
-  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) => {
     // A plain mouse wheel only emits deltaY. On a horizontal scroller, route that
     // vertical delta to the x axis so the wheel still scrolls it (trackpads that
@@ -88,10 +83,7 @@ export function ScrollView(props: ScrollViewProps) {
         flexDirection={direction()}
         scrollX={scroll.offset().x}
         scrollY={scroll.offset().y}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={endDrag}
-        onPointerLeave={endDrag}
+        {...pan.handlers}
         onWheel={onWheel}
       >
         <view ref={(n: { id: number }) => (content = n)} flexShrink={0} flexDirection={direction()}>

package/src/segmented-control.tsx

@@ -0,0 +1,107 @@
+import { createSignal, For } from "@solidrt/core"
+import type { LayoutProps } from "@solidrt/core"
+import { createPress } from "./press"
+import { theme } from "./theme"
+import { policy } from "./policy"
+import { space } from "./spacing"
+import { typeStyle, lightOnDark } from "./typography"
+import type { Option, StyleProps } from "./types"
+
+export interface SegmentedControlProps {
+  options: Option[]
+  // Controlled selected value. If omitted, the control is uncontrolled.
+  value?: unknown
+  defaultValue?: unknown
+  onChange?: (value: unknown) => void
+  disabled?: boolean
+  layout?: LayoutProps
+  style?: StyleProps
+}
+
+// Width of the hairline divider between segments (logical px). The dividers
+// are the backing rect showing through the row gap, so this is a gap, not a
+// stroke.
+const DIVIDER = 0
+
+// A single-choice row of equal-width segments, joined flush (the Material
+// style): only the control's outermost corners are rounded, interior segments
+// are square, and hairline dividers separate them. The active segment fills
+// with the primary color. Controlled via value/onChange, or uncontrolled via
+// defaultValue. Hover tints inactive segments (non-touch interaction policies
+// only). Override the inactive fill via style, spacing/sizing via layout.
+export function SegmentedControl(props: SegmentedControlProps) {
+  let [internal, setInternal] = createSignal(props.defaultValue)
+  let value = () => (props.value !== undefined ? props.value : internal())
+  let select = (v: unknown) => {
+    if (props.value === undefined) setInternal(() => v)
+    props.onChange?.(v)
+  }
+
+  let radius = () =>
+    typeof props.style?.borderRadius === "number" ? props.style.borderRadius : theme.radius.md
+  // Per-corner radii: round only the corners on the control's outer edge, so
+  // the segments read as one joined control. [tl, tr, br, bl].
+  let corners = (i: number): number | [number, number, number, number] => {
+    let r = radius()
+    let last = props.options.length - 1
+    if (last === 0) return r
+    if (i === 0) return [r, 0, 0, r]
+    if (i === last) return [0, r, r, 0]
+    return 0
+  }
+
+  let idleFill = () => props.style?.backgroundColor ?? theme.color.surfaceAlt
+  let activeFill = () => (props.disabled ? theme.color.surface : theme.color.primary)
+  let label = (active: boolean) =>
+    props.disabled ? theme.color.textMuted : active ? theme.color.onPrimary : theme.color.text
+
+  return (
+    <view
+      flexDirection="row"
+      gap={DIVIDER}
+      {...props.layout}
+      x={props.style?.x}
+      y={props.style?.y}
+      scale={props.style?.scale}
+      rotate={props.style?.rotate}
+      opacity={props.style?.opacity}
+    >
+      <d-rect color={theme.color.border} radius={radius()} />
+      <For each={props.options}>
+        {(opt, i) => {
+          let active = () => value() === opt.value
+          let press = createPress({ onPress: () => select(opt.value) })
+          let fill = () =>
+            active()
+              ? activeFill()
+              : press.hovered() && !props.disabled && policy.interaction !== "touch"
+                ? theme.color.surfaceHover
+                : idleFill()
+          return (
+            <view
+              ref={press.ref}
+              repaintBoundary
+              flexGrow={1}
+              flexBasis={0}
+              alignItems="center"
+              paddingTop={space("md")}
+              paddingBottom={space("md")}
+              paddingLeft={space("md")}
+              paddingRight={space("md")}
+              {...press.handlers}
+              pointerEvents={props.disabled ? "none" : undefined}
+            >
+              <d-rect color={fill()} radius={corners(i())} />
+              <text
+                color={label(active())}
+                {...typeStyle("body", active() ? lightOnDark(label(true), activeFill()) : undefined)}
+              >
+                {opt.label}
+              </text>
+            </view>
+          )
+        }}
+      </For>
+    </view>
+  )
+}

package/src/select.tsx

@@ -1,19 +1,14 @@
 import { createSignal, createPortal, onLayout, getBoundingBox, Show, For, env } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
-import { Pressable, type PressState } from "./pressable"
+import { createPress } from "./press"
 import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
-import type { StyleProps } from "./types"
-
-export interface SelectOption {
-  value: unknown
-  label: string
-}
+import type { Option, StyleProps } from "./types"
 
 export interface SelectProps {
-  options: SelectOption[]
+  options: Option[]
   // Controlled selected value. If omitted, the select is uncontrolled.
   value?: unknown
   defaultValue?: unknown
@@ -53,25 +48,31 @@ export function Select(props: SelectProps) {
 
   // One option row, shared by both presentations; only the vertical padding
   // differs (the sheet gets taller touch targets).
-  let OptionRow = (p: { option: SelectOption; padY: number }) => (
-    <Pressable
-      onPress={() => choose(p.option.value)}
-      layout={{
-        flexDirection: "row",
-        alignItems: "center",
-        paddingTop: p.padY,
-        paddingBottom: p.padY,
-        paddingLeft: space("md"),
-        paddingRight: space("md"),
-      }}
-      style={(s: PressState) => ({
-        backgroundColor:
-          s.pressed || (s.hovered && policy.interaction !== "touch") ? theme.color.surfaceHover : "transparent",
-      })}
-    >
-      <text {...bodyText(p.option.value === value() ? theme.color.primary : theme.color.text)}>{p.option.label}</text>
-    </Pressable>
-  )
+  let OptionRow = (p: { option: Option; padY: number }) => {
+    let press = createPress({ onPress: () => choose(p.option.value) })
+    return (
+      <view
+        ref={press.ref}
+        repaintBoundary
+        flexDirection="row"
+        alignItems="center"
+        paddingTop={p.padY}
+        paddingBottom={p.padY}
+        paddingLeft={space("md")}
+        paddingRight={space("md")}
+        {...press.handlers}
+      >
+        <d-rect
+          color={
+            press.pressed() || (press.hovered() && policy.interaction !== "touch")
+              ? theme.color.surfaceHover
+              : "transparent"
+          }
+        />
+        <text {...bodyText(p.option.value === value() ? theme.color.primary : theme.color.text)}>{p.option.label}</text>
+      </view>
+    )
+  }
 
   // Anchored under the trigger, sized at least as wide as it. Positioned like
   // Tooltip: portal at the window root, pinned at 0,0 and moved with the x/y
@@ -108,7 +109,7 @@ export function Select(props: SelectProps) {
         >
           <d-rect color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.options}>
-            {(o: SelectOption) => <OptionRow option={o} padY={space("sm")} />}
+            {(o: Option) => <OptionRow option={o} padY={space("sm")} />}
           </For>
           <d-rect
             drawStyle="stroke"
@@ -140,40 +141,50 @@ export function Select(props: SelectProps) {
         >
           <d-rect color={theme.color.surface} radius={theme.radius.sm} />
           <For each={props.options}>
-            {(o: SelectOption) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
+            {(o: Option) => <OptionRow option={o} padY={Math.round(theme.spacing.md * 1.5)} />}
           </For>
         </view>
       </view>,
     )
 
+  let press = createPress({ onPress: () => setOpen(!open()) })
+  let style = () => ({
+    borderColor: theme.color.border,
+    borderWidth: theme.borderWidth.sm,
+    borderRadius: theme.radius.sm,
+    ...props.style,
+    backgroundColor:
+      props.style?.backgroundColor ??
+      (press.hovered() && !props.disabled && policy.interaction !== "touch"
+        ? theme.color.surfaceHover
+        : theme.color.surface),
+  })
+
   return (
-    <Pressable
-      ref={(n) => (trigger = n)}
-      onPress={() => setOpen(!open())}
-      disabled={props.disabled}
-      layout={{
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: theme.spacing.md,
-        paddingTop: space("sm"),
-        paddingBottom: space("sm"),
-        paddingLeft: space("md"),
-        paddingRight: space("md"),
-        ...props.layout,
+    <view
+      ref={(n: { id: number }) => {
+        press.ref(n)
+        trigger = n
       }}
-      style={(s: PressState) => ({
-        borderColor: theme.color.border,
-        borderWidth: theme.borderWidth.sm,
-        borderRadius: theme.radius.sm,
-        ...props.style,
-        backgroundColor:
-          props.style?.backgroundColor ??
-          (s.hovered && !props.disabled && policy.interaction !== "touch"
-            ? theme.color.surfaceHover
-            : theme.color.surface),
-      })}
+      repaintBoundary
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="space-between"
+      gap={theme.spacing.md}
+      paddingTop={space("sm")}
+      paddingBottom={space("sm")}
+      paddingLeft={space("md")}
+      paddingRight={space("md")}
+      {...props.layout}
+      x={style().x}
+      y={style().y}
+      scale={style().scale}
+      rotate={style().rotate}
+      opacity={style().opacity}
+      {...press.handlers}
+      pointerEvents={props.disabled ? "none" : undefined}
     >
+      <d-rect color={style().backgroundColor ?? "transparent"} radius={style().borderRadius} />
       <Show
         when={selected()}
         fallback={<text {...bodyText(theme.color.textMuted)}>{props.placeholder ?? ""}</text>}
@@ -195,6 +206,14 @@ export function Select(props: SelectProps) {
           <Sheet />
         </Show>
       </Show>
-    </Pressable>
+      <Show when={(style().borderWidth ?? 0) > 0}>
+        <d-rect
+          drawStyle="stroke"
+          color={style().borderColor ?? "transparent"}
+          strokeWidth={style().borderWidth}
+          radius={style().borderRadius}
+        />
+      </Show>
+    </view>
   )
 }