@hina-ui/vue 1.0.0

package/src/components/lightbox/LightboxChrome.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+  import { DialogClose } from 'reka-ui'
+  import { Motion, type MotionValue } from 'motion-v'
+  import { ChevronLeft, ChevronRight } from '@lucide/vue'
+  import { useUiLocale } from '../../locale'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import IconButton from '../icon-button/IconButton.vue'
+  import Spinner from '../spinner/Spinner.vue'
+  import Tag from '../tag/Tag.vue'
+  import LightboxToolbar from './LightboxToolbar.vue'
+  import type { LightboxItem } from './types'
+
+  defineOptions({ name: 'HnLightboxChrome' })
+
+  const props = defineProps<{
+    items: LightboxItem[]
+    index: number
+    zoomed: boolean
+    waiting: boolean
+    loop: boolean
+    presence: MotionValue<number>
+    hint: { x: MotionValue<number>; y: MotionValue<number> }
+  }>()
+
+  const emit = defineEmits<{
+    prev: []
+    next: []
+    select: [index: number]
+    zoomIn: []
+    zoomOut: []
+    reset: []
+    rotate: []
+    download: []
+  }>()
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <Transition
+    enter-active-class="hn-transition-base"
+    enter-from-class="opacity-0"
+    leave-active-class="hn-transition"
+    leave-to-class="opacity-0"
+  >
+    <Motion
+      v-if="props.waiting"
+      class="pointer-events-none absolute start-0 top-0 -translate-x-full p-3"
+      :style="{ x: props.hint.x, y: props.hint.y }"
+    >
+      <Tag variant="soft" tone="neutral" pill class="whitespace-nowrap">
+        <Spinner size="sm" />
+        {{ t.lightbox.loadingLarge }}
+      </Tag>
+    </Motion>
+  </Transition>
+  <Motion
+    v-if="props.items.length > 1"
+    class="pointer-events-none absolute inset-y-0 start-0 hidden items-center ps-4 pointer-fine:flex"
+    :style="{ opacity: props.presence }"
+  >
+    <IconButton
+      :label="t.pagination.prev"
+      variant="soft"
+      size="lg"
+      pill
+      :disabled="!props.loop && props.index <= 0"
+      class="pointer-events-auto"
+      @click="emit('prev')"
+    >
+      <ChevronLeft />
+    </IconButton>
+  </Motion>
+  <Motion
+    v-if="props.items.length > 1"
+    class="pointer-events-none absolute inset-y-0 end-0 hidden items-center pe-4 pointer-fine:flex"
+    :style="{ opacity: props.presence }"
+  >
+    <IconButton
+      :label="t.pagination.next"
+      variant="soft"
+      size="lg"
+      pill
+      :disabled="!props.loop && props.index >= props.items.length - 1"
+      class="pointer-events-auto"
+      @click="emit('next')"
+    >
+      <ChevronRight />
+    </IconButton>
+  </Motion>
+  <Motion class="absolute end-4 top-4" :style="{ opacity: props.presence }">
+    <DialogClose as-child>
+      <CloseButton size="md" />
+    </DialogClose>
+  </Motion>
+  <Motion
+    data-hn-chrome
+    class="absolute inset-x-0 bottom-0 flex touch-pan-x justify-center"
+    :style="{ opacity: props.presence }"
+  >
+    <LightboxToolbar
+      :items="props.items"
+      :index="props.index"
+      :zoomed="props.zoomed"
+      @select="emit('select', $event)"
+      @zoom-in="emit('zoomIn')"
+      @zoom-out="emit('zoomOut')"
+      @reset="emit('reset')"
+      @rotate="emit('rotate')"
+      @download="emit('download')"
+    />
+  </Motion>
+</template>

package/src/components/lightbox/LightboxStrip.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+  import { Motion, type MotionValue, type ValueAnimationTransition } from 'motion-v'
+  import type { Rect } from './utils/pose'
+  import type { LightboxItem } from './types'
+
+  defineOptions({ name: 'HnLightboxStrip' })
+
+  const props = defineProps<{
+    slides: { item: LightboxItem; at: number; key: string }[]
+    index: number
+    width: number
+    stripX: MotionValue<number>
+    currentClass: string
+    currentStyle: Record<string, unknown>
+    frameOf: (item: LightboxItem) => Rect
+    rotationOf: (item: LightboxItem) => number
+    baseOf: (item: LightboxItem) => number
+    transition: ValueAnimationTransition
+    largeSrc?: string
+    largeReady: boolean
+  }>()
+
+  const emit = defineEmits<{ learn: [id: string, image: HTMLImageElement] }>()
+
+  function px(rect: Rect) {
+    return {
+      left: `${rect.x}px`,
+      top: `${rect.y}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+    }
+  }
+</script>
+
+<template>
+  <Motion class="absolute inset-0" :style="{ x: props.stripX }">
+    <div
+      v-for="slide in props.slides"
+      :key="slide.key"
+      class="absolute inset-y-0"
+      :style="{ left: `${slide.at * props.width}px`, width: `${props.width}px` }"
+    >
+      <Motion
+        v-if="slide.at === props.index"
+        data-hn-frame
+        :class="props.currentClass"
+        :style="props.currentStyle"
+      >
+        <img
+          :src="slide.item.src"
+          :alt="slide.item.alt"
+          draggable="false"
+          class="block size-full object-contain"
+          @load="emit('learn', slide.item.id, $event.target as HTMLImageElement)"
+        />
+        <Transition
+          enter-active-class="hn-transition-base"
+          enter-from-class="opacity-0"
+          leave-active-class="hn-transition"
+          leave-to-class="opacity-0"
+        >
+          <img
+            v-if="props.largeReady"
+            :src="props.largeSrc"
+            alt=""
+            aria-hidden="true"
+            draggable="false"
+            class="absolute inset-0 size-full object-contain"
+          />
+        </Transition>
+      </Motion>
+      <Motion
+        v-else
+        data-hn-frame
+        class="absolute"
+        :style="px(props.frameOf(slide.item))"
+        :initial="false"
+        :animate="{ rotate: props.rotationOf(slide.item), scale: props.baseOf(slide.item) }"
+        :transition="props.transition"
+      >
+        <img
+          :src="slide.item.src"
+          :alt="slide.item.alt"
+          draggable="false"
+          class="block size-full object-contain"
+          @load="emit('learn', slide.item.id, $event.target as HTMLImageElement)"
+        />
+      </Motion>
+    </div>
+  </Motion>
+</template>

package/src/components/lightbox/LightboxThumbs.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+  import { nextTick, useId, watch, type ComponentPublicInstance } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { prefersReducedMotion } from '../../motion'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import Highlight from '../highlight/Highlight.vue'
+  import Ripple from '../ripple/Ripple.vue'
+  import type { LightboxItem } from './types'
+
+  defineOptions({ name: 'HnLightboxThumbs' })
+
+  const props = defineProps<{
+    items: LightboxItem[]
+    index: number
+  }>()
+
+  const emit = defineEmits<{ select: [index: number] }>()
+
+  const buttons: HTMLElement[] = []
+  const highlightId = useId()
+
+  function setButton(at: number, el: Element | ComponentPublicInstance | null) {
+    if (el instanceof HTMLElement) buttons[at] = el
+  }
+
+  watch(
+    () => [props.index, props.items.length] as const,
+    async () => {
+      await nextTick()
+      buttons[props.index]?.scrollIntoView({
+        behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+        block: 'nearest',
+        inline: 'center',
+      })
+    },
+    { immediate: true, flush: 'post' },
+  )
+</script>
+
+<template>
+  <ScrollArea direction="horizontal" :scrollbar="false" class="max-w-full">
+    <div data-hn-thumbs class="relative isolate flex w-max gap-2 px-4 py-3">
+      <button
+        v-for="(item, at) in props.items"
+        :key="item.id"
+        :ref="el => setButton(at, el)"
+        type="button"
+        :aria-label="item.alt"
+        :aria-current="at === props.index ? 'true' : undefined"
+        :class="
+          cn(
+            'hn-interactive hn-state-layer hn-press-none hn-transition relative z-[1] size-14 shrink-0 overflow-hidden rounded-md',
+            at === props.index ? 'z-0 opacity-100' : 'opacity-60',
+          )
+        "
+        @click="emit('select', at)"
+      >
+        <Ripple />
+        <img
+          :src="item.src"
+          alt=""
+          draggable="false"
+          class="relative -z-10 size-full object-cover"
+        />
+        <Highlight
+          v-if="at === props.index"
+          :id="highlightId"
+          class="ring-accent absolute inset-0 rounded-md ring-2 ring-inset"
+        />
+      </button>
+    </div>
+  </ScrollArea>
+</template>

package/src/components/lightbox/LightboxToolbar.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+  import { Download, RotateCw, Shrink, ZoomIn, ZoomOut } from '@lucide/vue'
+  import { useUiLocale } from '../../locale'
+  import IconButton from '../icon-button/IconButton.vue'
+  import LightboxThumbs from './LightboxThumbs.vue'
+  import type { LightboxItem } from './types'
+
+  defineOptions({ name: 'HnLightboxToolbar' })
+
+  const props = defineProps<{
+    items: LightboxItem[]
+    index: number
+    zoomed: boolean
+  }>()
+
+  const emit = defineEmits<{
+    select: [index: number]
+    zoomIn: []
+    zoomOut: []
+    reset: []
+    rotate: []
+    download: []
+  }>()
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-1 pb-3">
+    <LightboxThumbs
+      v-if="props.items.length > 1"
+      :items="props.items"
+      :index="props.index"
+      @select="emit('select', $event)"
+    />
+    <div class="flex items-center gap-1">
+      <IconButton
+        :label="t.lightbox.zoomOut"
+        variant="soft"
+        pill
+        class="hidden pointer-fine:inline-flex"
+        @click="emit('zoomOut')"
+      >
+        <ZoomOut />
+      </IconButton>
+      <IconButton
+        :label="t.lightbox.zoomIn"
+        variant="soft"
+        pill
+        class="hidden pointer-fine:inline-flex"
+        @click="emit('zoomIn')"
+      >
+        <ZoomIn />
+      </IconButton>
+      <IconButton
+        :label="t.lightbox.resetZoom"
+        variant="soft"
+        pill
+        :disabled="!props.zoomed"
+        class="hidden pointer-fine:inline-flex"
+        @click="emit('reset')"
+      >
+        <Shrink />
+      </IconButton>
+      <IconButton :label="t.lightbox.rotate" variant="soft" pill @click="emit('rotate')">
+        <RotateCw />
+      </IconButton>
+      <IconButton :label="t.lightbox.download" variant="soft" pill @click="emit('download')">
+        <Download />
+      </IconButton>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+import { reactive, shallowRef } from 'vue'
+import type { LightboxItem } from '../types'
+import { fitRect, type Rect } from '../utils/pose'
+import type { Size } from '../utils/zoom'
+
+export function useLightboxFrames(items: () => LightboxItem[]) {
+  const stage = shallowRef<Size>({ width: 0, height: 0 })
+  const naturals = reactive(new Map<string, Size>())
+
+  function measure(el: HTMLElement | undefined) {
+    stage.value = { width: el?.clientWidth ?? 0, height: el?.clientHeight ?? 0 }
+  }
+
+  function read() {
+    for (const item of items()) {
+      const el = item.source?.()
+      if (el?.naturalWidth && el.naturalHeight) {
+        naturals.set(item.id, { width: el.naturalWidth, height: el.naturalHeight })
+      }
+    }
+  }
+
+  function learn(id: string, img: HTMLImageElement) {
+    if (naturals.has(id) || !img.naturalWidth || !img.naturalHeight) return
+    naturals.set(id, { width: img.naturalWidth, height: img.naturalHeight })
+  }
+
+  function naturalOf(item: LightboxItem | undefined): Size | undefined {
+    return item ? naturals.get(item.id) : undefined
+  }
+
+  function frameOf(item: LightboxItem | undefined): Rect {
+    const natural = naturalOf(item)
+    return natural ? fitRect(natural, stage.value) : { x: 0, y: 0, ...stage.value }
+  }
+
+  return { stage, measure, read, learn, naturalOf, frameOf }
+}

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

@@ -0,0 +1,204 @@
+import { shallowRef } from 'vue'
+import type { useLightboxMotion } from './useLightboxMotion'
+import type { PinchStart, useLightboxZoom } from './useLightboxZoom'
+import {
+  distance,
+  dragAxis,
+  isDoubleTap,
+  isTap,
+  midpoint,
+  wheelDelta,
+  type Touch,
+} from '../utils/gesture'
+import type { Point } from '../utils/zoom'
+
+export type GestureMode = 'idle' | 'pending' | 'pan' | 'pinch' | 'dismiss' | 'page' | 'none'
+
+export function useLightboxGesture(options: {
+  stage: () => HTMLElement | undefined
+  motion: ReturnType<typeof useLightboxMotion>
+  zoom: ReturnType<typeof useLightboxZoom>
+  paging: {
+    grab: () => boolean
+    move: (offset: number) => void
+    release: (offset: number) => void
+    settle: () => void
+  }
+  enabled: () => boolean
+  interrupt: () => void
+  inside: (target: EventTarget | null) => boolean
+  dismiss: () => void
+  tapOutside: () => void
+}) {
+  const { motion, zoom, paging } = options
+  const mode = shallowRef<GestureMode>('idle')
+  const pointers = new Map<number, Point>()
+  let start: Touch = { x: 0, y: 0, time: 0 }
+  let origin: Point = { x: 0, y: 0 }
+  let delta: Point = { x: 0, y: 0 }
+  let pinch: PinchStart | null = null
+  let lastMid: Point = { x: 0, y: 0 }
+  let lastTap: Touch | null = null
+  let startInside = false
+  let takeover = false
+  let busyTap: Touch | null = null
+
+  function relative(point: Point): Point {
+    const rect = options.stage()?.getBoundingClientRect()
+    if (!rect) return point
+    return { x: point.x - rect.x - rect.width / 2, y: point.y - rect.y - rect.height / 2 }
+  }
+
+  function capture(event: PointerEvent, on: boolean) {
+    const stage = options.stage()
+    if (!stage) return
+    try {
+      if (on) stage.setPointerCapture(event.pointerId)
+      else stage.releasePointerCapture(event.pointerId)
+    } catch {
+      return
+    }
+  }
+
+  function isControl(target: EventTarget | null): boolean {
+    return (
+      target instanceof Element &&
+      !!target.closest('button, a, input, [role="button"], [data-hn-chrome]')
+    )
+  }
+
+  function pair(): [Point, Point] | null {
+    const list = [...pointers.values()]
+    return list.length >= 2 ? [list[0]!, list[1]!] : null
+  }
+
+  function onPointerdown(event: PointerEvent) {
+    if (event.pointerType === 'mouse' && event.button !== 0) return
+    if (isControl(event.target)) return
+    if (!options.enabled()) {
+      busyTap = { x: event.clientX, y: event.clientY, time: event.timeStamp }
+      return
+    }
+    capture(event, true)
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY })
+    if (pointers.size === 1) {
+      motion.stop()
+      takeover = paging.grab()
+      start = { x: event.clientX, y: event.clientY, time: event.timeStamp }
+      origin = { x: motion.x.get(), y: motion.y.get() }
+      delta = { x: 0, y: 0 }
+      startInside = options.inside(event.target)
+      mode.value = 'pending'
+      return
+    }
+    const points = pair()
+    if (!points || pointers.size !== 2) return
+    if (mode.value === 'dismiss') motion.dismissCancel()
+    paging.settle()
+    lastMid = relative(midpoint(...points))
+    pinch = {
+      distance: distance(...points),
+      zoom: zoom.zoom(),
+      mid: lastMid,
+      offset: { x: motion.x.get(), y: motion.y.get() },
+    }
+    mode.value = 'pinch'
+  }
+
+  function onPointermove(event: PointerEvent) {
+    if (!pointers.has(event.pointerId)) return
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY })
+    if (mode.value === 'pinch') {
+      const points = pair()
+      if (!points || !pinch) return
+      lastMid = relative(midpoint(...points))
+      zoom.pinch(pinch, lastMid, distance(...points) / pinch.distance)
+      return
+    }
+    if (pointers.size !== 1) return
+    const point = { x: event.clientX, y: event.clientY }
+    if (mode.value === 'pending') {
+      const axis = dragAxis(start, point)
+      if (!axis) return
+      mode.value = zoom.isZoomed() ? 'pan' : axis === 'y' ? 'dismiss' : 'page'
+      if (mode.value !== 'page') paging.settle()
+    }
+    delta = { x: point.x - start.x, y: point.y - start.y }
+    if (mode.value === 'pan') zoom.pan(origin, delta)
+    else if (mode.value === 'dismiss') motion.dismissMove(origin.y + delta.y)
+    else if (mode.value === 'page') paging.move(delta.x)
+  }
+
+  function finish(event: PointerEvent, cancelled: boolean) {
+    if (busyTap) {
+      const end: Touch = { x: event.clientX, y: event.clientY, time: event.timeStamp }
+      if (!cancelled && isTap(busyTap, end)) options.interrupt()
+      busyTap = null
+      return
+    }
+    if (!pointers.has(event.pointerId)) return
+    pointers.delete(event.pointerId)
+    capture(event, false)
+    if (mode.value === 'pinch') {
+      zoom.settle(lastMid)
+      pinch = null
+      mode.value = pointers.size ? 'none' : 'idle'
+      return
+    }
+    if (pointers.size) return
+    const current = mode.value
+    mode.value = 'idle'
+    if (current === 'pan') {
+      zoom.fling()
+      return
+    }
+    if (current === 'page') {
+      if (cancelled) paging.settle()
+      else paging.release(delta.x)
+      return
+    }
+    if (current === 'dismiss') {
+      const velocity = cancelled ? 0 : motion.y.getVelocity()
+      if (motion.dismissRelease(motion.y.get(), velocity)) options.dismiss()
+      return
+    }
+    paging.release(0)
+    if (cancelled || current !== 'pending') return
+    const end: Touch = { x: event.clientX, y: event.clientY, time: event.timeStamp }
+    if (!isTap(start, end)) return
+    if (takeover) {
+      lastTap = null
+      return
+    }
+    if (!startInside) {
+      lastTap = null
+      options.tapOutside()
+      return
+    }
+    if (isDoubleTap(lastTap, end)) {
+      lastTap = null
+      zoom.doubleTap(relative(end))
+    } else {
+      lastTap = end
+    }
+  }
+
+  function onPointerup(event: PointerEvent) {
+    finish(event, false)
+  }
+
+  function onPointercancel(event: PointerEvent) {
+    finish(event, true)
+  }
+
+  function onWheel(event: WheelEvent) {
+    if (isControl(event.target)) return
+    event.preventDefault()
+    if (!options.enabled()) return
+    const height = options.stage()?.clientHeight ?? 0
+    const delta = wheelDelta(event.deltaY, event.deltaMode, height)
+    zoom.wheel(delta, relative({ x: event.clientX, y: event.clientY }), event.ctrlKey)
+  }
+
+  return { mode, onPointerdown, onPointermove, onPointerup, onPointercancel, onWheel }
+}

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

@@ -0,0 +1,37 @@
+import { useTransform } from 'motion-v'
+import type { useLightboxMotion } from './useLightboxMotion'
+import type { useLightboxFrames } from './useLightboxFrames'
+import type { useLightboxPaging } from './useLightboxPaging'
+import type { LightboxItem } from '../types'
+
+export function useLightboxHint(options: {
+  motion: ReturnType<typeof useLightboxMotion>
+  frames: ReturnType<typeof useLightboxFrames>
+  paging: ReturnType<typeof useLightboxPaging>
+  current: () => LightboxItem | undefined
+}) {
+  const { motion, frames, paging } = options
+
+  function corner() {
+    const frame = frames.frameOf(options.current())
+    const stage = frames.stage.value
+    const scale = motion.scale.get()
+    const angle = (motion.rotate.get() * Math.PI) / 180
+    const cos = Math.abs(Math.cos(angle))
+    const sin = Math.abs(Math.sin(angle))
+    const width = (frame.width * cos + frame.height * sin) * scale
+    const height = (frame.width * sin + frame.height * cos) * scale
+    const centerX =
+      paging.stripX.get() + paging.position.value * stage.width + frame.x + frame.width / 2
+    const centerY = frame.y + frame.height / 2 + motion.y.get()
+    return {
+      x: Math.min(centerX + motion.x.get() + width / 2, stage.width),
+      y: Math.max(centerY - height / 2, 0),
+    }
+  }
+
+  const x = useTransform(() => corner().x)
+  const y = useTransform(() => corner().y)
+
+  return { x, y }
+}

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

@@ -0,0 +1,62 @@
+import { onBeforeUnmount, shallowRef, watch } from 'vue'
+import type { LightboxItem } from '../types'
+
+export const LARGE_HINT_DELAY_MS = 800
+
+export function useLightboxLarge(item: () => LightboxItem | undefined, active: () => boolean) {
+  const src = shallowRef<string>()
+  const ready = shallowRef(false)
+  const waiting = shallowRef(false)
+  let loader: HTMLImageElement | null = null
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  function reset() {
+    if (loader) loader.src = ''
+    loader = null
+    if (timer) clearTimeout(timer)
+    timer = null
+    src.value = undefined
+    ready.value = false
+    waiting.value = false
+  }
+
+  function load(target: LightboxItem) {
+    const url = target.preview
+    if (!url || url === target.src) return
+    src.value = url
+    const img = new Image()
+    loader = img
+    img.decoding = 'async'
+    img.src = url
+    timer = setTimeout(() => {
+      if (loader === img && !ready.value) waiting.value = true
+    }, LARGE_HINT_DELAY_MS)
+    const done = () => {
+      if (loader !== img) return
+      if (timer) clearTimeout(timer)
+      timer = null
+      waiting.value = false
+      ready.value = true
+    }
+    const decode = typeof img.decode === 'function' ? img.decode() : Promise.resolve()
+    decode.then(done, () => {
+      if (loader !== img) return
+      if (timer) clearTimeout(timer)
+      timer = null
+      waiting.value = false
+    })
+  }
+
+  watch(
+    () => [active() ? item() : undefined] as const,
+    ([target]) => {
+      reset()
+      if (target) load(target)
+    },
+    { immediate: true },
+  )
+
+  onBeforeUnmount(reset)
+
+  return { src, ready, waiting }
+}