@solidrt/components 0.0.35 → 0.0.37

package/src/slider.tsx

@@ -1,5 +1,6 @@
-import { createSignal, getBoundingBox, onLayout, setPointerCapture } from "@solidrt/core"
+import { createSignal, getBoundingBox, onLayout, onSettled } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
+import { release, steal } from "./arena"
 import { theme } from "./theme"
 import { densityScale } from "./policy"
 import type { StyleProps } from "./types"
@@ -25,9 +26,9 @@ const THUMB = 20
 let clamp = (x: number, lo: number, hi: number) => (x < lo ? lo : x > hi ? hi : x)
 
 // A horizontal slider. The groove fills up to the thumb; dragging or pressing
-// the track sets the value from the pointer x. No pointer capture, so a drag
-// that leaves the track stops updating. Controlled via value/onChange, or
-// uncontrolled via defaultValue.
+// the track sets the value from the pointer x. Moves arrive on the frozen down
+// path, so a drag keeps updating when the pointer drifts off the track.
+// Controlled via value/onChange, or uncontrolled via defaultValue.
 export function Slider(props: SliderProps) {
   let min = () => props.min ?? 0
   let max = () => props.max ?? 100
@@ -35,7 +36,7 @@ export function Slider(props: SliderProps) {
   let value = () => (props.value !== undefined ? props.value : internal())
 
   let track: { id: number } | undefined
-  let dragging = false
+  let active: number | null = null
 
   let height = () => Math.round(HEIGHT * densityScale())
   let thumb = () => Math.round(THUMB * densityScale())
@@ -68,22 +69,31 @@ export function Slider(props: SliderProps) {
     commit(clamp(raw, min(), max()))
   }
 
+  let endDrag = () => {
+    if (active != null) {
+      release(active, owner)
+      active = null
+    }
+  }
+  let owner = { cancel: endDrag }
+
+  // An unmount mid-drag must not leave a resolved claim behind.
+  onSettled(() => endDrag)
+
   let handleDown = (e: PointerEvent) => {
-    if (props.disabled) return
-    // Claim the drag: stopPropagation keeps an ancestor scroller from starting a
-    // scroll, and pointer capture routes moves/up here even when the pointer
-    // drifts off the track.
-    e.stopPropagation()
-    if (track) setPointerCapture(track.id, e.pointerId)
-    dragging = true
+    if (props.disabled || active != null) return
+    // A down on the track is unambiguously a slider drag: resolve the arena
+    // outright so an ancestor scroller's pan cannot take the pointer over.
+    steal(e.pointerId, owner)
+    active = e.pointerId
     setFromClientX(e.clientX)
   }
   let handleMove = (e: PointerEvent) => {
-    if (!dragging) return
+    if (active !== e.pointerId) return
     setFromClientX(e.clientX)
   }
-  let handleUp = () => {
-    dragging = false
+  let handleUp = (e: PointerEvent) => {
+    if (active === e.pointerId) endDrag()
   }
 
   return (

package/src/switch.tsx

@@ -1,6 +1,6 @@
-import { createSignal } from "@solidrt/core"
+import { createSignal, Show } 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 type { StyleProps } from "./types"
@@ -24,7 +24,7 @@ const PAD = 2
 
 // A toggle. Track fills with primary when on, surfaceAlt when off; the thumb
 // slides across. Controlled via value/onChange, or uncontrolled via
-// defaultValue. Built on Pressable, so disabled takes no pointer events.
+// defaultValue. When disabled, it takes no pointer events at all.
 export function Switch(props: SwitchProps) {
   let [internal, setInternal] = createSignal(props.defaultValue ?? false)
   let on = () => (props.value !== undefined ? props.value : internal())
@@ -34,25 +34,45 @@ export function Switch(props: SwitchProps) {
     if (props.value === undefined) setInternal(next)
     props.onChange?.(next)
   }
+  let press = createPress({ onPress: toggle })
 
   let w = () => Math.round(W * densityScale())
   let h = () => Math.round(H * densityScale())
   let thumb = () => h() - PAD * 2
 
+  let style = () => ({
+    backgroundColor: on() ? theme.color.primary : theme.color.surfaceAlt,
+    borderRadius: h() / 2,
+    ...props.style,
+  })
+
   return (
-    <Pressable
-      onPress={toggle}
-      disabled={props.disabled}
-      layout={{ width: w(), height: h(), ...props.layout }}
-      style={{
-        backgroundColor: on() ? theme.color.primary : theme.color.surfaceAlt,
-        borderRadius: h() / 2,
-        ...props.style,
-      }}
+    <view
+      ref={press.ref}
+      repaintBoundary
+      width={w()}
+      height={h()}
+      {...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} />
       <view position="absolute" top={PAD} left={PAD} x={on() ? w() - thumb() - PAD * 2 : 0}>
         <d-oval w={thumb()} h={thumb()} color={theme.color.onPrimary} />
       </view>
-    </Pressable>
+      <Show when={(style().borderWidth ?? 0) > 0}>
+        <d-rect
+          drawStyle="stroke"
+          color={style().borderColor ?? "transparent"}
+          strokeWidth={style().borderWidth}
+          radius={style().borderRadius}
+        />
+      </Show>
+    </view>
   )
 }

package/src/text-input.tsx

@@ -96,10 +96,10 @@ export function TextInput(props: TextInputProps) {
     } else if (e.key === "Delete") {
       buffer.deleteForward()
       setCaretOn(true)
-    } else if (e.key === "Left") {
+    } else if (e.key === "ArrowLeft") {
       buffer.move("left")
       setCaretOn(true)
-    } else if (e.key === "Right") {
+    } else if (e.key === "ArrowRight") {
       buffer.move("right")
       setCaretOn(true)
     } else if (e.key === "Home") {
@@ -108,7 +108,7 @@ export function TextInput(props: TextInputProps) {
     } else if (e.key === "End") {
       buffer.move("end")
       setCaretOn(true)
-    } else if (e.key === "Return" || e.key === "Enter") {
+    } else if (e.key === "Enter") {
       props.onSubmit?.(value())
       setFocus(null)
     } else if (e.key === "Escape") {

package/src/types.ts

@@ -36,6 +36,14 @@ export interface StyleProps {
   opacity?: number
 }
 
+// One choice in an options list, shared by the single-choice controls
+// (Select, SegmentedControl). Lives here so those components stay independent
+// of each other: shared shapes go through this module, never a sibling import.
+export interface Option {
+  value: unknown
+  label: string
+}
+
 // Text shaping affects measurement, so font props belong with layout rather
 // than style. These end up on the inner <text> node, while the box layout
 // fields go on the wrapping <view>.