@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/animated-toast-stack/src/useAnimatedToastStack.ts

@@ -0,0 +1,115 @@
+import {
+  shallowRef,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  useId,
+  type VNodeChild,
+  type Component,
+} from "vue";
+export type ToastStatus = "neutral" | "info" | "loading" | "success" | "error";
+export type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+export type AnimatedToastAction = {
+  label: VNodeChild;
+  onClick: (toast: AnimatedToast) => void;
+};
+export type AnimatedToast = {
+  id: string;
+  title: VNodeChild;
+  description?: VNodeChild;
+  icon?: VNodeChild | Component;
+  status?: ToastStatus;
+  action?: AnimatedToastAction;
+  duration?: number;
+  dismissible?: boolean;
+  createdAt?: number;
+};
+export type ToastInput = Omit<AnimatedToast, "id" | "createdAt"> & {
+  id?: string;
+};
+export type ToastClassNames = Partial<
+  Record<
+    | "root"
+    | "item"
+    | "surface"
+    | "iconWrap"
+    | "content"
+    | "title"
+    | "description"
+    | "action"
+    | "close"
+    | "progress",
+    string
+  >
+>;
+export interface UseAnimatedToastStackOptions {
+  initialToasts?: ToastInput[];
+  defaultDuration?: number;
+  limit?: number;
+}
+export function useAnimatedToastStack(options: UseAnimatedToastStackOptions = {}) {
+  const instanceId = useId();
+  const defaultDuration = options.defaultDuration ?? 4200;
+  let serial = 0, mounted = false;
+  let wakeup: ReturnType<typeof setTimeout> | undefined;
+  const deadlines = new Map<string, number>();
+  function create(input: ToastInput): AnimatedToast {
+    return { duration: defaultDuration, dismissible: true, ...input, id: input.id ?? `${instanceId}-toast-${serial++}`, createdAt: Date.now() };
+  }
+  const toasts = shallowRef<AnimatedToast[]>((options.initialToasts ?? []).map(create));
+  function dismissToast(id: string) { toasts.value = toasts.value.filter(toast => toast.id !== id); }
+  function clearToasts() { toasts.value = []; }
+  function setToasts(next: AnimatedToast[] | ((current: AnimatedToast[]) => AnimatedToast[])) {
+    toasts.value = typeof next === "function" ? next(toasts.value) : next;
+  }
+  function showToast(input: ToastInput) {
+    const toast = create(input);
+    const appended = [...toasts.value, toast];
+    toasts.value = typeof options.limit === "number" ? appended.slice(-options.limit) : appended;
+    return toast.id;
+  }
+  function updateToast(id: string, patch: Partial<ToastInput>) {
+    toasts.value = toasts.value.map(toast => toast.id !== id ? toast : {
+      ...toast, ...patch, id, createdAt: patch.duration === undefined ? toast.createdAt : Date.now(),
+    });
+  }
+  function cancelWakeup() {
+    if (wakeup !== undefined) clearTimeout(wakeup);
+    wakeup = undefined;
+  }
+  function expire() {
+    wakeup = undefined;
+    if (!mounted) return;
+    const now = Date.now();
+    const expired = new Set([...deadlines].filter(([, deadline]) => deadline <= now).map(([id]) => id));
+    if (expired.size) toasts.value = toasts.value.filter(toast => !expired.has(toast.id));
+    else schedule();
+  }
+  function schedule() {
+    cancelWakeup();
+    deadlines.clear();
+    if (!mounted) return;
+    const now = Date.now();
+    toasts.value.forEach(toast => {
+      const duration = toast.duration ?? defaultDuration;
+      if (duration > 0 && Number.isFinite(duration)) deadlines.set(toast.id, (toast.createdAt ?? now) + duration);
+    });
+    if (!deadlines.size) return;
+    const nextDeadline = Math.min(...deadlines.values());
+    wakeup = setTimeout(expire, Math.max(0, Math.min(2147483647, nextDeadline - now)));
+  }
+  watch(toasts, schedule, { flush: "sync" });
+  onMounted(() => { mounted = true; schedule(); });
+  onBeforeUnmount(() => { mounted = false; cancelWakeup(); deadlines.clear(); });
+  return {
+    toasts, showToast, updateToast, dismissToast, clearToasts, setToasts,
+    add: showToast, push: showToast, toast: showToast, update: updateToast,
+    dismiss: dismissToast, clear: clearToasts,
+  };
+}

package/src/motion/arc-picker/index.ts

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

package/src/motion/arc-picker/src/ArcPicker.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, useId } from "vue";
+import { useReducedMotion } from "../../../lib/composables";
+import { cn } from "../../../lib/utils";
+import { useMotionState } from "../../state";
+import { useArcControl } from "./arc-control";
+export type ArcPickerOption = { value: string; label: string; disabled?: boolean };
+export type ArcPickerSide = "top" | "bottom" | "left" | "right";
+const props = withDefaults(defineProps<{ options: readonly ArcPickerOption[]; modelValue?: string; defaultValue?: string; side?: ArcPickerSide; radius?: number; itemHeight?: number; visibleCount?: number; disabled?: boolean; name?: string; ariaLabel?: string; ariaDescribedby?: string }>(), { side: "right", radius: 280, itemHeight: 48, visibleCount: 7, ariaLabel: "Choose an option" });
+const emit = defineEmits(["update:modelValue", "change"]);
+const candidate = useMotionState(props, emit, "modelValue", props.defaultValue ?? props.options.find(option => !option.disabled)?.value ?? "");
+const root = ref<HTMLElement | null>(null);
+const instructionsId = useId();
+const reduced = useReducedMotion();
+const { horizontal, height, selected, buttons, focusWithin, frameStyle, styleFor, bracket, keyboard, down, move, release, click, select } = useArcControl(props, candidate, reduced, root);
+function register(value: string, node: unknown) { if (node) buttons.set(value, node as HTMLButtonElement); else buttons.delete(value); }
+function blur(event: FocusEvent) { if (event.relatedTarget && !root.value?.contains(event.relatedTarget as Node)) focusWithin.value = false; }
+</script>
+<style scoped>
+[data-slot="arc-picker-bracket"] {
+  color: transparent;
+}
+[data-slot="arc-picker-bracket"]::after {
+  content: "";
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: 0;
+  right: 0;
+  border-top: 1.5px solid var(--primary);
+  border-bottom: 1.5px solid var(--primary);
+  pointer-events: none;
+}
+[data-slot="arc-picker-bracket"][data-edge="leading"]::after {
+  border-left: 1.5px solid var(--primary);
+  border-radius: 3px 0 0 3px;
+}
+[data-slot="arc-picker-bracket"][data-edge="trailing"]::after {
+  border-right: 1.5px solid var(--primary);
+  border-radius: 0 3px 3px 0;
+}
+</style>
+<template><div ref="root" role="radiogroup" :aria-label="ariaLabel" :aria-describedby="[ariaDescribedby, instructionsId].filter(Boolean).join(' ')" :aria-disabled="disabled || undefined" :aria-orientation="horizontal ? 'horizontal' : 'vertical'" data-slot="arc-picker" :data-side="side" :class="cn('relative w-full min-w-0 cursor-grab select-none overflow-hidden active:cursor-grabbing', disabled && 'cursor-default opacity-50')" :style="{ touchAction: horizontal ? 'pan-y pinch-zoom' : 'pan-x pinch-zoom', height: `${height}px`, maskImage: `linear-gradient(to ${horizontal ? 'right' : 'bottom'},transparent,black 12%,black 88%,transparent)` }" @keydown="keyboard" @focusin="focusWithin = true" @focusout="blur" @pointerdown="down" @pointermove="move" @pointerup="release($event, false)" @pointercancel="release($event, true)" @lostpointercapture="release($event, true)" @click.capture="click"><span :id="instructionsId" class="sr-only">Drag {{ horizontal ? 'horizontally' : 'vertically' }} or scroll to choose. Use arrow keys to move, Home and End to jump.</span><input v-if="name" type="hidden" :name="name" :value="selected ?? ''" :disabled="disabled" /><button v-for="(option, index) in options" :key="option.value" :ref="node => register(option.value, node)" type="button" role="radio" :aria-checked="option.value === selected" :disabled="disabled || option.disabled" :tabindex="option.value === selected && !disabled && !option.disabled ? 0 : -1" data-slot="arc-picker-option" :data-value="option.value" :data-selected="option.value === selected || undefined" @click="!$event.defaultPrevented && select(index)" :class="cn('absolute rounded-md px-2 py-1 text-2xl font-light whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-35', horizontal ? 'text-center' : side === 'left' ? 'text-right' : 'text-left', option.value === selected ? 'text-primary' : 'text-muted-foreground')" :style="styleFor(index, option)"><span data-slot="arc-picker-label" class="block overflow-hidden text-ellipsis">{{ option.label }}</span></button><div aria-hidden="true" data-slot="arc-picker-selection-frame" class="pointer-events-none absolute h-0 w-0 text-2xl font-light text-primary" :style="frameStyle"><span v-for="leading in [true, false]" :key="String(leading)" data-slot="arc-picker-bracket" :data-edge="leading ? 'leading' : 'trailing'" :class="leading ? 'absolute right-0' : 'absolute left-0'" :style="bracket(leading)">{{ leading ? '[' : ']' }}</span></div></div></template>

package/src/motion/arc-picker/src/api-types.ts

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

package/src/motion/arc-picker/src/arc-control.ts

@@ -0,0 +1,59 @@
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
+import { animate, useMotionValue, useSpring } from "motion-v";
+import { SPRING_GLIDE, SPRING_LAYOUT } from "../../../lib/ease";
+import { clampArc, useArcLayout, type ArcEntry, type ArcSide } from "./arc-layout";
+export function useArcControl(props: { options: readonly ArcEntry[]; modelValue?: string; side: ArcSide; radius: number; itemHeight: number; visibleCount: number; disabled?: boolean }, candidate: Ref<string>, reduced: Ref<boolean>, root: Ref<HTMLElement | null>) {
+  const selected = computed(() => props.options.some(option => option.value === candidate.value && !option.disabled) ? candidate.value : props.options.find(option => !option.disabled)?.value);
+  const selectedIndex = computed(() => Math.max(0, props.options.findIndex(option => option.value === selected.value)));
+  const enabled = computed(() => props.options.flatMap((option, index) => option.disabled ? [] : [{ option, index }]));
+  const position = ref(selectedIndex.value);
+  const measurements = ref({ width: 0, labelWidth: 0 });
+  const layout = useArcLayout(props, measurements, position);
+  const buttons = new Map<string, HTMLButtonElement>();
+  const focusWithin = ref(false);
+  const suppressClick = ref(false);
+  const activity = useMotionValue(0);
+  const expansion = useSpring(activity, SPRING_GLIDE);
+  const frameTarget = useMotionValue(0);
+  const frameWidth = useSpring(frameTarget, SPRING_LAYOUT);
+  const frameSize = ref(0);
+  const frameExpand = ref(0);
+  const unwidth = frameWidth.on("change", value => frameSize.value = value);
+  const unexpand = expansion.on("change", value => frameExpand.value = value);
+  let measured = false;
+  let instant = false;
+  let tracking = false;
+  let requested = selected.value;
+  let animation: ReturnType<typeof animate> | undefined;
+  let wheelTimer: ReturnType<typeof setTimeout> | undefined;
+  let wheelTarget: number | null = null;
+  let reconcile = 0;
+  let observer: ResizeObserver | undefined;
+  let disposed = false;
+  let revision = 0;
+  let drag: { id: number; coordinate: number; position: number; previous: number; time: number; velocity: number; moved: boolean } | undefined;
+  function measureFrame() { const width = buttons.get(selected.value ?? "")?.offsetWidth ?? 0; frameTarget.set(width); if (!measured || instant || reduced.value) { frameWidth.jump(width); frameSize.value = width; } measured = true; }
+  function measure() { if (!root.value) return; measurements.value = { width: root.value.clientWidth, labelWidth: Math.max(0, ...Array.from(buttons.values(), button => button.offsetWidth)) }; measureFrame(); }
+  function stop() { ++revision; animation?.stop(); animation = undefined; clearTimeout(wheelTimer); wheelTarget = null; cancelAnimationFrame(reconcile); tracking = false; activity.set(0); if (reduced.value) { expansion.jump(0); frameExpand.value = 0; } const pointer = drag; drag = undefined; if (pointer) try { root.value?.releasePointerCapture(pointer.id); } catch {} }
+  function settle(index: number, immediate = false) { animation?.stop(); const version = ++revision; const complete = () => { if (version !== revision) return; tracking = false; animation = undefined; wheelTarget = null; activity.set(0); }; if (immediate || reduced.value) { position.value = index; complete(); } else animation = animate(position.value, index, { ...SPRING_LAYOUT, onUpdate: value => { if (!disposed && version === revision) position.value = value; }, onComplete: complete }); }
+  function publish(index: number, keyboard = false) { const option = props.options[index]; if (!option || option.disabled || props.disabled || option.value === requested) return; requested = option.value; candidate.value = option.value; if (props.modelValue === undefined) return; cancelAnimationFrame(reconcile); reconcile = requestAnimationFrame(() => { reconcile = requestAnimationFrame(() => { if (disposed || requested !== option.value || selected.value === option.value) return; stop(); requested = selected.value; settle(selectedIndex.value, keyboard); if ((keyboard || focusWithin.value) && selected.value !== undefined) buttons.get(selected.value)?.focus({ preventScroll: true }); }); }); }
+  function select(index: number, keyboard = false) { const option = props.options[index]; if (!option || option.disabled || props.disabled) return; stop(); instant = keyboard; if (keyboard) { expansion.jump(0); frameExpand.value = 0; frameWidth.jump(frameTarget.get()); frameSize.value = frameTarget.get(); } publish(index, keyboard); settle(index, keyboard); if (keyboard) buttons.get(option.value)?.focus({ preventScroll: true }); }
+  function nearest(at: number) { let index = -1; let distance = Infinity; props.options.forEach((option, next) => { if (!option.disabled && Math.abs(next - at) < distance) { index = next; distance = Math.abs(next - at); } }); return index; }
+  watch(position, at => { if (!tracking || props.disabled) return; const next = nearest(at); if (next < 0) return; const previous = props.options.findIndex(option => option.value === requested); if (previous < 0 || previous === next) publish(next); else { const direction = next > previous ? 1 : -1; for (let index = previous + direction; direction > 0 ? index <= next : index >= next; index += direction) publish(index); } }, { flush: "sync" });
+  const config = computed(() => JSON.stringify([props.options.map(option => [option.value, !!option.disabled]), props.side, layout.spacing.value, props.disabled, reduced.value]));
+  let previousConfig = config.value;
+  watch([selected, config], async () => { const changed = previousConfig !== config.value; previousConfig = config.value; if (changed || !tracking || selected.value !== requested) { stop(); requested = selected.value; settle(selectedIndex.value, instant || props.disabled || reduced.value); } if (changed) suppressClick.value = false; instant = false; await nextTick(); if (disposed) return; measureFrame(); if (focusWithin.value && selected.value !== undefined && !props.disabled) buttons.get(selected.value)?.focus({ preventScroll: true }); });
+  function wheel(event: WheelEvent) { if (props.disabled || event.ctrlKey || drag?.moved || !enabled.value.length || !root.value) return; const useX = Math.abs(event.deltaX) > Math.abs(event.deltaY); if (!layout.horizontal.value && useX) return; const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? layout.horizontal.value ? root.value.clientWidth : root.value.clientHeight : 1; const delta = (layout.horizontal.value && useX ? event.deltaX : event.deltaY) * unit; if (!delta) return; const first = enabled.value[0].index; const last = enabled.value.at(-1)!.index; const from = wheelTarget ?? position.value; if (from <= first && delta < 0 || from >= last && delta > 0) return; event.preventDefault(); clearTimeout(wheelTimer); if (reduced.value) { const at = enabled.value.findIndex(({ option }) => option.value === requested); const next = enabled.value[clampArc(at + Math.sign(delta), 0, enabled.value.length - 1)]; if (next) select(next.index, true); } else { if (wheelTarget === null) { animation?.stop(); animation = undefined; } instant = false; tracking = true; activity.set(1); const next = clampArc(from + delta / layout.spacing.value, first, last); wheelTarget = next; position.value = next; wheelTimer = setTimeout(() => { wheelTarget = null; settle(nearest(next)); }, 120); } }
+  function keyboard(event: KeyboardEvent) { if (event.defaultPrevented || props.disabled || !enabled.value.length) return; const at = Math.max(0, enabled.value.findIndex(({ option }) => option.value === requested)); const increment = event.shiftKey ? 5 : 1; const keys: Record<string, number> = { ArrowDown: at + increment, ArrowRight: at + increment, ArrowUp: at - increment, ArrowLeft: at - increment, Home: 0, End: enabled.value.length - 1, PageDown: at + 5, PageUp: at - 5 }; if (!(event.key in keys)) return; event.preventDefault(); const next = enabled.value[clampArc(keys[event.key], 0, enabled.value.length - 1)]; if (next) select(next.index, true); }
+  function down(event: PointerEvent) { if (event.defaultPrevented || props.disabled || selected.value === undefined || event.button !== 0 || event.isPrimary === false) return; stop(); suppressClick.value = false; const coordinate = layout.horizontal.value ? event.clientX : event.clientY; drag = { id: event.pointerId, coordinate, position: position.value, previous: coordinate, time: performance.now(), velocity: 0, moved: false }; }
+  function move(event: PointerEvent) { const current = drag; if (event.defaultPrevented || !current || current.id !== event.pointerId) return; const coordinate = layout.horizontal.value ? event.clientX : event.clientY; const delta = coordinate - current.coordinate; if (!current.moved && Math.abs(delta) < 6) return; current.moved = true; tracking = true; instant = false; activity.set(reduced.value ? 0 : 1); try { root.value?.setPointerCapture(event.pointerId); } catch {} const now = performance.now(); current.velocity = current.velocity * .35 + (current.previous - coordinate) / layout.spacing.value / Math.max(8, now - current.time) * 1000 * .65; current.previous = coordinate; current.time = now; const next = clampArc(current.position - delta / layout.spacing.value, 0, Math.max(0, props.options.length - 1)); position.value = reduced.value ? Math.round(next) : next; }
+  function release(event: PointerEvent, cancelled = false) { if (drag?.id !== event.pointerId) return; const current = drag; drag = undefined; try { root.value?.releasePointerCapture(event.pointerId); } catch {} if (!current.moved) return; suppressClick.value = true; if (cancelled) { tracking = false; activity.set(0); settle(selectedIndex.value); } else settle(nearest(position.value + (reduced.value ? 0 : (performance.now() - current.time > 100 ? 0 : current.velocity) * .18))); }
+  function click(event: MouseEvent) { if (suppressClick.value && event.detail > 0) { event.preventDefault(); event.stopPropagation(); suppressClick.value = false; } }
+  function bracket(leading: boolean) { const amount = clampArc(frameExpand.value, 0, 1); const size = frameSize.value; const extent = layout.horizontal.value ? size / 2 : leading ? props.side === "left" ? size : 0 : props.side === "right" ? size : 0; return { transform: `translate3d(${(leading ? -1 : 1) * (extent + 4 + amount * 6)}px,-50%,0) scaleY(${1 - amount * .08})`, opacity: size > 0 ? .85 : 0 }; }
+  const frameStyle = computed(() => ({ ...layout.origin.value, visibility: selected.value === undefined ? "hidden" as const : "visible" as const }));
+  let host: HTMLElement | null = null;
+  onMounted(() => { host = root.value; if (typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(measure); if (host) observer.observe(host); for (const button of buttons.values()) observer.observe(button); } host?.addEventListener("wheel", wheel, { passive: false }); measure(); });
+  watch(() => JSON.stringify(props.options.map(option => option.label)), () => { void nextTick(() => { if (!disposed) measure(); }); });
+  onBeforeUnmount(() => { disposed = true; stop(); observer?.disconnect(); host?.removeEventListener("wheel", wheel); unwidth(); unexpand(); activity.destroy(); frameTarget.destroy(); });
+  return { ...layout, selected, buttons, focusWithin, frameStyle, bracket, keyboard, down, move, release, click, select };
+}

package/src/motion/arc-picker/src/arc-layout.ts

@@ -0,0 +1,28 @@
+import { computed, type Ref } from "vue";
+export type ArcSide = "top" | "bottom" | "left" | "right";
+export interface ArcEntry { value: string; label: string; disabled?: boolean }
+export const clampArc = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+export function useArcLayout(props: { side: ArcSide; radius: number; itemHeight: number; visibleCount: number; disabled?: boolean }, measurements: Ref<{ width: number; labelWidth: number }>, position: Ref<number>) {
+  const horizontal = computed(() => props.side === "top" || props.side === "bottom");
+  const rowHeight = computed(() => Math.max(32, Number.isFinite(props.itemHeight) ? props.itemHeight : 48));
+  const count = computed(() => Math.max(3, Number.isFinite(props.visibleCount) ? Math.floor(props.visibleCount) : 7));
+  const radius = computed(() => Math.max(120, Number.isFinite(props.radius) ? props.radius : 280));
+  const spacing = computed(() => horizontal.value ? Math.max(rowHeight.value, measurements.value.labelWidth + 48) : rowHeight.value);
+  const curvature = computed(() => horizontal.value ? Math.max(radius.value, spacing.value * 2) : radius.value);
+  const anchor = computed(() => { const { width, labelWidth } = measurements.value; const inset = Math.max(24, Math.min(width * .42, width - labelWidth - 24)); return width ? props.side === "left" ? width - inset : inset : props.side === "left" ? "58%" : "42%"; });
+  const shown = computed(() => horizontal.value ? Math.min(count.value, Math.max(1, (measurements.value.width || count.value * spacing.value) / spacing.value)) : count.value);
+  const height = computed(() => horizontal.value ? Math.ceil(Math.max(rowHeight.value * 2, curvature.value * (1 - Math.cos(Math.min(1.35, shown.value * spacing.value / (2 * curvature.value)))) + rowHeight.value + 24)) : count.value * rowHeight.value);
+  const origin = computed(() => ({ top: horizontal.value ? props.side === "top" ? "36px" : "calc(100% - 36px)" : "50%", left: horizontal.value ? "50%" : typeof anchor.value === "number" ? `${anchor.value}px` : anchor.value }));
+  function styleFor(index: number, option: ArcEntry) {
+    const angle = clampArc((index - position.value) * spacing.value / curvature.value, -1.5, 1.5);
+    const bend = curvature.value * (1 - Math.cos(angle));
+    const along = curvature.value * Math.sin(angle);
+    const x = horizontal.value ? along : props.side === "left" ? bend : -bend;
+    const y = horizontal.value ? props.side === "top" ? bend : -bend : along;
+    const rotation = (props.side === "left" || props.side === "bottom" ? -angle : angle) * 180 / Math.PI;
+    const align = horizontal.value ? "-50%" : props.side === "left" ? "-100%" : "0%";
+    const distance = Math.abs(index - position.value);
+    return { ...origin.value, transformOrigin: horizontal.value ? "center" : props.side === "left" ? "right center" : "left center", maxWidth: horizontal.value ? "calc(100% - 4rem)" : "calc(100% - 3rem)", transform: `translate3d(${x}px,${y}px,0) translate(${align},-50%) rotate(${rotation}deg)`, opacity: clampArc((shown.value / 2 + .5 - distance) / 1.5, 0, 1) * (props.disabled || option.disabled ? .35 : 1), pointerEvents: distance < shown.value / 2 ? "auto" as const : "none" as const };
+  }
+  return { horizontal, rowHeight, count, spacing, height, origin, styleFor };
+}

package/src/motion/aspect-ratio/index.ts

@@ -0,0 +1,4 @@
+export { default as AspectRatio } from "./src/AspectRatio.vue";
+export { default as AspectRatioImage } from "./src/AspectRatioImage.vue";
+
+export type * from "./src/api-types";

package/src/motion/aspect-ratio/src/AspectRatio.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, provide, watchEffect } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+
+const props = withDefaults(defineProps<{ ratio?: number; animated?: boolean; contentClassName?: string }>(), { ratio: 1, animated: true });
+const reduced = useReducedMotion();
+const animateLayout = computed(() => props.animated && !reduced.value);
+watchEffect(() => {
+  if (!(props.ratio > 0) || !Number.isFinite(props.ratio))
+    throw new RangeError("AspectRatio: ratio must be a finite, positive number.");
+});
+provide("orvui-aspect", computed(() => ({ ratio: props.ratio, animated: animateLayout.value })));
+</script>
+
+<template>
+  <motion.div class="relative w-full min-w-0 overflow-hidden" :style="{ aspectRatio: ratio }"
+    :layout="animateLayout" :transition="{ layout: SPRING_LAYOUT }">
+    <div :class="cn('absolute inset-0', contentClassName)"><slot /></div>
+  </motion.div>
+</template>

package/src/motion/aspect-ratio/src/AspectRatioImage.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, inject, watchEffect, type Ref } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+
+const props = defineProps<{ width: number; height: number; alt: string; src: string; draggable?: boolean }>();
+const aspect = inject<Ref<{ ratio: number; animated: boolean }>>("orvui-aspect");
+if (!aspect) throw new Error("AspectRatioImage must be inside AspectRatio");
+watchEffect(() => {
+  const valid = [props.width, props.height].every(dimension => Number.isFinite(dimension) && dimension > 0);
+  if (!valid) throw new RangeError("AspectRatioImage: width and height must be finite, positive numbers.");
+});
+const coverWidth = computed(() => aspect.value.ratio >= props.width / props.height);
+const imageSize = computed(() => ({ width: coverWidth.value ? "100%" : "auto", height: coverWidth.value ? "auto" : "100%" }));
+</script>
+
+<template>
+  <div class="absolute inset-0 grid grid-cols-1 grid-rows-1 place-items-center">
+    <motion.img v-bind="$attrs" :src="src" :alt="alt" :width="width" :height="height"
+      :draggable="draggable ?? false" :layout="aspect.animated" :transition="{ layout: SPRING_LAYOUT }"
+      :class="cn('col-start-1 row-start-1 block max-w-none', $attrs.class as string)" :style="imageSize" />
+  </div>
+</template>

package/src/motion/aspect-ratio/src/api-types.ts

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

package/src/motion/bottom-sheet/index.ts

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

package/src/motion/bottom-sheet/src/BottomSheet.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, onMounted, ref, useId, watch } from "vue";
+import { AnimatePresence, motion, useDragControls } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_DRAWER } from "../../../lib/ease";
+import { resolveElement, useOverlay, useReducedMotion } from "../../../lib/composables";
+import { useExitInteractivity } from "../../_overlay/interactivity";
+import { resolveBottomSheetSnap } from "./snap";
+const props = withDefaults(defineProps<{
+  open: boolean; snapPoints?: (number | "auto")[]; defaultSnap?: number; title?: string; description?: string; dismissThreshold?: number;
+}>(), { snapPoints: () => [0.5, 0.92], defaultSnap: 0, dismissThreshold: 120 });
+const emit = defineEmits<{ "update:open": [open: boolean] }>();
+const snap = ref(props.defaultSnap), mounted = ref(false), reduced = useReducedMotion();
+const panel = ref<HTMLElement | null>(null), backdrop = ref<HTMLElement | null>(null);
+const dragControls = useDragControls(), id = useId(), active = computed(() => props.open);
+const size = computed(() => { const point = props.snapPoints[snap.value] ?? "auto"; return point === "auto" ? { maxHeight: "92vh" } : { height: `${point * 100}vh` }; });
+function onDragEnd(_event: unknown, info: { velocity: { y: number }; offset: { y: number } }) {
+  const next = resolveBottomSheetSnap(snap.value, props.snapPoints.length, info.offset.y, info.velocity.y, props.dismissThreshold);
+  if (next === null) emit("update:open", false); else snap.value = next;
+}
+function dismiss() { emit("update:open", false); }
+watch([() => props.open, () => props.defaultSnap], () => { if (props.open) snap.value = props.defaultSnap; });
+useOverlay(active, panel, dismiss);
+useExitInteractivity(active, [panel, backdrop], [panel]);
+onMounted(() => { mounted.value = true; });
+defineExpose({ snap, onDragEnd });
+</script>
+<template><Teleport v-if="mounted" to="body"><AnimatePresence>
+  <motion.button v-if="open" :ref="node => backdrop = resolveElement<HTMLElement>(node)" key="backdrop" type="button" aria-label="Close bottom sheet" :tabindex="-1"
+    :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" :transition="{ duration: 0.5, ease: EASE_DRAWER }" @click="dismiss" class="pointer-events-auto fixed inset-0 z-50 bg-background/40 backdrop-blur-sm" />
+  <motion.div v-if="open" :ref="node => panel = resolveElement<HTMLElement>(node)" key="sheet" drag="y" :drag-controls="dragControls" :drag-listener="false" :drag-constraints="{ top: 0, bottom: 0 }" :drag-elastic="{ top: 0.02, bottom: 0.4 }" :drag-momentum="false" @drag-end="onDragEnd"
+    :initial="reduced ? { y: 0, opacity: 0 } : { y: '100%' }" :animate="reduced ? { y: 0, opacity: 1 } : { y: 0 }" :exit="reduced ? { y: 0, opacity: 0 } : { y: '100%' }"
+    :transition="{ duration: reduced ? 0.18 : 0.5, ease: EASE_DRAWER }" :style="size" v-bind="$attrs"
+    :class="cn('pointer-events-auto fixed bottom-0 left-0 right-0 z-50 mx-auto flex max-w-2xl flex-col overflow-hidden rounded-t-3xl outline-none will-change-transform border border-border bg-background shadow-xl', $attrs.class as string)"
+    role="dialog" aria-modal="true" :tabindex="-1" :aria-labelledby="title ? `${id}-title` : undefined" :aria-describedby="description ? `${id}-description` : undefined" :aria-label="title ? undefined : 'Bottom sheet'">
+    <div class="flex flex-col items-center px-4 pb-2 pt-3"><div @pointerdown="dragControls.start($event)" class="flex cursor-grab touch-none items-center justify-center py-1 active:cursor-grabbing [-webkit-touch-callout:none]"><div class="h-1.5 w-10 rounded-full bg-muted-foreground/60" /></div>
+      <div v-if="title || description" class="mt-2 w-full"><h2 v-if="title" :id="`${id}-title`" class="text-base font-semibold text-foreground">{{ title }}</h2><p v-if="description" :id="`${id}-description`" class="mt-0.5 text-sm text-muted-foreground">{{ description }}</p></div>
+    </div><div class="flex-1 overflow-y-auto overscroll-contain px-4 pb-6"><slot /></div>
+  </motion.div>
+</AnimatePresence></Teleport></template>

package/src/motion/bottom-sheet/src/api-types.ts

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

package/src/motion/bottom-sheet/src/snap.ts

@@ -0,0 +1,11 @@
+/** Resolve a detent step from vertical drag distance and release velocity. */
+export function resolveBottomSheetSnap(current: number, count: number, offset: number, velocity: number, dismissThreshold = 120): number | null {
+  const descending = velocity > 600 || offset > dismissThreshold;
+  if (descending) {
+    const canStepDown = current > 0 && velocity < 800 && offset < dismissThreshold * 1.6;
+    return canStepDown ? current - 1 : null;
+  }
+  if (velocity < -500) return Math.min(current + 1, count - 1);
+  const adjustment = offset > 80 && current > 0 ? -1 : offset < -80 && current + 1 < count ? 1 : 0;
+  return current + adjustment;
+}

package/src/motion/bounce-sidebar/index.ts

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

package/src/motion/bounce-sidebar/src/BounceSidebar.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { animate } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+import { sidebarTrajectory } from "./trajectory";
+export interface BounceSidebarItem { id: string; label: string; href?: string; icon?: any; disabled?: boolean; target?: string; rel?: string }
+const props = withDefaults(defineProps<{
+  items: BounceSidebarItem[]; modelValue?: string; defaultValue?: string; ariaLabel?: string;
+  listClassName?: string; itemClassName?: string; indicatorClassName?: string;
+}>(), { ariaLabel: "Sidebar navigation" });
+const emit = defineEmits(["update:modelValue", "change"]);
+const requested = useMotionState(props, emit, "modelValue", props.defaultValue ?? props.items[0]?.id ?? "");
+const selected = computed(() => props.items.some(item => item.id === requested.value) ? requested.value : props.items[0]?.id ?? "");
+const index = computed(() => props.items.findIndex(item => item.id === selected.value));
+const list = ref<HTMLUListElement | null>(null), dot = ref({ x: 0, y: 0 }), reduced = useReducedMotion();
+const items = new Map<string, HTMLLIElement>();
+let observer: ResizeObserver | undefined, animation: ReturnType<typeof animate> | undefined;
+let positioned = false, previousIndex = index.value, version = 0, disposed = false;
+async function position(animateMovement = true) {
+  const revision = ++version;
+  await nextTick();
+  if (disposed || revision !== version) return;
+  const item = items.get(selected.value);
+  if (!item) return;
+  const y = item.offsetTop + (item.offsetHeight - 6) / 2;
+  animation?.stop();
+  if (!positioned || reduced.value || !animateMovement || previousIndex === index.value) {
+    dot.value = { x: 0, y }; positioned = true;
+  } else {
+    const path = sidebarTrajectory(dot.value, y);
+    animation = animate(0, 1, { ...path.transition, onUpdate(progress) { if (!disposed) dot.value = path.at(progress); } });
+  }
+  previousIndex = index.value;
+}
+function choose(event: MouseEvent, item: BounceSidebarItem) {
+  if (item.disabled) { event.preventDefault(); return; }
+  if (!event.defaultPrevented) requested.value = item.id;
+}
+function register(id: string, node: any) { if (node) items.set(id, node); else items.delete(id); }
+watch(selected, () => void position());
+watch(reduced, () => void position(false));
+onMounted(() => {
+  void position(false);
+  if (list.value && typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(() => void position(false)); observer.observe(list.value); }
+});
+onBeforeUnmount(() => { disposed = true; version += 1; observer?.disconnect(); animation?.stop(); items.clear(); });
+</script>
+<template><nav :aria-label="ariaLabel" class="relative"><ul ref="list" :class="cn('relative flex list-none flex-col gap-1.5 pl-6', listClassName)">
+  <li v-if="index >= 0" aria-hidden="true" role="presentation" class="pointer-events-none absolute inset-0"><span :class="cn('absolute left-3 top-0 h-1.5 w-1.5 rounded-full bg-primary', indicatorClassName)" :style="{ transform: `translate(${dot.x}px,${dot.y}px)` }" /></li>
+  <li v-for="item in props.items" :key="item.id" :ref="node => register(item.id, node)" class="relative">
+    <component :is="item.href ? 'a' : 'button'" :type="item.href ? undefined : 'button'" :href="item.href" :target="item.target"
+      :rel="item.rel ?? (item.target === '_blank' ? 'noreferrer noopener' : undefined)" :aria-current="item.href && selected === item.id ? 'page' : undefined"
+      :aria-pressed="!item.href ? selected === item.id : undefined" :aria-disabled="item.disabled || undefined" :disabled="!item.href ? item.disabled : undefined"
+      :data-active="selected === item.id || undefined" :tabindex="item.disabled ? -1 : undefined" @click="choose($event, item)"
+      :class="cn('flex min-h-9 w-full items-center gap-2 rounded-lg px-2 text-left text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', selected === item.id ? 'text-foreground' : 'text-muted-foreground hover:text-foreground', item.disabled && 'cursor-not-allowed opacity-40', itemClassName)">
+      <span v-if="item.icon" aria-hidden="true" class="shrink-0"><component :is="item.icon" class="size-4" /></span>
+      <span><slot name="item" :item="item" :active="selected === item.id">{{ item.label }}</slot></span>
+    </component>
+  </li>
+</ul></nav></template>

package/src/motion/bounce-sidebar/src/api-types.ts

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

package/src/motion/bounce-sidebar/src/trajectory.ts

@@ -0,0 +1,9 @@
+export function sidebarTrajectory(from: { x: number; y: number }, toY: number) {
+  const distance = toY - from.y, travel = Math.abs(distance);
+  const longJump = Math.max(0, Math.min(1, (travel - 48) / 120));
+  const bow = Math.min(0.26, 40 / Math.max(1, travel)) * travel;
+  return {
+    transition: { type: "spring" as const, stiffness: 280 - 60 * longJump, damping: 18 + longJump, mass: 0.3 + 0.15 * longJump },
+    at(progress: number) { return { x: from.x * (1 - progress) - 2 * bow * progress * (1 - progress), y: from.y + distance * progress }; },
+  };
+}

package/src/motion/bouncy-accordion/index.ts

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

package/src/motion/bouncy-accordion/src/BouncyAccordion.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, ref, useId, watch } from "vue";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { focusList, useMotionState } from "../../state";
+import BouncyAccordionRow from "./BouncyAccordionRow.vue";
+const props = withDefaults(defineProps<{
+  items: { id: string; title: any; description?: any; icon?: any; disabled?: boolean }[];
+  modelValue?: string | null; defaultValue?: string | null; collapsible?: boolean; classNames?: Record<string, string>;
+}>(), { defaultValue: null, collapsible: true });
+const emit = defineEmits(["update:modelValue", "change"]);
+const current = useMotionState<string | null>(props, emit, "modelValue", props.defaultValue);
+const selectedIndex = computed(() => props.items.findIndex(item => item.id === current.value));
+const reduced = useReducedMotion(), id = useId();
+const timing = ref({ type: "spring" as const, duration: 0.46, bounce: 0 });
+watch(current, (next, before) => { timing.value = next !== null && before === null ? { type: "spring", duration: 0.58, bounce: 0.32 } : { type: "spring", duration: 0.46, bounce: 0 }; }, { flush: "sync" });
+function toggle(item: typeof props.items[number]) {
+  if (item.disabled) return;
+  if (current.value !== item.id) current.value = item.id;
+  else if (props.collapsible) current.value = null;
+}
+</script>
+<template><div :class="cn('w-full', classNames?.root)" @keydown="focusList($event, 'button:not(:disabled)')">
+  <BouncyAccordionRow v-for="(item, index) in items" :key="item.id" :item="item" :open="current === item.id"
+    :starts-group="current === item.id || index === 0 || selectedIndex === index - 1" :ends-group="current === item.id || index === items.length - 1 || selectedIndex === index + 1"
+    :separated-from-previous="index > 0 && (current === item.id || selectedIndex === index - 1)" :content-id="`${id}-${item.id}-content`" :trigger-id="`${id}-${item.id}-trigger`"
+    :reduce="reduced" :layout-transition="reduced ? { duration: 0 } : timing" :layout-dependency="current" :class-names="classNames" @toggle="toggle(item)">
+    <template v-if="$slots.title" #title="scope"><slot name="title" v-bind="scope" /></template><template v-if="$slots.content" #content="scope"><slot name="content" v-bind="scope" /></template>
+  </BouncyAccordionRow>
+</div></template>

package/src/motion/bouncy-accordion/src/BouncyAccordionRow.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { motion } from "motion-v";
+import { ChevronDown } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT } from "../../../lib/ease";
+import { resolveElement } from "../../../lib/composables";
+import RenderContent from "../../../lib/RenderContent";
+const props = defineProps<{
+  item: { id: string; title: any; description?: any; icon?: any; disabled?: boolean }; open: boolean;
+  startsGroup: boolean; endsGroup: boolean; separatedFromPrevious: boolean; contentId: string; triggerId: string;
+  reduce: boolean; layoutTransition: any; layoutDependency: string | null; classNames?: Record<string, string>;
+}>();
+const emit = defineEmits<{ toggle: [] }>();
+const content = ref<HTMLElement | null>(null), height = ref(0);
+let observer: ResizeObserver | undefined;
+function measure() { height.value = content.value?.offsetHeight ?? 0; }
+onMounted(() => { measure(); if (content.value && typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(measure); observer.observe(content.value); } });
+onBeforeUnmount(() => observer?.disconnect());
+function toggle(event: MouseEvent) { if (!props.item.disabled && !event.defaultPrevented) emit("toggle"); }
+</script>
+<template><motion.div :layout="reduce ? false : 'position'" :layout-dependency="layoutDependency" :initial="false" :style="{ marginTop: separatedFromPrevious ? '12px' : '0px' }" :transition="{ layout: layoutTransition }">
+  <motion.div :data-state="open ? 'open' : 'closed'" :layout="!reduce" :layout-dependency="layoutDependency" :initial="false"
+    :animate="{ borderTopLeftRadius: startsGroup ? '28px' : '0px', borderTopRightRadius: startsGroup ? '28px' : '0px', borderBottomLeftRadius: endsGroup ? '28px' : '0px', borderBottomRightRadius: endsGroup ? '28px' : '0px' }"
+    :transition="reduce ? { duration: 0 } : layoutTransition" :style="{ originY: 0 }" :class="cn('overflow-hidden bg-card text-card-foreground', item.disabled && 'opacity-50', classNames?.item)">
+    <motion.button :id="triggerId" type="button" :disabled="item.disabled" :aria-expanded="open" :aria-controls="contentId" @click="toggle" :layout="reduce ? false : 'position'" :layout-dependency="layoutDependency" :transition="{ layout: layoutTransition }" :style="{ originY: 0 }"
+      :class="cn('flex min-h-[54px] w-full items-center gap-4 px-5 text-left outline-none transition-colors focus-visible:bg-muted/25 disabled:pointer-events-none', classNames?.trigger)">
+      <span v-if="item.icon" :class="cn('grid h-7 w-7 shrink-0 place-items-center text-muted-foreground', classNames?.icon)"><RenderContent :node="item.icon" /></span>
+      <span :class="cn('min-w-0 flex-1 truncate text-[15px] font-medium text-foreground', classNames?.title)"><slot name="title" :item="item"><RenderContent :node="item.title" /></slot></span>
+      <motion.span aria-hidden="true" :animate="{ rotate: open ? 180 : 0 }" :transition="reduce ? { duration: 0 } : { type: 'spring', duration: 0.42, bounce: 0.28 }" :class="cn('grid h-6 w-6 shrink-0 place-items-center', open && !item.disabled ? 'text-primary' : 'text-muted-foreground', classNames?.chevron)"><ChevronDown class="h-4 w-4" /></motion.span>
+    </motion.button>
+    <section :id="contentId" :aria-labelledby="triggerId" :aria-hidden="!open" :inert="!open" :style="{ height: open && (item.description || $slots.content) ? height ? `${height}px` : 'auto' : '0px' }" :class="classNames?.content">
+      <motion.div :ref="node => content = resolveElement<HTMLElement>(node)" :layout="reduce ? false : 'position'" :layout-dependency="layoutDependency" :initial="false" :animate="{ opacity: open ? 1 : 0 }"
+        :transition="{ opacity: reduce ? { duration: 0 } : { duration: 0.18, ease: EASE_OUT }, layout: layoutTransition }" :style="{ originY: 0 }" class="px-5 pb-5">
+        <div :class="cn('text-[15px] leading-6 text-muted-foreground', classNames?.description)"><slot name="content" :item="item"><RenderContent :node="item.description" /></slot></div>
+      </motion.div>
+    </section>
+  </motion.div>
+</motion.div></template>

package/src/motion/bouncy-accordion/src/api-types.ts

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

package/src/motion/bouncy-accordion/src/public-types.ts

@@ -0,0 +1,15 @@
+import type { BouncyAccordionProps } from "./api-types";
+export type BouncyAccordionItem = BouncyAccordionProps["items"][number];
+export type BouncyAccordionClassNames = Partial<
+  Record<
+    | "root"
+    | "item"
+    | "trigger"
+    | "icon"
+    | "title"
+    | "chevron"
+    | "content"
+    | "description",
+    string
+  >
+>;

package/src/motion/breadcrumb/index.ts

@@ -0,0 +1,9 @@
+export { default as Breadcrumb } from "./src/Breadcrumb.vue";
+export { default as BreadcrumbList } from "./src/BreadcrumbList.vue";
+export { default as BreadcrumbItem } from "./src/BreadcrumbItem.vue";
+export { default as BreadcrumbLink } from "./src/BreadcrumbLink.vue";
+export { default as BreadcrumbPage } from "./src/BreadcrumbPage.vue";
+export { default as BreadcrumbSeparator } from "./src/BreadcrumbSeparator.vue";
+export { default as BreadcrumbEllipsis } from "./src/BreadcrumbEllipsis.vue";
+
+export type * from "./src/api-types";