@hina-ui/vue 1.0.0

package/src/components/lightbox/composables/useLightboxMotion.ts

@@ -0,0 +1,146 @@
+import { animate, useMotionValue, type ValueAnimationTransition } from 'motion-v'
+import { TRANSITION, prefersReducedMotion, type TransitionName } from '../../../motion'
+import { rubberBand } from '../utils/zoom'
+import {
+  DISMISS_SCALE,
+  REST_POSE,
+  RETURN_SPRING,
+  TRAVEL_SPRING,
+  dismissProgress,
+  shouldDismiss,
+  type Pose,
+} from '../utils/pose'
+
+const FADE_POSE: Pose = { ...REST_POSE, scale: 0.98 }
+
+type Timing = ValueAnimationTransition
+
+export function useLightboxMotion(stageHeight: () => number, restScale: () => number) {
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+  const scale = useMotionValue(1)
+  const rotate = useMotionValue(0)
+  const clipPath = useMotionValue(REST_POSE.clipPath)
+  const opacity = useMotionValue(1)
+  const presence = useMotionValue(0)
+
+  function timing(value: Timing) {
+    return prefersReducedMotion() ? { duration: 0 } : value
+  }
+
+  function transition(name: TransitionName) {
+    return timing(TRANSITION[name])
+  }
+
+  function settle(controls: { finished: Promise<unknown> }[]): Promise<void> {
+    return Promise.all(controls.map(control => control.finished)).then(() => undefined)
+  }
+
+  function stop() {
+    x.stop()
+    y.stop()
+    scale.stop()
+    rotate.stop()
+    presence.stop()
+  }
+
+  function jumpTo(pose: Pose) {
+    x.jump(pose.x)
+    y.jump(pose.y)
+    scale.jump(pose.scale)
+    rotate.jump(pose.rotate)
+    clipPath.jump(pose.clipPath)
+  }
+
+  function nearestTurn(target: number): number {
+    return target + Math.round((rotate.get() - target) / 360) * 360
+  }
+
+  function poseTo(pose: Pose, t: ReturnType<typeof timing>) {
+    return [
+      animate(x, pose.x, t),
+      animate(y, pose.y, t),
+      animate(scale, pose.scale, t),
+      animate(rotate, nearestTurn(pose.rotate), t),
+      animate(clipPath, pose.clipPath, t),
+    ]
+  }
+
+  function enter(from: Pose | null): Promise<void> {
+    const t = from ? timing(TRAVEL_SPRING) : transition('enterStrong')
+    jumpTo(from ?? FADE_POSE)
+    opacity.jump(from ? 1 : 0)
+    presence.jump(0)
+    return settle([...poseTo(REST_POSE, t), animate(opacity, 1, t), animate(presence, 1, t)])
+  }
+
+  function resume(): Promise<void> {
+    stop()
+    const t = timing(TRAVEL_SPRING)
+    const rest = { ...REST_POSE, scale: restScale(), rotate: rotate.get() }
+    return settle([...poseTo(rest, t), animate(opacity, 1, t), animate(presence, 1, t)])
+  }
+
+  function leave(to: Pose | null): Promise<void> {
+    stop()
+    const t = to ? timing(RETURN_SPRING) : transition('exit')
+    const travel = to ? poseTo(to, t) : [animate(scale, FADE_POSE.scale, t), animate(opacity, 0, t)]
+    return settle([...travel, animate(presence, 0, t)])
+  }
+
+  function dismissMove(offsetY: number) {
+    y.set(offsetY < 0 ? rubberBand(offsetY, 0, Infinity, stageHeight()) : offsetY)
+    const progress = dismissProgress(offsetY, stageHeight())
+    scale.set(restScale() * (1 - (1 - DISMISS_SCALE) * progress))
+    presence.set(1 - progress)
+  }
+
+  function dismissRelease(offsetY: number, velocityY: number): boolean {
+    if (shouldDismiss(offsetY, velocityY, stageHeight())) return true
+    const t = transition('press')
+    animate(x, 0, t)
+    animate(y, 0, t)
+    animate(scale, restScale(), t)
+    animate(presence, 1, t)
+    return false
+  }
+
+  function dismissCancel() {
+    animate(presence, 1, transition('fast'))
+  }
+
+  function turn(degrees: number) {
+    const t = transition('base')
+    animate(rotate, degrees, t)
+    animate(scale, restScale(), t)
+    animate(x, 0, t)
+    animate(y, 0, t)
+  }
+
+  function reset(degrees: number) {
+    x.jump(0)
+    y.jump(0)
+    rotate.jump(degrees)
+    scale.jump(restScale())
+  }
+
+  return {
+    x,
+    y,
+    scale,
+    rotate,
+    clipPath,
+    opacity,
+    presence,
+    transition,
+    stop,
+    enter,
+    resume,
+    leave,
+    dismissMove,
+    dismissRelease,
+    dismissCancel,
+    turn,
+    reset,
+  }
+}

package/src/components/lightbox/composables/useLightboxPaging.ts

@@ -0,0 +1,96 @@
+import { onBeforeUnmount, shallowRef, type Ref } from 'vue'
+import { animate, useMotionValue, type ValueAnimationTransition } from 'motion-v'
+import { prefersReducedMotion } from '../../../motion'
+import { clampIndex, edgePosition, pageSteps, shortestDelta, wrapIndex } from '../utils/paging'
+import { TRAVEL_SPRING } from '../utils/pose'
+
+const PAGE_EPSILON = 0.001
+
+export function useLightboxPaging(options: {
+  index: Ref<number>
+  count: () => number
+  width: () => number
+  loop: () => boolean
+}) {
+  const stripX = useMotionValue(0)
+  const position = shallowRef(0)
+  const low = shallowRef(0)
+  const high = shallowRef(0)
+  let origin = 0
+
+  function looping(): boolean {
+    return options.loop() && options.count() > 1
+  }
+
+  function rest(at: number): number {
+    return -at * options.width()
+  }
+
+  function track(value: number) {
+    const width = options.width()
+    const page = width > 0 ? -value / width : position.value
+    const nextLow = Math.floor(page + PAGE_EPSILON)
+    const nextHigh = Math.ceil(page - PAGE_EPSILON)
+    if (nextLow !== low.value) low.value = nextLow
+    if (nextHigh !== high.value) high.value = nextHigh
+  }
+
+  const untrack = stripX.on('change', track)
+  onBeforeUnmount(untrack)
+
+  function sync() {
+    position.value = options.index.value
+    stripX.jump(rest(position.value))
+    track(stripX.get())
+  }
+
+  function range(): [number, number] {
+    return [low.value, high.value]
+  }
+
+  function grab(): boolean {
+    stripX.stop()
+    origin = stripX.get()
+    return Math.abs(origin - rest(position.value)) > PAGE_EPSILON
+  }
+
+  function move(offset: number) {
+    const raw = origin + offset
+    stripX.set(looping() ? raw : edgePosition(raw, options.count(), options.width()))
+  }
+
+  function travel(to: number, transition: ValueAnimationTransition<number>): boolean {
+    const count = options.count()
+    const target = looping() ? to : clampIndex(to, count)
+    const real = looping() ? wrapIndex(target, count) : target
+    const changed = real !== options.index.value
+    position.value = target
+    if (changed) options.index.value = real
+    animate(stripX, rest(target), transition)
+    return changed
+  }
+
+  function withVelocity(velocity: number): ValueAnimationTransition<number> {
+    return prefersReducedMotion() ? { duration: 0 } : { ...TRAVEL_SPRING, velocity }
+  }
+
+  function go(to: number): boolean {
+    const target = looping()
+      ? position.value + shortestDelta(to - options.index.value, options.count())
+      : to
+    return travel(target, withVelocity(0))
+  }
+
+  function release(offset: number) {
+    const width = options.width()
+    const velocity = stripX.getVelocity()
+    const from = width > 0 ? Math.round(-origin / width) : position.value
+    travel(from + pageSteps(offset, velocity, width), withVelocity(velocity))
+  }
+
+  function settle() {
+    if (stripX.get() !== rest(position.value)) travel(position.value, withVelocity(0))
+  }
+
+  return { stripX, position, range, sync, grab, move, release, go, settle }
+}

package/src/components/lightbox/composables/useLightboxPhase.ts

@@ -0,0 +1,59 @@
+import { nextTick, shallowRef, type Ref } from 'vue'
+import type { useLightboxMotion } from './useLightboxMotion'
+import type { Pose } from '../utils/pose'
+
+export type LightboxPhase = 'closed' | 'entering' | 'open' | 'closing'
+
+export function useLightboxPhase(options: {
+  open: Ref<boolean>
+  mounted: Ref<boolean>
+  locked: Ref<boolean>
+  motion: ReturnType<typeof useLightboxMotion>
+  pose: () => Pose | null
+  prepare: () => void
+  layout: () => void
+}) {
+  const { motion } = options
+  const phase = shallowRef<LightboxPhase>('closed')
+  let generation = 0
+
+  async function show() {
+    if (phase.value !== 'closed') return
+    phase.value = 'entering'
+    const run = ++generation
+    options.prepare()
+    options.mounted.value = true
+    options.locked.value = true
+    await nextTick()
+    options.layout()
+    await motion.enter(options.pose())
+    if (run === generation) phase.value = 'open'
+  }
+
+  async function reopen() {
+    if (phase.value !== 'closing') return
+    phase.value = 'entering'
+    const run = ++generation
+    await motion.resume()
+    if (run === generation) phase.value = 'open'
+  }
+
+  async function close() {
+    if (phase.value === 'closed' || phase.value === 'closing') return
+    phase.value = 'closing'
+    const run = ++generation
+    await motion.leave(options.pose())
+    if (run !== generation) return
+    phase.value = 'closed'
+    options.mounted.value = false
+    options.locked.value = false
+    if (options.open.value) options.open.value = false
+  }
+
+  function interrupt() {
+    if (phase.value === 'entering') void close()
+    else if (phase.value === 'closing') void reopen()
+  }
+
+  return { current: () => phase.value, show, close, reopen, interrupt }
+}

package/src/components/lightbox/composables/useLightboxPose.ts

@@ -0,0 +1,35 @@
+import type { useLightboxFrames } from './useLightboxFrames'
+import { openPose, radiusOf, type Pose, type Rect } from '../utils/pose'
+import type { LightboxItem } from '../types'
+
+export function useLightboxPose(
+  frames: ReturnType<typeof useLightboxFrames>,
+  current: () => LightboxItem | undefined,
+) {
+  function sourceBox(): Rect | null {
+    const el = current()?.source?.()
+    if (!el?.isConnected) return null
+    const rect = el.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) return null
+    const stage = frames.stage.value
+    if (
+      rect.bottom <= 0 ||
+      rect.right <= 0 ||
+      rect.top >= stage.height ||
+      rect.left >= stage.width
+    ) {
+      return null
+    }
+    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
+  }
+
+  function fromSource(): Pose | null {
+    const item = current()
+    const box = sourceBox()
+    const natural = frames.naturalOf(item)
+    if (!box || !natural) return null
+    return openPose(frames.frameOf(item), box, natural, item?.fit, radiusOf(item?.source?.()))
+  }
+
+  return { fromSource }
+}

package/src/components/lightbox/composables/useLightboxRotation.ts

@@ -0,0 +1,48 @@
+import { reactive } from 'vue'
+import type { useLightboxFrames } from './useLightboxFrames'
+import { baseScale } from '../utils/pose'
+import { rotatedSize } from '../utils/zoom'
+import type { LightboxItem } from '../types'
+
+export function useLightboxRotation(
+  frames: ReturnType<typeof useLightboxFrames>,
+  current: () => LightboxItem | undefined,
+) {
+  const rotations = reactive(new Map<string, number>())
+
+  function rotationOf(item: LightboxItem | undefined): number {
+    return item ? (rotations.get(item.id) ?? 0) : 0
+  }
+
+  function baseOf(item: LightboxItem | undefined): number {
+    return baseScale(frames.frameOf(item), frames.stage.value, rotationOf(item) % 360)
+  }
+
+  function geometry() {
+    const item = current()
+    const base = baseOf(item)
+    const visual = rotatedSize(frames.frameOf(item), rotationOf(item) % 360)
+    return {
+      fit: { width: visual.width * base, height: visual.height * base },
+      stage: frames.stage.value,
+      base,
+    }
+  }
+
+  function clear() {
+    rotations.clear()
+  }
+
+  function advance(): number {
+    const item = current()
+    if (!item) return 0
+    rotations.set(item.id, rotationOf(item) + 90)
+    return rotationOf(item)
+  }
+
+  function drop(item: LightboxItem | undefined) {
+    if (item) rotations.set(item.id, Math.round(rotationOf(item) / 360) * 360)
+  }
+
+  return { rotationOf, baseOf, geometry, clear, advance, drop }
+}

package/src/components/lightbox/composables/useLightboxSlides.ts

@@ -0,0 +1,31 @@
+import { computed } from 'vue'
+import type { useLightboxPaging } from './useLightboxPaging'
+import { wrapIndex } from '../utils/paging'
+import type { LightboxItem } from '../types'
+
+export interface LightboxSlide {
+  item: LightboxItem
+  at: number
+  key: string
+}
+
+export function useLightboxSlides(
+  paging: ReturnType<typeof useLightboxPaging>,
+  items: () => LightboxItem[],
+  looping: () => boolean,
+) {
+  return computed<LightboxSlide[]>(() => {
+    const list = items()
+    const count = list.length
+    const [low, high] = paging.range()
+    const loop = looping()
+    const from = loop ? low - 1 : Math.max(0, low - 1)
+    const to = loop ? high + 1 : Math.min(count - 1, high + 1)
+    const slides: LightboxSlide[] = []
+    for (let at = from; at <= to; at += 1) {
+      const item = list[wrapIndex(at, count)]
+      if (item) slides.push({ item, at, key: loop ? `${item.id}@${at}` : item.id })
+    }
+    return slides
+  })
+}

package/src/components/lightbox/composables/useLightboxZoom.ts

@@ -0,0 +1,148 @@
+import { onBeforeUnmount, shallowRef } from 'vue'
+import { animate } from 'motion-v'
+import { prefersReducedMotion, type TransitionName } from '../../../motion'
+import type { useLightboxMotion } from './useLightboxMotion'
+import { FLING, TRACKPAD_INTENSITY } from '../utils/gesture'
+import {
+  WHEEL_INTENSITY,
+  ZOOM_MIN,
+  clampOffset,
+  clampZoom,
+  doubleTapZoom,
+  elasticOffset,
+  elasticZoom,
+  isZoomed,
+  panBounds,
+  stepZoom,
+  wheelZoom,
+  zoomAbout,
+  type Bounds,
+  type Point,
+  type Size,
+} from '../utils/zoom'
+
+export interface PinchStart {
+  distance: number
+  zoom: number
+  mid: Point
+  offset: Point
+}
+
+export function useLightboxZoom(
+  motion: ReturnType<typeof useLightboxMotion>,
+  geometry: () => { fit: Size; stage: Size; base: number },
+) {
+  const { x, y, scale } = motion
+  const zoomed = shallowRef(false)
+  const unsubscribe = scale.on('change', value => {
+    zoomed.value = isZoomed(value / geometry().base)
+  })
+  onBeforeUnmount(unsubscribe)
+
+  const zoom = () => scale.get() / geometry().base
+  const offset = (): Point => ({ x: x.get(), y: y.get() })
+
+  function bounds(level = zoom()): Bounds {
+    const { fit, stage } = geometry()
+    return panBounds({ width: fit.width * level, height: fit.height * level }, stage)
+  }
+
+  function place(level: number, next: Point) {
+    x.stop()
+    y.stop()
+    scale.stop()
+    scale.set(level * geometry().base)
+    x.set(next.x)
+    y.set(next.y)
+  }
+
+  function target(level: number, focal: Point): { level: number; offset: Point } {
+    const clamped = clampZoom(level)
+    if (!isZoomed(clamped)) return { level: ZOOM_MIN, offset: { x: 0, y: 0 } }
+    return {
+      level: clamped,
+      offset: clampOffset(zoomAbout(offset(), zoom(), clamped, focal), bounds(clamped)),
+    }
+  }
+
+  function zoomTo(level: number, focal: Point, name: TransitionName = 'base') {
+    const to = target(level, focal)
+    const t = motion.transition(name)
+    animate(scale, to.level * geometry().base, t)
+    animate(x, to.offset.x, t)
+    animate(y, to.offset.y, t)
+  }
+
+  function step(direction: 1 | -1) {
+    zoomTo(stepZoom(zoom(), direction), { x: 0, y: 0 })
+  }
+
+  function reset() {
+    zoomTo(ZOOM_MIN, { x: 0, y: 0 })
+  }
+
+  function wheel(delta: number, focal: Point, trackpad: boolean) {
+    const intensity = trackpad ? TRACKPAD_INTENSITY : WHEEL_INTENSITY
+    const to = target(wheelZoom(zoom(), delta, intensity), focal)
+    place(to.level, to.offset)
+  }
+
+  function doubleTap(focal: Point) {
+    zoomTo(doubleTapZoom(zoom()), focal)
+  }
+
+  function pinch(start: PinchStart, mid: Point, ratio: number) {
+    const level = elasticZoom(start.zoom * ratio)
+    const about = zoomAbout(start.offset, start.zoom, level, start.mid)
+    place(level, { x: about.x + mid.x - start.mid.x, y: about.y + mid.y - start.mid.y })
+  }
+
+  function settle(focal: Point) {
+    zoomTo(zoom(), focal, 'press')
+  }
+
+  function pan(origin: Point, delta: Point) {
+    const next = elasticOffset(
+      { x: origin.x + delta.x, y: origin.y + delta.y },
+      bounds(),
+      geometry().stage,
+    )
+    x.set(next.x)
+    y.set(next.y)
+  }
+
+  function glide(value: typeof x, min: number, max: number) {
+    const from = value.get()
+    const velocity = value.getVelocity()
+    const target = Math.min(Math.max(from + FLING.power * velocity, min), max)
+    if (target === from && velocity === 0) return
+    animate(value, target, { type: 'inertia', velocity, min, max, ...FLING })
+  }
+
+  function fling() {
+    const b = bounds()
+    if (prefersReducedMotion()) {
+      const clamped = clampOffset(offset(), b)
+      x.set(clamped.x)
+      y.set(clamped.y)
+      return
+    }
+    glide(x, b.minX, b.maxX)
+    glide(y, b.minY, b.maxY)
+  }
+
+  return {
+    zoomed,
+    zoom,
+    isZoomed: () => isZoomed(zoom()),
+    zoomTo,
+    step,
+    reset,
+    wheel,
+    doubleTap,
+    pinch,
+    settle,
+    pan,
+    fling,
+  }
+}

package/src/components/lightbox/types.ts

@@ -0,0 +1,10 @@
+import type { ImageVariants } from '../image/image.variants'
+
+export interface LightboxItem {
+  id: string
+  src: string
+  preview?: string
+  alt: string
+  fit?: ImageVariants['fit']
+  source?: () => HTMLImageElement | null | undefined
+}

package/src/components/lightbox/utils/download.ts

@@ -0,0 +1,29 @@
+export function fileNameOf(url: string, fallback = 'image'): string {
+  try {
+    const parsed = new URL(url, 'http://localhost')
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return fallback
+    const name = decodeURIComponent(parsed.pathname.split('/').filter(Boolean).pop() ?? '')
+    return name || fallback
+  } catch {
+    return fallback
+  }
+}
+
+export async function saveImage(url: string): Promise<'saved' | 'opened'> {
+  try {
+    const response = await fetch(url, { mode: 'cors' })
+    if (!response.ok) throw new Error(String(response.status))
+    const blob = await response.blob()
+    const href = URL.createObjectURL(blob)
+    const anchor = Object.assign(document.createElement('a'), {
+      href,
+      download: fileNameOf(url),
+    })
+    anchor.click()
+    setTimeout(() => URL.revokeObjectURL(href), 0)
+    return 'saved'
+  } catch {
+    window.open(url, '_blank', 'noopener')
+    return 'opened'
+  }
+}

package/src/components/lightbox/utils/gesture.ts

@@ -0,0 +1,54 @@
+import type { Point } from './zoom'
+
+export interface Touch extends Point {
+  time: number
+}
+
+export const DRAG_THRESHOLD = 4
+export const TAP_MAX_DISTANCE = 10
+export const TAP_MAX_MS = 300
+export const DOUBLE_TAP_MS = 300
+export const DOUBLE_TAP_DISTANCE = 25
+export const WHEEL_LINE = 16
+export const TRACKPAD_INTENSITY = 0.01
+
+export const FLING = {
+  power: 0.8,
+  timeConstant: 750,
+  bounceStiffness: 200,
+  bounceDamping: 40,
+  restDelta: 1,
+  restSpeed: 10,
+} as const
+
+export function midpoint(a: Point, b: Point): Point {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+}
+
+export function distance(a: Point, b: Point): number {
+  return Math.hypot(b.x - a.x, b.y - a.y)
+}
+
+export function dragAxis(start: Point, current: Point): 'x' | 'y' | null {
+  const dx = Math.abs(current.x - start.x)
+  const dy = Math.abs(current.y - start.y)
+  if (Math.max(dx, dy) < DRAG_THRESHOLD) return null
+  return dx > dy ? 'x' : 'y'
+}
+
+export function isTap(start: Touch, end: Touch): boolean {
+  return distance(start, end) <= TAP_MAX_DISTANCE && end.time - start.time <= TAP_MAX_MS
+}
+
+export function isDoubleTap(previous: Touch | null, next: Touch): boolean {
+  if (!previous) return false
+  return (
+    next.time - previous.time <= DOUBLE_TAP_MS && distance(previous, next) <= DOUBLE_TAP_DISTANCE
+  )
+}
+
+export function wheelDelta(deltaY: number, deltaMode: number, stageHeight: number): number {
+  if (deltaMode === 1) return deltaY * WHEEL_LINE
+  if (deltaMode === 2) return deltaY * stageHeight
+  return deltaY
+}

package/src/components/lightbox/utils/paging.ts

@@ -0,0 +1,33 @@
+import { rubberBand } from './zoom'
+
+export const PAGE_COMMIT = 0.2
+export const PAGE_VELOCITY = 400
+export const PAGE_PROJECTION = 0.25
+
+export function pageSteps(offset: number, velocity: number, width: number): number {
+  if (width <= 0) return 0
+  if (Math.abs(offset) < width * PAGE_COMMIT && Math.abs(velocity) < PAGE_VELOCITY) return 0
+  const projected = offset + velocity * PAGE_PROJECTION
+  if (projected === 0) return 0
+  return projected < 0 ? 1 : -1
+}
+
+export function clampIndex(index: number, count: number): number {
+  if (count <= 0) return 0
+  return Math.min(Math.max(index, 0), count - 1)
+}
+
+export function wrapIndex(index: number, count: number): number {
+  if (count <= 0) return 0
+  return ((index % count) + count) % count
+}
+
+export function shortestDelta(delta: number, count: number): number {
+  if (count <= 0) return 0
+  const forward = wrapIndex(delta, count)
+  return forward > count / 2 ? forward - count : forward
+}
+
+export function edgePosition(raw: number, count: number, width: number): number {
+  return rubberBand(raw, -Math.max(0, count - 1) * width, 0, width)
+}