@orvui/vue 0.0.0-stage → 0.1.0

package/registry/wheel-picker.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "wheel-picker",
+  "type": "registry:component",
+  "title": "Wheel Picker",
+  "description": "Select a value from a rotating wheel with momentum and row snapping.",
+  "files": [
+    {
+      "path": "registry/orvui/lib/composables.ts",
+      "target": "~/src/components/orvui/lib/composables.ts",
+      "type": "registry:lib",
+      "content": "import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch, type Ref } from \"vue\";\nimport { layerManager, type Layer } from \"./layers\";\n\nexport function useControllable<T>(props: Record<string, any>, key: string, emit: (...args: any[]) => void, fallback: T) {\n  const local = ref<T>(fallback) as Ref<T>;\n  const read = () => props[key] as T | undefined;\n  return computed<T>({\n    get() { const supplied = read(); return supplied === undefined ? local.value : supplied; },\n    set(value) { if (read() === undefined) local.value = value; emit(`update:${key}`, value); },\n  });\n}\n\nexport function useMediaQuery(query: string) {\n  const matches = ref(false);\n  let disconnect: (() => void) | undefined;\n  onMounted(() => {\n    if (typeof window.matchMedia !== \"function\") return;\n    const media = window.matchMedia(query);\n    const update = () => { matches.value = media.matches; };\n    update();\n    media.addEventListener?.(\"change\", update);\n    disconnect = () => media.removeEventListener?.(\"change\", update);\n  });\n  onBeforeUnmount(() => disconnect?.());\n  return matches;\n}\nexport function useReducedMotion() { return useMediaQuery(\"(prefers-reduced-motion: reduce)\"); }\n\nconst lockedProperties = [\"overflow\", \"position\", \"top\", \"left\", \"right\", \"width\"] as const;\nlet scrollOwners = 0;\nlet unlockPage: (() => void) | undefined;\nfunction acquirePage() {\n  if (scrollOwners++ === 0) {\n    const body = document.body.style;\n    const saved = lockedProperties.map(name => ({ name, value: body.getPropertyValue(name), priority: body.getPropertyPriority(name) }));\n    const x = window.scrollX, y = window.scrollY;\n    body.setProperty(\"overflow\", \"hidden\");\n    body.setProperty(\"position\", \"fixed\");\n    body.setProperty(\"left\", `${-x}px`);\n    body.setProperty(\"top\", `${-y}px`);\n    body.setProperty(\"right\", \"0px\");\n    body.setProperty(\"width\", \"100%\");\n    unlockPage = () => {\n      for (const entry of saved) {\n        if (entry.value) body.setProperty(entry.name, entry.value, entry.priority);\n        else body.removeProperty(entry.name);\n      }\n      const root = document.documentElement.style;\n      const behavior = root.getPropertyValue(\"scroll-behavior\");\n      const priority = root.getPropertyPriority(\"scroll-behavior\");\n      root.setProperty(\"scroll-behavior\", \"auto\");\n      window.scrollTo(x, y);\n      if (behavior) root.setProperty(\"scroll-behavior\", behavior, priority);\n      else root.removeProperty(\"scroll-behavior\");\n    };\n  }\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    if (--scrollOwners === 0) { unlockPage?.(); unlockPage = undefined; }\n  };\n}\nexport function useScrollLock(locked: Ref<boolean>) {\n  let mounted = false;\n  let release: (() => void) | undefined;\n  const update = (value: boolean) => {\n    if (!mounted) return;\n    if (value && !release) release = acquirePage();\n    if (!value && release) { release(); release = undefined; }\n  };\n  onMounted(() => { mounted = true; update(locked.value); });\n  watch(locked, update);\n  onBeforeUnmount(() => { release?.(); release = undefined; mounted = false; });\n}\n\nexport function resolveElement<T extends Element = HTMLElement>(value: unknown): T | null {\n  if (!value) return null;\n  const unwrapped = (value as { $el?: unknown }).$el ?? value;\n  return typeof (unwrapped as Element).nodeType === \"number\" && (unwrapped as Element).nodeType === 1 ? unwrapped as T : null;\n}\nconst focusable = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\nfunction createLayer(modal: boolean, panel?: { readonly value: unknown }): Layer {\n  return { key: Symbol(\"orvui-layer\"), modal, owner: getCurrentInstance(), surface: () => resolveElement(panel?.value), returnTo: null };\n}\nexport function useOverlay(open: Ref<boolean>, panel: Ref<HTMLElement | null>, close: () => void, initialFocus?: () => HTMLElement | undefined) {\n  const layer = createLayer(true, panel);\n  let mounted = false;\n  let revision = 0;\n  const sync = async (value: boolean) => {\n    const current = ++revision;\n    if (!mounted) return;\n    if (!value) { layerManager.detach(layer, true); return; }\n    if (!layerManager.attach(layer)) return;\n    await nextTick();\n    if (!mounted || current !== revision || !open.value || !layerManager.top(layer)) return;\n    (initialFocus?.() ?? layer.surface()?.querySelector<HTMLElement>(focusable) ?? layer.surface())?.focus({ preventScroll: true });\n  };\n  const onKey = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || !open.value) return;\n    if (event.key === \"Escape\" && layerManager.top(layer)) {\n      event.preventDefault(); event.stopPropagation(); close(); return;\n    }\n    if (event.key !== \"Tab\" || !layerManager.modal(layer)) return;\n    const candidates = new Set<HTMLElement>();\n    for (const surface of layerManager.scopes(layer)) {\n      for (const node of surface.querySelectorAll<HTMLElement>(focusable)) {\n        if (node.getClientRects().length > 0 && !node.closest(\"[inert]\")) candidates.add(node);\n      }\n    }\n    event.preventDefault();\n    const nodes = [...candidates];\n    if (!nodes.length) { layer.surface()?.focus(); return; }\n    const position = nodes.indexOf(document.activeElement as HTMLElement);\n    const next = position < 0 ? (event.shiftKey ? nodes.length - 1 : 0) : (position + (event.shiftKey ? -1 : 1) + nodes.length) % nodes.length;\n    nodes[next].focus();\n  };\n  useScrollLock(open);\n  onMounted(() => { mounted = true; document.addEventListener(\"keydown\", onKey); void sync(open.value); });\n  watch(open, value => void sync(value));\n  onBeforeUnmount(() => { mounted = false; revision++; document.removeEventListener(\"keydown\", onKey); layerManager.detach(layer, true); });\n  return {\n    isTop: () => open.value && layerManager.top(layer),\n    containsHigher: (target: EventTarget | null) => layerManager.higher(layer, target),\n    containsOwnedPortal: (target: HTMLElement) => layerManager.containsPortal(layer.owner, target),\n  };\n}\nexport function useFloatingLayer(open: Ref<boolean>, panel?: { readonly value: unknown }) {\n  const layer = createLayer(false, panel);\n  let mounted = false;\n  let unregister: (() => void) | undefined;\n  const sync = (value: boolean) => {\n    if (!mounted) return;\n    if (value) layerManager.attach(layer); else layerManager.detach(layer, false);\n  };\n  onMounted(() => { mounted = true; unregister = layerManager.portal(layer.owner, layer.surface); sync(open.value); });\n  watch(open, sync, { flush: \"sync\" });\n  onBeforeUnmount(() => { mounted = false; unregister?.(); layerManager.detach(layer, false); });\n  const isTop = () => open.value && layerManager.top(layer);\n  return {\n    isTop,\n    claimEscape(event: KeyboardEvent) {\n      if (event.key !== \"Escape\" || event.defaultPrevented || !isTop()) return false;\n      event.preventDefault(); event.stopImmediatePropagation(); return true;\n    },\n    containsHigher: (target: EventTarget | null) => layerManager.higher(layer, target),\n  };\n}\nexport function useEventListener(target: () => EventTarget | null | undefined, event: string, handler: EventListener, options?: AddEventListenerOptions) {\n  let remove: (() => void) | undefined;\n  onMounted(() => { const element = target(); element?.addEventListener(event, handler, options); remove = () => element?.removeEventListener(event, handler, options); });\n  onBeforeUnmount(() => remove?.());\n}\n"
+    },
+    {
+      "path": "registry/orvui/lib/layers.ts",
+      "target": "~/src/components/orvui/lib/layers.ts",
+      "type": "registry:lib",
+      "content": "import type { ComponentInternalInstance } from \"vue\";\n\ntype Surface = () => HTMLElement | null;\nexport interface Layer {\n  key: symbol;\n  modal: boolean;\n  owner: ComponentInternalInstance | null;\n  surface: Surface;\n  returnTo: HTMLElement | null;\n}\nconst active: Layer[] = [];\nconst portals = new Set<{ owner: ComponentInternalInstance | null; surface: Surface }>();\n\nfunction belongsTo(child: ComponentInternalInstance | null, parent: ComponentInternalInstance | null) {\n  if (!parent) return false;\n  for (let node = child; node; node = node.parent) if (node === parent) return true;\n  return false;\n}\nfunction later(layer: Layer) {\n  const index = active.indexOf(layer);\n  return index < 0 ? [] : active.slice(index + 1);\n}\nexport const layerManager = {\n  attach(layer: Layer) {\n    if (active.includes(layer)) return false;\n    layer.returnTo = document.activeElement as HTMLElement | null;\n    const before = active.findIndex(entry => entry.owner !== layer.owner && belongsTo(entry.owner, layer.owner));\n    active.splice(before < 0 ? active.length : before, 0, layer);\n    return true;\n  },\n  detach(layer: Layer, restore: boolean) {\n    const index = active.indexOf(layer);\n    if (index < 0) return;\n    const wasLast = index === active.length - 1;\n    const surface = layer.surface();\n    for (const successor of later(layer)) {\n      if (successor.returnTo && surface?.contains(successor.returnTo)) successor.returnTo = layer.returnTo;\n    }\n    active.splice(index, 1);\n    if (restore && wasLast && layer.returnTo?.isConnected) layer.returnTo.focus({ preventScroll: true });\n  },\n  top(layer: Layer) { return active.at(-1) === layer; },\n  modal(layer: Layer) { return active.slice().reverse().find(entry => entry.modal) === layer; },\n  higher(layer: Layer, target: EventTarget | null) {\n    return !!target && typeof (target as Node).nodeType === \"number\" && later(layer).some(entry => entry.surface()?.contains(target as Node));\n  },\n  scopes(layer: Layer) {\n    const result = [layer.surface()];\n    for (const entry of later(layer)) if (!entry.modal && belongsTo(entry.owner, layer.owner)) result.push(entry.surface());\n    return result.filter((surface): surface is HTMLElement => surface !== null);\n  },\n  portal(owner: ComponentInternalInstance | null, surface: Surface) {\n    const portal = { owner, surface };\n    portals.add(portal);\n    return () => portals.delete(portal);\n  },\n  containsPortal(owner: ComponentInternalInstance | null, target: HTMLElement) {\n    for (const portal of portals) {\n      const node = portal.surface();\n      if (node && belongsTo(portal.owner, owner) && target.contains(node)) return true;\n    }\n    return false;\n  },\n};\n"
+    },
+    {
+      "path": "registry/orvui/lib/utils.ts",
+      "target": "~/src/components/orvui/lib/utils.ts",
+      "type": "registry:lib",
+      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: unknown[]) {\n  const combined = clsx(...inputs as ClassValue[]);\n  return twMerge(combined);\n}\nexport function clamp(value: number, min: number, max: number) {\n  const aboveFloor = Math.max(min, value);\n  return Math.min(aboveFloor, max);\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/state.ts",
+      "target": "~/src/components/orvui/motion/state.ts",
+      "type": "registry:lib",
+      "content": "import { computed, ref, type Ref, type WritableComputedRef } from \"vue\";\n\n/** A value may move between parent control and local ownership during its life. */\nexport function useMotionState<T>(\n  props: Record<string, any>,\n  emit: (...args: any[]) => void,\n  key: string,\n  fallback: T,\n): WritableComputedRef<T> {\n  const memory = ref(fallback) as Ref<T>;\n  return computed({\n    get(): T {\n      const supplied = props[key];\n      return supplied === undefined ? memory.value : supplied;\n    },\n    set(requested: T) {\n      memory.value = requested;\n      emit(`update:${key}`, requested);\n      if (key === \"modelValue\") emit(\"change\", requested);\n    },\n  });\n}\n\n/** Rove focus within the event surface, using its own document. */\nexport function focusList(event: KeyboardEvent, selector = \"button:not(:disabled)\") {\n  const direction = new Map<string, number>([\n    [\"ArrowDown\", 1], [\"ArrowRight\", 1], [\"ArrowUp\", -1], [\"ArrowLeft\", -1],\n  ]).get(event.key);\n  if (direction === undefined && event.key !== \"Home\" && event.key !== \"End\") return;\n  const surface = event.currentTarget as HTMLElement | null;\n  if (!surface) return;\n  const candidates = [...surface.querySelectorAll<HTMLElement>(selector)];\n  if (!candidates.length) return;\n  const current = candidates.indexOf(surface.ownerDocument.activeElement as HTMLElement);\n  const index = event.key === \"Home\" ? 0\n    : event.key === \"End\" ? candidates.length - 1\n    : current === -1 ? (direction === -1 ? candidates.length - 1 : 0)\n    : (current + direction! + candidates.length) % candidates.length;\n  event.preventDefault();\n  candidates[index]?.focus();\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/wheel-picker/index.ts",
+      "target": "~/src/components/orvui/motion/wheel-picker/index.ts",
+      "type": "registry:lib",
+      "content": "export { default as WheelPicker } from \"./src/WheelPicker.vue\";\n\nexport type * from \"./src/api-types\";\n\nexport type { WheelPickerOption } from \"./src/WheelPicker.vue\";\n"
+    },
+    {
+      "path": "registry/orvui/motion/wheel-picker/src/api-types.ts",
+      "target": "~/src/components/orvui/motion/wheel-picker/src/api-types.ts",
+      "type": "registry:lib",
+      "content": "// Vue public prop types, derived from the actual components.\nexport type WheelPickerProps = InstanceType<\n  (typeof import(\"./WheelPicker.vue\"))[\"default\"]\n>[\"$props\"];\n"
+    },
+    {
+      "path": "registry/orvui/motion/wheel-picker/src/drum-state.ts",
+      "target": "~/src/components/orvui/motion/wheel-picker/src/drum-state.ts",
+      "type": "registry:lib",
+      "content": "import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Ref } from \"vue\";\nimport { createTickPlayer } from \"./tick-sound\";\nexport type DrumOption = string | { label: string; value: string };\nconst clamp = (value: number, minimum: number, maximum: number) => Math.max(minimum, Math.min(maximum, value));\nconst easeOut = (progress: number) => 1 - (1 - progress) ** 3;\nconst easeBack = (progress: number) => { const t = progress - 1; return 1 + 2.35 * t * t * t + 1.35 * t * t; };\nexport 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>) {\n  const options = computed(() => props.options.map(option => typeof option === \"string\" ? { label: option, value: option } : option));\n  const last = computed(() => Math.max(0, options.value.length - 1));\n  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) }; });\n  const grabbing = ref(false);\n  const indexOf = (value: string | undefined) => Math.max(0, options.value.findIndex(option => option.value === value));\n  let position = indexOf(accepted.value);\n  let published = accepted.value;\n  let soundedRow = position;\n  let glideFrame = 0;\n  let dragFrame = 0;\n  let wheelTimer: ReturnType<typeof setTimeout> | undefined;\n  let audio: ReturnType<typeof createTickPlayer> | undefined;\n  let latestY = 0;\n  let gesture: { y: number; position: number; samples: [number, number][] } | undefined;\n  let bound: HTMLElement | null = null;\n  let disposed = false;\n  function sound() { return audio ??= createTickPlayer(); }\n  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; } } }\n  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; }\n  function tick(value: number) { const row = clamp(Math.round(value), 0, last.value); if (props.sound && !reduced.value && row !== soundedRow) sound().play(); soundedRow = row; }\n  function stop() { cancelAnimationFrame(glideFrame); glideFrame = 0; }\n  function update(value: number) { position = value; paint(value); tick(value); }\n  function glide(target: number, duration: number, easing = easeOut) {\n    stop(); const from = position; const delta = target - from;\n    if (!delta || duration <= 0) { update(target); publish(target); return; }\n    const started = performance.now();\n    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); }\n    glideFrame = requestAnimationFrame(frame);\n  }\n  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); }\n  function begin(y: number) { stop(); if (props.sound) sound().prepare(); grabbing.value = true; gesture = { y, position, samples: [[y, performance.now()]] }; }\n  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))); }); }\n  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); }\n  function pointerDown(event: PointerEvent) { if (props.disabled || reduced.value || event.pointerType === \"touch\") return; begin(event.clientY); try { container.value?.setPointerCapture(event.pointerId); } catch {} }\n  function pointerMove(event: PointerEvent) { if (event.pointerType !== \"touch\") move(event.clientY); }\n  function pointerEnd(event: PointerEvent) { if (event.pointerType === \"touch\") return; try { container.value?.releasePointerCapture(event.pointerId); } catch {} end(); }\n  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); }\n  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); }\n  function touchStart(event: TouchEvent) { if (!props.disabled && !reduced.value && event.touches[0]) begin(event.touches[0].clientY); }\n  function touchMove(event: TouchEvent) { if (!gesture || !event.touches[0]) return; event.preventDefault(); move(event.touches[0].clientY); }\n  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; }\n  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 }); }\n  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); }\n  watch([accepted, options, geometry, reduced, () => props.sound], follow, { flush: \"post\" });\n  watch([reduced, () => props.disabled], () => { void nextTick(() => { if (!disposed) bind(); }); });\n  onMounted(() => { bind(); paint(position); });\n  onBeforeUnmount(() => { disposed = true; stop(); cancelAnimationFrame(dragFrame); clearTimeout(wheelTimer); audio?.dispose(); gesture = undefined; unbind(); });\n  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)` }; }\n  return { options, geometry, grabbing, publish, pointerDown, pointerMove, pointerEnd, keyboard, rowStyle };\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/wheel-picker/src/tick-sound.ts",
+      "target": "~/src/components/orvui/motion/wheel-picker/src/tick-sound.ts",
+      "type": "registry:lib",
+      "content": "const DETENT_SECONDS = .016;\nconst PARTIALS = [[980, .0038, .5, 0], [1820, .0024, .3, .65], [3160, .00115, .12, 1.3]] as const;\ntype AudioConstructor = typeof AudioContext;\ninterface SoundResource { context: AudioContext; gain: GainNode; buffer: AudioBuffer }\nlet shared: SoundResource | undefined;\nlet leases = 0;\nfunction synthesize(context: AudioContext) {\n  const length = Math.ceil(context.sampleRate * DETENT_SECONDS);\n  const buffer = context.createBuffer(1, length, context.sampleRate);\n  const samples = buffer.getChannelData(0);\n  let maximum = 0;\n  let prior = 0;\n  for (let index = 0; index < length; index++) {\n    const seconds = index / context.sampleRate;\n    const envelope = Math.min(1, seconds / .00012) * Math.min(1, (DETENT_SECONDS - seconds) / .001);\n    const noise = Math.random() * 2 - 1;\n    let amplitude = (noise - prior) * Math.exp(-seconds / .00038) * .035;\n    prior = noise;\n    for (const [frequency, decay, gain, phase] of PARTIALS) amplitude += Math.sin(Math.PI * 2 * frequency * seconds + phase) * Math.exp(-seconds / decay) * gain;\n    samples[index] = amplitude * envelope;\n    maximum = Math.max(maximum, Math.abs(samples[index]));\n  }\n  if (maximum) for (let index = 0; index < length; index++) samples[index] *= .9 / maximum;\n  return buffer;\n}\nfunction resource() {\n  if (shared) return shared;\n  if (typeof window === \"undefined\") return;\n  const Constructor = window.AudioContext ?? (window as unknown as { webkitAudioContext?: AudioConstructor }).webkitAudioContext;\n  if (!Constructor) return;\n  const context = new Constructor();\n  const gain = context.createGain();\n  gain.gain.value = .055;\n  gain.connect(context.destination);\n  return shared = { context, gain, buffer: synthesize(context) };\n}\ninterface TickPlayer { prepare: () => void; play: () => void; dispose: () => void }\nexport function createTickPlayer(): TickPlayer {\n  leases++;\n  let disposed = false;\n  let active: AudioBufferSourceNode | undefined;\n  function prepare() { if (disposed) return; const sound = resource(); if (sound?.context.state === \"suspended\") void sound.context.resume().catch(() => undefined); return sound; }\n  function stop() { active?.stop(); active = undefined; }\n  return {\n    prepare() { prepare(); },\n    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(); },\n    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(); } },\n  };\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/wheel-picker/src/WheelPicker.vue",
+      "target": "~/src/components/orvui/motion/wheel-picker/src/WheelPicker.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { useMotionState } from \"../../state\";\nimport { cn } from \"../../../lib/utils\";\nimport { useDrumState } from \"./drum-state\";\nexport type WheelPickerOption = string | { label: string; value: string };\nconst props = withDefaults(defineProps<{ options: WheelPickerOption[]; modelValue?: string; defaultValue?: string; visibleCount?: number; itemHeight?: number; disabled?: boolean; sound?: boolean; ariaLabel?: string }>(), { visibleCount: 5, itemHeight: 36 });\nconst emit = defineEmits([\"update:modelValue\", \"change\"]);\nconst reduce = useReducedMotion();\nconst container = ref<HTMLElement | null>(null);\nconst drum = ref<HTMLElement | null>(null);\nconst band = ref<HTMLElement | null>(null);\nconst candidate = useMotionState(props, emit, \"modelValue\", props.defaultValue);\nconst { options, geometry, grabbing, publish, pointerDown, pointerMove, pointerEnd, keyboard, rowStyle } = useDrumState(props, candidate, reduce, container, drum, band);\nconst fallback = ref<HTMLUListElement | null>(null);\nwatch([candidate, options, () => props.itemHeight, reduce, fallback], () => {\n  if (!reduce.value || !fallback.value) return;\n  const index = Math.max(0, options.value.findIndex(option => option.value === candidate.value));\n  fallback.value.scrollTop = index * props.itemHeight;\n}, { flush: \"post\" });\n</script>\n<template>\n  <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>\n  <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' }\">\n    <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>\n    <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>\n    <div class=\"sr-only\"><div v-for=\"option in options\" :key=\"option.value\" role=\"option\" :aria-selected=\"candidate === option.value\">{{ option.label }}</div></div>\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/styles.css.txt",
+      "target": "~/src/components/orvui/styles.css",
+      "type": "registry:file",
+      "content": "@import \"tailwindcss\";\n@import \"./tokens.css\";\n@source \"./**/*.{vue,ts}\";\n@source not \"./**/tests/**\";\n@custom-variant dark (&:where(.dark, .dark *));\n\n:root { --announcement-h: 2.5rem; }\n\n@theme {\n  --background-image-brand-bg: var(--gradient-bg);\n  --background-image-brand-accent: var(--gradient-accent);\n  --animate-marquee: marquee 30s linear infinite;\n  --animate-marquee-vertical: marquee-vertical 30s linear infinite;\n  --animate-rainbow-border: rainbow-border 3s linear infinite;\n  --animate-shimmer: shimmer 2.5s linear infinite;\n  --animate-action-send: action-send 520ms var(--ease-out) both;\n  --animate-action-copy: action-copy 520ms var(--ease-out) both;\n  --animate-action-download: action-download 540ms var(--ease-out) both;\n  --animate-action-archive: action-archive 520ms var(--ease-out) both;\n  --animate-action-bell: action-bell 680ms var(--ease-out) both;\n  --animate-action-settings: action-settings 720ms var(--ease-out) both;\n}\n\n/* Named motion tracks are part of the public styling contract. */\n@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap, 1rem))); } }\n@keyframes marquee-vertical { to { transform: translateY(calc(-100% - var(--gap, 1rem))); } }\n@keyframes rainbow-border {\n  from { background-position: 0% 50%; }\n  to { background-position: 100% 50%; }\n}\n@keyframes shimmer {\n  from { background-position: 200% 0; }\n  to { background-position: -200% 0; }\n}\n@keyframes action-send {\n  0%, 100% { transform: translate(0, 0); }\n  45% { transform: translate(2px, -2px); }\n}\n@keyframes action-copy {\n  0%, 100% { transform: translate(0, 0); }\n  40% { transform: translate(1.5px, -1.5px); }\n  70% { transform: translate(-1px, 1px); }\n}\n@keyframes action-download {\n  0%, 100% { transform: translateY(0); }\n  42% { transform: translateY(2.5px); }\n}\n@keyframes action-archive {\n  0%, 100% { transform: scale(1); }\n  45% { transform: scale(0.9); }\n}\n@keyframes action-bell {\n  0%, 100% { transform: rotate(0deg); }\n  18% { transform: rotate(14deg); }\n  36% { transform: rotate(-12deg); }\n  54% { transform: rotate(8deg); }\n  72% { transform: rotate(-5deg); }\n}\n@keyframes action-settings {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(90deg); }\n}\n\n@layer base {\n  html, body { overflow-x: clip; }\n  html { color-scheme: light dark; }\n  body {\n    font-family: var(--font-sans);\n    color: var(--foreground);\n    background: var(--background);\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n  }\n  a, button:not(:disabled), [role=\"button\"]:not(:disabled) { cursor: pointer; }\n  ::selection {\n    color: var(--foreground);\n    background: color-mix(in oklch, var(--accent) 30%, transparent);\n  }\n  .shiki, .shiki span { color: var(--shiki-light); }\n  .dark .shiki, .dark .shiki span { color: var(--shiki-dark); }\n}\n\n@layer utilities {\n  .text-balance { text-wrap: balance; }\n  .text-pretty { text-wrap: pretty; }\n  .scrollbar-hide { scrollbar-width: none; }\n  .scrollbar-hide::-webkit-scrollbar { display: none; }\n  .mask-b-fade { mask-image: linear-gradient(to bottom, black 60%, transparent); }\n  .mask-radial-fade { mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); }\n  .grid-noise {\n    background-size: 32px 32px;\n    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);\n  }\n  .glass {\n    background: var(--glass-bg);\n    border: 1px solid var(--glass-border);\n    backdrop-filter: blur(20px) saturate(160%);\n    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06), 0 24px 60px -24px rgb(0 0 0 / 0.45);\n  }\n  .glass-strong { background: var(--glass-strong-bg); backdrop-filter: blur(16px); }\n  .glass-thin { background: var(--glass-thin-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); }\n  .press { transition: transform 120ms var(--ease-out); }\n  .press:active { transform: scale(0.97); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n"
+    },
+    {
+      "path": "registry/orvui/tokens.css.txt",
+      "target": "~/src/components/orvui/tokens.css",
+      "type": "registry:file",
+      "content": "/* Generated from the orvui theme compatibility contract. */\n\n:root {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: #0285f7;\n  --primary-foreground: #ffffff;\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(72% 0.18 195);\n  --accent-foreground: var(--accent-fg);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: var(--border-strong);\n}\n\n.dark {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: #0285f7;\n  --primary-foreground: #ffffff;\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(80% 0.18 195);\n  --accent-foreground: var(--accent-fg);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: var(--border-strong);\n}\n\n[data-theme=\"violet\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(55% 0.2 290);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(55% 0.2 290);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(55% 0.2 290 / 0.5);\n}\n.dark[data-theme=\"violet\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.16 290);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(72% 0.16 290);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(72% 0.16 290 / 0.55);\n}\n\n[data-theme=\"blue\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(55% 0.18 255);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(55% 0.18 255);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(55% 0.18 255 / 0.5);\n}\n.dark[data-theme=\"blue\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(70% 0.15 255);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(70% 0.15 255);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(70% 0.15 255 / 0.55);\n}\n\n[data-theme=\"green\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(56% 0.14 150);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(56% 0.14 150);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(56% 0.14 150 / 0.5);\n}\n.dark[data-theme=\"green\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.15 150);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(72% 0.15 150);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(72% 0.15 150 / 0.55);\n}\n\n[data-theme=\"amber\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(74% 0.15 70);\n  --primary-foreground: oklch(20% 0.02 70);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(74% 0.15 70);\n  --accent-foreground: oklch(20% 0.02 70);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(74% 0.15 70 / 0.5);\n}\n.dark[data-theme=\"amber\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(80% 0.15 75);\n  --primary-foreground: oklch(18% 0.02 75);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(80% 0.15 75);\n  --accent-foreground: oklch(18% 0.02 75);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(80% 0.15 75 / 0.55);\n}\n\n[data-theme=\"blood-orange\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(60% 0.19 40);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(60% 0.19 40);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(60% 0.19 40 / 0.5);\n}\n.dark[data-theme=\"blood-orange\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.17 42);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(72% 0.17 42);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(72% 0.17 42 / 0.55);\n}\n\n[data-theme=\"rose\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(58% 0.2 12);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(58% 0.2 12);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(58% 0.2 12 / 0.5);\n}\n.dark[data-theme=\"rose\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(70% 0.17 12);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(70% 0.17 12);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(70% 0.17 12 / 0.55);\n}\n\n[data-theme=\"red\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(55% 0.22 25);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(55% 0.22 25);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(55% 0.22 25 / 0.5);\n}\n.dark[data-theme=\"red\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(68% 0.19 25);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(68% 0.19 25);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(68% 0.19 25 / 0.55);\n}\n\n[data-theme=\"teal\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(55% 0.12 185);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(55% 0.12 185);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(55% 0.12 185 / 0.5);\n}\n.dark[data-theme=\"teal\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.13 185);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(72% 0.13 185);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(72% 0.13 185 / 0.55);\n}\n\n[data-theme=\"indigo\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(50% 0.2 275);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(50% 0.2 275);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(50% 0.2 275 / 0.5);\n}\n.dark[data-theme=\"indigo\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(70% 0.16 275);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(70% 0.16 275);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(70% 0.16 275 / 0.55);\n}\n\n[data-theme=\"lime\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.18 130);\n  --primary-foreground: oklch(20% 0.04 130);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(72% 0.18 130);\n  --accent-foreground: oklch(20% 0.04 130);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(72% 0.18 130 / 0.5);\n}\n.dark[data-theme=\"lime\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(80% 0.18 130);\n  --primary-foreground: oklch(18% 0.04 130);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(80% 0.18 130);\n  --accent-foreground: oklch(18% 0.04 130);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(80% 0.18 130 / 0.55);\n}\n\n@theme inline {\n  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n  --color-border: var(--border);\n  --color-border-strong: var(--border-strong);\n  --color-neon: var(--neon);\n  --color-violet: var(--violet);\n  --color-success: var(--success);\n  --color-warning: var(--warning);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --font-sans: var(--font-geist-sans, Geist), ui-sans-serif, system-ui, sans-serif;\n  --font-mono: var(--font-geist-mono, \"Geist Mono\"), ui-monospace, monospace;\n  --font-display: var(--font-geist-sans, Geist), ui-sans-serif, system-ui, sans-serif;\n}\n\n"
+    },
+    {
+      "path": "registry/orvui/LICENSE.txt",
+      "target": "~/src/components/orvui/LICENSE.txt",
+      "type": "registry:file",
+      "content": "MIT License\n\nCopyright (c) 2026 everfu\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
+    },
+    {
+      "path": "registry/orvui/NOTICE.txt",
+      "target": "~/src/components/orvui/NOTICE.txt",
+      "type": "registry:file",
+      "content": "orvui component library\n\nCopyright (c) 2026 everfu. orvui source is distributed under MIT.\nPublic signatures, numeric palette values and visual compatibility inputs are\nmaintained as the product contract. Third-party material remains separately\nlicensed; the orvui MIT license does not replace the terms below.\n\nThe documentation hero uses the framework-neutral border-beam 1.4.1 generator,\nCopyright (c) 2026 Jakub Antalik, MIT licensed. Its license is retained at\napps/docs/public/licenses/border-beam-MIT.txt.\n\nPaper Design GPU programs and @paper-design/shaders remain under PolyForm\nShield 1.0.0. See src/motion/shader-background/LICENSE.paper-design in the\npackage and /licenses/paper-design-PolyForm-Shield.txt in the documentation.\n\nGeist and Geist Mono come from installed Fontsource packages. Their SIL Open\nFont License texts are retained in the documentation licenses directory.\nLucide icons retain their ISC license. Simple Icons brand assets come from\n@iconify-json/simple-icons 1.2.100 and retain CC0 1.0 Universal; see the\nadjacent LICENSE.simple-icons files and /licenses/simple-icons-CC0.txt.\n\nDemo photography is separate third-party material served by Unsplash and\nLorem Picsum, under the provider's terms: https://unsplash.com/license .\nDiceBear Glass avatars are CC0: https://www.dicebear.com/styles/glass/ .\nCountry flag images come from Flagpedia's documented CDN service:\nhttps://flagpedia.net/download/api . These media are not relicensed as orvui code.\nConsumer-level source records are in tools/catalog/media-provenance.json;\nthe documentation serves a copy at /media-provenance.json.\n\nSynthetic club badges, terrain illustrations and demonstration copy authored\nin this implementation use the orvui MIT license. No institutional or sports\nteam marks are bundled with the synthetic market-card example.\n"
+    }
+  ],
+  "dependencies": [
+    "clsx@^2.1.1",
+    "tailwind-merge@^3.0.0",
+    "tailwindcss@^4.0.0"
+  ],
+  "meta": {
+    "product": "orvui",
+    "version": "0.1.0",
+    "package": "@orvui/vue",
+    "category": "motion",
+    "registry": "https://orvui.efu.me/r/wheel-picker.json"
+  }
+}

package/src/agents/AgentDisclosure.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT } from "../lib/ease";
+import { useReduced } from "./shared";
+const props = withDefaults(
+  defineProps<{
+    open: boolean;
+    maxHeight?: number;
+    openHeight?: string | number;
+  }>(),
+  { openHeight: "auto" },
+);
+const reduce = useReduced();
+const height = computed(() =>
+  !props.open
+    ? "0px"
+    : typeof props.openHeight === "number"
+      ? `${props.openHeight}px`
+      : props.openHeight,
+);
+const animation = computed(() => {
+  const opacity = Number(props.open);
+  if (reduce.value) return { opacity };
+  return {
+    opacity,
+    y: props.open ? 0 : -4,
+    clipPath: `inset(0 0 ${props.open ? 0 : 100}% 0)`,
+  };
+});
+</script>
+<template>
+  <motion.div
+    class="overflow-hidden"
+    :initial="false"
+    :animate="animation"
+    :aria-hidden="!open"
+    :inert="!open || undefined"
+    :transition="{ ease: EASE_OUT, duration: reduce ? 0 : open ? 0.22 : 0.14 }"
+    :style="{
+      height,
+      pointerEvents: open ? undefined : 'none',
+      transformOrigin: 'top',
+    }"
+  >
+    <div
+      v-if="maxHeight"
+      class="overflow-auto"
+      :style="{ maxHeight: `${maxHeight}px` }"
+    >
+      <slot />
+    </div>
+    <slot v-else />
+  </motion.div>
+</template>

package/src/agents/agent-activity/LICENSE.simple-icons

@@ -0,0 +1,30 @@
+# CC0 1.0 Universal
+
+## Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an “owner”) of an original work of authorship and/or a database (each, a “Work”).
+
+Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works (“Commons”) that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the “Affirmer”), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be protected by copyright and related or neighboring rights (“Copyright and Related Rights”). Copyright and Related Rights include, but are not limited to, the following:
+    1. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work;
+    2. moral rights retained by the original author(s) and/or performer(s);
+    3. publicity and privacy rights pertaining to a person’s image or likeness depicted in a Work;
+    4. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(i), below;
+    5. rights protecting the extraction, dissemination, use and reuse of data in a Work;
+    6. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and
+    7. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the “Waiver”). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer’s heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer’s express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer’s express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer’s Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the “License”). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer’s express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+    1. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document.
+    2. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law.
+    3. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person’s Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work.
+    4. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work.
+
+For more information, please see <https://creativecommons.org/publicdomain/zero/1.0>.

package/src/agents/agent-activity/index.ts

@@ -0,0 +1,2 @@
+export { default as AgentActivity } from "./src/AgentActivity.vue";
+export * from "./src/types";

package/src/agents/agent-activity/src/ActivityRow.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import {
+  Check,
+  Circle,
+  FileText,
+  Globe2,
+  ImageIcon,
+  MessageSquare,
+  PencilLine,
+  Search,
+  Sparkles,
+  SquareTerminal,
+  Wrench,
+} from "lucide-vue-next";
+import { EASE_OUT, SPRING_LAYOUT } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { RenderNode } from "../../shared";
+import type { AgentActivityItem } from "./types";
+const props = defineProps<{ item: AgentActivityItem }>();
+const reduced = useReducedMotion();
+const transition = computed(() =>
+  reduced.value
+    ? { duration: 0 }
+    : {
+        opacity: { duration: 0.18, ease: EASE_OUT },
+        y: SPRING_LAYOUT,
+        layout: SPRING_LAYOUT,
+      },
+);
+const toolIcons = {
+  read: FileText,
+  edit: PencilLine,
+  write: PencilLine,
+  run: SquareTerminal,
+};
+const traceIcons = {
+  thinking: Sparkles,
+  message: MessageSquare,
+  write: PencilLine,
+  run: SquareTerminal,
+  read: ImageIcon,
+};
+const icon = computed(() =>
+  props.item.type === "tool"
+    ? (toolIcons[props.item.action as keyof typeof toolIcons] ?? Wrench)
+    : props.item.type === "trace"
+      ? (traceIcons[props.item.kind as keyof typeof traceIcons] ?? Wrench)
+      : Wrench,
+);
+</script>
+<template>
+  <div
+    v-if="item.type === 'step'"
+    class="flex min-h-7 items-start gap-2.5 rounded-md px-1.5 py-1"
+  >
+    <span
+      aria-hidden="true"
+      class="mt-0.5 grid size-4 shrink-0 place-items-center text-muted-foreground/70"
+      ><Check
+        v-if="!item.status || item.status === 'complete'"
+        class="size-4"
+        :stroke-width="1.8" /><span
+        v-else-if="item.status === 'active'"
+        class="relative grid size-3 place-items-center"
+        ><motion.span
+          class="absolute inset-0 rounded-full bg-foreground/10"
+          :animate="
+            reduced ? { opacity: 0.55 } : { opacity: [0.35, 0.8, 0.35] }
+          "
+          :transition="
+            reduced ? { duration: 0 } : { duration: 1.5, repeat: Infinity }
+          " /><span class="size-1.5 rounded-full bg-foreground/60" /></span
+      ><Circle v-else class="size-3" :stroke-width="1.5" /></span
+    ><span
+      :class="
+        cn(
+          'min-w-0 flex-1 leading-5',
+          item.status === 'pending'
+            ? 'text-muted-foreground/55'
+            : 'text-foreground/90',
+        )
+      "
+      ><RenderNode :node="item.label" /></span
+    ><span v-if="item.meta" class="shrink-0 leading-5 text-muted-foreground/55"
+      ><RenderNode :node="item.meta"
+    /></span>
+  </div>
+  <div
+    v-else-if="item.type === 'text'"
+    class="rounded-md px-1.5 py-1 leading-5 text-muted-foreground"
+  >
+    <RenderNode :node="item.content" />
+  </div>
+  <div v-else-if="item.type === 'search'" class="space-y-0.5">
+    <div
+      class="flex min-h-7 items-center gap-2.5 rounded-md px-1.5 py-1 text-muted-foreground"
+    >
+      <Search
+        aria-hidden="true"
+        class="size-4 shrink-0"
+        :stroke-width="1.7"
+      /><span class="min-w-0 truncate"><RenderNode :node="item.query" /></span>
+    </div>
+    <div v-if="item.results?.length" class="space-y-0.5 pl-4">
+      <AnimatePresence mode="popLayout"
+        ><motion.div
+          v-for="result in item.results"
+          :key="result.id"
+          layout="position"
+          :initial="reduced ? { opacity: 1 } : { opacity: 0, y: 6 }"
+          :animate="{ opacity: 1, y: 0 }"
+          :exit="reduced ? { opacity: 0 } : { opacity: 0, y: -3 }"
+          :transition="transition"
+        >
+          <component
+            :is="result.url ? 'a' : 'div'"
+            :href="result.url"
+            :class="
+              cn(
+                'flex min-h-7 items-center gap-2 rounded-md px-1.5 py-1 text-left outline-none transition-colors',
+                result.url && 'focus-visible:ring-2 focus-visible:ring-ring',
+              )
+            "
+            ><span
+              aria-hidden="true"
+              class="grid size-5 shrink-0 place-items-center text-muted-foreground"
+              ><RenderNode v-if="result.icon" :node="result.icon" /><Globe2
+                v-else
+                class="size-3"
+                :stroke-width="2" /></span
+            ><span class="min-w-0 truncate font-medium text-foreground/90"
+              ><RenderNode :node="result.title" /></span
+            ><span
+              v-if="result.domain"
+              class="min-w-0 truncate text-muted-foreground/55"
+              ><RenderNode :node="result.domain" /></span
+          ></component> </motion.div
+      ></AnimatePresence>
+    </div>
+    <AnimatePresence as="div" class="contents"
+      ><motion.div
+        v-if="item.moreCount"
+        key="more-results"
+        class="px-1.5 py-1 pl-8 text-muted-foreground/55"
+        :initial="reduced ? { opacity: 1 } : { opacity: 0, y: 6 }"
+        :animate="{ opacity: 1, y: 0 }"
+        :exit="reduced ? { opacity: 0 } : { opacity: 0, y: -3 }"
+        :transition="transition"
+        >+{{ item.moreCount }} more</motion.div
+      ></AnimatePresence
+    >
+  </div>
+  <div
+    v-else-if="item.type === 'tool'"
+    class="flex min-h-8 min-w-0 items-center gap-2.5 rounded-md px-1.5 py-0.5 leading-5"
+  >
+    <span
+      aria-hidden="true"
+      class="grid size-4 shrink-0 place-items-center text-muted-foreground/70"
+      ><component :is="icon" class="size-4" /></span
+    ><span class="shrink-0 font-medium text-foreground/90">{{
+      item.action[0].toUpperCase() + item.action.slice(1)
+    }}</span
+    ><span
+      class="min-w-0 flex-1 truncate rounded-lg bg-muted/80 px-2.5 py-1 font-mono text-xs text-muted-foreground/70"
+      ><RenderNode :node="item.target" /></span
+    ><span
+      v-if="
+        typeof item.additions === 'number' || typeof item.deletions === 'number'
+      "
+      class="flex shrink-0 items-center gap-2 font-mono tabular-nums"
+      ><span v-if="typeof item.additions === 'number'" class="text-emerald-500"
+        >+{{ item.additions }}</span
+      ><span v-if="typeof item.deletions === 'number'" class="text-rose-500"
+        >−{{ item.deletions }}</span
+      ></span
+    >
+  </div>
+  <div
+    v-else
+    class="grid min-h-8 grid-cols-[1rem_auto_minmax(0,1fr)] items-center gap-2.5 rounded-md px-1.5 py-0.5"
+  >
+    <span
+      aria-hidden="true"
+      class="grid size-4 place-items-center text-muted-foreground/70"
+      ><RenderNode v-if="item.icon" :node="item.icon" /><component
+        v-else
+        :is="icon"
+        class="size-4" /></span
+    ><span class="font-medium text-foreground/90"
+      ><RenderNode :node="item.label" /></span
+    ><span
+      v-if="item.detail"
+      class="min-w-0 truncate rounded-lg bg-muted/80 px-2.5 py-1 font-mono text-xs text-muted-foreground/70"
+      ><RenderNode :node="item.detail" /></span
+    ><span v-else />
+  </div>
+</template>