@solidrt/components 0.0.59 → 0.0.61

package/src/scroll-view.tsx

@@ -1,5 +1,5 @@
-import { createPan, createScroll, createSignal, onSettled, untrack } from "@solidrt/core"
-import type { LayoutProps, PointerProps, Scroll, WheelEvent } from "@solidrt/core"
+import { createPan, createScroll, createSignal, getBoundingBoxViewport, getLayoutBox, onSettled, untrack } from "@solidrt/core"
+import type { LayoutProps, PointerEvent, PointerProps, Scroll, TransitionCurve, TransitionEndEvent, WheelEvent } from "@solidrt/core"
 import type { StyleProps, TransitionProps, TransitionScrollProp, TransitionStyleProp, TransitionViewProp } from "./types"
 import { splitTransition, transitionEndFor } from "./types"
 
@@ -28,20 +28,43 @@ export interface ScrollViewProps
 // 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.
 //
 // Motion: the offset is written as a target and the runtime springs to it,
 // so a wheel tick glides instead of jumping and a burst of ticks retargets
 // one continuous motion. While a finger drags, the spring is withdrawn from
-// the viewport declaration so the content tracks the finger exactly; the
-// first drag write cancels any spring still in flight. A `scrollX`/`scrollY`
-// entry in the `transition` prop replaces the default.
+// the viewport declaration so the content tracks the finger exactly. A lift
+// at speed flings: the pan's release velocity projects ONE destination
+// (the distance an exponential decay covers, clamped to the range) written
+// under a tween whose curve is that decay, so the runtime animates the
+// whole glide and no JS runs per frame (okf/notes/app-structure-performance.md).
+// A finger landing on a moving list holds it where it is: the animated
+// offset is read back from the boxes and written instantly, since the
+// JS-side offset is the destination, not the position. A `scrollX`/`scrollY`
+// entry in the `transition` prop replaces the default spring; the fling
+// tween is the component's own.
 const SCROLL_SPRING = { duration: 250 }
+// Momentum after a fling: velocity decay in e-foldings per second (iOS's
+// normal deceleration rate of 0.998 per ms). A fling travels its release
+// speed over this.
+const MOMENTUM_DECAY = 2
+// The curve a fling glides on: easeOutExpo, 1 - 2^(-10 t), the shape of an
+// exponential decay.
+const MOMENTUM_CURVE: TransitionCurve = [0.19, 1, 0.22, 1]
+// The tween's length, ms: where that curve's decay rate is MOMENTUM_DECAY
+// (10 ln 2 over the rate). Constant on purpose: a faster fling travels
+// farther, not longer, as a decay does; the tail is sub-pixel.
+const MOMENTUM_MS = Math.round(((10 * Math.LN2) / MOMENTUM_DECAY) * 1000)
+// A read-back offset this close to the written one means nothing is in
+// flight: no instant write.
+const LIVE_EPSILON = 0.5
 
 export function ScrollView(props: ScrollViewProps) {
   let viewport: { id: number } | undefined
   let content: { id: number } | undefined
   let [dragging, setDragging] = createSignal(false)
+  // A fling's tween is declared while it runs: cleared by its end, by a
+  // wheel and by the next finger.
+  let [fling, setFling] = createSignal(false)
 
   let scroll = createScroll(
     () => viewport,
@@ -55,15 +78,56 @@ export function ScrollView(props: ScrollViewProps) {
   })
 
   // Content follows the finger: it moves opposite to scroll offsets, which
-  // grow toward the bottom/right.
+  // grow toward the bottom/right. The lift's velocity (parent-frame px/s,
+  // zero for a rested finger) becomes the fling's destination.
   let pan = createPan({
     axis: props.horizontal ? "horizontal" : "vertical",
     onPanStart: () => setDragging(true),
     onPanMove: (dx, dy) => scroll.scrollBy({ x: -dx, y: -dy }),
-    onPanEnd: () => setDragging(false),
+    onPanEnd: v => {
+      setDragging(false)
+      let speed = props.horizontal ? v.vx : v.vy
+      if (speed === 0) return
+      let cur = scroll.offset()
+      let range = scroll.range()
+      let now = props.horizontal ? cur.x : cur.y
+      let dest = Math.max(0, Math.min(now - speed / MOMENTUM_DECAY, props.horizontal ? range.x : range.y))
+      if (dest === now) return
+      setFling(true)
+      scroll.scrollTo(props.horizontal ? { x: dest } : { y: dest })
+    },
   })
+  // A finger landing (any down, a tap included) holds a moving list where
+  // it is: the animated offset, read back from the boxes (window-relative,
+  // scaled back to box pixels through the untransformed layout box), is
+  // written instantly, dropping the fling or spring in flight. Nothing is
+  // written when nothing moves.
+  let hold = (e: PointerEvent) => {
+    setFling(false)
+    if (viewport && content) {
+      let vb = getBoundingBoxViewport(viewport)
+      let cb = getBoundingBoxViewport(content)
+      let lb = getLayoutBox(viewport)
+      if (vb && cb && lb) {
+        let scale = props.horizontal ? (lb.width > 0 ? vb.width / lb.width : 0) : lb.height > 0 ? vb.height / lb.height : 0
+        if (scale > 0) {
+          let live = (props.horizontal ? vb.x - cb.x : vb.y - cb.y) / scale
+          let cur = scroll.offset()
+          if (Math.abs(live - (props.horizontal ? cur.x : cur.y)) > LIVE_EPSILON) {
+            scroll.scrollTo(props.horizontal ? { x: live, behavior: "instant" } : { y: live, behavior: "instant" })
+          }
+        }
+      }
+    }
+    pan.handlers.onPointerDown(e)
+  }
+  let settled = (e: TransitionEndEvent) => {
+    if (e.property === "scrollX" || e.property === "scrollY") setFling(false)
+    transitionEndFor("root", props.onTransitionEnd)?.(e)
+  }
 
   let onWheel = (e: WheelEvent) => {
+    setFling(false)
     // 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
     // emit deltaX take precedence).
@@ -89,11 +153,11 @@ export function ScrollView(props: ScrollViewProps) {
     }
   }
   // The viewport's declaration: the user's scroll entries over the default
-  // spring. During a drag, and while the latest programmatic write asked for
-  // no motion (scrollTo behavior "instant"), the scroll entries go, and a
-  // user `all` narrows to the one other property the viewport writes
-  // (clipRadius) so it cannot put a spring back under the finger or the
-  // instant write.
+  // spring, the fling tween over both while a fling runs. During a drag,
+  // and while the latest programmatic write asked for no motion (scrollTo
+  // behavior "instant"), the scroll entries go, and a user `all` narrows to
+  // the one other property the viewport writes (clipRadius) so it cannot
+  // put a spring back under the finger or the instant write.
   let viewportTransition = () => {
     let user = split().viewport
     let entries: Record<string, unknown> = typeof user === "string" ? { all: user } : { ...(user ?? {}) }
@@ -102,6 +166,10 @@ export function ScrollView(props: ScrollViewProps) {
       if (all !== undefined) rest.clipRadius = all
       return Object.keys(rest).length ? rest : null
     }
+    if (fling()) {
+      let momentum = { duration: MOMENTUM_MS, curve: MOMENTUM_CURVE }
+      return { ...entries, scrollX: momentum, scrollY: momentum }
+    }
     return { scrollX: SCROLL_SPRING, scrollY: SCROLL_SPRING, ...entries }
   }
   let direction = () => (props.horizontal ? "row" : "column")
@@ -146,10 +214,12 @@ export function ScrollView(props: ScrollViewProps) {
         clipRadius={props.style?.borderRadius}
         flexDirection={direction()}
         transition={viewportTransition()}
-        onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
+        onTransitionEnd={settled}
         scrollX={scroll.offset().x}
         scrollY={scroll.offset().y}
-        {...pan.handlers}
+        onPointerDown={hold}
+        onPointerMove={pan.handlers.onPointerMove}
+        onPointerUp={pan.handlers.onPointerUp}
         onWheel={onWheel}
       >
         <view ref={(n: { id: number }) => (content = n)} flexShrink={0} flexDirection={direction()}>

package/src/segmented-control.tsx

@@ -144,6 +144,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
               paddingLeft={space("md")}
               paddingRight={space("md")}
               {...press.handlers}
+              cursor="pointer"
               focusable={!props.disabled}
               pointerEvents={props.disabled ? "none" : undefined}
             >

package/src/select.tsx

@@ -65,6 +65,7 @@ export function Select(props: SelectProps) {
         paddingLeft={space("md")}
         paddingRight={space("md")}
         {...press.handlers}
+        cursor="pointer"
         focusable
       >
         <PressFeedback
@@ -208,6 +209,7 @@ export function Select(props: SelectProps) {
       rotate={style().rotate}
       opacity={style().opacity}
       {...press.handlers}
+      cursor="pointer"
       focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >

package/src/switch.tsx

@@ -70,6 +70,7 @@ export function Switch(props: SwitchProps) {
       rotate={style().rotate}
       opacity={style().opacity}
       {...press.handlers}
+      cursor="pointer"
       focusable={!props.disabled}
       pointerEvents={props.disabled ? "none" : undefined}
     >

package/src/text-input.tsx

@@ -1,8 +1,8 @@
 import { untrack } from "@solidrt/core"
 import { createTextBuffer } from "@solidrt/core/text-input"
-import type { LayoutProps, TextInputHints } from "@solidrt/core"
+import type { TextInputHints } from "@solidrt/core"
 import { EditorField } from "./editor-field"
-import type { StyleProps, TransitionProps } from "./types"
+import type { EditorLayoutProps, StyleProps, TransitionProps } from "./types"
 import { theme } from "./theme"
 
 export interface TextInputProps extends TransitionProps {
@@ -19,12 +19,14 @@ export interface TextInputProps extends TransitionProps {
   autoFocus?: boolean
   /**
    * Multi-line editing: lines wrap at the field's width, Enter inserts a
-   * newline (onSubmit never fires), Up/Down move by line. Without a
-   * `layout.height` the field grows with its content (up to `maxRows` rows,
-   * then scrolls); with one it is a fixed box that scrolls to the caret.
+   * newline (onSubmit never fires), Up/Down move by line. Unconstrained,
+   * the field grows with its content (up to `maxRows` rows, then scrolls);
+   * sized by its layout - a `height`, `flexGrow: 1` in a sized parent, a
+   * parent too small for the content - it is a fixed box that scrolls to
+   * the caret.
    */
   multiline?: boolean
-  /** Multiline without an explicit height: rows to grow to before scrolling. Default unbounded. */
+  /** Multiline, unconstrained: rows to grow to before scrolling. Default unbounded. */
   maxRows?: number
   /**
    * IME behavior for the field's text sessions (keyboard type,
@@ -34,7 +36,13 @@ export interface TextInputProps extends TransitionProps {
   hints?: TextInputHints
 
   ref?: (node: { id: number }) => void
-  layout?: LayoutProps
+  /**
+   * The box, plus the font fields (`fontSize`, `fontFamily`, `lineHeight`,
+   * `fontStyle`, `fontWeight`) the text is shaped in, as on Text: the theme
+   * body font by default, `fontSize` scaled by `policy.textScale`. The rows,
+   * caret and scrolling follow the font.
+   */
+  layout?: EditorLayoutProps
   style?: StyleProps
 }
 

package/src/text.tsx

@@ -1,7 +1,7 @@
 import { createMemo } from "@solidrt/core"
 import type { PointerProps } from "@solidrt/core"
 import type { StyleProps, TextLayoutProps, TransitionProps, TransitionViewProp } from "./types"
-import { splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
+import { splitTextLayout, splitTransition, transitionEndFor, withTransitionDefaults } from "./types"
 import { theme, type TextVariant } from "./theme"
 import { policy } from "./policy"
 import { typeWeight } from "./typography"
@@ -28,33 +28,15 @@ export interface TextProps extends PointerProps, TransitionProps<TransitionViewP
   style?: StyleProps
 }
 
-// Font keys live in layout (they affect measurement) but belong on the inner
-// <text> node, not the box <view>. Strip them out before spreading layout.
-const FONT_KEYS = [
-  "fontFamily",
-  "fontSize",
-  "lineHeight",
-  "fontStyle",
-  "fontWeight",
-  "textAlign",
-  "maxLines",
-]
-
 export function Text(props: TextProps) {
   let role = () => theme.text[props.variant ?? "body"]
   let size = () => (props.layout?.fontSize ?? role().size) * policy.textScale
   let color = () =>
     props.style?.color ?? theme.color[props.color ?? (props.muted ? "textMuted" : "text")]
 
-  let box = createMemo(() => {
-    let l = props.layout
-    if (!l) return {}
-    let out: Record<string, unknown> = {}
-    for (let key in l) {
-      if (!FONT_KEYS.includes(key)) out[key] = (l as Record<string, unknown>)[key]
-    }
-    return out
-  })
+  // Font keys live in layout (they affect measurement) but belong on the
+  // inner <text> node, not the box <view>: only the box half is spread.
+  let box = createMemo(() => splitTextLayout(props.layout, true).box)
 
   // The text node owns `color`; everything else a Text animates is on the
   // wrapper view. A shorthand or `all` reaches both.

package/src/types.ts

@@ -49,6 +49,13 @@ type TransitionEntries<P extends string> = {
   all?: Transition
   /** Group stagger (ms) for descendant enter/exit animations; see core. */
   stagger?: number
+  /**
+   * Layout slide on the component's root view: a reflow that moves or
+   * resizes the component slides it from the box it was painted at, as
+   * core's `layout` entry does (`true` borrows `all`). Never covered by
+   * `all` or a shorthand on its own.
+   */
+  layout?: Transition | boolean
 } & { [K in P]?: Transition }
 
 /** A component's transition declaration: view-level and style names, `all`, or a shorthand string. */
@@ -235,14 +242,49 @@ export interface Option {
 }
 
 // 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>.
-export interface TextLayoutProps extends LayoutProps {
+// than style. The font fields shape the glyphs (and so measure them); a
+// component draws its text with them and gives the box fields to its
+// wrapping <view>. Text adds the paragraph-level fields; an editable field
+// takes the font fields alone, since it lays its own lines out.
+export interface FontProps {
   fontFamily?: FontFamily
   fontSize?: number
   lineHeight?: number
   fontStyle?: FontStyle
   fontWeight?: FontWeight
+}
+
+export interface TextLayoutProps extends LayoutProps, FontProps {
   textAlign?: TextAlign
   maxLines?: number
-}
+}
+
+/** The layout of an editable text field: the box, plus the font its text is shaped in. */
+export interface EditorLayoutProps extends LayoutProps, FontProps {}
+
+// The keys of FontProps, and with them the paragraph-level fields of
+// TextLayoutProps, for splitting a layout object into what the text node
+// takes and what the box takes.
+const FONT_KEYS: readonly string[] = ["fontFamily", "fontSize", "lineHeight", "fontStyle", "fontWeight"]
+const TEXT_KEYS: readonly string[] = [...FONT_KEYS, "textAlign", "maxLines"]
+
+/**
+ * Splits a layout object into the fields the text node takes (the font, plus
+ * `textAlign`/`maxLines` when `paragraph`) and the fields that stay on the
+ * box <view>. Reactive like any props read when called in a tracked scope.
+ */
+export function splitTextLayout(
+  layout: LayoutProps | undefined,
+  paragraph = false,
+): { text: Record<string, unknown>; box: LayoutProps } {
+  let text: Record<string, unknown> = {}
+  let box: Record<string, unknown> = {}
+  if (!layout) return { text, box }
+  let keys = paragraph ? TEXT_KEYS : FONT_KEYS
+  for (let key in layout) {
+    let value = (layout as Record<string, unknown>)[key]
+    if (keys.includes(key)) text[key] = value
+    else box[key] = value
+  }
+  return { text, box: box as LayoutProps }
+}