@rafaelaugusto/jolt 0.1.0-rc.2 → 0.1.0-rc.4

package/src/bottom-sheet/index.ts

@@ -3,6 +3,7 @@ import {
   GridLayout,
   ScrollView,
   Trace,
+  Utils,
   View,
   isAndroid,
 } from '@nativescript/core'
@@ -19,6 +20,7 @@ import {
 import {
   captureFocus,
   dismissKeyboard,
+  hostInsets,
   revealFocusedField,
   sheetActions,
   windowHeight,
@@ -42,10 +44,25 @@ export interface BottomSheetOptions {
   keyboard?: 'follow' | 'none'
   /** Whether dragging, the backdrop, back and accessibility can dismiss. Defaults to true. */
   dismissible?: boolean
+  /**
+   * Overrides the host's safe-area insets, in DIPs. Core already lays the host's children
+   * out inside its insets, so a top override only adds to that placement.
+   */
   safeArea?: { top?: number; bottom?: number }
   returnFocus?: View
   spring?: Pick<SpringValueOptions, 'stiffness' | 'damping' | 'mass'>
-  accessibility?: { label?: string; expand?: string; collapse?: string; dismiss?: string }
+  /**
+   * Spoken labels for the handle. Expand and Collapse appear only where a larger or smaller
+   * stop exists; `value` formats the spoken value per stop, with `null` when closed, and
+   * replaces the default, which is omitted for a single stop.
+   */
+  accessibility?: {
+    label?: string
+    expand?: string
+    collapse?: string
+    dismiss?: string
+    value?: (point: SheetSnap | null) => string | undefined
+  }
   onChange?: (point: SheetSnap | null) => void
   /** Called after a close settles; interrupted closes do not dismiss. */
   onDismiss?: () => void
@@ -142,6 +159,8 @@ export function bottomSheet(
   const original = {
     contentAlignment: content?.verticalAlignment,
     height: panel.height,
+    ignoreSafeArea: panel.iosIgnoreSafeArea,
+    paddingBottom: panel.paddingBottom,
     marginTop: panel.marginTop,
     marginBottom: panel.marginBottom,
     alignment: panel.verticalAlignment,
@@ -155,6 +174,7 @@ export function bottomSheet(
     value: handle.accessibilityValue,
   }
   let geometry: SheetGeometry | undefined, input: Gestures | undefined
+  let extended = 0
   let opened = false,
     point = points[0]!,
     ended = false,
@@ -173,6 +193,44 @@ export function bottomSheet(
     restoreFocus = () => {}
   const dismissible = options.dismissible !== false
   const followKeyboard = options.keyboard !== 'none'
+  const labels = options.accessibility
+  const spoken = (next: SheetSnap | null) =>
+    labels?.value
+      ? labels.value(next)
+      : points.length > 1
+        ? next === null
+          ? 'Closed'
+          : String(next)
+        : undefined
+  const announce = (next: SheetSnap | null) => {
+    handle.accessibilityValue = spoken(next) as string
+  }
+  let installed: string | undefined
+  // Only actions that can do something are offered; the set follows the selected stop.
+  function installActions() {
+    if (ended || !handle.isLoaded) return
+    const current = geometry?.stops.find((stop) => stop.point === point)
+    const larger =
+      !!current && geometry!.stops.some((stop) => stop.height > current.height + 0.01)
+    const smaller =
+      !!current && geometry!.stops.some((stop) => stop.height < current.height - 0.01)
+    const actions = [
+      ...(larger
+        ? [{ label: labels?.expand ?? 'Expand', run: () => adjacent(true) }]
+        : []),
+      ...(smaller
+        ? [{ label: labels?.collapse ?? 'Collapse', run: () => adjacent(false) }]
+        : []),
+      ...(dismissible
+        ? [{ label: labels?.dismiss ?? 'Dismiss', run: () => setTarget(null) }]
+        : []),
+    ]
+    const signature = actions.map((action) => action.label).join('\n')
+    if (signature === installed) return
+    releaseActions()
+    releaseActions = sheetActions(handle, actions)
+    installed = signature
+  }
   const keyboardOpen = () => followKeyboard && keyboard.visible
   const targetY = () =>
     !opened
@@ -253,7 +311,8 @@ export function bottomSheet(
       pendingDismiss ||= wasOpen
       dismissKeyboard(panel)
     }
-    handle.accessibilityValue = opened ? String(point) : 'Closed'
+    announce(opened ? point : null)
+    installActions()
     move()
     if (changed) report(() => options.onChange?.(next))
   }
@@ -280,11 +339,16 @@ export function bottomSheet(
       return
     const size = host.getActualSize()
     if (!(size.height > 0)) return
-    const safe = host.getSafeAreaInsets()
-    const top = options.safeArea?.top ?? safe.top
+    const safe = hostInsets(host)
+    // The host places its children below its own top inset; the panel can only start lower.
+    const top = Math.max(safe.top, options.safeArea?.top ?? safe.top)
     const bottom = options.safeArea?.bottom ?? safe.bottom
+    // The padding that keeps rows above the bottom inset is not sheet chrome.
     const chrome = scroll
-      ? Math.max(0, panel.getActualSize().height - scroll.getActualSize().height)
+      ? Math.max(
+          0,
+          panel.getActualSize().height - scroll.getActualSize().height - extended,
+        )
       : 0
     const contentHeight = (content?.getActualSize().height ?? 0) + chrome
     const next = sheetGeometry(
@@ -296,14 +360,24 @@ export function bottomSheet(
       top,
       bottom,
       contentHeight,
+      safe.bottom === 0,
     )
     const previous = geometry
     geometry = next
-    const panelHeight = keyboardOpen()
-      ? next.height
-      : Math.max(...next.stops.map((stop) => stop.height))
+    const panelHeight =
+      (keyboardOpen()
+        ? next.height
+        : Math.max(...next.stops.map((stop) => stop.height))) + next.extension
     if (panel.height !== panelHeight) panel.height = panelHeight
-    if (panel.marginTop !== next.top) panel.marginTop = next.top
+    const margin = next.top - safe.top
+    if (panel.marginTop !== margin) panel.marginTop = margin
+    if (extended !== next.extension) {
+      const base =
+        Utils.layout.toDeviceIndependentPixels(panel.effectivePaddingBottom ?? 0) -
+        extended
+      panel.paddingBottom = base + next.extension
+      extended = next.extension
+    }
     if (!input) {
       input = gestures(panel, {
         pan: { axis: 'y', bounds: { top: minimum(), bottom: next.closedY } },
@@ -317,7 +391,7 @@ export function bottomSheet(
           releaseClose = () => {}
           opened = true
           pendingDismiss = false
-          handle.accessibilityValue = String(point)
+          announce(point)
           if (!wasOpen) report(() => options.onChange?.(point))
         },
         onContactEnd(event) {
@@ -345,6 +419,7 @@ export function bottomSheet(
       releasePanel = bind(panel, { y: input.y })
       if (held || !opened) input.pause()
     }
+    installActions()
     if (
       !previous ||
       previous.closedY !== next.closedY ||
@@ -393,15 +468,8 @@ export function bottomSheet(
       restoreFocus = captureFocus(panel, options.returnFocus)
       focusCaptured = true
     }
-    releaseActions()
-    const labels = options.accessibility
-    releaseActions = sheetActions(handle, [
-      { label: labels?.expand ?? 'Expand', run: () => adjacent(true) },
-      { label: labels?.collapse ?? 'Collapse', run: () => adjacent(false) },
-      ...(dismissible
-        ? [{ label: labels?.dismiss ?? 'Dismiss', run: () => setTarget(null) }]
-        : []),
-    ])
+    installed = undefined
+    installActions()
     releaseKeyboard()
     releaseKeyboard = onKeyboard((state) => {
       keyboard = state
@@ -421,6 +489,7 @@ export function bottomSheet(
     if (backdrop) backdrop.visibility = 'hidden'
     releaseActions()
     releaseActions = () => {}
+    installed = undefined
     releaseKeyboard()
     releaseKeyboard = () => {}
     releasePanel()
@@ -486,6 +555,8 @@ export function bottomSheet(
         Application.android.off(Application.android.activityBackPressedEvent, back)
       if (content) content.verticalAlignment = original.contentAlignment!
       panel.height = original.height
+      panel.iosIgnoreSafeArea = original.ignoreSafeArea
+      panel.paddingBottom = original.paddingBottom
       panel.marginTop = original.marginTop
       panel.marginBottom = original.marginBottom
       panel.verticalAlignment = original.alignment
@@ -504,6 +575,9 @@ export function bottomSheet(
   }
   owners.set(panel, control)
   if (content && points.includes('content')) content.verticalAlignment = 'top'
+  // The geometry owns the panel's placement and its rows' distance from the bottom inset;
+  // Core would otherwise stretch it to the screen edges or inset its rows a second time.
+  panel.iosIgnoreSafeArea = true
   panel.verticalAlignment = 'top'
   panel.marginBottom = 0
   panel.visibility = 'hidden'
@@ -511,7 +585,7 @@ export function bottomSheet(
   handle.accessible = true
   handle.accessibilityLabel =
     options.accessibility?.label ?? (handle.accessibilityLabel || 'Bottom sheet')
-  handle.accessibilityValue = 'Closed'
+  announce(null)
   if (backdrop) backdrop.visibility = 'hidden'
   for (const view of [panel, handle, ...(scroll ? [scroll] : [])])
     view.on('loaded', attach)

package/src/bottom-sheet/native.ts

@@ -16,6 +16,12 @@ function firstResponder(view: UIView): UIView | undefined {
   return undefined
 }
 
+/** Core reports a view's safe-area insets in device pixels; the sheet works in DIPs. */
+export function hostInsets(view: View): { top: number; bottom: number } {
+  const insets = view.getSafeAreaInsets()
+  const dip = Utils.layout.toDeviceIndependentPixels
+  return { top: dip(insets.top), bottom: dip(insets.bottom) }
+}
 export function windowHeight(view: View): number {
   if (isIOS)
     return (

package/src/driver/android.ts

@@ -130,20 +130,37 @@ export function createAndroidDriver(): Driver {
         )
       }
 
-      const keyframes = Array.create(android.animation.Keyframe, track.values.length)
-      track.values.forEach((value, i) => {
-        keyframes[i] = android.animation.Keyframe.ofFloat(track.times[i]!, value * scale)
-      })
-      const holders = Array.create(android.animation.PropertyValuesHolder, 1)
-      holders[0] = android.animation.PropertyValuesHolder.ofKeyframe(
-        nativeProperties[track.property],
-        keyframes,
-      )
-
-      const animator = android.animation.ObjectAnimator.ofPropertyValuesHolder(
-        nativeView,
-        holders,
-      )
+      let animator: android.animation.ObjectAnimator
+      if (
+        typeof org !== 'undefined' &&
+        typeof org.rafaelaugusto?.jolt?.KeyframeFactory === 'function'
+      ) {
+        animator = org.rafaelaugusto.jolt.KeyframeFactory.create(
+          nativeView,
+          nativeProperties[track.property],
+          track.times,
+          track.values,
+          scale,
+        )
+      } else {
+        // Keep JS-only updates working with an app binary built before the factory.
+        const keyframes = Array.create(android.animation.Keyframe, track.values.length)
+        track.values.forEach((value, i) => {
+          keyframes[i] = android.animation.Keyframe.ofFloat(
+            track.times[i]!,
+            value * scale,
+          )
+        })
+        const holders = Array.create(android.animation.PropertyValuesHolder, 1)
+        holders[0] = android.animation.PropertyValuesHolder.ofKeyframe(
+          nativeProperties[track.property],
+          keyframes,
+        )
+        animator = android.animation.ObjectAnimator.ofPropertyValuesHolder(
+          nativeView,
+          holders,
+        )
+      }
       let restoreLayer: (() => void) | undefined
       const releaseLayer = () => {
         restoreLayer?.()

package/src/index.ts

@@ -1,7 +1,7 @@
 export { timeline } from './sequence.js'
 export type { TimelineAnimation, TimelineStep, PlayableAnimation } from './sequence.js'
 export { playbackProgress } from './motion-value.js'
-export { animate, decay, set, stop } from './animate.js'
+export { animate, decay, set, stop, toView } from './animate.js'
 export { bind, motionValue, scrollValue, springValue } from './motion-value.js'
 export type {
   Bindings,

package/src/interactive-navigation/index.ts

@@ -1,4 +1,11 @@
 import { ReturnScope } from '../shared-navigation/return-signal.js'
+export { interactiveModal } from './modal.js'
+export type {
+  InteractiveModal,
+  InteractiveModalEvent,
+  InteractiveModalOptions,
+  InteractiveModalState,
+} from './modal.js'
 import {
   Application,
   Image,

package/src/interactive-navigation/modal.ts

@@ -0,0 +1,306 @@
+import {
+  Application,
+  isIOS,
+  SharedTransition,
+  Trace,
+  Transition,
+  View,
+  type NavigationTransition,
+} from '@nativescript/core'
+import { onReducedMotion, reducedMotion, timeScale } from '../config.js'
+import { springPhysics } from '../spring.js'
+import { springs, type Spring } from '../transition.js'
+
+export type InteractiveModalState =
+  | 'ready'
+  | 'presenting'
+  | 'idle'
+  | 'dragging'
+  | 'finishing'
+  | 'cancelling'
+  | 'closed'
+  | 'disposed'
+export interface InteractiveModalEvent {
+  state: InteractiveModalState
+  outcome?: 'completed' | 'cancelled'
+  /** Modal heights per second; supplied only at release. */
+  release?: Readonly<{ progress: number; velocity: number }>
+}
+export interface InteractiveModalOptions {
+  spring?:
+    | keyof typeof springs
+    | Pick<Spring, 'duration' | 'bounce' | 'stiffness' | 'damping' | 'mass'>
+  /** Synchronous gesture gate. Core's cancelable:false is also respected. */
+  canBegin?: () => boolean
+  /** Boundaries only; gesture updates and settling execute in Objective-C. */
+  onState?: (event: InteractiveModalEvent) => void
+}
+export interface InteractiveModal {
+  readonly supported: boolean
+  /** Use for one Core showModal / NativeScript-Vue $showModal presentation. */
+  readonly transition: NavigationTransition | undefined
+  readonly state: InteractiveModalState
+  /** Close once, forwarding Core's callback arguments. Queues during opening. */
+  close(...args: unknown[]): boolean
+  /** Roll back a held drag; an already committed release finishes normally. */
+  cancel(): void
+  /** Detach without closing the modal. Core closeModal remains available. */
+  dispose(): void
+}
+
+/** A full-window iOS modal transition using NativeScript's modal owner/delegate. */
+export function interactiveModal(
+  options: InteractiveModalOptions = {},
+): InteractiveModal {
+  const input =
+    typeof options.spring === 'string' ? springs[options.spring] : options.spring
+  if (options.spring !== undefined && !input) throw new TypeError('Unknown modal spring.')
+  for (const [key, value] of Object.entries(input ?? {}) as [string, unknown][]) {
+    if (!['type', 'duration', 'bounce', 'stiffness', 'damping', 'mass'].includes(key))
+      throw new TypeError(`Unsupported modal spring option: ${key}.`)
+    if (key === 'type' && value !== 'spring')
+      throw new TypeError('Modal motion requires a spring.')
+    if (key !== 'type' && (typeof value !== 'number' || !Number.isFinite(value)))
+      throw new RangeError(`${key} must be finite.`)
+    if (['duration', 'stiffness', 'mass'].includes(key) && (value as number) <= 0)
+      throw new RangeError(`${key} must be positive.`)
+    if (key === 'damping' && (value as number) < 0)
+      throw new RangeError('damping must be nonnegative.')
+  }
+  const physics = springPhysics(input ?? springs.smooth)
+  if (Object.values(physics).some((value) => !Number.isFinite(value)))
+    throw new RangeError('Modal spring physics must be finite.')
+  const supported =
+    isIOS &&
+    typeof JoltInteractiveModal !== 'undefined' &&
+    typeof View.closedModallyEvent === 'string'
+  let state: InteractiveModalState = 'ready'
+  let transition: NavigationTransition | undefined
+  let view: View | undefined, native: JoltInteractiveModal | undefined
+  let start: (() => void) | undefined, offMotion: (() => void) | undefined
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let pendingClose: unknown[] | undefined
+  let disposing = false,
+    suspended = false,
+    shown = false,
+    returning = false
+  const update = (value: {
+    interactiveBegan?: boolean
+    interactiveCancelled?: boolean
+  }) => {
+    if (transition?.instance) SharedTransition.updateState(transition.instance.id, value)
+  }
+  const emit = (
+    next: InteractiveModalState,
+    outcome?: InteractiveModalEvent['outcome'],
+    release?: InteractiveModalEvent['release'],
+  ) => {
+    if (state === 'disposed') return
+    state = next
+    try {
+      options.onState?.({
+        state,
+        ...(outcome ? { outcome } : {}),
+        ...(release ? { release } : {}),
+      })
+    } catch (error) {
+      Trace.write(
+        `Interactive modal observer failed: ${String(error)}`,
+        'Jolt',
+        Trace.messageType.error,
+      )
+    }
+  }
+  const release = () => {
+    if (state === 'disposed') return
+    if (timer !== undefined) clearTimeout(timer)
+    timer = undefined
+    view?.off('shownModally', arrived)
+    view?.off('closedModally', closed)
+    view?.off('unloaded', unloaded)
+    Application.off(Application.suspendEvent, suspend)
+    Application.off(Application.resumeEvent, resume)
+    offMotion?.()
+    offMotion = undefined
+    native?.dispose()
+    native = undefined
+    if (transition?.instance) SharedTransition.finishState(transition.instance.id)
+    view = undefined
+    start = undefined
+    pendingClose = undefined
+    emit('disposed')
+  }
+  const cancelled = () => {
+    if (state === 'disposed') return
+    // UIKit's dismissal completion must observe interactiveCancelled before we
+    // clear it. Core clears interactiveBegan after preserving the modal's owner.
+    const core = transition?.instance && SharedTransition.getState(transition.instance.id)
+    if (core?.interactiveBegan) {
+      timer = setTimeout(cancelled, 10)
+      return
+    }
+    timer = undefined
+    update({ interactiveCancelled: false })
+    emit('idle', 'cancelled')
+    if (disposing) release()
+  }
+  const arrived = () => {
+    shown = true
+    // UIKit skips animator creation for Core's animated:false. Keep ordinary
+    // close usable; no native interactive recognizer is attached in that mode.
+    if (state === 'ready') emit('idle')
+    if (pendingClose && state === 'idle') {
+      const args = pendingClose
+      pendingClose = undefined
+      control.close(...args)
+    }
+  }
+  const closed = () => {
+    if (state === 'disposed' || state === 'closed') return
+    emit('closed', 'completed')
+    release()
+  }
+  const checkDetached = () => {
+    timer = undefined
+    if (
+      !suspended &&
+      view &&
+      !view.isLoaded &&
+      !view.viewController?.presentingViewController
+    )
+      control.dispose()
+  }
+  const unloaded = () => {
+    if (state === 'cancelling') return
+    if (timer !== undefined) clearTimeout(timer)
+    timer = setTimeout(checkDetached, 0)
+  }
+  const suspend = () => {
+    suspended = true
+    native?.cancel()
+  }
+  const resume = () => {
+    suspended = false
+    if (state !== 'cancelling') unloaded()
+  }
+  class ModalMotion extends Transition {
+    override setupInteractiveGesture(callback: () => void, modal: View) {
+      if (view || state === 'disposed')
+        throw new Error('Use a fresh interactiveModal for each presentation.')
+      view = modal
+      start = callback
+      view.on('shownModally', arrived)
+      view.on('closedModally', closed)
+      view.on('unloaded', unloaded)
+    }
+    override iosPresentedController(presented: UIViewController) {
+      if (native || state === 'disposed' || !view) return undefined
+      returning = false
+      native = JoltInteractiveModal.attachStiffnessDampingMassShouldBeginOnEvent(
+        presented,
+        physics.stiffness,
+        physics.damping,
+        physics.mass,
+        () => {
+          try {
+            return (
+              !disposing &&
+              shown &&
+              state === 'idle' &&
+              !suspended &&
+              (options.canBegin?.() ?? true) === true
+            )
+          } catch {
+            return false
+          }
+        },
+        (event) => {
+          if (state === 'disposed') return
+          if (event === 2) {
+            update({ interactiveBegan: true, interactiveCancelled: false })
+            emit('dragging')
+            start?.()
+          } else if (event === 3 || event === 4) {
+            update({ interactiveCancelled: event === 4 })
+            emit(
+              event === 3 ? 'finishing' : 'cancelling',
+              undefined,
+              native && { progress: native.progress, velocity: native.velocity },
+            )
+          } else if (event === 0) emit(returning ? 'finishing' : 'presenting')
+          else if (event === 1) {
+            emit('idle')
+            if (disposing) release()
+            else if (shown) arrived()
+          } else if (event === 6) cancelled()
+          // Core's closedModally event owns final disposal and callback delivery.
+        },
+      )
+      native.preparePresentingReducedTimeScale(true, reducedMotion(), timeScale())
+      return native
+    }
+    override iosDismissedController() {
+      if (!native || state === 'disposed') return undefined
+      returning = true
+      native.preparePresentingReducedTimeScale(false, reducedMotion(), timeScale())
+      return native
+    }
+    override iosInteractionDismiss() {
+      return native?.interactive ? native : undefined
+    }
+  }
+  const control: InteractiveModal = {
+    supported,
+    get transition() {
+      return transition
+    },
+    get state() {
+      return state
+    },
+    close(...args) {
+      if (
+        !supported ||
+        disposing ||
+        ['closed', 'disposed', 'dragging', 'finishing', 'cancelling'].includes(state)
+      )
+        return false
+      if (!shown || state === 'presenting' || state === 'ready') {
+        if (pendingClose) return false
+        pendingClose = args
+        return true
+      }
+      if (!view) return false
+      update({ interactiveBegan: false, interactiveCancelled: false })
+      emit('finishing')
+      view.closeModal(...args)
+      return true
+    },
+    cancel() {
+      native?.cancel()
+    },
+    dispose() {
+      if (state === 'disposed' || disposing) return
+      disposing = true
+      pendingClose = undefined
+      native?.cancel()
+      if (
+        state !== 'dragging' &&
+        state !== 'cancelling' &&
+        state !== 'finishing' &&
+        state !== 'presenting'
+      )
+        release()
+    },
+  }
+  if (supported) {
+    transition = SharedTransition.custom(new ModalMotion(), {
+      interactive: { dismiss: {} },
+    })
+    Application.on(Application.suspendEvent, suspend)
+    Application.on(Application.resumeEvent, resume)
+    offMotion = onReducedMotion((value) => {
+      if (value) control.cancel()
+    })
+  }
+  return control
+}

package/src/ios-plugin.d.ts

@@ -116,6 +116,7 @@ declare class JoltLiveSpring extends NSObject {
   readonly moving: boolean
   followMappings(source: JoltLiveSpring, mappings: string): void
   updateInput(snapshot: string): void
+  setInputsRest(snapshots: string, rest: number): void
   setTarget(value: number): void
   setReduced(value: boolean): void
   setPaused(value: boolean): void
@@ -343,6 +344,28 @@ declare class JoltInteractiveNavigation extends NSObject {
   cancel(): void
   disposeRestoringSwipe(enabled: boolean): void
 }
+declare class JoltInteractiveModal extends NSObject {
+  static attachStiffnessDampingMassShouldBeginOnEvent(
+    controller: UIViewController,
+    stiffness: number,
+    damping: number,
+    mass: number,
+    shouldBegin: () => boolean,
+    onEvent: (event: number) => void,
+  ): JoltInteractiveModal
+  static activeCount(): number
+  static recognizerCount(): number
+  readonly interactive: boolean
+  readonly progress: number
+  readonly velocity: number
+  preparePresentingReducedTimeScale(
+    presenting: boolean,
+    reduced: boolean,
+    timeScale: number,
+  ): void
+  cancel(): void
+  dispose(): void
+}
 
 declare class JoltCircleWorld extends NSObject {
   static createOptions(container: UIView, options: string): JoltCircleWorld