@solidrt/components 0.0.51 → 0.0.52

package/src/image.tsx

@@ -1,8 +1,9 @@
 import { createImage, createEffect, Loading, Errored, pct } from "@solidrt/core"
 import type { ImageSource, LayoutProps, Pct, PointerProps, TextureProps } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ImageProps extends PointerProps {
+export interface ImageProps extends PointerProps, TransitionProps {
   src: string | Uint8Array
   /**
    * How the image maps into the Image's box (CSS object-fit): "fill"
@@ -38,6 +39,7 @@ function FallbackTexture(props: {
   height?: number | Pct
 }) {
   let tex = createImage(() => props.src)
+
   return (
     <Errored fallback={(_err: unknown) => null}>
       <texture src={tex()} fit={props.fit} width={props.width} height={props.height} />
@@ -69,9 +71,12 @@ export function Image(props: ImageProps) {
   let texW = () => (props.fit != null ? pct(100) : typeof props.layout?.width === "number" ? props.layout.width : undefined)
   let texH = () =>
     props.fit != null ? pct(100) : typeof props.layout?.height === "number" ? props.layout.height : undefined
+  let split = () => splitTransition(props.transition)
 
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       {...props.layout}
       overflow={props.style?.borderRadius != null ? "hidden" : props.layout?.overflow}
       clipRadius={props.style?.borderRadius}
@@ -94,7 +99,7 @@ export function Image(props: ImageProps) {
       pointerEvents={props.pointerEvents}
     >
       {props.style?.backgroundColor != null ? (
-        <d-rect color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
+        <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
       ) : null}
       <Loading fallback={null}>
         <Errored
@@ -110,6 +115,8 @@ export function Image(props: ImageProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}
           radius={props.style?.borderRadius}

package/src/index.ts

@@ -60,4 +60,13 @@ export {
 export { Density, type DensityProps, densityScale } from "./density"
 export { typeStyle, typeWeight, lightOnDark } from "./typography"
 export { space } from "./spacing"
-export type { StyleProps, TextLayoutProps, Option } from "./types"
+export type {
+  StyleProps,
+  TextLayoutProps,
+  Option,
+  TransitionProps,
+  ComponentTransition,
+  TransitionViewProp,
+  TransitionStyleProp,
+  TransitionScrollProp,
+} from "./types"

package/src/item.tsx

@@ -5,16 +5,17 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ItemProps {
+export interface ItemProps extends TransitionProps {
   // Leading content: an icon, avatar, checkbox, ...
   startContent?: any
   // Primary text. A string/number renders as themed body text; anything else
   // as-is.
   label: any
   // Secondary line under the label. A string/number renders as themed muted
-  // caption text; anything else as-is.
+  // body text; anything else as-is.
   description?: any
   // Trailing content: a badge, timestamp, chevron, action, ...
   endContent?: any
@@ -63,8 +64,12 @@ export function Item(props: ItemProps) {
   let description = children(() => props.description)
   let descriptionIsText = () => typeof description() === "string" || typeof description() === "number"
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(n)
         props.ref?.(n)
@@ -90,10 +95,10 @@ export function Item(props: ItemProps) {
       focusable={(props.focusable ?? true) && interactive()}
       pointerEvents={props.disabled ? "none" : undefined}
     >
-      <d-rect color={bg()} radius={radius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={bg()} radius={radius()} />
       <d-rect color={overlay(press.state())} radius={radius()} />
       {props.startContent}
-      <view flexDirection="column" flexGrow={1} flexShrink={1} gap={2}>
+      <view flexDirection="column" flexGrow={1} flexShrink={1} gap={Math.round(space("sm") / 2)}>
         <Show when={labelIsText()} fallback={label()}>
           <text color={theme.color.text} {...typeStyle("body")} maxLines={1}>
             {label()}
@@ -101,7 +106,7 @@ export function Item(props: ItemProps) {
         </Show>
         <Show when={props.description != null}>
           <Show when={descriptionIsText()} fallback={description()}>
-            <text color={theme.color.textMuted} {...typeStyle("caption")} maxLines={1}>
+            <text color={theme.color.textMuted} {...typeStyle("body")} maxLines={1}>
               {description()}
             </text>
           </Show>
@@ -109,7 +114,7 @@ export function Item(props: ItemProps) {
       </view>
       {props.endContent}
       <Show when={press.focused() && policy.focusRing}>
-        <d-rect drawStyle="stroke" color={theme.color.text} strokeWidth={2} radius={radius()} />
+        <d-rect drawStyle="stroke" color={theme.color.ring} strokeWidth={theme.borderWidth.focus} radius={radius()} />
       </Show>
     </view>
   )

package/src/nav-shell.tsx

@@ -5,6 +5,8 @@ import { theme } from "./theme"
 import { policy } from "./policy"
 import { space } from "./spacing"
 import { typeStyle } from "./typography"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
 export interface NavItem {
   value: unknown
@@ -14,7 +16,7 @@ export interface NavItem {
   icon?: any
 }
 
-export interface NavShellProps {
+export interface NavShellProps extends TransitionProps {
   items: NavItem[]
   // Controlled selected value. If omitted, the shell is uncontrolled.
   value?: unknown
@@ -25,9 +27,6 @@ export interface NavShellProps {
   layout?: LayoutProps
 }
 
-const RAIL_WIDTH = 72
-const SIDEBAR_WIDTH = 220
-
 /**
  * An app shell that arranges primary navigation around the content per the
  * navigation policy: bottom tabs under it, a narrow rail or a wide sidebar
@@ -77,15 +76,8 @@ export function NavShell(props: NavShellProps) {
     )
   }
 
-  let Hairline = (p: { vertical?: boolean }) => (
-    <view width={p.vertical ? 1 : undefined} height={p.vertical ? undefined : 1}>
-      <d-rect color={theme.color.border} />
-    </view>
-  )
-
   let Tabs = () => (
     <view flexDirection="column" flexShrink={0}>
-      <Hairline />
       <view flexDirection="row">
         <d-rect color={theme.color.surface} />
         <For each={props.items}>
@@ -97,17 +89,16 @@ export function NavShell(props: NavShellProps) {
 
   let Rail = () => (
     <view flexDirection="row" flexShrink={0}>
-      <view flexDirection="column" width={RAIL_WIDTH} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
+      <view flexDirection="column" width={theme.size.navRail} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
         <d-rect color={theme.color.surface} />
         <For each={props.items}>{(item: NavItem) => <StackedItem item={item} padY={theme.spacing.md} />}</For>
       </view>
-      <Hairline vertical />
     </view>
   )
 
   let Sidebar = () => (
     <view flexDirection="row" flexShrink={0}>
-      <view flexDirection="column" width={SIDEBAR_WIDTH} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
+      <view flexDirection="column" width={theme.size.navSidebar} gap={theme.spacing.sm} paddingTop={theme.spacing.md}>
         <d-rect color={theme.color.surface} />
         <For each={props.items}>
           {(item: NavItem) => {
@@ -140,14 +131,13 @@ export function NavShell(props: NavShellProps) {
           }}
         </For>
       </view>
-      <Hairline vertical />
     </view>
   )
 
   // Children order is (content, nav): "column" puts the nav under the content,
   // "row-reverse" puts it to the left, and the content node never moves.
   return (
-    <view flexDirection={policy.navigation === "bottomTabs" ? "column" : "row-reverse"} {...props.layout}>
+    <view flexDirection={policy.navigation === "bottomTabs" ? "column" : "row-reverse"} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
       <view flex={1} flexDirection="column">
         {props.children}
       </view>

package/src/policy.ts

@@ -29,7 +29,8 @@ export type Policies = {
   // only (per-run polarity, or the theme's palette polarity as the default),
   // with one extra step for small font sizes; see typography.ts.
   textWeightDelta: number
-  // Application policies: recommendations derived from the window size class.
+  // Application policies: recommendations derived from the window size class
+  // (layout), and from the resulting pane count (navigation).
   // The application owns the final decision; accept them by consuming
   // policy.navigation / policy.layout, or override via setPolicy.
   navigation: NavigationPolicy
@@ -52,6 +53,7 @@ export function defaultPolicyResolver(caps: Capabilities): Policies {
         : caps.precisePointer
           ? "desktop"
           : "hybrid"
+  let layout: LayoutPolicy = caps.windowSizeClass === "expanded" ? "twoPane" : "singlePane"
   return {
     interaction,
     density: interaction === "desktop" ? "compact" : "comfortable",
@@ -62,9 +64,12 @@ export function defaultPolicyResolver(caps: Capabilities): Policies {
     focusRing: caps.keyboardNav || gamepads().some((p) => p != null),
     textScale: env.textScale,
     textWeightDelta: env.displayScale < 1.5 ? 100 : 0,
-    navigation:
-      caps.windowSizeClass === "expanded" ? "sidebar" : caps.windowSizeClass === "medium" ? "rail" : "bottomTabs",
-    layout: caps.windowSizeClass === "expanded" ? "twoPane" : "singlePane",
+    // Navigation follows the pane count, not its own breakpoint: a side strip
+    // spends width, which a single-pane window is short of, so only a
+    // two-pane layout earns one. "rail" is never a default output; it is the
+    // narrow side nav an app can pick for a content-dense two-pane layout.
+    navigation: layout === "twoPane" ? "sidebar" : "bottomTabs",
+    layout,
   }
 }
 

package/src/pressable.tsx

@@ -1,11 +1,12 @@
 import { children } from "@solidrt/core"
 import type { LayoutProps, PointerProps } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 import { createPress, type PressState } from "./press"
 
 export type { PressState } from "./press"
 
-export interface PressableProps extends PointerProps {
+export interface PressableProps extends PointerProps, TransitionProps {
   // children and style may be functions of the press state, so a caller can
   // restyle on press/hover without wiring their own signals. The state is live
   // (getters, not a snapshot): read it inside a prop or child expression, never
@@ -50,8 +51,12 @@ export function Pressable(props: PressableProps) {
   let hasBackground = () => style()?.backgroundColor != null || style()?.borderRadius != null
   let hasBorder = () => (style()?.borderWidth ?? 0) > 0
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={(n: { id: number }) => {
         press.ref(n)
         props.ref?.(n)
@@ -79,6 +84,8 @@ export function Pressable(props: PressableProps) {
     >
       {hasBackground() ? (
         <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={style()?.backgroundColor ?? "transparent"}
           radius={style()?.borderRadius}
         />
@@ -87,6 +94,8 @@ export function Pressable(props: PressableProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={style()?.borderColor ?? "transparent"}
           strokeWidth={style()?.borderWidth}
           radius={style()?.borderRadius}

package/src/progress-bar.tsx

@@ -2,9 +2,10 @@ import { createSignal, onFrame, onLayout, getBoundingBox, Show } from "@solidrt/
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ProgressBarProps {
+export interface ProgressBarProps extends TransitionProps {
   // Progress from 0 to 1. Omit (or leave undefined) for an indeterminate bar: a
   // segment that slides back and forth.
   value?: number
@@ -71,7 +72,7 @@ export function ProgressBar(props: ProgressBarProps) {
   let offset = () => effectivePhase() * trackWidth() * (1 - SEGMENT)
 
   return (
-    <view ref={(n: { id: number }) => (trackNode = n)} position="relative" width="100%" height={h()} {...props.layout}>
+    <view ref={(n: { id: number }) => (trackNode = n)} position="relative" width="100%" height={h()} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
       <Show when={animating()}>
         <Animate />
       </Show>

package/src/qrcode.tsx

@@ -1,8 +1,11 @@
 import { createMemo } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import qrcode from "qrcode-generator"
+import { theme } from "./theme"
+import type { TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface QrCodeProps {
+export interface QrCodeProps extends TransitionProps {
   // The string to encode (URL, pairing ticket, text, ...).
   data: string
   // Pixels per QR module (the smallest square). The grid is
@@ -18,14 +21,13 @@ export interface QrCodeProps {
   // Error-correction level: higher tolerates more damage but packs denser and
   // caps the data length sooner.
   level?: "L" | "M" | "Q" | "H"
-  // Corner radius of the background panel.
+  // Corner radius of the background panel; defaults to the theme control radius.
   radius?: number
   layout?: LayoutProps
 }
 
 const MODULE_SIZE = 6
 const MARGIN = 16
-const RADIUS = 8
 
 // Render a QR for `data` as primitives: merge horizontal runs of dark modules
 // per row into a single d-rect, placed at explicit coordinates on a light
@@ -62,8 +64,8 @@ export function QrCode(props: QrCodeProps) {
   let side = () => grid().n * size() + 2 * margin()
 
   return (
-    <view repaintBoundary width={side()} height={side()} {...props.layout}>
-      <d-rect color={props.background ?? "#ffffff"} radius={props.radius ?? RADIUS} />
+    <view repaintBoundary width={side()} height={side()} transition={splitTransition(props.transition).root} onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)} {...props.layout}>
+      <d-rect color={props.background ?? "#ffffff"} radius={props.radius ?? theme.radius.md} />
       {grid().runs.map((run) => (
         <d-rect
           x={margin() + run.x * size()}

package/src/radio.tsx

@@ -2,9 +2,11 @@ import { createSignal, createContext, useContext, Show, children } from "@solidr
 import type { LayoutProps } from "@solidrt/core"
 import { createPress } from "./press"
 import { theme } from "./theme"
+import { policy } from "./policy"
 import { densityScale } from "./density"
 import { typeStyle } from "./typography"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
 // Shared selection state for a group. Created and consumed within this module, so
 // RadioGroup/Radio are a self-contained pair, not a cross-component dependency.
@@ -51,7 +53,7 @@ export function RadioGroup(props: RadioGroupProps) {
   )
 }
 
-export interface RadioProps {
+export interface RadioProps extends TransitionProps {
   // This option's value; selecting it makes it the group's value.
   value: unknown
   disabled?: boolean
@@ -71,7 +73,6 @@ export function Radio(props: RadioProps) {
   let ctx = useContext(RadioContext)
   let selected = () => ctx.value() === props.value
   let disabled = () => props.disabled || ctx.disabled()
-  let ringColor = () => (selected() ? theme.color.primary : theme.color.border)
   // Resolved once via children(): the typeof probe and the mount sites must
   // share one build - reading the raw getter again would orphan native nodes.
   let resolved = children(() => props.children)
@@ -84,9 +85,15 @@ export function Radio(props: RadioProps) {
   // Theme-level per-component overrides merged under the instance style.
   let styled = () => ({ ...theme.components.radio, ...props.style })
   let press = createPress({ onPress: () => ctx.select(props.value) })
+  // The circle doubles as the focus ring: ring color at the focus width.
+  let focusRing = () => press.focused() && policy.focusRing
+  let ringColor = () => (focusRing() ? theme.color.ring : selected() ? theme.color.primary : theme.color.border)
+  let ringWidth = () => (focusRing() ? theme.borderWidth.focus : 2)
 
   return (
     <view
+      transition={splitTransition(props.transition).root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={press.ref}
       repaintBoundary
       flexDirection="row"
@@ -99,13 +106,14 @@ export function Radio(props: RadioProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
       {...press.handlers}
+      focusable={!disabled()}
       pointerEvents={disabled() ? "none" : undefined}
     >
       <Show when={styled().backgroundColor != null || styled().borderRadius != null}>
         <d-rect color={styled().backgroundColor ?? "transparent"} radius={styled().borderRadius} />
       </Show>
       <view width={ring()} height={ring()}>
-        <d-oval drawStyle="stroke" color={ringColor()} strokeWidth={2} />
+        <d-oval drawStyle="stroke" color={ringColor()} strokeWidth={ringWidth()} />
         <Show when={selected()}>
           <d-oval x={inset()} y={inset()} w={ring() - inset() * 2} h={ring() - inset() * 2} color={theme.color.primary} />
         </Show>

package/src/rich-text-editor.tsx

@@ -3,11 +3,11 @@ import type { LayoutProps, TextInputHints } from "@solidrt/core"
 import type { TextRunRange } from "flux:rendertree"
 import { EditorField } from "./editor-field"
 import { createDocumentBuffer, type Attributes, type Document, type DocumentBuffer } from "./rich-text-document"
-import type { StyleProps } from "./types"
+import type { StyleProps, TransitionProps } from "./types"
 import { theme } from "./theme"
 import { policy } from "./policy"
 
-export interface RichTextEditorProps {
+export interface RichTextEditorProps extends TransitionProps {
   value?: Document
   defaultValue?: Document
   onInput?: (value: Document) => void
@@ -48,7 +48,7 @@ function fontOf(inline: Attributes, block: Attributes, base: number): Font {
   else if (heading === 3) font.fontSize = base
   if (heading === 1 || heading === 2 || heading === 3 || inline.bold) font.fontWeight = 700
   if (inline.italic) font.fontStyle = "italic"
-  if (inline.code) font.fontFamily = "mono"
+  if (inline.code) font.fontFamily = theme.text.monoFamily
   return font
 }
 
@@ -111,6 +111,8 @@ export function RichTextEditor(props: RichTextEditorProps) {
 
   return (
     <EditorField
+      transition={props.transition}
+      onTransitionEnd={props.onTransitionEnd}
       buffer={(step) => {
         editor = createDocumentBuffer({
           value: () => props.value,

package/src/scroll-view.tsx

@@ -1,14 +1,22 @@
-import { createPan, createScroll } from "@solidrt/core"
-import type { LayoutProps, PointerProps, WheelEvent } from "@solidrt/core"
-import type { StyleProps } from "./types"
+import { createPan, createScroll, createSignal, onSettled, untrack } from "@solidrt/core"
+import type { LayoutProps, PointerProps, Scroll, WheelEvent } from "@solidrt/core"
+import type { StyleProps, TransitionProps, TransitionScrollProp, TransitionStyleProp, TransitionViewProp } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface ScrollViewProps extends PointerProps {
+export interface ScrollViewProps
+  extends PointerProps,
+    TransitionProps<TransitionViewProp | TransitionStyleProp | TransitionScrollProp> {
   children?: any
   ref?: (node: { id: number }) => void
   layout?: LayoutProps
   style?: StyleProps
   /** Scroll the horizontal axis instead of the vertical one. */
   horizontal?: boolean
+  /** Receives the scroll handle (offset, range, scrollTo) for driving the view
+   * from app code; scroll policies such as following a growing log are written
+   * against it. Called once the component has settled, outside any reactive
+   * scope, so a signal setter can be passed directly. */
+  scrollRef?: (scroll: Scroll) => void
 }
 
 // A scrollable region. The outer box carries layout/style/transform and the
@@ -21,31 +29,81 @@ export interface ScrollViewProps extends PointerProps {
 // 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.
+const SCROLL_SPRING = { duration: 250 }
+
 export function ScrollView(props: ScrollViewProps) {
   let viewport: { id: number } | undefined
   let content: { id: number } | undefined
+  let [dragging, setDragging] = createSignal(false)
 
   let scroll = createScroll(
     () => viewport,
     () => content,
     { axis: props.horizontal ? "horizontal" : "vertical" },
   )
+  // Handed out from onSettled rather than the body: the body is an owned
+  // scope, where a signal write (an app passing its setter) is refused.
+  onSettled(() => {
+    untrack(() => props.scrollRef)?.(scroll)
+  })
 
   // 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),
+    onPanStart: () => setDragging(true),
+    onPanMove: (dx, dy) => scroll.scrollBy({ x: -dx, y: -dy }),
+    onPanEnd: () => setDragging(false),
   })
 
   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
     // emit deltaX take precedence).
-    if (props.horizontal) scroll.scrollBy(e.deltaX || e.deltaY, 0)
-    else scroll.scrollBy(e.deltaX, e.deltaY)
+    if (props.horizontal) scroll.scrollBy({ x: e.deltaX || e.deltaY })
+    else scroll.scrollBy({ x: e.deltaX, y: e.deltaY })
   }
 
+  // The viewport owns the scroll offset, the outer box everything else: a
+  // scrollX/scrollY entry is lifted out of the root declaration so that a
+  // shared `all` does not animate opacity twice (outer times viewport).
+  let split = () => {
+    let t = splitTransition(props.transition)
+    if (t.root == null || typeof t.root === "string") return { ...t, viewport: t.root }
+    let { scrollX, scrollY, ...rest } = t.root as Record<string, unknown>
+    let viewport: Record<string, unknown> = {}
+    if (scrollX !== undefined) viewport.scrollX = scrollX
+    if (scrollY !== undefined) viewport.scrollY = scrollY
+    if (rest.all !== undefined) viewport.all = rest.all
+    return {
+      ...t,
+      root: Object.keys(rest).length ? (rest as typeof t.root) : undefined,
+      viewport: Object.keys(viewport).length ? (viewport as typeof t.root) : undefined,
+    }
+  }
+  // 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.
+  let viewportTransition = () => {
+    let user = split().viewport
+    let entries: Record<string, unknown> = typeof user === "string" ? { all: user } : { ...(user ?? {}) }
+    if (dragging() || scroll.behavior() === "instant") {
+      let { scrollX, scrollY, all, ...rest } = entries
+      if (all !== undefined) rest.clipRadius = all
+      return Object.keys(rest).length ? rest : null
+    }
+    return { scrollX: SCROLL_SPRING, scrollY: SCROLL_SPRING, ...entries }
+  }
   let direction = () => (props.horizontal ? "row" : "column")
   let hasBackground = () =>
     props.style?.backgroundColor != null || props.style?.borderRadius != null
@@ -53,6 +111,8 @@ export function ScrollView(props: ScrollViewProps) {
 
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       ref={props.ref}
       {...props.layout}
       x={props.style?.x}
@@ -70,16 +130,23 @@ export function ScrollView(props: ScrollViewProps) {
     >
       {hasBackground() ? (
         <d-rect
+          transition={split().background}
+          onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)}
           color={props.style?.backgroundColor ?? "transparent"}
           radius={props.style?.borderRadius}
         />
       ) : null}
+      {/* transition before scrollX/scrollY: props apply in source order, and
+          an instant write needs the withdrawn declaration to land before the
+          value in the same flush, or the value starts a spring anyway. */}
       <view
         ref={(n: { id: number }) => (viewport = n)}
         flex={1}
         overflow="hidden"
         clipRadius={props.style?.borderRadius}
         flexDirection={direction()}
+        transition={viewportTransition()}
+        onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
         scrollX={scroll.offset().x}
         scrollY={scroll.offset().y}
         {...pan.handlers}
@@ -92,6 +159,8 @@ export function ScrollView(props: ScrollViewProps) {
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"
+          transition={split().border}
+          onTransitionEnd={transitionEndFor("border", props.onTransitionEnd)}
           color={props.style?.borderColor ?? "transparent"}
           strokeWidth={props.style?.borderWidth}
           radius={props.style?.borderRadius}

package/src/segmented-control.tsx

@@ -1,13 +1,14 @@
-import { createSignal, For } from "@solidrt/core"
+import { createSignal, For, Show } 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"
+import type { Option, StyleProps, TransitionProps } from "./types"
+import { splitTransition, transitionEndFor } from "./types"
 
-export interface SegmentedControlProps {
+export interface SegmentedControlProps extends TransitionProps {
   options: Option[]
   // Controlled selected value. If omitted, the control is uncontrolled.
   value?: unknown
@@ -59,8 +60,12 @@ export function SegmentedControl(props: SegmentedControlProps) {
   let label = (active: boolean) =>
     props.disabled ? theme.color.textMuted : active ? theme.color.onPrimary : theme.color.text
 
+  let split = () => splitTransition(props.transition)
+
   return (
     <view
+      transition={split().root}
+      onTransitionEnd={transitionEndFor("root", props.onTransitionEnd)}
       flexDirection="row"
       gap={DIVIDER}
       {...props.layout}
@@ -70,7 +75,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
       rotate={styled().rotate}
       opacity={styled().opacity}
     >
-      <d-rect color={theme.color.border} radius={radius()} />
+      <d-rect transition={split().background} onTransitionEnd={transitionEndFor("background", props.onTransitionEnd)} color={theme.color.border} radius={radius()} />
       <For each={props.options}>
         {(opt, i) => {
           let active = () => value() === opt.value
@@ -81,7 +86,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
             press.hovered() && !props.disabled && policy.interaction !== "touch"
               ? theme.color.overlayHover
               : "transparent"
-          return (
+  return (
             <view
               ref={press.ref}
               repaintBoundary
@@ -93,10 +98,14 @@ export function SegmentedControl(props: SegmentedControlProps) {
               paddingLeft={space("md")}
               paddingRight={space("md")}
               {...press.handlers}
+              focusable={!props.disabled}
               pointerEvents={props.disabled ? "none" : undefined}
             >
               <d-rect color={fill()} radius={corners(i())} />
               <d-rect color={overlay()} radius={corners(i())} />
+              <Show when={press.focused() && policy.focusRing}>
+                <d-rect drawStyle="stroke" color={theme.color.ring} strokeWidth={theme.borderWidth.focus} radius={corners(i())} />
+              </Show>
               <text
                 color={label(active())}
                 {...typeStyle("body", active() ? lightOnDark(label(true), activeFill()) : undefined)}