@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/image-viewer/src/ImageViewerFrame.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { VIEWER_OPEN_MOTION, viewerPresentation, viewerSource } from "./opening-motion";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
+import { AnimatePresence, motion, motionValue } from "motion-v";
+import { Minus, Plus } from "lucide-vue-next";
+
+import { resolveElement } from "../../../lib/composables";
+import { useViewer } from "./context";
+import { clampImagePan, imagePanBounds } from "./geometry";
+import type { LightboxImage } from "./types";
+import ImageViewerSlide from "./ImageViewerSlide.vue";
+const props = defineProps<{ image: LightboxImage; index: number; present: boolean }>();
+const viewer = useViewer();
+const presentation = viewerPresentation(viewer), owner = Symbol("viewer-frame");
+function syncPresentation() {
+  if (props.present && !viewer.reduce.value) presentation.value = { owner, imageId: props.image.id };
+  else if (presentation.value?.owner === owner) presentation.value = undefined;
+}
+watch(() => [props.present, props.image.id, viewer.reduce.value], syncPresentation, { flush: "post" });
+const zoom = ref(false);
+const failed = ref(false);
+const bounds = ref<HTMLElement | null>(null);
+const imageBox = ref<unknown>(null);
+const pan = ref({ x: 0, y: 0 });
+const x = motionValue(0);
+const y = motionValue(0);
+const session = computed(() => `${props.image.id}-${props.image.src}`);
+const direction = ref(1);
+const help = useId();
+let previousIndex = props.index;
+let observer: ResizeObserver | undefined;
+let disposed = false;
+function resetPan() { x.jump(0); y.jump(0); }
+let closingAnimation: Animation | undefined;
+let openingAnimation: Animation | undefined;
+watch(session, () => { openingAnimation?.cancel(); openingAnimation = undefined; direction.value = props.index < previousIndex ? -1 : 1; previousIndex = props.index; zoom.value = false; failed.value = false; resetPan(); }, { flush: "pre" });
+function thumbnail() {
+  const matches = (node: HTMLElement) => node.isConnected && node.dataset.orvuiViewerId === viewer.id && node.dataset.orvuiImageId === props.image.id;
+  const source = viewerSource(viewer);
+  return source && matches(source) ? source : Array.from(imageBoxElement()?.ownerDocument.querySelectorAll<HTMLElement>('[data-orvui-viewer-id]') ?? []).find(matches);
+}
+function imageBoxElement() { return resolveElement<HTMLElement>(imageBox.value); }
+function thumbnailRect(source: HTMLElement) {
+  const image = source.querySelector("img") ?? source;
+  const transform = image.style.transform;
+  image.style.transform = "none";
+  const rect = image.getBoundingClientRect();
+  image.style.transform = transform;
+  return rect;
+}
+function animateFrame(element: HTMLElement, frames: Keyframe[], options: KeyframeAnimationOptions) {
+  if (typeof element.animate !== "function") return;
+  try {
+    const animation = element.animate(frames, options);
+    void animation.finished?.catch(() => undefined);
+    return animation;
+  } catch {
+    // Unsupported animation implementations still close without retaining the image.
+    return;
+  }
+}
+watch(() => props.present, present => {
+  if (present) return;
+  const element = resolveElement<HTMLElement>(imageBox.value);
+  if (!element) return;
+  const current = element.getBoundingClientRect();
+  openingAnimation?.cancel();
+  openingAnimation = undefined;
+  closingAnimation?.cancel();
+  closingAnimation = undefined;
+  const fade = (duration: number) => {
+    closingAnimation = animateFrame(element, [{ opacity: 1 }, { opacity: 0 }], { duration, fill: "forwards" });
+    if (!closingAnimation) element.style.opacity = "0";
+  };
+  if (viewer.reduce.value) {
+    fade(100);
+    return;
+  }
+  const source = thumbnail();
+  if (!source) { fade(160); return; }
+  const oldTransform = element.style.transform;
+  element.style.transform = 'none';
+  const base = element.getBoundingClientRect();
+  element.style.transform = oldTransform;
+  const target = thumbnailRect(source);
+  if (!base.width || !base.height || !target.width || !target.height) { fade(160); return; }
+  const pose = (rect: DOMRect) => `translate(${rect.x - base.x}px, ${rect.y - base.y}px) scale(${rect.width / base.width}, ${rect.height / base.height})`;
+  element.style.transformOrigin = '0 0';
+  element.style.overflow = 'hidden';
+  closingAnimation = animateFrame(element, [
+    { transform: pose(current), transformOrigin: "0px 0px", borderRadius: '0px' },
+    { transform: pose(target), transformOrigin: "0px 0px", borderRadius: getComputedStyle(source).borderRadius },
+  ], { duration: 420, easing: 'cubic-bezier(.4,0,.2,1)', fill: 'forwards' });
+  if (!closingAnimation) element.style.opacity = "0";
+}, { flush: 'post' });
+function measure() { const image = resolveElement<HTMLElement>(imageBox.value); const frame = bounds.value; if (!image || !frame) return; pan.value = imagePanBounds(image.clientWidth, image.clientHeight, frame.clientWidth, frame.clientHeight); x.set(clampImagePan(x.get(), pan.value.x)); y.set(clampImagePan(y.get(), pan.value.y)); }
+function toggle() { resetPan(); zoom.value = !zoom.value; }
+function key(event: KeyboardEvent) { if (!zoom.value) return; const vectors: Record<string, [number, number]> = { ArrowLeft: [-40, 0], ArrowRight: [40, 0], ArrowUp: [0, -40], ArrowDown: [0, 40] }; const delta = vectors[event.key]; if (!delta) return; event.preventDefault(); event.stopPropagation(); x.set(clampImagePan(x.get() + delta[0], pan.value.x)); y.set(clampImagePan(y.get() + delta[1], pan.value.y)); }
+function openFrame() {
+  const element = imageBoxElement();
+  if (!element || !props.present) return;
+  if (viewer.reduce.value) {
+    openingAnimation = animateFrame(element, [{ opacity: 0 }, { opacity: 1 }], { duration: 100 });
+    return;
+  }
+  const source = thumbnail();
+  if (!source) return;
+  const from = thumbnailRect(source), to = element.getBoundingClientRect();
+  if (!from.width || !from.height || !to.width || !to.height) return;
+  element.style.transformOrigin = "0 0";
+  element.style.overflow = "hidden";
+  openingAnimation = animateFrame(element, [
+    { transform: `translate(${from.x - to.x}px, ${from.y - to.y}px) scale(${from.width / to.width}, ${from.height / to.height})`, borderRadius: getComputedStyle(source).borderRadius },
+    { transform: "none", borderRadius: "0px" },
+  ], { duration: VIEWER_OPEN_MOTION.duration * 1000, easing: `cubic-bezier(${VIEWER_OPEN_MOTION.ease.join(",")})`, fill: "both" });
+}
+onMounted(async () => { syncPresentation(); await nextTick(); if (disposed) return; measure(); openFrame(); if (typeof ResizeObserver === "undefined") return; observer = new ResizeObserver(measure); for (const element of [bounds.value, resolveElement<HTMLElement>(imageBox.value)]) if (element) observer.observe(element); });
+onBeforeUnmount(() => { if (presentation.value?.owner === owner) presentation.value = undefined; openingAnimation?.cancel(); closingAnimation?.cancel(); disposed = true; observer?.disconnect(); x.destroy(); y.destroy(); });
+</script>
+<template><div class="relative flex min-h-0 flex-1 items-center justify-center"><div ref="bounds" class="flex h-full w-full items-center justify-center overflow-hidden rounded-lg"><motion.div ref="imageBox" data-lightbox-content="" class="relative flex max-h-full max-w-full items-center justify-center" :style="{ aspectRatio: `${image.width} / ${image.height}`, width: `min(100%, calc((100dvh - 160px) * ${image.width / image.height}))` }"><div :class="['absolute inset-0', !zoom && 'overflow-hidden']"><AnimatePresence :initial="false" :custom="{ direction, reduce: viewer.reduce.value }"><ImageViewerSlide :key="session" :image="image" :zoom="zoom" :present="present" :direction="direction" :x="x" :y="y" :pan="pan" @failed="failed = true" @swipe="viewer.move" /></AnimatePresence></div><p v-if="failed" role="status" class="absolute inset-0 flex items-center justify-center bg-neutral-900 p-4 text-center text-sm text-white">Unable to load this image.</p></motion.div></div><motion.button :initial="{ opacity: 0 }" :animate="{ opacity: present ? 1 : 0 }" :exit="{ opacity: 0, transition: { duration: .08, delay: 0 } }" :transition="{ duration: viewer.reduce.value ? .1 : present ? .18 : .08, delay: viewer.reduce.value || !present ? 0 : .16 }" type="button" :aria-label="zoom ? 'Zoom out' : 'Zoom in'" :aria-pressed="zoom" :aria-describedby="help" class="orvui-image-viewer-zoom absolute bottom-3 right-3 inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30" @click="toggle" @keydown="key"><component :is="zoom ? Minus : Plus" :size="18" aria-hidden="true" /></motion.button><span :id="help" class="sr-only">When zoomed in, drag the image to pan, or keep this control focused and use the arrow keys.</span></div></template>
+
+<style scoped>
+.orvui-image-viewer-zoom:focus {
+  opacity: 1 !important;
+}
+</style>

package/src/motion/image-viewer/src/ImageViewerGallery.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { cn } from "../../../lib/utils";
+import { useViewer } from "./context";
+defineOptions({ inheritAttrs: false });
+const viewer = useViewer();
+const attrs = useAttrs();
+const label = computed(() => String(attrs['aria-label'] ?? viewer.label.value));
+</script>
+<template><section v-bind="attrs" :aria-label="label" :class="cn('grid w-full grid-cols-2 gap-3 sm:grid-cols-3', attrs.class as string)"><slot /></section></template>

package/src/motion/image-viewer/src/ImageViewerNext.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ChevronRight } from "lucide-vue-next";
+import { useViewer } from "./context";
+import { cn } from "../../../lib/utils";
+defineOptions({ inheritAttrs: false });
+defineProps<{ disabled?: boolean }>();
+const emit = defineEmits<{ click: [event: MouseEvent] }>();
+const viewer = useViewer();
+function activate(event: MouseEvent) { emit("click", event); if (!event.defaultPrevented) viewer.move(1); }
+</script>
+<template><button v-bind="$attrs" type="button" :aria-label="String($attrs['aria-label'] ?? 'Next image')" :disabled="disabled || viewer.index.value < 0 || viewer.index.value >= viewer.images.value.length - 1" @click="activate" :class="cn('inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30', $attrs.class as string)"><slot><ChevronRight :size="18" aria-hidden="true" /></slot></button></template>

package/src/motion/image-viewer/src/ImageViewerPrevious.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ChevronLeft } from "lucide-vue-next";
+import { useViewer } from "./context";
+import { cn } from "../../../lib/utils";
+defineOptions({ inheritAttrs: false });
+defineProps<{ disabled?: boolean }>();
+const emit = defineEmits<{ click: [event: MouseEvent] }>();
+const viewer = useViewer();
+function activate(event: MouseEvent) { emit("click", event); if (!event.defaultPrevented) viewer.move(-1); }
+</script>
+<template><button v-bind="$attrs" type="button" :aria-label="String($attrs['aria-label'] ?? 'Previous image')" :disabled="disabled || viewer.index.value <= 0" @click="activate" :class="cn('inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:opacity-30', $attrs.class as string)"><slot><ChevronLeft :size="18" aria-hidden="true" /></slot></button></template>

package/src/motion/image-viewer/src/ImageViewerSlide.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import { motion, type MotionValue } from "motion-v";
+import { EASE_OUT, EASE_DRAWER, SPRING_LAYOUT } from "../../../lib/ease";
+import { useViewer } from "./context";
+import { imageSwipe } from "./geometry";
+import type { LightboxImage } from "./types";
+const props = defineProps<{ image: LightboxImage; zoom: boolean; present: boolean; direction: number; x: MotionValue<number>; y: MotionValue<number>; pan: { x: number; y: number } }>();
+const emit = defineEmits<{ swipe: [direction: 1 | -1]; failed: [] }>();
+const viewer = useViewer();
+const active = computed(() => props.present && viewer.image.value?.id === props.image.id && viewer.image.value.src === props.image.src);
+let origin: { x: number; y: number } | undefined;
+watch(active, present => { if (!present) origin = undefined; });
+function pose(custom: unknown, phase: "enter" | "visible" | "exit") { const state = custom as { direction: number; reduce: boolean }; const transition = state.reduce ? { duration: .1, ease: EASE_OUT } : { type: "tween" as const, duration: .28, ease: EASE_DRAWER }; const opacity = state.reduce && phase !== "visible" ? 0 : 1; const offset = state.reduce || phase === "visible" ? 0 : state.direction * (phase === "exit" ? -100 : 100); return { opacity, x: `${offset}%`, ...(phase === "enter" ? {} : { transition }) }; }
+const variants = { enter: (custom: unknown) => pose(custom, "enter"), visible: (custom: unknown) => pose(custom, "visible"), exit: (custom: unknown) => pose(custom, "exit") };
+function down(event: PointerEvent) { event.preventDefault(); if (!props.zoom && event.isPrimary && active.value) origin = { x: event.clientX, y: event.clientY }; }
+function up(event: PointerEvent) { const start = origin; origin = undefined; if (!start || props.zoom || !active.value) return; const direction = imageSwipe(start, { x: event.clientX, y: event.clientY }); if (direction !== null) emit("swipe", direction); }
+function cancel() { origin = undefined; }
+</script>
+<template><motion.div :inert="!active" :aria-hidden="!active || undefined" :style="{ pointerEvents: active ? 'auto' : 'none' }" :custom="{ direction, reduce: viewer.reduce.value }" :variants="variants" initial="enter" animate="visible" exit="exit" class="absolute inset-0"><motion.img :src="image.src" :alt="image.alt" :width="image.width" :height="image.height" :draggable="false" :drag="true" :drag-listener="zoom" :drag-constraints="{ left: -pan.x, right: pan.x, top: -pan.y, bottom: pan.y }" :drag-elastic=".08" :drag-momentum="false" :animate="{ scale: zoom && present ? 2 : 1, ...(!present ? { x: 0, y: 0 } : {}) }" :transition="viewer.reduce.value ? { duration: 0 } : SPRING_LAYOUT" class="block h-full w-full select-none object-contain" :style="{ x, y, touchAction: zoom ? 'none' : 'pan-y', cursor: zoom ? 'grab' : undefined }" @error="active && emit('failed')" @pointerdown="down" @pointerup="up" @pointercancel="cancel" /></motion.div></template>

package/src/motion/image-viewer/src/ImageViewerSurface.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useViewer } from "./context";
+import type { LightboxImage } from "./types";
+import ImageViewerFrame from "./ImageViewerFrame.vue";
+import ImageViewerCounter from "./ImageViewerCounter.vue";
+import ImageViewerClose from "./ImageViewerClose.vue";
+import ImageViewerPrevious from "./ImageViewerPrevious.vue";
+import ImageViewerNext from "./ImageViewerNext.vue";
+import ImageViewerCaption from "./ImageViewerCaption.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps<{ image: LightboxImage; index: number; setPanel: (node: HTMLElement | null) => void }>();
+const viewer = useViewer();
+const present = computed(() => !!viewer.image.value);
+function backdrop(event: PointerEvent) { if (event.target instanceof Element && !event.target.closest("button,a,input,select,textarea,[data-lightbox-content]")) { event.preventDefault(); viewer.select(null); } }
+function key(event: KeyboardEvent) { if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.target instanceof Element && event.target.closest('input,textarea,select,[contenteditable="true"]')) return; if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); viewer.move(event.key === "ArrowLeft" ? -1 : 1); } }
+</script>
+<template><motion.div class="contents" :initial="false" :animate="{ opacity: 1 }" :exit="{ opacity: 1 }" :transition="{ duration: viewer.reduce.value ? .1 : .48 }"><motion.button type="button" tabindex="-1" aria-hidden="true" :inert="!present" :style="{ pointerEvents: present ? 'auto' : 'none' }" class="fixed inset-0 z-[100] h-full w-full cursor-default bg-black/90" :initial="{ opacity: 0, backdropFilter: 'blur(0px)' }" :animate="{ opacity: present ? 1 : 0, backdropFilter: present && !viewer.reduce.value ? 'blur(6px)' : 'blur(0px)' }" :exit="{ opacity: 0, backdropFilter: 'blur(0px)', transition: { duration: viewer.reduce.value ? .1 : .46, ease: [.4, 0, .6, 1] } }" :transition="{ duration: viewer.reduce.value ? .1 : present ? .28 : .46, ease: present ? EASE_OUT : [.4, 0, .6, 1] }" @click="viewer.select(null)" /><div :inert="!present" class="pointer-events-none fixed inset-3 z-[101] sm:inset-6"><div v-bind="$attrs" :ref="node => props.setPanel(node as HTMLElement | null)" role="dialog" aria-modal="true" :aria-label="viewer.label.value" tabindex="-1" :aria-hidden="!present || undefined" :style="{ pointerEvents: present ? 'auto' : 'none' }" :class="cn('flex h-full flex-col outline-none', $attrs.class as string)" @pointerdown.capture="backdrop" @keydown="key"><div data-lightbox-content="" :style="{ opacity: present ? 1 : 0 }" class="flex items-center justify-between gap-3 pb-3 text-white"><slot name="header"><ImageViewerCounter /><ImageViewerClose /></slot></div><ImageViewerFrame :image="image" :index="index" :present="present" /><motion.div data-lightbox-content="" class="flex items-center justify-between gap-3 pt-3 text-white" :initial="{ opacity: 0, y: viewer.reduce.value ? 0 : 6 }" :animate="{ opacity: present ? 1 : 0, y: present || viewer.reduce.value ? 0 : 4 }" :exit="{ opacity: 0, y: viewer.reduce.value ? 0 : 4, transition: { duration: .08, delay: 0 } }" :transition="{ duration: viewer.reduce.value ? .1 : present ? .18 : .08, delay: viewer.reduce.value || !present ? 0 : .12, ease: EASE_OUT }"><slot><ImageViewerPrevious /><ImageViewerCaption /><ImageViewerNext /></slot></motion.div></div></div></motion.div></template>

package/src/motion/image-viewer/src/ImageViewerThumbnail.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { forgetViewerSource, rememberViewerSource, viewerPresentation } from "./opening-motion";
+import { computed, onBeforeUnmount, watch } from "vue";
+import { motion } from "motion-v";
+import { SPRING_PRESS } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useViewer } from "./context";
+import { resolveElement } from "../../../lib/composables";
+defineOptions({ inheritAttrs: false });
+const props = defineProps<{ imageId: string; imageClassName?: string; disabled?: boolean }>();
+const emit = defineEmits<{ click: [event: MouseEvent] }>();
+const viewer = useViewer();
+const presentation = viewerPresentation(viewer);
+const image = computed(() => viewer.images.value.find(image => image.id === props.imageId));
+watch(image, value => { if (!value) throw Error(`ImageViewerThumbnail: unknown image id "${props.imageId}".`); }, { immediate: true });
+let clickedSource: HTMLElement | null = null;
+function click(event: MouseEvent) {
+  emit("click", event);
+  if (event.defaultPrevented || props.disabled) return;
+  clickedSource = resolveElement<HTMLElement>(event.currentTarget);
+  if (clickedSource) rememberViewerSource(viewer, clickedSource);
+  viewer.select(props.imageId);
+}
+onBeforeUnmount(() => { if (clickedSource) forgetViewerSource(viewer, clickedSource); });
+</script>
+<template><motion.button :data-orvui-viewer-id="viewer.id" :data-orvui-image-id="imageId" v-if="image" v-bind="$attrs" type="button" :disabled="disabled" :aria-label="String($attrs['aria-label'] ?? `Open ${image.alt}`)" aria-haspopup="dialog" :aria-expanded="image.id === viewer.value.value" :while-press="viewer.reduce.value ? undefined : { scale: .98 }" :transition="SPRING_PRESS" :class="cn('relative overflow-hidden rounded-2xl bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', $attrs.class as string)" @click="click"><img :style="{ opacity: presentation?.imageId === image.id ? 0 : undefined }" :src="image.src" :alt="image.alt" :width="image.width" :height="image.height" loading="lazy" :draggable="false" :class="cn('block h-auto w-full', imageClassName)" /><slot :image="image" /></motion.button></template>

package/src/motion/image-viewer/src/api-types.ts

@@ -0,0 +1,13 @@
+// Vue public prop types, derived from the actual components.
+export type ImageViewerContentProps = InstanceType<
+  (typeof import("./ImageViewerContent.vue"))["default"]
+>["$props"];
+export type ImageViewerProps = InstanceType<
+  (typeof import("./ImageViewer.vue"))["default"]
+>["$props"];
+export type ImageViewerThumbnailProps = InstanceType<
+  (typeof import("./ImageViewerThumbnail.vue"))["default"]
+>["$props"];
+export type MorphingLightboxProps = InstanceType<
+  (typeof import("./ImageViewer.vue"))["default"]
+>["$props"];

package/src/motion/image-viewer/src/context.ts

@@ -0,0 +1,43 @@
+import { inject, nextTick, onBeforeUnmount, onMounted, watch, type InjectionKey, type Ref, type VNodeChild } from "vue";
+import { useOverlay } from "../../../lib/composables";
+import type { LightboxImage } from "./types";
+export interface ImageViewerContext { images: Ref<LightboxImage[]>; value: Ref<string | null>; index: Ref<number>; image: Ref<LightboxImage | undefined>; id: string; direction: Ref<number>; label: Ref<string>; reduce: Ref<boolean>; renderCaption?: (image: LightboxImage) => VNodeChild; select: (value: string | null) => void; move: (direction: number) => void }
+export const viewerKey: InjectionKey<ImageViewerContext> = Symbol("ImageViewer");
+export function useViewer() { const viewer = inject(viewerKey); if (!viewer) throw Error("ImageViewer parts must be used within ImageViewer."); return viewer; }
+const inertLeases = new WeakMap<HTMLElement, { owners: number; initial: boolean }>();
+function acquireInert(element: HTMLElement) { let lease = inertLeases.get(element); if (!lease) { lease = { owners: 0, initial: element.inert }; inertLeases.set(element, lease); } lease.owners++; element.inert = true; return () => { if (--lease!.owners === 0) { element.inert = lease!.initial; inertLeases.delete(element); } }; }
+export function useViewerModal(open: Ref<boolean>, root: Ref<HTMLElement | null>, panel: Ref<HTMLElement | null>, close: () => void) {
+  const overlay = useOverlay(open, panel, close);
+  let mounted = false;
+  let revision = 0;
+  let release: (() => void) | undefined;
+  function focusFirst() { const surface = panel.value; const choices = surface?.querySelectorAll<HTMLElement>('a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex="-1"])'); const first = Array.from(choices ?? []).find(element => element.tabIndex >= 0 && !element.closest("[inert]")); (first ?? surface)?.focus({ preventScroll: true }); }
+  async function synchronize() {
+    const version = ++revision; release?.(); release = undefined;
+    if (!mounted || !open.value) return; await nextTick();
+    const portal = root.value; if (!mounted || version !== revision || !open.value || !portal || !panel.value) return;
+    const owner = portal.ownerDocument;
+    const portalInert = portal.inert; portal.inert = false;
+    const siblings = Array.from(owner.body.children).filter((node): node is HTMLElement => node instanceof HTMLElement && node !== portal && !overlay.containsOwnedPortal(node));
+    const removers = siblings.map(acquireInert);
+    let redirecting = false;
+    function focus(event: FocusEvent) {
+      const boundary = panel.value;
+      const portal = root.value;
+      if (redirecting || !boundary || !portal || portal.inert) return;
+      // The composed event route includes the dialog even when a focused
+      // control lives behind a shadow root and the event target is retargeted.
+      const route = event.composedPath();
+      if (route.includes(boundary) || overlay.containsHigher(event.target)) return;
+      if (!(event.target instanceof Node) || !overlay.isTop()) return;
+      redirecting = true;
+      try { focusFirst(); }
+      finally { redirecting = false; }
+    }
+    owner.addEventListener("focusin", focus);
+    release = () => { owner.removeEventListener("focusin", focus); portal.inert = inertLeases.has(portal) ? true : portalInert; removers.forEach(remove => remove()); };
+  }
+  watch(open, synchronize, { flush: "sync" });
+  onMounted(() => { mounted = true; void synchronize(); });
+  onBeforeUnmount(() => { mounted = false; ++revision; release?.(); release = undefined; });
+}

package/src/motion/image-viewer/src/geometry.ts

@@ -0,0 +1,10 @@
+export function imagePanBounds(imageWidth: number, imageHeight: number, boundsWidth: number, boundsHeight: number) {
+  const overflow = (image: number, bounds: number) => Math.max(0, image - bounds / 2);
+  return { x: overflow(imageWidth, boundsWidth), y: overflow(imageHeight, boundsHeight) };
+}
+export function clampImagePan(value: number, bound: number) { return value > bound ? bound : value < -bound ? -bound : value; }
+export function imageSwipe(start: { x: number; y: number }, end: { x: number; y: number }): 1 | -1 | null {
+  const horizontal = end.x - start.x;
+  if (Math.abs(horizontal) <= 50 || Math.abs(horizontal) <= Math.abs(end.y - start.y) * 1.5) return null;
+  return horizontal < 0 ? 1 : -1;
+}

package/src/motion/image-viewer/src/opening-motion.ts

@@ -0,0 +1,28 @@
+import type { ImageViewerContext } from "./context";
+import { shallowRef, type ShallowRef } from "vue";
+
+export const VIEWER_OPEN_MOTION = { type: "tween", duration: .46, ease: [.22, 1, .36, 1] } as const;
+
+const sources = new WeakMap<ImageViewerContext, HTMLElement>();
+const presentations = new WeakMap<ImageViewerContext, ShallowRef<{ owner: symbol; imageId: string } | undefined>>();
+
+export function viewerPresentation(viewer: ImageViewerContext) {
+  let presentation = presentations.get(viewer);
+  if (!presentation) {
+    presentation = shallowRef();
+    presentations.set(viewer, presentation);
+  }
+  return presentation;
+}
+
+export function rememberViewerSource(viewer: ImageViewerContext, element: HTMLElement) {
+  sources.set(viewer, element);
+}
+
+export function viewerSource(viewer: ImageViewerContext) {
+  return sources.get(viewer);
+}
+
+export function forgetViewerSource(viewer: ImageViewerContext, element: HTMLElement) {
+  if (sources.get(viewer) === element) sources.delete(viewer);
+}

package/src/motion/image-viewer/src/types.ts

@@ -0,0 +1,9 @@
+export interface LightboxImage {
+  id: string;
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  caption?: string;
+}
+export type ImageViewerImage = LightboxImage;

package/src/motion/image-viewer/src/useImageViewer.ts

@@ -0,0 +1,9 @@
+import { computed } from "vue";
+import { useViewer } from "./context";
+export function useImageViewer() {
+  const viewer = useViewer();
+  function close() { viewer.select(null); }
+  function previous() { viewer.move(-1); }
+  function next() { viewer.move(1); }
+  return { images: viewer.images, value: viewer.value, image: viewer.image, index: viewer.index, select: viewer.select, close, previous, next, hasPrevious: computed(() => viewer.index.value > 0), hasNext: computed(() => viewer.index.value >= 0 && viewer.index.value + 1 < viewer.images.value.length) };
+}

package/src/motion/image-viewer/src/viewer-state.ts

@@ -0,0 +1,14 @@
+import { computed, ref, watch, type VNodeChild } from "vue";
+import type { LightboxImage } from "./types";
+export function useViewerSelection(props: { images: LightboxImage[]; modelValue?: string | null; value?: string | null; defaultValue: string | null; renderCaption?: (image: LightboxImage) => VNodeChild }, emit: (...args: any[]) => void) {
+  const local = ref(props.defaultValue);
+  const controlled = computed(() => props.modelValue !== undefined || props.value !== undefined);
+  const value = computed({ get: () => props.modelValue !== undefined ? props.modelValue : props.value !== undefined ? props.value : local.value, set: (next: string | null) => { if (!controlled.value) local.value = next; emit("update:modelValue", next); emit("valueChange", next); emit("change", next); } });
+  const index = computed(() => props.images.findIndex(image => image.id === value.value));
+  const image = computed(() => props.images[index.value]);
+  const direction = ref(1);
+  watch(() => props.images, images => { if (new Set(images.map(image => image.id)).size !== images.length) throw Error("ImageViewer requires unique image ids."); if (images.some(image => !Number.isFinite(image.width) || !Number.isFinite(image.height) || image.width <= 0 || image.height <= 0)) throw Error("ImageViewer requires positive image dimensions."); if (!controlled.value && value.value !== null && index.value < 0) local.value = null; }, { immediate: true, deep: true });
+  function select(next: string | null) { const nextIndex = props.images.findIndex(image => image.id === next); if (nextIndex >= 0 && index.value >= 0) direction.value = nextIndex < index.value ? -1 : 1; value.value = next; }
+  function move(delta: number) { const next = props.images[index.value + delta]; if (!image.value || !next) return; direction.value = delta < 0 ? -1 : 1; select(next.id); }
+  return { value, index, image, direction, select, move };
+}

package/src/motion/index.ts

@@ -0,0 +1,56 @@
+export * from "./timeline";
+export * from "./alert";
+export * from "./collapsible";
+export * from "./aspect-ratio";
+export * from "./arc-picker";
+export * from "./sortable-stack";
+export * from "./image-viewer";
+export * from "./date-range-picker";
+export * from "./card";
+export * from "./color-picker";
+export * from "./color-selector";
+export * from "./breadcrumb";
+export * from "./tilt-card";
+export * from "./button";
+export * from "./expanding-arrow-button";
+export * from "./expandable-control";
+export * from "./adaptive-stepper";
+export * from "./marquee";
+export * from "./tabs";
+export * from "./switch";
+export * from "./input";
+export * from "./select";
+export * from "./combobox";
+export * from "./multi-select";
+export * from "./checkbox";
+export * from "./radio";
+export * from "./bottom-sheet";
+export * from "./pull-to-refresh";
+export * from "./shared-layout-bg";
+export * from "./bounce-sidebar";
+export * from "./animated-sidebar";
+export * from "./file-tree";
+export * from "./preview-rail";
+export * from "./dock";
+export * from "./tooltip";
+export * from "./context-menu";
+export * from "./popover";
+export * from "./morphing-modal";
+export * from "./center-morph-modal";
+export * from "./text-animation";
+export * from "./number";
+export * from "./animated-badge";
+export * from "./action-swap";
+export * from "./animated-toast-stack";
+export * from "./theme-toggle";
+export * from "./bouncy-accordion";
+export * from "./drawer";
+export * from "./scroll-animation";
+export * from "./range-slider";
+export * from "./wheel-picker";
+export * from "./table";
+export * from "./shader-background";
+export * from "./cylinder-carousel";
+export * from "./loader";
+
+export * from "./table-of-contents";

package/src/motion/input/index.ts

@@ -0,0 +1,5 @@
+export { default as Input } from "./src/Input.vue";
+
+export type * from "./src/api-types";
+
+export type * from "./src/public-types";

package/src/motion/input/src/Input.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId } from "vue";
+import { AnimatePresence, animate, motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import RenderContent from "../../../lib/RenderContent";
+import { useMotionState } from "../../state";
+import { watch } from "vue";
+export interface InputProps {
+  modelValue?: string; defaultValue?: string; label?: string; error?: string | boolean; reserveErrorLine?: boolean;
+  success?: boolean; disabled?: boolean; type?: string; id?: string; leftIcon?: any; rightIcon?: any; classNames?: Record<string, string>;
+}
+const props = withDefaults(defineProps<InputProps>(), { defaultValue: "", type: "text" });
+const emit = defineEmits(["update:modelValue", "change", "focus", "blur"]);
+const value = useMotionState(props, emit, "modelValue", props.defaultValue);
+const generatedId = useId(), attrs = useAttrs(), reduced = useReducedMotion();
+const controlId = computed(() => props.id ?? generatedId);
+const focused = ref(false), field = ref<HTMLElement | null>(null), input = ref<HTMLInputElement | null>(null);
+const state = computed(() => props.error ? "error" : props.success ? "success" : focused.value ? "focused" : "idle");
+const descriptionIds = computed(() => [attrs["aria-describedby"], typeof props.error === "string" ? `${controlId.value}-error` : undefined].filter(Boolean).join(" ") || undefined);
+let feedback: ReturnType<typeof animate> | undefined, disposed = false;
+function errorFeedback() {
+  feedback?.stop();
+  if (props.error && field.value && !reduced.value) feedback = animate(field.value, { x: [0, -6, 6, -4, 4, -2, 0] }, { duration: 0.45 });
+}
+function edit(event: Event) {
+  if (event.defaultPrevented || props.disabled) return;
+  value.value = (event.target as HTMLInputElement).value;
+  void nextTick(() => { if (!disposed && input.value && input.value.value !== value.value) input.value.value = value.value; });
+}
+function focus(event: FocusEvent) { focused.value = true; emit("focus", event); }
+function blur(event: FocusEvent) { focused.value = false; emit("blur", event); }
+watch([() => !!props.error, reduced], errorFeedback);
+onMounted(errorFeedback);
+onBeforeUnmount(() => { disposed = true; feedback?.stop(); });
+defineExpose({ focus: () => input.value?.focus(), input });
+</script>
+<template>
+  <div :class="cn('flex flex-col gap-1.5', $attrs.class, classNames?.root)">
+    <label v-if="label" :for="controlId" :class="cn('px-1 text-sm font-medium text-foreground', classNames?.label)">{{ label }}</label>
+    <div ref="field" :data-state="state" :class="cn('relative h-11 overflow-hidden rounded-full border transition-colors duration-200 border-border', focused && !error && 'border-foreground/40 ring-2 ring-ring/40', error && 'border-destructive ring-2 ring-destructive/25', disabled && 'opacity-60', classNames?.field)">
+      <span v-if="$slots.leftIcon || leftIcon" :class="cn('pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-muted-foreground [&_svg]:h-4 [&_svg]:w-4', classNames?.leftIcon)"><slot name="leftIcon"><RenderContent :node="leftIcon" /></slot></span>
+      <input ref="input" v-bind="{ ...$attrs, class: undefined }" :id="controlId" :type="type" :value="value" :disabled="disabled" :aria-invalid="!!error || undefined" :aria-describedby="descriptionIds"
+        @input="edit" @focus="focus" @blur="blur" :class="cn('peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none placeholder:text-muted-foreground/75', $slots.leftIcon || leftIcon ? 'pl-10' : 'pl-3.5', $slots.rightIcon || rightIcon || success ? 'pr-10' : 'pr-3.5', disabled && 'cursor-not-allowed', classNames?.input)" />
+      <motion.svg v-if="success" viewBox="0 0 24 24" fill="none" :class="cn('absolute right-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-(--color-success)', classNames?.successIcon)">
+        <motion.path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" :stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+          :initial="{ pathLength: reduced ? 1 : 0 }" :animate="{ pathLength: 1 }" :transition="{ duration: reduced ? 0 : 0.35, ease: 'easeOut' }" />
+      </motion.svg>
+      <span v-else-if="$slots.rightIcon || rightIcon" :class="cn('absolute right-0 top-0 flex h-full items-center text-muted-foreground [&_button]:grid [&_button]:size-11 [&_button]:place-items-center [&_svg]:h-4 [&_svg]:w-4', classNames?.rightIcon)"><slot name="rightIcon"><RenderContent :node="rightIcon" /></slot></span>
+    </div>
+    <div :class="reserveErrorLine ? 'min-h-4' : 'contents'"><AnimatePresence :initial="false">
+      <motion.p v-if="typeof error === 'string' && error" :id="`${controlId}-error`" role="alert"
+        :initial="reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: 'blur(4px)' }" :animate="{ opacity: 1, y: 0, filter: 'blur(0px)' }"
+        :exit="reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: 'blur(4px)' }" :transition="{ duration: 0.2 }" :class="cn('px-1 text-xs text-destructive', classNames?.errorMessage)">{{ error }}</motion.p>
+    </AnimatePresence></div>
+  </div>
+</template>

package/src/motion/input/src/api-types.ts

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type InputProps = InstanceType<
+  (typeof import("./Input.vue"))["default"]
+>["$props"];

package/src/motion/input/src/public-types.ts

@@ -0,0 +1,13 @@
+export type InputClassNames = Partial<
+  Record<
+    | "root"
+    | "label"
+    | "field"
+    | "input"
+    | "leftIcon"
+    | "rightIcon"
+    | "successIcon"
+    | "errorMessage",
+    string
+  >
+>;

package/src/motion/loader/index.ts

@@ -0,0 +1,5 @@
+export { default as Loader } from "./src/Loader.vue";
+
+export type * from "./src/api-types";
+
+export type { LoaderVariant } from "./src/Loader.vue";

package/src/motion/loader/src/Loader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useId } from "vue";
+import { useReducedMotion } from "../../../lib/composables";
+import { useLoaderClock } from "./clock";
+import { renderLoader } from "./visuals";
+export type LoaderVariant = "spinner" | "dots" | "bars" | "dot-matrix" | "dither" | "ascii" | "ascii-line" | "ascii-braille" | "ascii-blocks" | "ascii-bounce" | "morph" | "comet" | "scramble" | "metaballs" | "newton" | "helix" | "percent";
+const props = withDefaults(defineProps<{ variant?: LoaderVariant; size?: number; speed?: number; label?: string }>(), { variant: "spinner", size: 32, speed: 1, label: "Loading" });
+const reduced = useReducedMotion(), clock = useLoaderClock(props, reduced);
+const filterId = `loader-${useId().replaceAll(":", "")}`;
+const Visual = () => renderLoader(props, reduced.value, { frame: clock.frame.value, text: clock.text.value, percent: clock.percent.value, id: filterId });
+</script>
+<template><span role="status" :aria-label="label" class="inline-flex items-center justify-center text-foreground"><Visual /><span class="sr-only">{{ label }}</span></span></template>

package/src/motion/loader/src/LoaderSvg.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  onBeforeUnmount,
+  onMounted,
+  shallowReactive,
+  useAttrs,
+  watch,
+} from "vue";
+import { animate, motion, motionValue, type MotionValue } from "motion-v";
+
+defineOptions({ inheritAttrs: false });
+const props = defineProps<{
+  as: "svg" | "path" | "circle";
+  target?: Record<string, any>;
+  transition?: Record<string, any>;
+}>();
+const attrs = useAttrs();
+const values = shallowReactive<Record<string, MotionValue<any>>>({});
+let mounted = false;
+let controls: Array<{ stop(): void }> = [];
+
+// SVG attributes must always contain a single frame. Passing an array through
+// motion-v's declarative SVG target serializes the entire array on rerenders.
+function synchronize() {
+  controls.forEach((control) => control.stop());
+  controls = [];
+  for (const key of Object.keys(values)) {
+    if (props.target?.[key] === undefined) {
+      values[key].destroy();
+      delete values[key];
+    }
+  }
+  for (const [key, target] of Object.entries(props.target ?? {})) {
+    const first = Array.isArray(target)
+      ? target[0]
+      : key === "rotate"
+        ? 0
+        : target;
+    if (!values[key]) values[key] = motionValue(first);
+    else values[key].jump(first);
+    if (mounted) controls.push(animate(values[key], target, props.transition));
+  }
+}
+watch(() => [props.target, props.transition], synchronize, { immediate: true });
+onMounted(() => {
+  mounted = true;
+  synchronize();
+});
+onBeforeUnmount(() => {
+  mounted = false;
+  controls.forEach((control) => control.stop());
+  Object.values(values).forEach((value) => value.destroy());
+});
+</script>
+
+<template>
+  <component
+    :is="motion[as]"
+    v-bind="attrs"
+    :style="{ ...(attrs.style as any), ...values }"
+  >
+    <slot />
+  </component>
+</template>

package/src/motion/loader/src/api-types.ts

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type LoaderProps = InstanceType<
+  (typeof import("./Loader.vue"))["default"]
+>["$props"];