@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/wheel-picker/src/WheelPicker.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+import { cn } from "../../../lib/utils";
+import { useDrumState } from "./drum-state";
+export type WheelPickerOption = string | { label: string; value: string };
+const props = withDefaults(defineProps<{ options: WheelPickerOption[]; modelValue?: string; defaultValue?: string; visibleCount?: number; itemHeight?: number; disabled?: boolean; sound?: boolean; ariaLabel?: string }>(), { visibleCount: 5, itemHeight: 36 });
+const emit = defineEmits(["update:modelValue", "change"]);
+const reduce = useReducedMotion();
+const container = ref<HTMLElement | null>(null);
+const drum = ref<HTMLElement | null>(null);
+const band = ref<HTMLElement | null>(null);
+const candidate = useMotionState(props, emit, "modelValue", props.defaultValue);
+const { options, geometry, grabbing, publish, pointerDown, pointerMove, pointerEnd, keyboard, rowStyle } = useDrumState(props, candidate, reduce, container, drum, band);
+const fallback = ref<HTMLUListElement | null>(null);
+watch([candidate, options, () => props.itemHeight, reduce, fallback], () => {
+  if (!reduce.value || !fallback.value) return;
+  const index = Math.max(0, options.value.findIndex(option => option.value === candidate.value));
+  fallback.value.scrollTop = index * props.itemHeight;
+}, { flush: "post" });
+</script>
+<template>
+  <div v-if="reduce" :aria-label="ariaLabel" :class="cn('relative overflow-hidden rounded-2xl border border-border bg-card', disabled && 'pointer-events-none opacity-50')" :style="{ height: `${geometry.height}px` }"><div class="pointer-events-none absolute inset-x-0 top-1/2 z-10 -translate-y-1/2 border-border border-y bg-foreground/[0.04]" :style="{ height: `${itemHeight}px` }" /><ul ref="fallback" class="h-full snap-y snap-mandatory overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [mask-image:linear-gradient(to_bottom,transparent,#000_22%,#000_78%,transparent)]" :style="{ paddingTop: `${(geometry.height - itemHeight) / 2}px`, paddingBottom: `${(geometry.height - itemHeight) / 2}px` }"><li v-for="(option, index) in options" :key="option.value" class="snap-center"><button type="button" :disabled="disabled" @click="publish(index)" :class="cn('flex w-full items-center justify-center font-medium', option.value === candidate ? 'text-foreground' : 'text-muted-foreground')" :style="{ height: `${itemHeight}px` }">{{ option.label }}</button></li></ul></div>
+  <div v-else ref="container" role="listbox" :aria-label="ariaLabel" :aria-disabled="disabled || undefined" :tabindex="disabled ? -1 : 0" @keydown="keyboard" @pointerdown="pointerDown" @pointermove="pointerMove" @pointerup="pointerEnd" @pointercancel="pointerEnd" :class="cn('relative touch-none overflow-hidden rounded-2xl border border-border bg-card outline-none focus-visible:ring-2 focus-visible:ring-foreground/20 select-none [-webkit-touch-callout:none] [mask-image:linear-gradient(to_bottom,transparent,#000_22%,#000_78%,transparent)]', grabbing ? 'cursor-grabbing' : 'cursor-grab', disabled && 'pointer-events-none opacity-50')" :style="{ height: `${geometry.height}px`, perspective: '1000px' }">
+    <ul ref="drum" aria-hidden="true" class="absolute inset-x-0 top-1/2 m-0 h-0 list-none p-0 [backface-visibility:hidden] [transform-style:preserve-3d] [will-change:transform]"><li v-for="(option, index) in options" :key="option.value" :data-index="index" class="absolute inset-x-0 flex items-center justify-center font-medium text-muted-foreground" :style="rowStyle(index)">{{ option.label }}</li></ul>
+    <div class="pointer-events-none absolute inset-x-0 top-1/2 z-10 -translate-y-1/2 overflow-hidden rounded-md bg-foreground/[0.04]" :style="{ height: `${itemHeight}px`, perspective: '1000px' }"><ul ref="band" aria-hidden="true" class="absolute inset-x-0 top-1/2 m-0 h-0 list-none p-0 [backface-visibility:hidden] [transform-style:preserve-3d] [will-change:transform]"><li v-for="(option, index) in options" :key="option.value" :data-index="index" class="absolute inset-x-0 flex items-center justify-center font-medium text-foreground" :style="rowStyle(index)">{{ option.label }}</li></ul></div>
+    <div class="sr-only"><div v-for="option in options" :key="option.value" role="option" :aria-selected="candidate === option.value">{{ option.label }}</div></div>
+  </div>
+</template>

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

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

package/src/motion/wheel-picker/src/drum-state.ts

@@ -0,0 +1,57 @@
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
+import { createTickPlayer } from "./tick-sound";
+export type DrumOption = string | { label: string; value: string };
+const clamp = (value: number, minimum: number, maximum: number) => Math.max(minimum, Math.min(maximum, value));
+const easeOut = (progress: number) => 1 - (1 - progress) ** 3;
+const easeBack = (progress: number) => { const t = progress - 1; return 1 + 2.35 * t * t * t + 1.35 * t * t; };
+export function useDrumState(props: { options: DrumOption[]; visibleCount: number; itemHeight: number; disabled?: boolean; sound?: boolean }, accepted: Ref<string | undefined>, reduced: Ref<boolean>, container: Ref<HTMLElement | null>, drum: Ref<HTMLElement | null>, band: Ref<HTMLElement | null>) {
+  const options = computed(() => props.options.map(option => typeof option === "string" ? { label: option, value: option } : option));
+  const last = computed(() => Math.max(0, options.value.length - 1));
+  const geometry = computed(() => { const half = Math.max(1, Math.floor(props.visibleCount / 2)); const cutoff = half + 1; const angle = 90 / cutoff; const radius = props.itemHeight / Math.tan(angle * Math.PI / 180); return { angle, radius, hideBeyond: cutoff, height: Math.round(2 * radius * Math.sin(half * angle * Math.PI / 180) + props.itemHeight) }; });
+  const grabbing = ref(false);
+  const indexOf = (value: string | undefined) => Math.max(0, options.value.findIndex(option => option.value === value));
+  let position = indexOf(accepted.value);
+  let published = accepted.value;
+  let soundedRow = position;
+  let glideFrame = 0;
+  let dragFrame = 0;
+  let wheelTimer: ReturnType<typeof setTimeout> | undefined;
+  let audio: ReturnType<typeof createTickPlayer> | undefined;
+  let latestY = 0;
+  let gesture: { y: number; position: number; samples: [number, number][] } | undefined;
+  let bound: HTMLElement | null = null;
+  let disposed = false;
+  function sound() { return audio ??= createTickPlayer(); }
+  function paint(value: number) { const transform = `translateZ(${-geometry.value.radius}px) rotateX(${geometry.value.angle * value}deg)`; for (const list of [drum.value, band.value]) { if (!list) continue; list.style.transform = transform; for (const child of list.children) { const element = child as HTMLElement; const visibility = Math.abs(Number(element.dataset.index) - value) > geometry.value.hideBeyond ? "hidden" : "visible"; if (element.style.visibility !== visibility) element.style.visibility = visibility; } } }
+  function publish(index: number) { const value = options.value[clamp(index, 0, last.value)]?.value; if (value === undefined || value === published) return; published = value; if (props.sound && reduced.value) sound().play(); accepted.value = value; }
+  function tick(value: number) { const row = clamp(Math.round(value), 0, last.value); if (props.sound && !reduced.value && row !== soundedRow) sound().play(); soundedRow = row; }
+  function stop() { cancelAnimationFrame(glideFrame); glideFrame = 0; }
+  function update(value: number) { position = value; paint(value); tick(value); }
+  function glide(target: number, duration: number, easing = easeOut) {
+    stop(); const from = position; const delta = target - from;
+    if (!delta || duration <= 0) { update(target); publish(target); return; }
+    const started = performance.now();
+    function frame(time: number) { if (disposed) return; const progress = (time - started) / duration; if (progress >= 1) { update(target); publish(target); glideFrame = 0; return; } update(from + delta * easing(progress)); glideFrame = requestAnimationFrame(frame); }
+    glideFrame = requestAnimationFrame(frame);
+  }
+  function fling(velocity: number) { if (position < 0 || position > last.value) { glide(clamp(Math.round(position), 0, last.value), 260); return; } const projection = Math.sign(velocity) * velocity ** 2 / (2 * .00042); const target = clamp(Math.round(position + projection), 0, last.value); const duration = clamp(Math.sqrt(Math.abs(target - position)) * 300 + 240, 280, 1700); glide(target, duration, easeBack); }
+  function begin(y: number) { stop(); if (props.sound) sound().prepare(); grabbing.value = true; gesture = { y, position, samples: [[y, performance.now()]] }; }
+  function move(y: number) { if (!gesture) return; latestY = y; gesture.samples.push([y, performance.now()]); if (gesture.samples.length > 8) gesture.samples.shift(); if (dragFrame) return; dragFrame = requestAnimationFrame(() => { dragFrame = 0; if (!gesture) return; const raw = gesture.position + (gesture.y - latestY) / props.itemHeight; const value = raw < 0 ? raw * .3 : raw > last.value ? last.value + (raw - last.value) * .3 : raw; update(value); publish(Math.round(clamp(value, 0, last.value))); }); }
+  function end() { if (!gesture) return; const samples = gesture.samples; gesture = undefined; grabbing.value = false; cancelAnimationFrame(dragFrame); dragFrame = 0; let velocity = 0; if (samples.length > 1) { const latest = samples.at(-1)!; const reference = samples.find(point => latest[1] - point[1] <= 90) ?? samples[0]; const elapsed = latest[1] - reference[1]; if (elapsed > 0) velocity = clamp((reference[0] - latest[0]) / props.itemHeight / elapsed, -.18, .18); } fling(velocity); }
+  function pointerDown(event: PointerEvent) { if (props.disabled || reduced.value || event.pointerType === "touch") return; begin(event.clientY); try { container.value?.setPointerCapture(event.pointerId); } catch {} }
+  function pointerMove(event: PointerEvent) { if (event.pointerType !== "touch") move(event.clientY); }
+  function pointerEnd(event: PointerEvent) { if (event.pointerType === "touch") return; try { container.value?.releasePointerCapture(event.pointerId); } catch {} end(); }
+  function wheel(event: WheelEvent) { if (props.disabled || reduced.value) return; event.preventDefault(); if (props.sound) sound().prepare(); stop(); const pixels = event.deltaY * (event.deltaMode === 1 ? 16 : 1); update(clamp(position + pixels * .012, 0, last.value)); publish(Math.round(position)); clearTimeout(wheelTimer); wheelTimer = setTimeout(() => glide(clamp(Math.round(position), 0, last.value), 240, easeBack), 110); }
+  function keyboard(event: KeyboardEvent) { if (props.disabled) return; const index = Math.round(position); const direction: Record<string, number> = { ArrowUp: -1, ArrowDown: 1, Home: -index, End: last.value - index }; if (!(event.key in direction)) return; event.preventDefault(); if (props.sound) sound().prepare(); glide(clamp(Math.round(position) + direction[event.key], 0, last.value), 300, easeBack); }
+  function touchStart(event: TouchEvent) { if (!props.disabled && !reduced.value && event.touches[0]) begin(event.touches[0].clientY); }
+  function touchMove(event: TouchEvent) { if (!gesture || !event.touches[0]) return; event.preventDefault(); move(event.touches[0].clientY); }
+  function unbind() { if (!bound) return; bound.removeEventListener("touchstart", touchStart); bound.removeEventListener("touchmove", touchMove); bound.removeEventListener("touchend", end); bound.removeEventListener("touchcancel", end); bound.removeEventListener("wheel", wheel); bound = null; }
+  function bind() { unbind(); bound = container.value; if (!bound || reduced.value || props.disabled) return; bound.addEventListener("touchstart", touchStart, { passive: true }); bound.addEventListener("touchmove", touchMove, { passive: false }); bound.addEventListener("touchend", end); bound.addEventListener("touchcancel", end); bound.addEventListener("wheel", wheel, { passive: false }); }
+  function follow() { if (gesture) return; const target = indexOf(accepted.value); published = accepted.value; if (Math.abs(Math.round(position) - target) < .001) paint(position); else glide(target, 260); }
+  watch([accepted, options, geometry, reduced, () => props.sound], follow, { flush: "post" });
+  watch([reduced, () => props.disabled], () => { void nextTick(() => { if (!disposed) bind(); }); });
+  onMounted(() => { bind(); paint(position); });
+  onBeforeUnmount(() => { disposed = true; stop(); cancelAnimationFrame(dragFrame); clearTimeout(wheelTimer); audio?.dispose(); gesture = undefined; unbind(); });
+  function rowStyle(index: number) { return { top: `${-props.itemHeight / 2}px`, height: `${props.itemHeight}px`, transform: `rotateX(${-geometry.value.angle * index}deg) translateZ(${geometry.value.radius}px)` }; }
+  return { options, geometry, grabbing, publish, pointerDown, pointerMove, pointerEnd, keyboard, rowStyle };
+}

package/src/motion/wheel-picker/src/tick-sound.ts

@@ -0,0 +1,49 @@
+const DETENT_SECONDS = .016;
+const PARTIALS = [[980, .0038, .5, 0], [1820, .0024, .3, .65], [3160, .00115, .12, 1.3]] as const;
+type AudioConstructor = typeof AudioContext;
+interface SoundResource { context: AudioContext; gain: GainNode; buffer: AudioBuffer }
+let shared: SoundResource | undefined;
+let leases = 0;
+function synthesize(context: AudioContext) {
+  const length = Math.ceil(context.sampleRate * DETENT_SECONDS);
+  const buffer = context.createBuffer(1, length, context.sampleRate);
+  const samples = buffer.getChannelData(0);
+  let maximum = 0;
+  let prior = 0;
+  for (let index = 0; index < length; index++) {
+    const seconds = index / context.sampleRate;
+    const envelope = Math.min(1, seconds / .00012) * Math.min(1, (DETENT_SECONDS - seconds) / .001);
+    const noise = Math.random() * 2 - 1;
+    let amplitude = (noise - prior) * Math.exp(-seconds / .00038) * .035;
+    prior = noise;
+    for (const [frequency, decay, gain, phase] of PARTIALS) amplitude += Math.sin(Math.PI * 2 * frequency * seconds + phase) * Math.exp(-seconds / decay) * gain;
+    samples[index] = amplitude * envelope;
+    maximum = Math.max(maximum, Math.abs(samples[index]));
+  }
+  if (maximum) for (let index = 0; index < length; index++) samples[index] *= .9 / maximum;
+  return buffer;
+}
+function resource() {
+  if (shared) return shared;
+  if (typeof window === "undefined") return;
+  const Constructor = window.AudioContext ?? (window as unknown as { webkitAudioContext?: AudioConstructor }).webkitAudioContext;
+  if (!Constructor) return;
+  const context = new Constructor();
+  const gain = context.createGain();
+  gain.gain.value = .055;
+  gain.connect(context.destination);
+  return shared = { context, gain, buffer: synthesize(context) };
+}
+interface TickPlayer { prepare: () => void; play: () => void; dispose: () => void }
+export function createTickPlayer(): TickPlayer {
+  leases++;
+  let disposed = false;
+  let active: AudioBufferSourceNode | undefined;
+  function prepare() { if (disposed) return; const sound = resource(); if (sound?.context.state === "suspended") void sound.context.resume().catch(() => undefined); return sound; }
+  function stop() { active?.stop(); active = undefined; }
+  return {
+    prepare() { prepare(); },
+    play() { const sound = prepare(); if (!sound) return; stop(); const source = sound.context.createBufferSource(); source.buffer = sound.buffer; source.connect(sound.gain); source.onended = () => { source.disconnect(); if (active === source) active = undefined; }; active = source; source.start(); },
+    dispose() { if (disposed) return; disposed = true; stop(); leases = Math.max(0, leases - 1); if (leases === 0 && shared) { const sound = shared; shared = undefined; void sound.context.close(); } },
+  };
+}

package/src/styles.css

@@ -0,0 +1,113 @@
+@import "tailwindcss";
+@import "./tokens.css";
+@source "./**/*.{vue,ts}";
+@source not "./**/tests/**";
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root { --announcement-h: 2.5rem; }
+
+@theme {
+  --background-image-brand-bg: var(--gradient-bg);
+  --background-image-brand-accent: var(--gradient-accent);
+  --animate-marquee: marquee 30s linear infinite;
+  --animate-marquee-vertical: marquee-vertical 30s linear infinite;
+  --animate-rainbow-border: rainbow-border 3s linear infinite;
+  --animate-shimmer: shimmer 2.5s linear infinite;
+  --animate-action-send: action-send 520ms var(--ease-out) both;
+  --animate-action-copy: action-copy 520ms var(--ease-out) both;
+  --animate-action-download: action-download 540ms var(--ease-out) both;
+  --animate-action-archive: action-archive 520ms var(--ease-out) both;
+  --animate-action-bell: action-bell 680ms var(--ease-out) both;
+  --animate-action-settings: action-settings 720ms var(--ease-out) both;
+}
+
+/* Named motion tracks are part of the public styling contract. */
+@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap, 1rem))); } }
+@keyframes marquee-vertical { to { transform: translateY(calc(-100% - var(--gap, 1rem))); } }
+@keyframes rainbow-border {
+  from { background-position: 0% 50%; }
+  to { background-position: 100% 50%; }
+}
+@keyframes shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+@keyframes action-send {
+  0%, 100% { transform: translate(0, 0); }
+  45% { transform: translate(2px, -2px); }
+}
+@keyframes action-copy {
+  0%, 100% { transform: translate(0, 0); }
+  40% { transform: translate(1.5px, -1.5px); }
+  70% { transform: translate(-1px, 1px); }
+}
+@keyframes action-download {
+  0%, 100% { transform: translateY(0); }
+  42% { transform: translateY(2.5px); }
+}
+@keyframes action-archive {
+  0%, 100% { transform: scale(1); }
+  45% { transform: scale(0.9); }
+}
+@keyframes action-bell {
+  0%, 100% { transform: rotate(0deg); }
+  18% { transform: rotate(14deg); }
+  36% { transform: rotate(-12deg); }
+  54% { transform: rotate(8deg); }
+  72% { transform: rotate(-5deg); }
+}
+@keyframes action-settings {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(90deg); }
+}
+
+@layer base {
+  html, body { overflow-x: clip; }
+  html { color-scheme: light dark; }
+  body {
+    font-family: var(--font-sans);
+    color: var(--foreground);
+    background: var(--background);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+  a, button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }
+  ::selection {
+    color: var(--foreground);
+    background: color-mix(in oklch, var(--accent) 30%, transparent);
+  }
+  .shiki, .shiki span { color: var(--shiki-light); }
+  .dark .shiki, .dark .shiki span { color: var(--shiki-dark); }
+}
+
+@layer utilities {
+  .text-balance { text-wrap: balance; }
+  .text-pretty { text-wrap: pretty; }
+  .scrollbar-hide { scrollbar-width: none; }
+  .scrollbar-hide::-webkit-scrollbar { display: none; }
+  .mask-b-fade { mask-image: linear-gradient(to bottom, black 60%, transparent); }
+  .mask-radial-fade { mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); }
+  .grid-noise {
+    background-size: 32px 32px;
+    background-image: linear-gradient(to right, color-mix(in oklch, var(--foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--foreground) 6%, transparent) 1px, transparent 1px);
+  }
+  .glass {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    backdrop-filter: blur(20px) saturate(160%);
+    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06), 0 24px 60px -24px rgb(0 0 0 / 0.45);
+  }
+  .glass-strong { background: var(--glass-strong-bg); backdrop-filter: blur(16px); }
+  .glass-thin { background: var(--glass-thin-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); }
+  .press { transition: transform 120ms var(--ease-out); }
+  .press:active { transform: scale(0.97); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}