@solidrt/components 0.0.66 → 0.0.68

package/README.md

@@ -163,9 +163,11 @@ API: `StyleProps`, `Glow`, `Glass`, `Material`, `MaterialRole`, `ElevationLevel`
 
 `typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, and `fontWeight` carries the low-DPI weight compensation. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
 
+`typeScaleStyles()` is the type scale as font styles (every role in both polarities' weights, plus the mono family at body size), and `warmTypeScale()` hands them to core's `warmText`, which makes their glyph cells ahead of the first screen on the text engine's worker. `Window` does this on mount and again when the theme or the text policy changes; an app that draws its own window calls it once at startup.
+
 The compensation exists because the renderer rasterizes glyphs unhinted and composites in nonlinear sRGB, which thins light-on-dark text on low-DPI displays as glyphs shrink. `typeWeight(weight, size, onDark?)` adds `policy.textWeightDelta` (0 on high-DPI displays) plus one extra step below 16px; dark-on-light text passes through untouched. `lightOnDark(text, fill)` computes the polarity for a known pair of colors (Button uses it for its fills); omitted, the theme's own palette polarity is used.
 
-API: `typeStyle`, `typeWeight`, `lightOnDark` - typed and commented in [src/typography.ts](./src/typography.ts).
+API: `typeStyle`, `typeWeight`, `lightOnDark`, `typeScaleStyles`, `warmTypeScale` - typed and commented in [src/typography.ts](./src/typography.ts).
 
 ## Spacing
 

package/docs/typography.md

@@ -2,4 +2,6 @@
 
 `typeStyle(variant)` resolves a theme type-scale role (`caption`/`label`/`body`/`title`/`heading`) to font props ready to spread onto a `<text>` or `d-text`: `fontSize` carries `policy.textScale`, and `fontWeight` carries the low-DPI weight compensation. Reactive when called inside a tracked scope, like any theme/policy read. `Text` applies it for you; reach for the helpers when building custom text out of core primitives.
 
+`typeScaleStyles()` is the type scale as font styles (every role in both polarities' weights, plus the mono family at body size), and `warmTypeScale()` hands them to core's `warmText`, which makes their glyph cells ahead of the first screen on the text engine's worker. `Window` does this on mount and again when the theme or the text policy changes; an app that draws its own window calls it once at startup.
+
 The compensation exists because the renderer rasterizes glyphs unhinted and composites in nonlinear sRGB, which thins light-on-dark text on low-DPI displays as glyphs shrink. `typeWeight(weight, size, onDark?)` adds `policy.textWeightDelta` (0 on high-DPI displays) plus one extra step below 16px; dark-on-light text passes through untouched. `lightOnDark(text, fill)` computes the polarity for a known pair of colors (Button uses it for its fills); omitted, the theme's own palette polarity is used.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -21,6 +21,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.13",
-    "@solidrt/core": "0.0.66"
+    "@solidrt/core": "0.0.68"
   }
 }

package/src/carousel.tsx

@@ -66,6 +66,11 @@ export function Carousel(props: CarouselProps) {
       setDrag(0)
       setDragging(false)
     },
+    // The page in view stays: the drag snaps back.
+    onSwipeCancel: () => {
+      setDrag(0)
+      setDragging(false)
+    },
   })
 
   let split = () => splitTransition(props.transition)

package/src/context-menu.tsx

@@ -184,6 +184,7 @@ export function ContextMenu(props: ContextMenuProps) {
       onPointerDown={handleDown}
       onPointerMove={longPress.handlers.onPointerMove}
       onPointerUp={longPress.handlers.onPointerUp}
+      onPointerCancel={longPress.handlers.onPointerCancel}
       {...props.layout}
     >
       {props.children}

package/src/dismissible.tsx

@@ -69,6 +69,10 @@ export function Dismissible(props: DismissibleProps) {
       setDragging(false)
       if (!leave) setOffset(0)
     },
+    onSwipeCancel: () => {
+      setDragging(false)
+      setOffset(0)
+    },
   })
 
   let settled = (e: TransitionEndEvent) => {

package/src/editor-field.tsx

@@ -235,7 +235,8 @@ export function EditorField(props: EditorFieldProps) {
     }
   }
 
-  let handleViewportPointerUp = (e: PointerEvent) => {
+  // A lift or a cancel: the selection drag ends where it is.
+  let handleViewportPointerEnd = (e: PointerEvent) => {
     if (dragArmed === e.pointerId) dragArmed = null
     if (dragActive === e.pointerId) {
       arena.release(e.pointerId, dragOwner)
@@ -523,7 +524,8 @@ export function EditorField(props: EditorFieldProps) {
         scrollY={editor.scrollY()}
         onPointerDown={handleViewportPointerDown}
         onPointerMove={handleViewportPointerMove}
-        onPointerUp={handleViewportPointerUp}
+        onPointerUp={handleViewportPointerEnd}
+        onPointerCancel={handleViewportPointerEnd}
       >
         {showPlaceholder() ? (
           <d-text w={PLACEHOLDER_SHAPE_WIDTH} {...font()} color={theme.color.textMuted} maxLines={1}>

package/src/image.tsx

@@ -89,6 +89,7 @@ export function Image(props: ImageProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}

package/src/index.ts

@@ -70,7 +70,7 @@ export {
   type LayoutPolicy,
 } from "./policy"
 export { Density, type DensityProps, densityScale } from "./density"
-export { typeStyle, typeWeight, lightOnDark } from "./typography"
+export { typeStyle, typeWeight, lightOnDark, typeScaleStyles, warmTypeScale } from "./typography"
 export { space } from "./spacing"
 export type {
   StyleProps,

package/src/press.ts

@@ -19,6 +19,7 @@ export interface PressOptions {
   disabled?: boolean
   onPointerDown?: (e: PointerEvent) => void
   onPointerUp?: (e: PointerEvent) => void
+  onPointerCancel?: (e: PointerEvent) => void
   onPointerMove?: (e: PointerEvent) => void
   onPointerEnter?: (e: PointerEvent) => void
   onPointerLeave?: (e: PointerEvent) => void
@@ -43,7 +44,8 @@ export interface PressOptions {
 // when the firing waits for that recognizer to fail (the double-tap
 // window passing) and is dropped when it wins. 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
+// the external-cancel hook; it and a pointer cancel (the system taking the
+// touch away) end 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).
@@ -190,6 +192,10 @@ export function createPress(options: PressOptions) {
       }
       options.onPointerUp?.(e)
     },
+    onPointerCancel: (e: PointerEvent) => {
+      if (active === e.pointerId) cancel()
+      options.onPointerCancel?.(e)
+    },
     onPointerEnter: (e: PointerEvent) => {
       setHovered(true)
       options.onPointerEnter?.(e)

package/src/pressable.tsx

@@ -80,6 +80,7 @@ export function Pressable(props: PressableProps) {
       onPointerLeave={press.handlers.onPointerLeave}
       onPointerDown={press.handlers.onPointerDown}
       onPointerUp={press.handlers.onPointerUp}
+      onPointerCancel={press.handlers.onPointerCancel}
       onPointerMove={press.handlers.onPointerMove}
       onWheel={props.onWheel}
       onFocus={press.handlers.onFocus}

package/src/scroll-view.tsx

@@ -97,6 +97,8 @@ export function ScrollView(props: ScrollViewProps) {
       setFling(true)
       scroll.scrollTo(props.horizontal ? { x: dest } : { y: dest })
     },
+    // The content stays where the finger left it: nothing flings.
+    onPanCancel: () => setDragging(false),
   })
   // 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,
@@ -193,6 +195,7 @@ export function ScrollView(props: ScrollViewProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       pointerEvents={props.pointerEvents}
@@ -221,6 +224,7 @@ export function ScrollView(props: ScrollViewProps) {
         onPointerDown={hold}
         onPointerMove={pan.handlers.onPointerMove}
         onPointerUp={pan.handlers.onPointerUp}
+        onPointerCancel={pan.handlers.onPointerCancel}
         onWheel={onWheel}
       >
         <view ref={(n: { id: number }) => (content = n)} flexShrink={0} flexDirection={direction()}>

package/src/segmented-control.tsx

@@ -208,6 +208,7 @@ export function SegmentedControl<T>(props: SegmentedControlProps<T>) {
             onPress: () => select(opt.value),
             onPointerDown: () => setPressedValue(() => opt.value),
             onPointerUp: () => setPressedValue(undefined),
+            onPointerCancel: () => setPressedValue(undefined),
           })
           onCleanup(() => segs.delete(opt.value))
           return (

package/src/slider.tsx

@@ -122,7 +122,8 @@ export function Slider(props: SliderProps) {
     if (active !== e.pointerId) return
     setFromLocalX(e.localX)
   }
-  let handleUp = (e: PointerEvent) => {
+  // A lift or a cancel: the drag ends where the thumb is.
+  let handleEnd = (e: PointerEvent) => {
     if (active === e.pointerId) endDrag()
   }
 
@@ -161,7 +162,8 @@ export function Slider(props: SliderProps) {
       focusable={!props.disabled}
       onPointerDown={handleDown}
       onPointerMove={handleMove}
-      onPointerUp={handleUp}
+      onPointerUp={handleEnd}
+      onPointerCancel={handleEnd}
       onKeyDown={handleKeyDown}
     >
       {/* Colors fade with the theme; the fill's w and the thumb's x never

package/src/text.tsx

@@ -68,6 +68,7 @@ export function Text(props: TextProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}

package/src/typography.ts

@@ -1,4 +1,5 @@
-import { brightness } from "@solidrt/core"
+import { brightness, warmText } from "@solidrt/core"
+import type { MeasureTextOptions } from "@solidrt/core"
 import { theme, type TextStyle, type TextVariant } from "./theme"
 import { policy } from "./policy"
 
@@ -55,3 +56,30 @@ export function typeStyle(variant: TextVariant, onDark?: boolean) {
     fontWeight: typeWeight(role.weight, size, onDark),
   }
 }
+
+// Every role of the type scale, in both polarities' weights (a button's
+// label on its primary fill is the opposite polarity of body text), plus
+// the mono family at body size for code spans.
+const TYPE_SCALE_VARIANTS: TextVariant[] = ["caption", "label", "body", "title", "heading"]
+
+// The font styles the theme's type scale draws in, as warmText takes them.
+// Reactive like typeStyle: a theme or policy change yields the new set.
+export function typeScaleStyles(): MeasureTextOptions[] {
+  let styles: MeasureTextOptions[] = []
+  for (let variant of TYPE_SCALE_VARIANTS) {
+    for (let onDark of [false, true]) {
+      let style = typeStyle(variant, onDark)
+      styles.push({ fontFamily: style.fontFamily, fontSize: style.fontSize, fontWeight: style.fontWeight })
+    }
+  }
+  let body = typeStyle("body")
+  styles.push({ fontFamily: theme.text.monoFamily, fontSize: body.fontSize, fontWeight: body.fontWeight })
+  return styles
+}
+
+// Warm the text engine for the theme's type scale (see warmText in
+// @solidrt/core): the components' Window does this on mount and on every
+// theme change; an app without one calls it at startup.
+export function warmTypeScale(): void {
+  warmText(typeScaleStyles())
+}

package/src/view.tsx

@@ -40,6 +40,7 @@ export function View(props: ViewProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}

package/src/window.tsx

@@ -1,8 +1,9 @@
-import { displayScale } from "@solidrt/core"
+import { createEffect, displayScale, warmText } from "@solidrt/core"
 import type { LayoutProps, PointerProps, WindowShaderProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 import { colorFade } from "./motion"
 import { theme } from "./theme"
+import { typeScaleStyles } from "./typography"
 
 export interface WindowProps extends PointerProps {
   children?: any
@@ -35,6 +36,13 @@ function themeFinish(): WindowShaderProps | null {
 // the paint-only backgroundColor from style applies here. Its finish is the
 // theme's, or the app's own (`shader`).
 export function Window(props: WindowProps) {
+  // The theme's type scale warmed ahead of the first screen, and again
+  // when the theme or the text policy changes it (a warmed style costs
+  // nothing twice).
+  createEffect(
+    () => typeScaleStyles(),
+    styles => warmText(styles),
+  )
   return (
     <window
       {...props.layout}
@@ -45,6 +53,7 @@ export function Window(props: WindowProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}