@rafaelaugusto/jolt 0.1.0-beta.9 → 0.1.0-rc.10

package/src/web/interaction.ts

@@ -0,0 +1,136 @@
+import type { WebRuntime } from './public.js'
+import type { WebBinding } from './value.js'
+import type { FrameScheduler } from './scheduler.js'
+import { renderedAncestors } from './geometry.js'
+
+export interface OwnedBinding extends WebBinding {
+  owns(): boolean
+}
+export interface WebInteraction {
+  readonly disposed: boolean
+  readonly paused: boolean
+  pause(): void
+  play(): void
+  cancel(): void
+  dispose(): void
+}
+export interface InteractionHost extends Pick<
+  WebRuntime,
+  | 'gestures'
+  | 'motionValue'
+  | 'animate'
+  | 'bind'
+  | 'set'
+  | 'stop'
+  | 'refresh'
+  | 'scrollValue'
+  | 'animateLayout'
+  | 'scope'
+> {
+  bindLayer(
+    target: HTMLElement,
+    values: import('./value.js').WebBindings,
+    layer: string,
+  ): OwnedBinding
+  layer(name: string): string
+  scheduler: FrameScheduler
+  error(error: unknown): void
+  after(ms: number, action: () => void): () => void
+  reduced(): boolean
+  onReduced(callback: () => void): () => void
+  register(target: HTMLElement, resource: WebInteraction, refresh: () => void): () => void
+}
+export function inputBlocked(target: HTMLElement, document = target.ownerDocument) {
+  if (
+    !target.isConnected ||
+    target.ownerDocument !== document ||
+    target.matches(':disabled') ||
+    !target.getClientRects().length
+  )
+    return true
+  for (const node of renderedAncestors(target))
+    if (
+      node.hasAttribute('inert') ||
+      node.getAttribute('aria-disabled') === 'true' ||
+      node.getAttribute('aria-busy') === 'true'
+    )
+      return true
+  return false
+}
+export function inputChild(event: Event, target: HTMLElement) {
+  const Element = (target.ownerDocument.defaultView! as Window & typeof globalThis)
+    .Element
+  for (const node of event.composedPath()) {
+    if (node === target) break
+    if (
+      node instanceof Element &&
+      node.matches(
+        'button,a[href],input,select,textarea,[contenteditable],[role="button"]',
+      )
+    )
+      return true
+  }
+  return false
+}
+/** Restore only the exact value still owned here, including its priority. */
+export function ownStyle(target: HTMLElement, property: string, value: string) {
+  const style = target.style,
+    before = style.getPropertyValue(property),
+    priority = style.getPropertyPriority(property)
+  style.setProperty(property, value)
+  return () => {
+    if (
+      style.getPropertyValue(property) === value &&
+      !style.getPropertyPriority(property)
+    ) {
+      if (before) style.setProperty(property, before, priority)
+      else style.removeProperty(property)
+    }
+  }
+}
+export function ownAttribute(target: Element, name: string, value: string) {
+  const before = target.getAttribute(name)
+  target.setAttribute(name, value)
+  return () => {
+    if (target.getAttribute(name) === value) {
+      if (before === null) target.removeAttribute(name)
+      else target.setAttribute(name, before)
+    }
+  }
+}
+export function inputEvents(target: HTMLElement) {
+  const view = target.ownerDocument.defaultView! as Window & typeof globalThis
+  const abort = new view.AbortController()
+  return {
+    view,
+    on<E extends Event>(
+      node: EventTarget,
+      type: string,
+      callback: (event: E) => void,
+      passive = true,
+      capture = false,
+    ) {
+      node.addEventListener(type, callback as EventListener, {
+        signal: abort.signal,
+        passive,
+        capture,
+      })
+    },
+    dispose: () => abort.abort(),
+  }
+}
+export function releasePointer(target: HTMLElement, id: number) {
+  if (target.hasPointerCapture(id)) target.releasePointerCapture(id)
+}
+
+/** Cleanup keeps running after one resource fails; callers still receive the failure. */
+export function cleanupResources(actions: readonly (() => void)[]) {
+  const errors: unknown[] = []
+  for (const action of actions)
+    try {
+      action()
+    } catch (error) {
+      errors.push(error)
+    }
+  if (errors.length) throw new AggregateError(errors, 'Interaction cleanup failed.')
+}

package/src/web/interactive-modal.ts

@@ -0,0 +1,247 @@
+import type { SpringParams } from '../core/spring.js'
+import { effectOptions, effectOwnership, effectTarget } from './effect.js'
+import type { WebInteraction } from './interaction.js'
+import type { PlatformHost } from './platform-host.js'
+import type { WebGestures } from './gestures.js'
+
+export type WebModalState =
+  'closed' | 'opening' | 'open' | 'dragging' | 'closing' | 'disposed'
+export interface WebInteractiveModalOptions {
+  /** Drag surface inside the dialog; interactive descendants retain their input. */
+  handle?: HTMLElement
+  spring?: SpringParams
+  canBegin?: () => boolean
+  onState?: (state: WebModalState) => void
+  returnFocus?: HTMLElement
+}
+export interface WebInteractiveModal extends WebInteraction {
+  readonly state: WebModalState
+  open(): void
+  close(returnValue?: string): boolean
+  /** Roll back an interactive or requested dismissal. The dialog remains open. */
+  cancel(): void
+}
+
+export function createInteractiveModal(
+  dialog: HTMLDialogElement,
+  options: WebInteractiveModalOptions,
+  host: PlatformHost,
+): WebInteractiveModal {
+  const view = effectTarget(dialog, host)
+  effectOptions(options, ['handle', 'spring', 'canBegin', 'onState', 'returnFocus'])
+  if (
+    !(dialog instanceof view.HTMLDialogElement) ||
+    typeof dialog.showModal !== 'function' ||
+    dialog.open
+  )
+    throw new TypeError(
+      'interactiveModal needs a mounted, initially closed HTMLDialogElement.',
+    )
+  const surface = options.handle ?? dialog
+  effectTarget(surface, host)
+  if (!dialog.contains(surface))
+    throw new TypeError('The modal handle must belong to its dialog.')
+  for (const fn of [options.canBegin, options.onState])
+    if (fn !== undefined && typeof fn !== 'function')
+      throw new TypeError('Modal callbacks must be functions.')
+  let state: WebModalState = 'closed',
+    ended = false,
+    held = false,
+    result = ''
+  let gesture: WebGestures | undefined,
+    binding: ReturnType<PlatformHost['bindLayer']> | undefined,
+    focus: HTMLElement | undefined
+  const off: (() => void)[] = []
+  const notify = (next: WebModalState) => {
+    if (state === next) return
+    state = next
+    try {
+      options.onState?.(next)
+    } catch (error) {
+      host.error(error)
+    }
+  }
+  const distance = () =>
+    Math.max(
+      1,
+      view.innerHeight - dialog.getBoundingClientRect().top + gesture!.y.get() + 32,
+    )
+  const bounds = () =>
+    gesture!.updateBounds({ left: 0, right: 0, top: 0, bottom: distance() })
+  const settled = () => {
+    if (ended) return
+    if (state === 'closing') {
+      // showModal/close own the browser top layer, focus and inert background.
+      releaseInput()
+      dialog.close(result)
+      notify('closed')
+      if (
+        !dialog.open &&
+        focus?.isConnected &&
+        (host.document.activeElement === host.document.body ||
+          dialog.contains(host.document.activeElement))
+      )
+        focus.focus({ preventScroll: true })
+    } else if (dialog.open) notify('open')
+  }
+  const cancel = () => {
+    if (ended || !dialog.open) return
+    notify('opening')
+    if (!ended && state === 'opening' && dialog.open) gesture?.settleTo({ y: 0 })
+  }
+  const dispose = () => {
+    if (ended) return
+    ended = true
+    gesture?.dispose()
+    binding?.dispose()
+    for (const cleanup of off.splice(0).reverse()) cleanup()
+    notify('disposed')
+  }
+  const releaseInput = () => {
+    gesture?.dispose()
+    binding?.dispose()
+    gesture = undefined
+    binding = undefined
+  }
+  function setupInput() {
+    gesture = host.gestures(dialog, {
+      pan: {
+        axis: 'y',
+        bounds: { top: 0, bottom: view.innerHeight + 64, left: 0, right: 0 },
+      },
+      spring: options.spring,
+      onContactStart(event) {
+        const rect = surface.getBoundingClientRect()
+        let allowed =
+          dialog.open &&
+          !held &&
+          state !== 'closing' &&
+          event.clientX >= rect.left &&
+          event.clientX <= rect.right &&
+          event.clientY >= rect.top &&
+          event.clientY <= rect.bottom
+        try {
+          if (allowed && options.canBegin) allowed = options.canBegin()
+        } catch (error) {
+          allowed = false
+          host.error(error)
+        }
+        if (!allowed) gesture?.cancel()
+        else bounds()
+      },
+      onStart() {
+        notify('dragging')
+      },
+      onEnd(event) {
+        if (event.y + event.velocityY * 0.2 > Math.max(80, dialog.offsetHeight * 0.3))
+          handle.close()
+        else cancel()
+      },
+      onCancel() {
+        if (!ended && state === 'dragging')
+          queueMicrotask(() => {
+            if (!ended && state === 'dragging') cancel()
+          })
+      },
+      onSettled: settled,
+    })
+    binding = host.bindLayer(dialog, { y: gesture.y }, host.layer('modal'))
+  }
+  const handle: WebInteractiveModal = {
+    get state() {
+      return state
+    },
+    get disposed() {
+      return ended
+    },
+    get paused() {
+      return held
+    },
+    open() {
+      if (ended || held || dialog.open) return
+      focus =
+        options.returnFocus ??
+        (host.document.activeElement instanceof view.HTMLElement
+          ? host.document.activeElement
+          : undefined)
+      dialog.showModal()
+      try {
+        setupInput()
+      } catch (error) {
+        releaseInput()
+        dialog.close()
+        throw error
+      }
+      bounds()
+      gesture!.jumpTo({ y: host.reduced() ? 0 : distance() })
+      notify('opening')
+      if (!ended && state === 'opening' && dialog.open) gesture?.settleTo({ y: 0 })
+    },
+    close(returnValue = '') {
+      if (typeof returnValue !== 'string')
+        throw new TypeError('Dialog returnValue must be a string.')
+      if (ended || held || !dialog.open || state === 'closing') return false
+      result = returnValue
+      bounds()
+      notify('closing')
+      if (ended || handle.state !== 'closing' || !dialog.open) return false
+      gesture!.settleTo({ y: distance() })
+      return true
+    },
+    cancel,
+    pause() {
+      if (!ended) {
+        held = true
+        gesture?.pause()
+      }
+    },
+    play() {
+      if (!ended) {
+        held = false
+        gesture?.play()
+      }
+    },
+    dispose,
+  }
+  try {
+    off.push(effectOwnership(dialog, 'modal', host, dispose))
+    const escape = (event: Event) => {
+      event.preventDefault()
+      handle.close()
+    }
+    const closed = () => {
+      if (!dialog.open && !ended) {
+        releaseInput()
+        notify('closed')
+      }
+    }
+    dialog.addEventListener('cancel', escape)
+    dialog.addEventListener('close', closed)
+    off.push(
+      () => dialog.removeEventListener('cancel', escape),
+      () => dialog.removeEventListener('close', closed),
+    )
+    const resize = () => {
+      if (dialog.open && !ended) {
+        bounds()
+        if (state === 'closing') gesture?.settleTo({ y: distance() })
+        else cancel()
+      }
+    }
+    view.addEventListener('resize', resize)
+    off.push(() => view.removeEventListener('resize', resize))
+    off.push(
+      host.register(host.document.documentElement, handle, () => {
+        if (!dialog.isConnected || (binding && dialog.open && !binding.owns())) dispose()
+        else if (!dialog.open) {
+          releaseInput()
+          notify('closed')
+        }
+      }),
+    )
+    return handle
+  } catch (error) {
+    dispose()
+    throw error
+  }
+}

package/src/web/interactive-navigation.ts

@@ -0,0 +1,279 @@
+import { effectOptions, effectOwnership, effectTarget } from './effect.js'
+import type { PlatformHost } from './platform-host.js'
+import type { WebInteraction } from './interaction.js'
+import type { WebGestures } from './gestures.js'
+import type { SpringParams } from '../core/spring.js'
+
+export type WebNavigationState =
+  | 'idle'
+  | 'tracking'
+  | 'finishing'
+  | 'cancelling'
+  | 'committing'
+  | 'completed'
+  | 'disposed'
+export interface WebInteractiveNavigationOptions {
+  axis?: 'x' | 'y'
+  /** CSS pixels; defaults to the current viewport size. */
+  distance?: number
+  /** Horizontal back starts at the leading edge; vertical defaults to the whole surface. */
+  edgeWidth?: number
+  spring?: SpringParams
+  canBegin?: () => boolean
+  /** Application-owned routing, called once after the visual exit. False rolls back. */
+  commit(context: {
+    animated: false
+    signal: AbortSignal
+  }): boolean | void | Promise<boolean | void>
+  onState?: (state: WebNavigationState) => void
+  navigationTimeout?: number
+}
+export interface WebInteractiveNavigation extends WebInteraction {
+  readonly state: WebNavigationState
+  readonly progress: number
+  back(): void
+  cancel(): void
+}
+export function createInteractiveNavigation(
+  target: HTMLElement,
+  options: WebInteractiveNavigationOptions,
+  host: PlatformHost,
+): WebInteractiveNavigation {
+  const view = effectTarget(target, host)
+  effectOptions(options, [
+    'axis',
+    'distance',
+    'edgeWidth',
+    'spring',
+    'canBegin',
+    'commit',
+    'onState',
+    'navigationTimeout',
+  ])
+  const axis = options.axis ?? 'x',
+    edge = options.edgeWidth ?? (axis === 'x' ? 32 : Infinity),
+    timeout = options.navigationTimeout ?? 3000
+  if (
+    !['x', 'y'].includes(axis) ||
+    (options.distance !== undefined &&
+      (!Number.isFinite(options.distance) || options.distance <= 0)) ||
+    (options.edgeWidth !== undefined && (!Number.isFinite(edge) || edge <= 0)) ||
+    !Number.isFinite(timeout) ||
+    timeout <= 0 ||
+    timeout > 10000
+  )
+    throw new RangeError('Invalid navigation geometry or timeout.')
+  if (
+    typeof options.commit !== 'function' ||
+    [options.canBegin, options.onState].some(
+      (f) => f !== undefined && typeof f !== 'function',
+    )
+  )
+    throw new TypeError('Navigation callbacks must be functions.')
+  let state: WebNavigationState = 'idle',
+    ended = false,
+    held = false,
+    generation = 0
+  let gesture: WebGestures | undefined,
+    binding: ReturnType<PlatformHost['bindLayer']> | undefined,
+    controller: AbortController | undefined,
+    timer: (() => void) | undefined
+  const off: (() => void)[] = []
+  const distance = () =>
+    options.distance ?? (axis === 'x' ? view.innerWidth : view.innerHeight)
+  const notify = (next: WebNavigationState) => {
+    if (state === next) return
+    state = next
+    try {
+      options.onState?.(next)
+    } catch (e) {
+      host.error(e)
+    }
+  }
+  const allowed = () => {
+    try {
+      return options.canBegin?.() ?? true
+    } catch (e) {
+      host.error(e)
+      return false
+    }
+  }
+  const cancel = () => {
+    if (ended || state === 'completed') return
+    generation++
+    controller?.abort()
+    timer?.()
+    timer = undefined
+    notify('cancelling')
+    gesture?.settleTo({ [axis]: 0 })
+  }
+  const commit = () => {
+    if (ended || state !== 'finishing') return
+    notify('committing')
+    if (ended || handle.state !== 'committing') return
+    const version = ++generation
+    controller = new view.AbortController()
+    timer = host.after(timeout, () => {
+      if (version === generation) cancel()
+    })
+    let result: boolean | void | Promise<boolean | void>
+    try {
+      result = options.commit({ animated: false, signal: controller.signal })
+    } catch (e) {
+      host.error(e)
+      cancel()
+      return
+    }
+    void Promise.resolve(result).then(
+      (accepted) => {
+        if (ended || version !== generation) return
+        timer?.()
+        timer = undefined
+        if (accepted === false) {
+          cancel()
+          return
+        }
+        notify('completed')
+        gesture?.pause()
+      },
+      (e) => {
+        if (!ended && version === generation) {
+          host.error(e)
+          cancel()
+        }
+      },
+    )
+  }
+  const bounds = () =>
+    gesture?.updateBounds(
+      axis === 'x'
+        ? { left: 0, right: distance(), top: 0, bottom: 0 }
+        : { left: 0, right: 0, top: 0, bottom: distance() },
+    )
+  const handle: WebInteractiveNavigation = {
+    get state() {
+      return state
+    },
+    get disposed() {
+      return ended
+    },
+    get paused() {
+      return held
+    },
+    get progress() {
+      return Math.max(0, Math.min(1, (gesture?.position[axis] ?? 0) / distance()))
+    },
+    back() {
+      if (
+        ended ||
+        held ||
+        ['finishing', 'committing', 'completed'].includes(state) ||
+        !allowed()
+      )
+        return
+      bounds()
+      notify('finishing')
+      if (!ended && state === 'finishing') gesture?.settleTo({ [axis]: distance() })
+    },
+    cancel,
+    pause() {
+      if (ended || held) return
+      cancel()
+      held = true
+      gesture?.pause()
+    },
+    play() {
+      if (ended || !held) return
+      held = false
+      gesture?.play()
+    },
+    dispose() {
+      if (ended) return
+      ended = true
+      generation++
+      controller?.abort()
+      timer?.()
+      gesture?.dispose()
+      binding?.dispose()
+      off
+        .splice(0)
+        .reverse()
+        .forEach((fn) => fn())
+      notify('disposed')
+    },
+  }
+  try {
+    off.push(effectOwnership(target, 'interactive-navigation', host, handle.dispose))
+    gesture = host.gestures(target, {
+      pan: {
+        axis,
+        bounds:
+          axis === 'x'
+            ? { left: 0, right: distance(), top: 0, bottom: 0 }
+            : { left: 0, right: 0, top: 0, bottom: distance() },
+      },
+      spring: options.spring,
+      onContactStart(event) {
+        const rect = target.getBoundingClientRect(),
+          coordinate = axis === 'x' ? event.clientX - rect.left : event.clientY - rect.top
+        if (
+          held ||
+          ['committing', 'completed'].includes(state) ||
+          coordinate > edge ||
+          !allowed()
+        )
+          gesture?.cancel()
+        else {
+          generation++
+          controller?.abort()
+          timer?.()
+          bounds()
+        }
+      },
+      onStart() {
+        notify('tracking')
+      },
+      onEnd(event) {
+        const position = event[axis],
+          velocity = axis === 'x' ? event.velocityX : event.velocityY
+        if (position + velocity * 0.2 > distance() * 0.35) handle.back()
+        else cancel()
+      },
+      onCancel() {
+        if (state === 'tracking')
+          queueMicrotask(() => {
+            if (state === 'tracking') cancel()
+          })
+      },
+      onSettled() {
+        if (state === 'finishing') commit()
+        else if (state === 'cancelling') notify('idle')
+      },
+    })
+    binding = host.bindLayer(
+      target,
+      { [axis]: axis === 'x' ? gesture.x : gesture.y },
+      host.layer('navigation'),
+    )
+    const resize = () => {
+      if (!ended) {
+        bounds()
+        cancel()
+      }
+    }
+    view.addEventListener('resize', resize)
+    off.push(() => view.removeEventListener('resize', resize))
+    off.push(
+      host.visibility(() => {
+        if (host.document.hidden) cancel()
+      }),
+      host.register(target, handle, () => {
+        if (!target.isConnected || !binding?.owns()) handle.dispose()
+      }),
+    )
+    return handle
+  } catch (e) {
+    handle.dispose()
+    throw e
+  }
+}