@hina-ui/vue 1.3.0 → 1.4.0

package/src/components/lightbox/Lightbox.vue

@@ -2,7 +2,6 @@
   import { computed, onMounted, shallowRef, watch } from 'vue'
   import { DialogRoot, DialogPortal, DialogContent, DialogTitle, useBodyScrollLock } from 'reka-ui'
   import { Motion } from 'motion-v'
-  import { useEventListener } from '@vueuse/core'
   import { cn } from '../../lib/cn'
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
   import LightboxStrip from './LightboxStrip.vue'
@@ -17,6 +16,8 @@
   import { useLightboxPhase } from './composables/useLightboxPhase'
   import { useLightboxHint } from './composables/useLightboxHint'
   import { useLightboxSlides } from './composables/useLightboxSlides'
+  import { lightboxStage } from './lightbox.variants'
+  import { useLightboxLayout } from './composables/useLightboxLayout'
   import { useLightboxRotation } from './composables/useLightboxRotation'
   import { clampIndex } from './utils/paging'
   import { saveImage } from './utils/download'
@@ -57,9 +58,10 @@
     loop: () => !!props.loop,
   })
 
-  function measure() {
+  function measure(force = false) {
+    const width = frames.stage.value.width
     frames.measure(stageEl.value)
-    paging.sync()
+    if (force || width !== frames.stage.value.width) paging.sync()
   }
 
   const phase = useLightboxPhase({
@@ -70,9 +72,9 @@
     pose: pose.fromSource,
     prepare: () => {
       rotation.clear()
-      frames.read()
+      return frames.read(() => current.value)
     },
-    layout: measure,
+    layout: () => measure(true),
   })
 
   const close = phase.close
@@ -94,6 +96,16 @@
     () => mounted.value,
   )
 
+  const layout = useLightboxLayout({
+    stage: () => stageEl.value,
+    current: () => current.value,
+    frames,
+    large,
+    phase,
+    zoom,
+    measure,
+  })
+
   const hint = useLightboxHint({ motion, frames, paging, current: () => current.value })
 
   const looping = computed(() => !!props.loop && count.value > 1)
@@ -137,10 +149,6 @@
     if (open.value) void phase.show()
   })
 
-  useEventListener('resize', () => {
-    if (mounted.value) measure()
-  })
-
   function onEscape(event: Event) {
     event.preventDefault()
     void close()
@@ -173,7 +181,7 @@
   const currentClass = computed(() =>
     cn(
       'absolute will-change-transform',
-      !zoom.zoomed.value && 'cursor-zoom-in',
+      !zoom.zoomed.value && (zoom.canToggle.value ? 'cursor-zoom-in' : 'cursor-default'),
       zoom.zoomed.value && (gesture.mode.value === 'pan' ? 'cursor-grabbing' : 'cursor-grab'),
     ),
   )
@@ -191,12 +199,7 @@
         <div
           ref="stageEl"
           :data-hn-phase="phase.current()"
-          :class="
-            cn(
-              'dark fixed inset-0 z-(--hn-z-overlay) touch-none outline-none select-none',
-              props.class,
-            )
-          "
+          :class="cn(lightboxStage(), props.class)"
           @pointerdown="gesture.onPointerdown"
           @pointermove="gesture.onPointermove"
           @pointerup="gesture.onPointerup"
@@ -220,7 +223,7 @@
             :transition="motion.transition('base')"
             :large-src="large.src.value"
             :large-ready="large.ready.value"
-            @learn="frames.learn"
+            @learn="layout.learn"
           />
           <DialogTitle as-child>
             <VisuallyHidden>{{ current?.alt }}</VisuallyHidden>
@@ -229,6 +232,8 @@
             :items="props.items"
             :index="index"
             :zoomed="zoom.zoomed.value"
+            :can-zoom-in="zoom.canZoomIn.value"
+            :at-original="zoom.atOriginal.value"
             :waiting="large.waiting.value"
             :loop="looping"
             :hint="hint"
@@ -239,6 +244,7 @@
             @zoom-in="zoom.step(1)"
             @zoom-out="zoom.step(-1)"
             @reset="zoom.reset()"
+            @original="zoom.original()"
             @rotate="rotate"
             @download="download"
           />

package/src/components/lightbox/LightboxChrome.vue

@@ -16,6 +16,8 @@
     items: LightboxItem[]
     index: number
     zoomed: boolean
+    canZoomIn: boolean
+    atOriginal: boolean
     waiting: boolean
     loop: boolean
     presence: MotionValue<number>
@@ -29,6 +31,7 @@
     zoomIn: []
     zoomOut: []
     reset: []
+    original: []
     rotate: []
     download: []
   }>()
@@ -88,7 +91,7 @@
       <ChevronRight />
     </IconButton>
   </Motion>
-  <Motion class="absolute end-4 top-4" :style="{ opacity: props.presence }">
+  <Motion data-hn-close class="absolute end-4 top-4" :style="{ opacity: props.presence }">
     <DialogClose as-child>
       <CloseButton size="md" />
     </DialogClose>
@@ -102,10 +105,13 @@
       :items="props.items"
       :index="props.index"
       :zoomed="props.zoomed"
+      :can-zoom-in="props.canZoomIn"
+      :at-original="props.atOriginal"
       @select="emit('select', $event)"
       @zoom-in="emit('zoomIn')"
       @zoom-out="emit('zoomOut')"
       @reset="emit('reset')"
+      @original="emit('original')"
       @rotate="emit('rotate')"
       @download="emit('download')"
     />

package/src/components/lightbox/LightboxToolbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Download, RotateCw, Shrink, ZoomIn, ZoomOut } from '@lucide/vue'
+  import { Download, RotateCw, Scan, Shrink, ZoomIn, ZoomOut } from '@lucide/vue'
   import { useUiLocale } from '../../locale'
   import IconButton from '../icon-button/IconButton.vue'
   import LightboxThumbs from './LightboxThumbs.vue'
@@ -11,6 +11,8 @@
     items: LightboxItem[]
     index: number
     zoomed: boolean
+    canZoomIn: boolean
+    atOriginal: boolean
   }>()
 
   const emit = defineEmits<{
@@ -18,6 +20,7 @@
     zoomIn: []
     zoomOut: []
     reset: []
+    original: []
     rotate: []
     download: []
   }>()
@@ -26,7 +29,7 @@
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-1 pb-3">
+  <div class="flex flex-col items-center gap-1 pb-[max(--spacing(3),env(safe-area-inset-bottom))]">
     <LightboxThumbs
       v-if="props.items.length > 1"
       :items="props.items"
@@ -36,6 +39,7 @@
     <div class="flex items-center gap-1">
       <IconButton
         :label="t.lightbox.zoomOut"
+        :disabled="!props.zoomed"
         variant="soft"
         pill
         class="hidden pointer-fine:inline-flex"
@@ -45,6 +49,7 @@
       </IconButton>
       <IconButton
         :label="t.lightbox.zoomIn"
+        :disabled="!props.canZoomIn"
         variant="soft"
         pill
         class="hidden pointer-fine:inline-flex"
@@ -52,6 +57,15 @@
       >
         <ZoomIn />
       </IconButton>
+      <IconButton
+        :label="t.lightbox.actualSize"
+        variant="soft"
+        pill
+        :disabled="props.atOriginal"
+        @click="emit('original')"
+      >
+        <Scan />
+      </IconButton>
       <IconButton
         :label="t.lightbox.resetZoom"
         variant="soft"

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

@@ -1,38 +1,134 @@
-import { reactive, shallowRef } from 'vue'
+import { onScopeDispose, reactive, shallowRef } from 'vue'
 import type { LightboxItem } from '../types'
 import { fitRect, type Rect } from '../utils/pose'
 import type { Size } from '../utils/zoom'
 
+function previewSizeOf(item: LightboxItem | undefined): Size | undefined {
+  const size = item?.previewSize
+  if (
+    size &&
+    Number.isFinite(size.width) &&
+    size.width > 0 &&
+    Number.isFinite(size.height) &&
+    size.height > 0
+  )
+    return size
+}
+
 export function useLightboxFrames(items: () => LightboxItem[]) {
   const stage = shallowRef<Size>({ width: 0, height: 0 })
-  const naturals = reactive(new Map<string, Size>())
+  const naturals = reactive(new Map<string, Size & { src: string }>())
+  const previews = reactive(new Map<string, Size & { src: string; preview: string }>())
+  const area = shallowRef<Rect>({ x: 0, y: 0, width: 0, height: 0 })
+  let loader: HTMLImageElement | undefined
 
   function measure(el: HTMLElement | undefined) {
-    stage.value = { width: el?.clientWidth ?? 0, height: el?.clientHeight ?? 0 }
+    if (!el) return
+    const width = el.clientWidth
+    const height = el.clientHeight
+    const style = getComputedStyle(el)
+    const rect = el.getBoundingClientRect()
+    const chrome = el.querySelector('[data-hn-chrome]')?.getBoundingClientRect()
+    const close = el.querySelector('[data-hn-close]')?.getBoundingClientRect()
+    const x = Math.min(
+      width / 2,
+      Math.max(parseFloat(style.paddingLeft), parseFloat(style.paddingRight)),
+    )
+    const y = Math.min(
+      height / 2,
+      Math.max(
+        parseFloat(style.paddingTop) + (close ? close.bottom - rect.top : 0),
+        parseFloat(style.paddingBottom) + (chrome ? rect.bottom - chrome.top : 0),
+      ),
+    )
+    stage.value = { width, height }
+    area.value = { x, y, width: width - x * 2, height: height - y * 2 }
   }
 
-  function read() {
+  function read(current?: () => LightboxItem | undefined): Promise<void> | undefined {
+    loader?.removeAttribute('src')
+    loader = undefined
     for (const item of items()) {
       const el = item.source?.()
-      if (el?.naturalWidth && el.naturalHeight) {
-        naturals.set(item.id, { width: el.naturalWidth, height: el.naturalHeight })
+      if (
+        el &&
+        'naturalWidth' in el &&
+        el.naturalWidth &&
+        el.naturalHeight &&
+        !el.srcset &&
+        (el.currentSrc || el.src) === new URL(item.src, el.ownerDocument.baseURI).href
+      ) {
+        naturals.set(item.id, { src: item.src, width: el.naturalWidth, height: el.naturalHeight })
       }
     }
+    const item = current?.()
+    if (!item || previewSizeOf(item) || naturalOf(item)) return
+    const img = new Image()
+    loader = img
+    const { id, src } = item
+    img.src = src
+    return img
+      .decode()
+      .catch(() => {})
+      .then(() => {
+        if (loader !== img) return
+        learn(id, img)
+        loader = undefined
+        const latest = current?.()
+        if (latest?.id !== id || latest?.src !== src) return read(current)
+      })
   }
 
   function learn(id: string, img: HTMLImageElement) {
-    if (naturals.has(id) || !img.naturalWidth || !img.naturalHeight) return
-    naturals.set(id, { width: img.naturalWidth, height: img.naturalHeight })
+    const item = items().find(item => item.id === id)
+    if (
+      !item ||
+      naturalOf(item) ||
+      !img.naturalWidth ||
+      !img.naturalHeight ||
+      img.src !== new URL(item.src, img.ownerDocument.baseURI).href
+    ) {
+      return
+    }
+    naturals.set(id, { src: item.src, width: img.naturalWidth, height: img.naturalHeight })
   }
 
   function naturalOf(item: LightboxItem | undefined): Size | undefined {
-    return item ? naturals.get(item.id) : undefined
+    if (!item) return
+    const natural = naturals.get(item.id)
+    return natural?.src === item.src ? natural : undefined
+  }
+
+  function learnPreview(item: LightboxItem | undefined, img: HTMLImageElement | undefined) {
+    if (!item?.preview || !img?.naturalWidth || !img.naturalHeight) return
+    if (img.src !== new URL(item.preview, img.ownerDocument.baseURI).href) return
+    const previous = previews.get(item.id)
+    if (previous?.src === item.src && previous.preview === item.preview) return
+    previews.set(item.id, {
+      src: item.src,
+      preview: item.preview,
+      width: img.naturalWidth,
+      height: img.naturalHeight,
+    })
+  }
+
+  function displayOf(item: LightboxItem | undefined): Size | undefined {
+    if (!item) return
+    const size = previewSizeOf(item)
+    if (size) return size
+    const preview = previews.get(item.id)
+    return preview?.src === item.src && preview.preview === item.preview ? preview : naturalOf(item)
   }
 
   function frameOf(item: LightboxItem | undefined): Rect {
-    const natural = naturalOf(item)
-    return natural ? fitRect(natural, stage.value) : { x: 0, y: 0, ...stage.value }
+    const natural = displayOf(item)
+    return natural ? fitRect(natural, area.value) : area.value
   }
 
-  return { stage, measure, read, learn, naturalOf, frameOf }
+  onScopeDispose(() => {
+    loader?.removeAttribute('src')
+    loader = undefined
+  })
+
+  return { stage, area, measure, read, learn, learnPreview, naturalOf, displayOf, frameOf }
 }

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

@@ -6,6 +6,7 @@ export const LARGE_HINT_DELAY_MS = 800
 export function useLightboxLarge(item: () => LightboxItem | undefined, active: () => boolean) {
   const src = shallowRef<string>()
   const ready = shallowRef(false)
+  const image = shallowRef<HTMLImageElement>()
   const waiting = shallowRef(false)
   let loader: HTMLImageElement | null = null
   let timer: ReturnType<typeof setTimeout> | null = null
@@ -17,6 +18,7 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
     timer = null
     src.value = undefined
     ready.value = false
+    image.value = undefined
     waiting.value = false
   }
 
@@ -36,6 +38,7 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
       if (timer) clearTimeout(timer)
       timer = null
       waiting.value = false
+      image.value = img
       ready.value = true
     }
     const decode = typeof img.decode === 'function' ? img.decode() : Promise.resolve()
@@ -58,5 +61,5 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
 
   onBeforeUnmount(reset)
 
-  return { src, ready, waiting }
+  return { src, ready, waiting, image }
 }

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

@@ -0,0 +1,44 @@
+import { watch } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import type { LightboxItem } from '../types'
+import type { useLightboxFrames } from './useLightboxFrames'
+import type { useLightboxLarge } from './useLightboxLarge'
+import type { useLightboxPhase } from './useLightboxPhase'
+import type { useLightboxZoom } from './useLightboxZoom'
+
+export function useLightboxLayout(options: {
+  stage: () => HTMLElement | undefined
+  current: () => LightboxItem | undefined
+  frames: ReturnType<typeof useLightboxFrames>
+  large: ReturnType<typeof useLightboxLarge>
+  phase: ReturnType<typeof useLightboxPhase>
+  zoom: ReturnType<typeof useLightboxZoom>
+  measure: () => void
+}) {
+  function sync() {
+    if (options.phase.current() !== 'open') return
+    options.zoom.reflow(() => {
+      options.measure()
+      options.frames.learnPreview(options.current(), options.large.image.value)
+    })
+  }
+
+  function learn(id: string, img: HTMLImageElement) {
+    const update = () => options.frames.learn(id, img)
+    if (options.phase.current() === 'open' && options.current()?.id === id)
+      options.zoom.reflow(update)
+    else update()
+  }
+
+  watch(() => [options.phase.current(), options.current(), options.large.image.value], sync, {
+    flush: 'post',
+  })
+  useResizeObserver(() => {
+    const stage = options.stage()
+    if (!stage) return []
+    const chrome = stage.querySelector<HTMLElement>('[data-hn-chrome]')
+    return chrome ? [stage, chrome] : [stage]
+  }, sync)
+
+  return { learn }
+}

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

@@ -84,7 +84,9 @@ export function useLightboxMotion(stageHeight: () => number, restScale: () => nu
   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)]
+    const travel = to
+      ? poseTo(to, t)
+      : [animate(scale, Math.min(scale.get(), FADE_POSE.scale), t), animate(opacity, 0, t)]
     return settle([...travel, animate(presence, 0, t)])
   }
 

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

@@ -1,4 +1,4 @@
-import { nextTick, shallowRef, type Ref } from 'vue'
+import { nextTick, onScopeDispose, shallowRef, type Ref } from 'vue'
 import type { useLightboxMotion } from './useLightboxMotion'
 import type { Pose } from '../utils/pose'
 
@@ -10,7 +10,7 @@ export function useLightboxPhase(options: {
   locked: Ref<boolean>
   motion: ReturnType<typeof useLightboxMotion>
   pose: () => Pose | null
-  prepare: () => void
+  prepare: () => void | Promise<void>
   layout: () => void
 }) {
   const { motion } = options
@@ -21,10 +21,13 @@ export function useLightboxPhase(options: {
     if (phase.value !== 'closed') return
     phase.value = 'entering'
     const run = ++generation
-    options.prepare()
+    const preparing = options.prepare()
+    if (preparing) await preparing
+    if (run !== generation) return
     options.mounted.value = true
     options.locked.value = true
     await nextTick()
+    if (run !== generation) return
     options.layout()
     await motion.enter(options.pose())
     if (run === generation) phase.value = 'open'
@@ -42,7 +45,7 @@ export function useLightboxPhase(options: {
     if (phase.value === 'closed' || phase.value === 'closing') return
     phase.value = 'closing'
     const run = ++generation
-    await motion.leave(options.pose())
+    if (options.mounted.value) await motion.leave(options.pose())
     if (run !== generation) return
     phase.value = 'closed'
     options.mounted.value = false
@@ -55,5 +58,10 @@ export function useLightboxPhase(options: {
     else if (phase.value === 'closing') void reopen()
   }
 
+  onScopeDispose(() => {
+    generation++
+    motion.stop()
+  })
+
   return { current: () => phase.value, show, close, reopen, interrupt }
 }

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

@@ -1,34 +1,35 @@
 import type { useLightboxFrames } from './useLightboxFrames'
-import { openPose, radiusOf, type Pose, type Rect } from '../utils/pose'
+import { openPose, type Pose } from '../utils/pose'
+import { clipOf } from '../utils/clip'
+import { sourceRect } from '../utils/source'
 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
+  function fromSource(): Pose | null {
+    const item = current()
+    const source = item?.source?.()
+    const box = sourceRect(source)
+    const el = source && 'getBoundingClientRect' in source ? source : undefined
+    const natural =
+      el?.naturalWidth && el.naturalHeight
+        ? { width: el.naturalWidth, height: el.naturalHeight }
+        : (frames.naturalOf(item) ?? frames.displayOf(item))
+    if (!box || !natural) return null
     const stage = frames.stage.value
     if (
-      rect.bottom <= 0 ||
-      rect.right <= 0 ||
-      rect.top >= stage.height ||
-      rect.left >= stage.width
+      box.y + box.height <= 0 ||
+      box.x + box.width <= 0 ||
+      box.y >= stage.height ||
+      box.x >= 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?.()))
+    const clip = clipOf(el, box)
+    if (clip.rect.width <= 0 || clip.rect.height <= 0) return null
+    return openPose(frames.frameOf(item), box, natural, item?.fit, clip.corners, clip.rect)
   }
 
   return { fromSource }

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

@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
 import type { useLightboxFrames } from './useLightboxFrames'
 import { baseScale } from '../utils/pose'
-import { rotatedSize } from '../utils/zoom'
+import { rotatedSize, zoomLevels } from '../utils/zoom'
 import type { LightboxItem } from '../types'
 
 export function useLightboxRotation(
@@ -15,17 +15,27 @@ export function useLightboxRotation(
   }
 
   function baseOf(item: LightboxItem | undefined): number {
-    return baseScale(frames.frameOf(item), frames.stage.value, rotationOf(item) % 360)
+    const frame = frames.frameOf(item)
+    return baseScale(
+      frame,
+      frames.area.value,
+      rotationOf(item) % 360,
+      frames.displayOf(item) ?? frame,
+    )
   }
 
   function geometry() {
     const item = current()
     const base = baseOf(item)
     const visual = rotatedSize(frames.frameOf(item), rotationOf(item) % 360)
+    const fit = { width: visual.width * base, height: visual.height * base }
+    const natural = rotatedSize(frames.displayOf(item) ?? fit, rotationOf(item) % 360)
     return {
-      fit: { width: visual.width * base, height: visual.height * base },
-      stage: frames.stage.value,
+      fit,
+      frame: frames.frameOf(item),
+      stage: frames.area.value,
       base,
+      ...zoomLevels(natural, fit, frames.area.value),
     }
   }