@rafaelaugusto/jolt 0.1.0-rc.13 → 0.1.0-rc.14

package/src/web/drag.ts

@@ -26,6 +26,8 @@ export interface WebDragOptions {
   rubberband?: boolean
   /** Drive a borrowed numeric value instead of the input element's translation. */
   value?: WebMotionValue
+  /** Element inside the dragged element that alone starts the drag; it may be a button. */
+  handle?: HTMLElement
   onStart?: (event: WebDragEvent) => void
   onMove?: (event: WebDragEvent) => void
   onRelease?: (event: WebDragRelease) => void
@@ -86,6 +88,7 @@ export function dragOptions(options: WebDragOptions) {
         'friction',
         'rubberband',
         'value',
+        'handle',
         'onStart',
         'onMove',
         'onRelease',
@@ -197,14 +200,42 @@ export function assertDragSpace(target: HTMLElement, baselineIdentity: boolean)
   }
 }
 
+interface DragAdapter {
+  shift(delta: DragPoint): void
+  beforeRelease?: (moved: boolean) => void
+}
+const adapters = new WeakMap<WebDrag, DragAdapter>()
+/** Internal adapter hook: offset an active contact without moving it under the pointer. */
+export function shiftDrag(drag: WebDrag, delta: DragPoint) {
+  adapters.get(drag)?.shift(delta)
+}
+/** Internal adapter hook: inspect the final input before release motion changes values. */
+export function beforeDragRelease(drag: WebDrag, callback: (moved: boolean) => void) {
+  const adapter = adapters.get(drag)
+  if (adapter) adapter.beforeRelease = callback
+}
+const contains = (target: HTMLElement, handle: HTMLElement) => {
+  for (const node of renderedAncestors(handle))
+    if (node === target) return handle !== target
+  return false
+}
+
 export function createDrag(target: HTMLElement, input: WebDragOptions, host: DragHost) {
   const options = dragOptions(input)
   const document = target.ownerDocument
   const view = document.defaultView! as Window & typeof globalThis
+  const handle = options.handle ?? target
+  if (
+    options.handle !== undefined &&
+    (!(handle instanceof view.HTMLElement) ||
+      handle.ownerDocument !== document ||
+      !contains(target, handle))
+  )
+    throw new TypeError('A drag handle must be an element inside the dragged element.')
   const abort = new view.AbortController()
-  const originalTouch = target.style.touchAction
+  const originalTouch = handle.style.touchAction
   const touch = options.axis === 'x' ? 'pan-y' : options.axis === 'y' ? 'pan-x' : 'none'
-  target.style.touchAction = touch
+  handle.style.touchAction = touch
   let pointer: number | undefined,
     disabled = options.disabled ?? false,
     disposed = false,
@@ -251,10 +282,11 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
       disposed ||
       !target.isConnected ||
       target.ownerDocument !== document ||
-      target.matches(':disabled')
+      target.matches(':disabled') ||
+      (handle !== target && (handle.matches(':disabled') || !contains(target, handle)))
     )
       return true
-    for (const node of renderedAncestors(target)) {
+    for (const node of renderedAncestors(handle)) {
       if (
         node.hasAttribute('inert') ||
         node.getAttribute('aria-disabled') === 'true' ||
@@ -285,7 +317,7 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
     notify('onMove', velocity(samples.at(-1)?.time ?? 0))
   }
   const releaseCapture = (id: number) => {
-    if (target.hasPointerCapture(id)) target.releasePointerCapture(id)
+    if (handle.hasPointerCapture(id)) handle.releasePointerCapture(id)
   }
   const stopRelease = () => {
     const current = animation
@@ -363,7 +395,7 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
       passive,
       capture: captureEvent,
     })
-  listen(target, 'pointerdown', (event: PointerEvent) => {
+  listen(handle, 'pointerdown', (event: PointerEvent) => {
     if (
       disposed ||
       pointer !== undefined ||
@@ -374,7 +406,7 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
     )
       return
     for (const node of event.composedPath()) {
-      if (node === target) break
+      if (node === handle) break
       if (
         node instanceof view.Element &&
         node.matches(
@@ -404,7 +436,7 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
     samples = []
     capture(event)
     try {
-      target.setPointerCapture(pointer)
+      handle.setPointerCapture(pointer)
       notify('onStart')
     } catch (error) {
       cancel()
@@ -436,6 +468,15 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
       capture(event)
       flush()
       if (pointer === undefined) return
+      const hook = adapter.beforeRelease
+      if (hook) {
+        try {
+          hook(moved)
+        } catch (error) {
+          host.error(error)
+        }
+        if (pointer === undefined) return
+      }
       const p = position(),
         id = pointer
       pointer = undefined
@@ -494,7 +535,7 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
   }
   watchRoot()
   listen(
-    target,
+    handle,
     'dragstart',
     (event) => {
       if (pointer !== undefined) event.preventDefault()
@@ -502,7 +543,7 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
     false,
   )
   listen(
-    target,
+    handle,
     'click',
     (event: MouseEvent) => {
       if (event.detail > 0 && view.performance.now() < suppressUntil) {
@@ -525,10 +566,25 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
     scrollRoot = undefined
     if (stopAnimation && target.isConnected && target.ownerDocument === document)
       animation?.stop()
-    if (target.style.touchAction === touch) target.style.touchAction = originalTouch
+    if (handle.style.touchAction === touch) handle.style.touchAction = originalTouch
     host.dispose()
   }
-  return {
+  const adapter: DragAdapter = {
+    shift: (delta) => shift(delta),
+  }
+  const shift = (delta: DragPoint) => {
+    if (pointer === undefined || disposed) return
+    const before = position()
+    origin = { x: origin.x + delta.x, y: origin.y + delta.y }
+    const after = position()
+    samples = samples.map((sample) => ({
+      ...sample,
+      x: sample.x + after.x - before.x,
+      y: sample.y + after.y - before.y,
+    }))
+    host.write(after, velocity(samples.at(-1)?.time ?? 0))
+  }
+  const controller = {
     handle: {
       get dragging() {
         return pointer !== undefined
@@ -580,4 +636,6 @@ export function createDrag(target: HTMLElement, input: WebDragOptions, host: Dra
     },
     detach: () => dispose(!!options.value),
   }
+  adapters.set(controller.handle, adapter)
+  return controller
 }

package/src/web/drop-zones.ts

@@ -1,7 +1,20 @@
 import { createDropPolicy, type DropOptions, type DropZones } from '../core/drop.js'
-import type { WebDrag, WebDragOptions } from './drag.js'
+import {
+  beforeDragRelease,
+  shiftDrag,
+  type WebDrag,
+  type WebDragOptions,
+} from './drag.js'
 import { inputBlocked, inputEvents, type InteractionHost } from './interaction.js'
-export type { DropEvent, DropTarget, DropZones, DropEffect } from '../core/drop.js'
+export type {
+  DropEvent,
+  DropMoveEvent,
+  DropPadding,
+  DropRect,
+  DropTarget,
+  DropZones,
+  DropEffect,
+} from '../core/drop.js'
 export interface WebDropZoneOptions extends DropOptions<HTMLElement> {
   drag?: Omit<
     WebDragOptions,
@@ -46,6 +59,12 @@ export function createDropZones(
     enabled: () => !document.hidden && !inputOptions.disabled,
     cancelDrag: cancelInput,
     error: host.error,
+    translation: () => input?.position ?? { x: 0, y: 0 },
+    shift: (x, y) => {
+      if (!input) return
+      shiftDrag(input, { x, y })
+      flushSource()
+    },
   })
   const releases: (() => void)[] = []
   const controller: DropZones = {
@@ -65,7 +84,11 @@ export function createDropZones(
       return policy.handle.disposed
     },
     request: (id) => policy.handle.request(id),
-    refresh: () => policy.handle.refresh(),
+    refresh: () => {
+      // Measure the painted translation, not a newer unrendered input sample.
+      if (policy.handle.dragging) flushSource()
+      policy.handle.refresh()
+    },
     cancel() {
       try {
         policy.handle.cancel()
@@ -104,13 +127,15 @@ export function createDropZones(
         flushSource()
         policy.move()
       },
-      onRelease: () => {
-        policy.release()
-      },
       onCancel: () => {
         if (!handoff) policy.handle.cancel()
       },
     })
+    // Commit before the return motion starts; reduced motion would settle it at once.
+    beforeDragRelease(input, (moved) => {
+      if (moved) policy.release()
+      else policy.handle.cancel()
+    })
     releases.push(host.register(source, controller, controller.refresh))
     // A removed accepting target cancels its owned effect.
     for (const entry of options.targets)

package/src/web/loading.ts

@@ -8,13 +8,14 @@ import {
   type EffectHost,
 } from './effect.js'
 import { parseColor } from './style.js'
+import { loaderDefinition, shimmerDefinition, type LoaderStyle } from '../core/loading.js'
 import type { WebInteraction } from './interaction.js'
 
 export interface WebShimmerOptions {
   duration?: number
 }
 export interface WebLoaderOptions {
-  style?: 'dots' | 'bars' | 'ring'
+  style?: LoaderStyle
   color?: string
   size?: number
   duration?: number
@@ -35,17 +36,26 @@ export function createShimmer(
   effectTarget(target, host)
   effectOptions(options, ['duration'])
   const duration =
-    finiteOption(options.duration ?? 1500, 'Shimmer duration', 0, false) /
-    host.settings().timeScale
+    finiteOption(
+      options.duration ?? shimmerDefinition.duration,
+      'Shimmer duration',
+      0,
+      false,
+    ) / host.settings().timeScale
+  const { angle, stops, opacity, travel } = shimmerDefinition.highlight
+  const band = stops
+    .map((stop, i) =>
+      opacity[i] ? `rgba(255,255,255,${opacity[i]}) ${stop}%` : `transparent ${stop}%`,
+    )
+    .join(',')
   return loading(target, 'shimmer', host, (layer) => {
     const beam = host.document.createElement('span')
-    beam.style.cssText =
-      'display:block;position:absolute;inset:0;background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.55) 50%,transparent 85%);'
+    beam.style.cssText = `display:block;position:absolute;inset:0;background:linear-gradient(${angle}deg,${band});`
     layer.append(beam)
     return [
       {
         target: beam,
-        frames: [{ transform: 'translateX(-100%)' }, { transform: 'translateX(100%)' }],
+        frames: travel.map((x) => ({ transform: `translateX(${x * 100}%)` })),
         timing: { duration },
       },
     ]
@@ -59,17 +69,27 @@ export function createLoader(
 ) {
   effectTarget(target, host)
   effectOptions(options, ['style', 'color', 'size', 'duration'])
-  const style = options.style ?? 'dots',
-    color = options.color ?? '#71717a'
+  const style = options.style ?? loaderDefinition.style,
+    color = options.color ?? loaderDefinition.color
   if (!['dots', 'bars', 'ring'].includes(style))
     throw new TypeError('Unknown loader style.')
   if (typeof color !== 'string')
     throw new TypeError('Loader color must be a resolved CSS color.')
   parseColor(host.document, color)
-  const size = finiteOption(options.size ?? 48, 'Loader size', 0, false)
+  const size = finiteOption(
+    options.size ?? loaderDefinition.size,
+    'Loader size',
+    0,
+    false,
+  )
   const duration =
-    finiteOption(options.duration ?? 1200, 'Loader duration', 0, false) /
-    host.settings().timeScale
+    finiteOption(
+      options.duration ?? loaderDefinition.duration,
+      'Loader duration',
+      0,
+      false,
+    ) / host.settings().timeScale
+  const css = loaderDefinition.css
   return loading(target, 'loader', host, (layer) => {
     layer.style.display = 'grid'
     layer.style.placeItems = 'center'
@@ -78,7 +98,7 @@ export function createLoader(
     layer.append(box)
     if (style === 'ring') {
       const ring = host.document.createElement('span')
-      ring.style.cssText = `display:block;width:75%;aspect-ratio:1;box-sizing:border-box;border:3px solid ${color};border-right-color:transparent;border-radius:50%;`
+      ring.style.cssText = `display:block;width:${css.ring.diameter}%;aspect-ratio:1;box-sizing:border-box;border:${css.ring.border}px solid ${color};border-right-color:transparent;border-radius:50%;`
       box.append(ring)
       return [
         {
@@ -88,18 +108,19 @@ export function createLoader(
         },
       ]
     }
-    return Array.from({ length: style === 'dots' ? 3 : 5 }, (_, i) => {
+    const shape = css[style]
+    return Array.from({ length: loaderDefinition.kinds[style].count }, (_, i) => {
       const item = host.document.createElement('span')
-      item.style.cssText = `display:block;background:${color};width:${style === 'dots' ? 20 : 12}%;height:${style === 'dots' ? 20 : 65}%;border-radius:${style === 'dots' ? '50%' : '3px'};`
+      item.style.cssText = `display:block;background:${color};width:${shape.width}%;height:${shape.height}%;border-radius:${shape.radius};`
       box.append(item)
       return {
         target: item,
         frames: [
-          { transform: 'scaleY(.45)', opacity: 0.45 },
+          { transform: `scaleY(${css.pulse})`, opacity: css.pulse },
           { transform: 'scaleY(1)', opacity: 1 },
-          { transform: 'scaleY(.45)', opacity: 0.45 },
+          { transform: `scaleY(${css.pulse})`, opacity: css.pulse },
         ],
-        timing: { duration, delay: (i * duration) / 7, easing: 'ease-in-out' },
+        timing: { duration, delay: (i * duration) / css.stagger, easing: css.ease },
       }
     })
   })

package/src/web/pointer.ts

@@ -20,6 +20,8 @@ export interface WebPointerFollow {
   readonly y: WebReadableValue
   readonly presence: WebReadableValue
   readonly active: boolean
+  /** Pointer Events plus `(any-hover: hover)` while the source is listening; not a connected-device check. */
+  readonly available: boolean
   readonly disposed: boolean
   readonly suspended: boolean
   update(state: { disabled: boolean }): void
@@ -110,6 +112,10 @@ export function createPointerFollow(
     active = false
   let dirty = false,
     latest: { x: number; y: number; id: number } | undefined
+  const hover =
+    typeof view.PointerEvent === 'function'
+      ? view.matchMedia?.('(any-hover: hover)')
+      : undefined
   let abort: AbortController | undefined
   let observer: MutationObserver | undefined
   let resize: ResizeObserver | undefined
@@ -204,6 +210,10 @@ export function createPointerFollow(
     if (document.hidden) reset(true)
     else invalidate()
   }
+  const capability = () => {
+    if (!hover?.matches) reset()
+    else invalidate()
+  }
   const detach = () => {
     abort?.abort()
     abort = undefined
@@ -222,6 +232,7 @@ export function createPointerFollow(
     region.addEventListener('pointercancel', leave, options)
     view.addEventListener('blur', () => reset(true), options)
     document.addEventListener('visibilitychange', visibility, options)
+    hover?.addEventListener?.('change', capability, options)
     document.addEventListener('scroll', invalidate, { ...options, capture: true })
     view.addEventListener('resize', invalidate, options)
     document.fonts?.addEventListener('loadingdone', invalidate, options)
@@ -260,6 +271,9 @@ export function createPointerFollow(
     get active() {
       return active
     },
+    get available() {
+      return !disposed && !suspended && !!hover?.matches && !blocked()
+    },
     get disposed() {
       return disposed
     },

package/src/web/public.ts

@@ -39,6 +39,9 @@ export type {
   DropZones,
   DropTarget,
   DropEvent,
+  DropMoveEvent,
+  DropPadding,
+  DropRect,
   DropEffect,
 } from './drop-zones.js'
 export type {

package/src/web/reveal.ts

@@ -1,5 +1,6 @@
 import { createTrack } from '../core/track.js'
 import { resolveTransition } from '../core/transition.js'
+import { revealDefinition, revealRadius } from '../core/loading.js'
 import { flatten, sampled } from './curve.js'
 import { borderBox } from './style.js'
 import {
@@ -31,7 +32,10 @@ export function createReveal(
 ) {
   const view = effectTarget(target, host)
   effectOptions(options, [opening ? 'from' : 'to', 'duration'])
-  const duration = finiteOption(options.duration ?? 400, 'Reveal duration')
+  const duration = finiteOption(
+    options.duration ?? revealDefinition.duration,
+    'Reveal duration',
+  )
   const point = opening
     ? (options as WebRevealOptions).from
     : (options as WebConcealOptions).to
@@ -46,18 +50,13 @@ export function createReveal(
   const bounds = borderBox(target),
     x = point?.x ?? bounds.width / 2,
     y = point?.y ?? bounds.height / 2
-  const radius = Math.max(
-    Math.hypot(x, y),
-    Math.hypot(bounds.width - x, y),
-    Math.hypot(x, bounds.height - y),
-    Math.hypot(bounds.width - x, bounds.height - y),
-  )
+  const radius = revealRadius(bounds.width, bounds.height, x, y)
   const initial = before?.circle() ?? { x, y, radius: opening ? 0 : radius }
   const destination = { x, y, radius: opening ? radius : 0 }
   const track = createTrack(
     'x',
     [0, 1],
-    resolveTransition({ duration, ease: 'easeInOut' }, 'x', 2),
+    resolveTransition({ duration, ease: revealDefinition.ease }, 'x', 2),
     0,
     host.settings(),
   )

package/src/web/text-effect.ts

@@ -1,4 +1,11 @@
 import { graphemes, diffFromEnd } from '../core/roll-diff.js'
+import {
+  MAX_TEXT_GRAPHEMES,
+  isVisiblePiece,
+  staggeredStart,
+  textPieces as pieces,
+  type TextPiece as Piece,
+} from '../core/text-pieces.js'
 import { createTrack, type Track } from '../core/track.js'
 import { resolveTransition } from '../core/transition.js'
 import { flatten } from './curve.js'
@@ -31,7 +38,6 @@ export interface WebRollOptions {
   direction?: 'auto' | 'up' | 'down'
   tabular?: boolean
 }
-type Piece = { start: number; end: number; text: string; group: number }
 type Fragment = { element: HTMLElement; start: number; text: string; group: number }
 type Copy = { layer: HTMLElement; fragments: Fragment[]; width: number; height: number }
 type Active = { host: EffectHost; animation: EffectAnimation; snapshot(): HTMLElement }
@@ -115,22 +121,11 @@ function source(target: HTMLElement, host: EffectHost) {
   if (old && old.host.identity !== host.identity)
     throw new Error('Text belongs to another motion context.')
   const text = (nodes[0] as Text | undefined)?.data ?? ''
-  if (graphemes(text).length > 256)
+  if (graphemes(text).length > MAX_TEXT_GRAPHEMES)
     throw new RangeError('Text effects support at most 256 graphemes.')
   return { view, css, node: nodes[0] as Text | undefined, text, old }
 }
 
-function pieces(text: string, by: 'letter' | 'word'): Piece[] {
-  if (by === 'letter') return graphemes(text).map((part, group) => ({ ...part, group }))
-  const segmenter = new Intl.Segmenter(undefined, { granularity: 'word' })
-  return [...segmenter.segment(text)].map(({ segment, index }, group) => ({
-    text: segment,
-    start: index,
-    end: index + segment.length,
-    group,
-  }))
-}
-
 /** Each piece clips a complete shaped copy, preserving ligatures, bidi and line wrapping. */
 function copy(
   target: HTMLElement,
@@ -156,7 +151,7 @@ function copy(
   if (!node) return { layer, fragments, width, height }
   const range = host.document.createRange()
   for (const piece of parts) {
-    if (!piece.text.trim()) continue
+    if (!isVisiblePiece(piece)) continue
     range.setStart(node, piece.start)
     range.setEnd(node, piece.end)
     for (const rect of range.getClientRects()) {
@@ -321,7 +316,11 @@ export function createTextAnimation(
       'x',
       [0, 1],
       resolveTransition(
-        { duration, delay: delay + fragment.group * stagger, ease: 'easeOut' },
+        {
+          duration,
+          delay: staggeredStart(fragment.group, stagger, delay),
+          ease: 'easeOut',
+        },
         'x',
         2,
       ),
@@ -375,7 +374,7 @@ export function createRoll(
   )
     throw new TypeError('Roll value must be finite or a string.')
   const text = typeof value === 'string' ? value : (options.format ?? String)(value)
-  if (typeof text !== 'string' || graphemes(text).length > 256)
+  if (typeof text !== 'string' || graphemes(text).length > MAX_TEXT_GRAPHEMES)
     throw new RangeError('Roll formatting must produce at most 256 graphemes.')
   const initial = source(target, host)
   const previous = lastValues.get(target) ?? Number(initial.text)
@@ -419,7 +418,11 @@ export function createRoll(
     createTrack(
       'x',
       [0, 1],
-      resolveTransition({ duration, bounce, delay: delay + index * stagger }, 'x', 2),
+      resolveTransition(
+        { duration, bounce, delay: staggeredStart(index, stagger, delay) },
+        'x',
+        2,
+      ),
       0,
       host.settings(),
     )