@orvui/vue 0.0.0-stage → 0.1.0

package/registry/color-picker.json

@@ -0,0 +1,191 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "color-picker",
+  "type": "registry:component",
+  "title": "Color Picker",
+  "description": "Edit a color with a two-dimensional field, channel inputs, presets and an eye dropper.",
+  "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/ease.ts",
+      "target": "~/src/components/orvui/lib/ease.ts",
+      "type": "registry:lib",
+      "content": "export const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16,1,0.3,1)\";\nexport const SPRING_PRESS = {\n  type: \"spring\",\n  stiffness: 500,\n  damping: 30,\n  mass: 0.6,\n} as const;\nexport const SPRING_SWAP = {\n  type: \"spring\",\n  stiffness: 460,\n  damping: 30,\n  mass: 0.55,\n} as const;\nexport const SPRING_PANEL = {\n  type: \"spring\",\n  stiffness: 420,\n  damping: 40,\n  mass: 0.5,\n} as const;\nexport const SPRING_LAYOUT = {\n  type: \"spring\",\n  stiffness: 360,\n  damping: 32,\n  mass: 0.6,\n} as const;\nexport const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3 } as const;\nexport const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5 } as const;\nexport const SPRING_TIMELINE = {\n  type: \"spring\",\n  stiffness: 120,\n  damping: 24,\n  mass: 1,\n} as const;\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/color-picker/index.ts",
+      "target": "~/src/components/orvui/motion/color-picker/index.ts",
+      "type": "registry:lib",
+      "content": "export { default as ColorPicker } from \"./src/ColorPicker.vue\";\nexport { default as ColorPickerArea } from \"./src/ColorPickerArea.vue\";\nexport { default as ColorPickerHue } from \"./src/ColorPickerHue.vue\";\nexport { default as ColorPickerAlpha } from \"./src/ColorPickerAlpha.vue\";\nexport { default as ColorPickerSwatch } from \"./src/ColorPickerSwatch.vue\";\nexport { default as ColorPickerHexInput } from \"./src/ColorPickerHexInput.vue\";\nexport { default as ColorPickerChannels } from \"./src/ColorPickerChannels.vue\";\nexport { default as ColorPickerEyeDropper } from \"./src/ColorPickerEyeDropper.vue\";\nexport { default as ColorPickerPresets } from \"./src/ColorPickerPresets.vue\";\nexport { default as ColorPickerPreset } from \"./src/ColorPickerPreset.vue\";\nexport { default as ColorPickerTrigger } from \"./src/ColorPickerTrigger.vue\";\nexport { default as ColorPickerContent } from \"./src/ColorPickerContent.vue\";\nexport * from \"./src/color\";\nexport * from \"./src/useColorPicker\";\n\nexport type * from \"./src/api-types\";\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/api-types.ts",
+      "target": "~/src/components/orvui/motion/color-picker/src/api-types.ts",
+      "type": "registry:lib",
+      "content": "// Vue public prop types, derived from the actual components.\nexport type ColorPickerAlphaProps = InstanceType<\n  (typeof import(\"./ColorPickerAlpha.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerAreaProps = InstanceType<\n  (typeof import(\"./ColorPickerArea.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerChannelsProps = InstanceType<\n  (typeof import(\"./ColorPickerChannels.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerContentProps = InstanceType<\n  (typeof import(\"./ColorPickerContent.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerEyeDropperProps = InstanceType<\n  (typeof import(\"./ColorPickerEyeDropper.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerHexInputProps = InstanceType<\n  (typeof import(\"./ColorPickerHexInput.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerHueProps = InstanceType<\n  (typeof import(\"./ColorPickerHue.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerPresetProps = InstanceType<\n  (typeof import(\"./ColorPickerPreset.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerPresetsProps = InstanceType<\n  (typeof import(\"./ColorPickerPresets.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerProps = InstanceType<\n  (typeof import(\"./ColorPicker.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerSwatchProps = InstanceType<\n  (typeof import(\"./ColorPickerSwatch.vue\"))[\"default\"]\n>[\"$props\"];\nexport type ColorPickerTriggerProps = InstanceType<\n  (typeof import(\"./ColorPickerTrigger.vue\"))[\"default\"]\n>[\"$props\"];\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ChannelSlider.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ChannelSlider.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { usePicker, useGlide, useColorDrag, keyStep } from \"./context\";\nimport ColorThumb from \"./ColorThumb.vue\";\nconst props = defineProps<{\n  value: number;\n  max: number;\n  label: string;\n  valueText: string;\n  background: string;\n  thumbColor: string;\n}>();\nconst emit = defineEmits<{ value: [value: number] }>();\nconst state = usePicker();\nconst drag = useColorDrag(\n  (fraction) => emit(\"value\", fraction * props.max),\n  state.commit,\n  state.disabled,\n);\nconst rail = drag.rail;\nconst glide = useGlide(computed(() => (props.value / props.max) * 100));\nfunction key(event: KeyboardEvent) {\n  const step = keyStep(event);\n  if (state.disabled.value || !step) return;\n  event.preventDefault();\n  emit(\n    \"value\",\n    step === \"min\"\n      ? 0\n      : step === \"max\"\n        ? props.max\n        : Math.round(props.value) + step.delta,\n  );\n  state.commit();\n}\n</script>\n<template>\n  <div\n    :class=\"[\n      'relative h-3.5 w-full touch-none select-none rounded-full',\n      state.disabled.value ? 'cursor-not-allowed' : 'cursor-pointer',\n    ]\"\n    :style=\"{ background }\"\n    @pointerdown=\"drag.down\"\n    @pointermove=\"drag.move\"\n    @pointerup=\"drag.end\"\n    @pointercancel=\"drag.end\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 rounded-full ring-1 ring-black/10 ring-inset\"\n    />\n    <div ref=\"rail\" class=\"absolute inset-y-0 right-[9px] left-[9px]\">\n      <ColorThumb\n        :dragging=\"drag.dragging.value\"\n        :color=\"thumbColor\"\n        :glide=\"glide.spring\"\n        :x=\"glide.offset\"\n        :set-thumb=\"(node) => (drag.thumb.value = node)\"\n        role=\"slider\"\n        :tabindex=\"state.disabled.value ? -1 : 0\"\n        :aria-label=\"label\"\n        aria-orientation=\"horizontal\"\n        :aria-valuemin=\"0\"\n        :aria-valuemax=\"max\"\n        :aria-valuenow=\"Math.round(value)\"\n        :aria-valuetext=\"valueText\"\n        :aria-disabled=\"state.disabled.value || undefined\"\n        @keydown=\"key\"\n      />\n    </div>\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/color.ts",
+      "target": "~/src/components/orvui/motion/color-picker/src/color.ts",
+      "type": "registry:lib",
+      "content": "/** Hue in degrees, saturation/value in percent, and opacity in [0, 1]. */\nexport type Hsva = { h: number; s: number; v: number; a: number };\n/** Red, green and blue in [0, 255], and opacity in [0, 1]. */\nexport type Rgba = { r: number; g: number; b: number; a: number };\n\nexport function hsvaToRgba(color: Hsva): Rgba {\n  const brightness = color.v / 100;\n  const chroma = brightness * color.s / 100;\n  const sector = ((color.h % 360) + 360) % 360 / 60;\n  const secondary = chroma * (1 - Math.abs(sector % 2 - 1));\n  const channels = sector < 1 ? [chroma, secondary, 0]\n    : sector < 2 ? [secondary, chroma, 0]\n    : sector < 3 ? [0, chroma, secondary]\n    : sector < 4 ? [0, secondary, chroma]\n    : sector < 5 ? [secondary, 0, chroma] : [chroma, 0, secondary];\n  const floor = brightness - chroma;\n  const [r, g, b] = channels.map(channel => Math.round((channel + floor) * 255));\n  return { r: r!, g: g!, b: b!, a: color.a };\n}\n\n/** Achromatic colors retain the otherwise unrepresentable editing channels. */\nexport function rgbaToHsva(color: Rgba, previous?: Hsva): Hsva {\n  const channels = [color.r, color.g, color.b];\n  const light = Math.max(...channels), dark = Math.min(...channels), span = light - dark;\n  let hue = previous?.h ?? 0;\n  if (span > 0) {\n    const dominant = channels.indexOf(light);\n    const angles = [\n      (color.g - color.b) / span,\n      (color.b - color.r) / span + 2,\n      (color.r - color.g) / span + 4,\n    ];\n    hue = (angles[dominant]! * 60 + 360) % 360;\n  }\n  return {\n    h: hue,\n    s: light === 0 ? (previous?.s ?? 0) : 100 * span / light,\n    v: 100 * light / 255,\n    a: color.a,\n  };\n}\n\nexport function parseHex(input: string): Rgba | null {\n  const digits = input.trim().replace(/^#/, \"\");\n  if (![3, 4, 6, 8].includes(digits.length) || /[^0-9a-f]/i.test(digits)) return null;\n  const expanded = digits.length < 5 ? Array.from(digits, digit => digit.repeat(2)).join(\"\") : digits;\n  const bytes = expanded.match(/../g)!.map(pair => Number.parseInt(pair, 16));\n  return { r: bytes[0]!, g: bytes[1]!, b: bytes[2]!, a: bytes.length === 4 ? Math.round(bytes[3]! / 255 * 100) / 100 : 1 };\n}\n\nexport function formatHex(color: Rgba): string {\n  const components = [color.r, color.g, color.b];\n  if (color.a < 1) components.push(color.a * 255);\n  return \"#\" + components.map(component => Math.round(component).toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nexport function hsvToHsl(color: Hsva) {\n  const value = color.v / 100;\n  const low = value * (1 - color.s / 100);\n  const lightness = (value + low) / 2;\n  const range = Math.min(lightness, 1 - lightness);\n  return { h: color.h, s: range === 0 ? 0 : 100 * (value - lightness) / range, l: 100 * lightness };\n}\n\nexport function hslToHsv(h: number, s: number, l: number, previous: Hsva, a: number): Hsva {\n  const lightness = l / 100;\n  const chroma = (1 - Math.abs(2 * lightness - 1)) * s / 100;\n  const value = lightness + chroma / 2;\n  return { h, s: value === 0 ? previous.s : chroma / value * 100, v: value * 100, a };\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPicker.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPicker.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed, provide, ref, useId, watch } from \"vue\";\nimport {\n  parseHex,\n  formatHex,\n  rgbaToHsva,\n  hsvaToRgba,\n  type Hsva,\n} from \"./color\";\nimport type { ColorContext } from \"./context\";\nimport ColorPickerArea from \"./ColorPickerArea.vue\";\nimport ColorPickerHue from \"./ColorPickerHue.vue\";\nimport ColorPickerAlpha from \"./ColorPickerAlpha.vue\";\nimport ColorPickerHexInput from \"./ColorPickerHexInput.vue\";\nimport ColorPickerSwatch from \"./ColorPickerSwatch.vue\";\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    value?: string;\n    defaultValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    alpha?: boolean;\n    disabled?: boolean;\n    name?: string;\n    form?: string;\n  }>(),\n  { open: undefined, defaultValue: \"#3478f6\", defaultOpen: false, alpha: true },\n);\nconst emit = defineEmits([\n  \"update:modelValue\",\n  \"valueChange\",\n  \"change\",\n  \"valueCommit\",\n  \"update:open\",\n  \"openChange\",\n]);\nconst id = useId();\nconst supplied = computed(() => props.modelValue ?? props.value);\nconst draftCode = ref(supplied.value ?? props.defaultValue);\nconst editing = ref(\n  rgbaToHsva(parseHex(draftCode.value) ?? { r: 0, g: 0, b: 0, a: 1 }),\n);\nconst expanded = ref(props.defaultOpen);\nconst anchor = ref<HTMLElement | null>(null);\nconst open = computed({\n  get: () => props.open ?? expanded.value,\n  set: (next: boolean) => {\n    if (next === open.value) return;\n    if (props.open === undefined) expanded.value = next;\n    emit(\"update:open\", next);\n    emit(\"openChange\", next);\n  },\n});\nfunction reconcile() {\n  const incoming = supplied.value;\n  if (incoming === undefined || incoming === draftCode.value) return;\n  const parsed = parseHex(incoming);\n  if (parsed) editing.value = rgbaToHsva(parsed, editing.value);\n  draftCode.value = incoming;\n}\nwatch(supplied, reconcile, { flush: \"sync\" });\nwatch(draftCode, reconcile, { flush: \"post\" });\nconst displayHsva = computed(() =>\n  !props.alpha && editing.value.a !== 1\n    ? { ...editing.value, a: 1 }\n    : editing.value,\n);\nconst rgba = computed(() => hsvaToRgba(displayHsva.value));\nconst hex = computed(() => formatHex(rgba.value));\nfunction update(patch: Partial<Hsva>) {\n  if (props.disabled) return;\n  const limits: Record<keyof Hsva, number> = { h: 360, s: 100, v: 100, a: 1 };\n  const next = Object.fromEntries(\n    (Object.keys(limits) as (keyof Hsva)[]).map((key) => [\n      key,\n      Math.min(\n        limits[key],\n        Math.max(\n          0,\n          Number.isFinite(patch[key]) ? patch[key]! : editing.value[key],\n        ),\n      ),\n    ]),\n  ) as Hsva;\n  if (!props.alpha) next.a = 1;\n  const code = formatHex(hsvaToRgba(next));\n  const changed = code !== hex.value;\n  editing.value = next;\n  draftCode.value = code;\n  if (changed) {\n    emit(\"update:modelValue\", code);\n    emit(\"valueChange\", code);\n    emit(\"change\", code);\n  }\n}\nfunction commit() {\n  if (!props.disabled) emit(\"valueCommit\", hex.value);\n}\nfunction setColor(code: string) {\n  const parsed = parseHex(code);\n  if (parsed) {\n    update(rgbaToHsva(parsed, editing.value));\n    commit();\n  }\n}\nprovide<ColorContext>(\"orvui-color-picker\", {\n  id,\n  hsva: displayHsva,\n  rgba,\n  hex,\n  open,\n  anchor,\n  alpha: computed(() => props.alpha),\n  disabled: computed(() => props.disabled),\n  update,\n  setColor,\n  commit,\n});\n</script>\n<template>\n  <fieldset\n    :disabled=\"disabled\"\n    :form=\"form\"\n    :class=\"[\n      'relative flex w-full min-w-0 max-w-72 flex-col gap-3 border-0 p-0 has-[>[data-color-picker-trigger]]:w-fit has-[>[data-color-picker-trigger]]:self-start',\n      disabled && 'opacity-50',\n    ]\"\n  >\n    <slot :hex=\"hex\" :hsva=\"displayHsva\" :set-color=\"setColor\"\n      ><ColorPickerArea /><ColorPickerHue /><ColorPickerAlpha />\n      <div class=\"flex gap-2\">\n        <ColorPickerSwatch /><ColorPickerHexInput /></div></slot\n    ><input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hex\" :form=\"form\" />\n  </fieldset>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerAlpha.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerAlpha.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { usePicker, CHECKERBOARD } from \"./context\";\nimport ChannelSlider from \"./ChannelSlider.vue\";\nwithDefaults(defineProps<{ label?: string }>(), { label: \"Opacity\" });\nconst state = usePicker();\nconst rgb = computed(\n  () => `${state.rgba.value.r} ${state.rgba.value.g} ${state.rgba.value.b}`,\n);\nfunction change(percent: number) {\n  state.update({ a: Math.round(percent) / 100 });\n}\n</script>\n<template>\n  <ChannelSlider\n    v-if=\"state.alpha.value\"\n    :value=\"state.hsva.value.a * 100\"\n    :max=\"100\"\n    :label=\"label\"\n    :value-text=\"`${Math.round(state.hsva.value.a * 100)}%`\"\n    :background=\"`linear-gradient(to right, rgb(${rgb} / 0), rgb(${rgb})), ${CHECKERBOARD}`\"\n    :thumb-color=\"`rgb(${rgb} / ${state.hsva.value.a})`\"\n    @value=\"change\"\n  />\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerArea.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerArea.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport {\n  usePicker,\n  useGlide,\n  useColorDrag,\n  keyStep,\n  COLOR_MORPH,\n} from \"./context\";\nimport ColorThumb from \"./ColorThumb.vue\";\nwithDefaults(defineProps<{ label?: string }>(), {\n  label: \"Saturation and brightness\",\n});\nconst state = usePicker();\nconst morph = inject(\"orvui-color-morph\", false);\nconst reduced = useReducedMotion();\nconst morphing = computed(() => morph && !reduced.value);\nconst drag = useColorDrag(\n  (saturation, darkness) =>\n    state.update({ s: saturation * 100, v: 100 - darkness * 100 }),\n  state.commit,\n  state.disabled,\n);\nconst rail = drag.rail;\nconst horizontal = useGlide(computed(() => state.hsva.value.s));\nconst vertical = useGlide(computed(() => 100 - state.hsva.value.v));\nconst rgb = computed(\n  () =>\n    `rgb(${state.rgba.value.r} ${state.rgba.value.g} ${state.rgba.value.b})`,\n);\nfunction key(event: KeyboardEvent) {\n  const step = keyStep(event);\n  if (!step || state.disabled.value) return;\n  event.preventDefault();\n  state.update(\n    step === \"min\"\n      ? { s: 0 }\n      : step === \"max\"\n        ? { s: 100 }\n        : step.axis === \"x\"\n          ? { s: state.hsva.value.s + step.delta }\n          : { v: state.hsva.value.v + step.delta },\n  );\n  state.commit();\n}\n</script>\n<template>\n  <motion.div\n    ref=\"rail\"\n    :layout-id=\"morphing ? `${state.id}-chip` : undefined\"\n    :layout-dependency=\"state.open.value\"\n    :transition=\"COLOR_MORPH\"\n    :class=\"[\n      'relative h-40 w-full touch-none select-none',\n      state.disabled.value ? 'cursor-not-allowed' : 'cursor-crosshair',\n    ]\"\n    :style=\"{\n      borderRadius: '12px',\n      background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${state.hsva.value.h} 100% 50%))`,\n    }\"\n    @pointerdown=\"drag.down\"\n    @pointermove=\"drag.move\"\n    @pointerup=\"drag.end\"\n    @pointercancel=\"drag.end\"\n    ><motion.div\n      v-if=\"morphing\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 rounded-[inherit]\"\n      :style=\"{ backgroundColor: state.hex.value }\"\n      :initial=\"{ opacity: 1 }\"\n      :animate=\"{ opacity: 0 }\"\n      :transition=\"{ duration: 0.4, ease: EASE_OUT, delay: 0.06 }\" />\n    <div\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-black/10 ring-inset\" />\n    <motion.div\n      class=\"absolute inset-0\"\n      :initial=\"morphing ? { opacity: 0 } : false\"\n      :animate=\"{ opacity: 1 }\"\n      :transition=\"{ duration: 0.2, delay: 0.22 }\"\n      ><ColorThumb\n        :dragging=\"drag.dragging.value\"\n        :color=\"rgb\"\n        :glide=\"horizontal.spring\"\n        :x=\"horizontal.offset\"\n        :y=\"vertical.offset\"\n        :set-thumb=\"(node) => (drag.thumb.value = node)\"\n        role=\"slider\"\n        :tabindex=\"state.disabled.value ? -1 : 0\"\n        :aria-label=\"label\"\n        aria-roledescription=\"2D slider\"\n        :aria-valuemin=\"0\"\n        :aria-valuemax=\"100\"\n        :aria-valuenow=\"Math.round(state.hsva.value.s)\"\n        :aria-valuetext=\"`Saturation ${Math.round(state.hsva.value.s)}%, brightness ${Math.round(state.hsva.value.v)}%`\"\n        :aria-disabled=\"state.disabled.value || undefined\"\n        @keydown=\"key\" /></motion.div\n  ></motion.div>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerChannels.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerChannels.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport { rgbaToHsva, hsvToHsl, hslToHsv, type Hsva, type Rgba } from \"./color\";\nimport { usePicker } from \"./context\";\nconst props = withDefaults(defineProps<{ format?: \"rgb\" | \"hsl\" }>(), {\n  format: \"rgb\",\n});\nconst state = usePicker();\ntype Channel = {\n  key: string;\n  short: string;\n  name: string;\n  max: number;\n  value: number;\n  set: (value: number) => Hsva;\n};\nconst channels = computed<Channel[]>(() => {\n  const hsv = state.hsva.value;\n  const rgba = state.rgba.value;\n  const hsl = hsvToHsl(hsv);\n  const schema: Array<[string, string, number]> =\n    props.format === \"hsl\"\n      ? [\n          [\"h\", \"Hue\", 360],\n          [\"s\", \"Saturation\", 100],\n          [\"l\", \"Lightness\", 100],\n        ]\n      : [\n          [\"r\", \"Red\", 255],\n          [\"g\", \"Green\", 255],\n          [\"b\", \"Blue\", 255],\n        ];\n  const result = schema.map(([key, name, max]) => ({\n    key,\n    short: key.toUpperCase(),\n    name,\n    max,\n    value:\n      props.format === \"hsl\"\n        ? hsl[key as keyof typeof hsl]\n        : rgba[key as keyof Rgba],\n    set: (value: number) =>\n      props.format === \"hsl\"\n        ? hslToHsv(\n            key === \"h\" ? value : hsl.h,\n            key === \"s\" ? value : hsl.s,\n            key === \"l\" ? value : hsl.l,\n            hsv,\n            hsv.a,\n          )\n        : rgbaToHsva({ ...rgba, [key]: value }, hsv),\n  }));\n  if (state.alpha.value)\n    result.push({\n      key: \"a\",\n      short: \"A\",\n      name: \"Opacity percent\",\n      max: 100,\n      value: hsv.a * 100,\n      set: (value) => ({ ...hsv, a: value / 100 }),\n    });\n  return result;\n});\nconst drafts = ref<Record<string, string | undefined>>({});\nwatch(\n  () => props.format,\n  () => {\n    drafts.value = {};\n  },\n);\nconst clamp = (channel: Channel, value: number) =>\n  Math.min(channel.max, Math.max(0, value));\nfunction input(channel: Channel, event: Event) {\n  const text = (event.target as HTMLInputElement).value\n    .replace(/\\D/g, \"\")\n    .slice(0, 3);\n  drafts.value[channel.key] = text;\n  if (text) state.update(channel.set(clamp(channel, Number(text))));\n}\nfunction settle(channel: Channel) {\n  if (drafts.value[channel.key] !== undefined) state.commit();\n  delete drafts.value[channel.key];\n}\nfunction key(channel: Channel, event: KeyboardEvent) {\n  const delta =\n    event.key === \"ArrowUp\" ? 1 : event.key === \"ArrowDown\" ? -1 : 0;\n  if (delta && !state.disabled.value) {\n    event.preventDefault();\n    delete drafts.value[channel.key];\n    state.update(\n      channel.set(\n        clamp(\n          channel,\n          Math.round(channel.value) + delta * (event.shiftKey ? 10 : 1),\n        ),\n      ),\n    );\n    state.commit();\n  } else if (event.key === \"Enter\") settle(channel);\n}\n</script>\n<template>\n  <div class=\"flex min-w-0 flex-1 gap-1.5\">\n    <label\n      v-for=\"channel in channels\"\n      :key=\"format + '-' + channel.key\"\n      class=\"flex min-w-0 flex-1 flex-col items-center gap-1\"\n      ><input\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"off\"\n        :disabled=\"state.disabled.value\"\n        :aria-label=\"channel.name\"\n        :value=\"drafts[channel.key] ?? String(Math.round(channel.value))\"\n        @input=\"input(channel, $event)\"\n        @blur=\"settle(channel)\"\n        @keydown=\"key(channel, $event)\"\n        class=\"h-9 w-full min-w-0 rounded-lg border border-border bg-background px-1 text-center text-xs text-foreground outline-none focus:border-foreground/40 focus:ring-2 focus:ring-ring/40 disabled:opacity-50\"\n      /><span\n        aria-hidden=\"true\"\n        class=\"text-[11px] font-medium text-muted-foreground\"\n        >{{ channel.short }}</span\n      ></label\n    >\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerContent.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerContent.vue",
+      "type": "registry:component",
+      "content": "<script lang=\"ts\">\nimport {\n  Fragment,\n  defineComponent,\n  h,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  type VNode,\n  type Component,\n} from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { SPRING_LAYOUT, EASE_OUT } from \"../../../lib/ease\";\nimport {\n  resolveElement,\n  useFloatingLayer,\n  useReducedMotion,\n} from \"../../../lib/composables\";\nimport { cn } from \"../../../lib/utils\";\nimport { usePicker } from \"./context\";\nimport ColorPickerArea from \"./ColorPickerArea.vue\";\nconst flatten = (nodes: VNode[]): VNode[] =>\n  nodes.flatMap((node) =>\n    node.type === Fragment ? flatten(node.children as VNode[]) : [node],\n  );\nexport default defineComponent({\n  inheritAttrs: false,\n  props: { align: { type: String as () => \"start\" | \"end\", default: \"start\" } },\n  setup(props, { attrs, slots }) {\n    const state = usePicker();\n    const reduced = useReducedMotion();\n    const panel = ref<unknown>(null);\n    const layer = useFloatingLayer(state.open, panel);\n    provide(\"orvui-color-morph\", true);\n    let disposed = false;\n    let revision = 0;\n    const element = () => resolveElement<HTMLElement>(panel.value);\n    function position() {\n      const target = element();\n      if (!target || !state.open.value) return;\n      target.style.marginLeft = \"0px\";\n      const box = target.getBoundingClientRect();\n      const end = target.ownerDocument.documentElement.clientWidth - 8;\n      let delta = Math.min(0, end - box.right);\n      if (box.left + delta < 8) delta = 8 - box.left;\n      target.style.marginLeft = `${delta}px`;\n    }\n    const outside = (event: PointerEvent) => {\n      if (\n        state.open.value &&\n        event.target instanceof Node &&\n        !layer.containsHigher(event.target) &&\n        !element()?.contains(event.target) &&\n        !state.anchor.value?.contains(event.target)\n      )\n        state.open.value = false;\n    };\n    const escape = (event: KeyboardEvent) => {\n      if (layer.claimEscape(event)) state.open.value = false;\n    };\n    watch(\n      state.open,\n      async (opened, previous) => {\n        const version = ++revision;\n        const target = element();\n        if (target) {\n          target.inert = !opened;\n          target.style.pointerEvents = opened ? \"auto\" : \"none\";\n        }\n        await nextTick();\n        if (disposed || version !== revision) return;\n        if (opened) {\n          position();\n          if (previous !== undefined)\n            element()\n              ?.querySelector<HTMLElement>(\n                '[role=\"slider\"]:not([aria-disabled]),input:not(:disabled),button:not(:disabled)',\n              )\n              ?.focus({ preventScroll: true });\n        } else {\n          const active = document.activeElement;\n          if (\n            !active ||\n            active === document.body ||\n            element()?.contains(active)\n          )\n            state.anchor.value?.focus({ preventScroll: true });\n        }\n      },\n      { flush: \"post\" },\n    );\n    onMounted(() => {\n      document.addEventListener(\"pointerdown\", outside);\n      document.addEventListener(\"keydown\", escape);\n      window.addEventListener(\"resize\", position);\n      void nextTick(() => {\n        if (!disposed) position();\n      });\n    });\n    onBeforeUnmount(() => {\n      disposed = true;\n      ++revision;\n      document.removeEventListener(\"pointerdown\", outside);\n      document.removeEventListener(\"keydown\", escape);\n      window.removeEventListener(\"resize\", position);\n    });\n    function rows() {\n      let ordinal = 0;\n      return flatten(slots.default?.() ?? []).map((child, index) => {\n        if (child.type === ColorPickerArea) return child;\n        const delay = 0.1 + ++ordinal * 0.035;\n        return h(\n          motion.div as Component,\n          {\n            key: child.key ?? index,\n            initial: reduced.value\n              ? { opacity: 0 }\n              : { opacity: 0, y: -6, filter: \"blur(4px)\" },\n            animate: reduced.value\n              ? { opacity: 1 }\n              : { opacity: 1, y: 0, filter: \"blur(0px)\" },\n            exit: { opacity: 0, transition: { duration: 0.1 } },\n            transition: { ...SPRING_LAYOUT, delay },\n          },\n          () => child,\n        );\n      });\n    }\n    return () =>\n      h(AnimatePresence, null, {\n        default: () =>\n          state.open.value\n            ? [\n                h(\n                  motion.div as Component,\n                  {\n                    ...attrs,\n                    ref: panel,\n                    id: `${state.id}-content`,\n                    role: \"dialog\",\n                    \"aria-label\": String(attrs[\"aria-label\"] ?? \"Color picker\"),\n                    inert: !state.open.value,\n                    class: cn(\n                      \"absolute top-full z-50 mt-2 flex w-72 flex-col gap-3 p-3\",\n                      props.align === \"end\" ? \"right-0\" : \"left-0\",\n                      attrs.class as string,\n                    ),\n                  },\n                  () => [\n                    h(motion.div as Component, {\n                      \"aria-hidden\": true,\n                      class:\n                        \"absolute inset-0 -z-10 rounded-2xl border border-border bg-background shadow-[0_12px_32px_-8px_rgb(0_0_0/0.25)]\",\n                      initial: { opacity: 0 },\n                      animate: { opacity: 1 },\n                      exit: { opacity: 0 },\n                      transition: {\n                        duration: 0.16,\n                        ease: EASE_OUT,\n                        delay: 0.1,\n                      },\n                    }),\n                    ...rows(),\n                  ],\n                ),\n              ]\n            : [],\n      });\n  },\n});\n</script>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerEyeDropper.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerEyeDropper.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { Pipette } from \"lucide-vue-next\";\nimport { SPRING_PRESS } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { parseHex, rgbaToHsva } from \"./color\";\nimport { usePicker } from \"./context\";\nconst state = usePicker();\nconst reduced = useReducedMotion();\nconst supported = ref(false);\nlet request: AbortController | undefined;\nlet disposed = false;\nonMounted(() => {\n  supported.value = \"EyeDropper\" in window;\n});\nasync function pick(event: MouseEvent) {\n  if (event.defaultPrevented || state.disabled.value || !supported.value)\n    return;\n  request?.abort();\n  const controller = new AbortController();\n  request = controller;\n  try {\n    const result = await new (window as any).EyeDropper().open({\n      signal: controller.signal,\n    });\n    if (disposed || controller.signal.aborted) return;\n    const parsed = parseHex(result.sRGBHex);\n    if (parsed) {\n      state.update(\n        rgbaToHsva({ ...parsed, a: state.hsva.value.a }, state.hsva.value),\n      );\n      state.commit();\n    }\n  } catch {\n    /* Escape/cancellation keeps the editing value. */\n  }\n}\nonBeforeUnmount(() => {\n  disposed = true;\n  request?.abort();\n});\n</script>\n<template>\n  <motion.button\n    v-if=\"supported\"\n    type=\"button\"\n    aria-label=\"Pick a color from your screen\"\n    :disabled=\"state.disabled.value\"\n    :while-press=\"reduced || state.disabled.value ? undefined : { scale: 0.92 }\"\n    :transition=\"SPRING_PRESS\"\n    @click=\"pick\"\n    class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed\"\n    ><slot><Pipette aria-hidden=\"true\" class=\"size-4\" /></slot\n  ></motion.button>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerHexInput.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerHexInput.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { onBeforeUnmount, ref } from \"vue\";\nimport { animate } from \"motion-v\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { parseHex, rgbaToHsva } from \"./color\";\nimport { usePicker } from \"./context\";\nconst state = usePicker();\nconst draft = ref<string | null>(null);\nconst root = ref<HTMLElement | null>(null);\nconst reduced = useReducedMotion();\nlet feedback: ReturnType<typeof animate> | undefined;\nfunction settle() {\n  if (draft.value === null) return;\n  const parsed = parseHex(draft.value);\n  if (parsed) {\n    state.update(rgbaToHsva(parsed, state.hsva.value));\n    state.commit();\n  } else if (!reduced.value && root.value) {\n    feedback?.stop();\n    feedback = animate(\n      root.value,\n      { x: [0, -5, 5, -3, 3, 0] },\n      { duration: 0.3 },\n    );\n  }\n  draft.value = null;\n}\nfunction input(event: Event) {\n  const text = (event.target as HTMLInputElement).value.replace(/^#/, \"\");\n  draft.value = text;\n  if (text.length !== 6 && text.length !== 8) return;\n  const parsed = parseHex(text);\n  if (parsed) state.update(rgbaToHsva(parsed, state.hsva.value));\n}\nonBeforeUnmount(() => feedback?.stop());\n</script>\n<template>\n  <div ref=\"root\" :class=\"['relative min-w-0 flex-1', $attrs.class]\">\n    <span\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-sm text-muted-foreground\"\n      >#</span\n    ><input\n      v-bind=\"$attrs\"\n      type=\"text\"\n      inputmode=\"text\"\n      autocomplete=\"off\"\n      :spellcheck=\"false\"\n      :maxlength=\"9\"\n      :disabled=\"state.disabled.value\"\n      :aria-label=\"String($attrs['aria-label'] ?? 'Hex color')\"\n      :value=\"draft ?? state.hex.value.slice(1).toUpperCase()\"\n      @input=\"input\"\n      @blur=\"settle\"\n      @keydown.enter=\"settle\"\n      @keydown.esc.prevent=\"draft = null\"\n      class=\"h-9 w-full min-w-0 rounded-lg border border-border bg-background pr-3 pl-6 font-mono text-sm uppercase tabular-nums text-foreground outline-none transition-colors focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed\"\n    />\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerHue.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerHue.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { usePicker } from \"./context\";\nimport ChannelSlider from \"./ChannelSlider.vue\";\nwithDefaults(defineProps<{ label?: string }>(), { label: \"Hue\" });\nconst state = usePicker();\nfunction change(hue: number) {\n  state.update({ h: hue });\n}\n</script>\n<template>\n  <ChannelSlider\n    :value=\"state.hsva.value.h\"\n    :max=\"360\"\n    :label=\"label\"\n    :value-text=\"`${Math.round(state.hsva.value.h)} degrees`\"\n    background=\"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)\"\n    :thumb-color=\"`hsl(${state.hsva.value.h} 100% 50%)`\"\n    @value=\"change\"\n  />\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerPreset.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerPreset.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { motion } from \"motion-v\";\nimport { SPRING_PRESS } from \"../../../lib/ease\";\nimport { resolveElement, useReducedMotion } from \"../../../lib/composables\";\nimport { parseHex, formatHex } from \"./color\";\nimport { usePicker, CHECKERBOARD } from \"./context\";\nconst props = defineProps<{ value: string; label?: string }>();\nconst state = usePicker();\nconst reduced = useReducedMotion();\nconst root = ref<unknown>(null);\nconst parsed = computed(() => parseHex(props.value));\nconst normalized = computed(() =>\n  parsed.value ? formatHex(parsed.value) : props.value,\n);\nconst selected = computed(() => state.hex.value === normalized.value);\nconst group = inject<{\n  register(node: HTMLElement, value: string): () => void;\n} | null>(\"orvui-color-presets\", null);\nlet detach: (() => void) | undefined;\nfunction synchronize() {\n  detach?.();\n  detach = undefined;\n  const element = resolveElement<HTMLElement>(root.value);\n  if (group && element) detach = group.register(element, normalized.value);\n}\nonMounted(synchronize);\nwatch(normalized, synchronize);\nonBeforeUnmount(() => detach?.());\nfunction choose() {\n  if (parsed.value && !state.disabled.value) state.setColor(props.value);\n}\n</script>\n<template>\n  <motion.button\n    ref=\"root\"\n    type=\"button\"\n    :disabled=\"state.disabled.value\"\n    :aria-label=\"label ?? normalized\"\n    :aria-pressed=\"selected\"\n    :while-press=\"reduced || state.disabled.value ? undefined : { scale: 0.88 }\"\n    :transition=\"SPRING_PRESS\"\n    @click=\"choose\"\n    class=\"relative size-6 shrink-0 rounded-full outline-none focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-foreground disabled:cursor-not-allowed\"\n    ><span\n      v-if=\"selected && !group\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute -inset-[3px] rounded-full border-2 border-foreground/70\" /><span\n      aria-hidden=\"true\"\n      class=\"absolute inset-0 overflow-hidden rounded-full\"\n      :style=\"{ background: CHECKERBOARD }\"\n      ><span\n        class=\"absolute inset-0 rounded-full shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)]\"\n        :style=\"{ backgroundColor: normalized }\" /></span\n  ></motion.button>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerPresets.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerPresets.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from \"vue\";\nimport { animate, motion, motionValue } from \"motion-v\";\nimport { SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { usePicker } from \"./context\";\nimport { createPresetArc } from \"./preset-motion\";\nconst state = usePicker();\nconst reduced = useReducedMotion();\nconst root = ref<HTMLElement | null>(null);\nconst visible = ref(false);\nconst x = motionValue(0),\n  y = motionValue(0),\n  width = motionValue(30),\n  height = motionValue(30);\nconst entries = new Map<HTMLElement, string>();\nconst arc = createPresetArc();\nlet animation: ReturnType<typeof animate> | undefined;\nlet observer: ResizeObserver | undefined;\nlet disposed = false;\nlet revision = 0;\nfunction measure() {\n  const container = root.value;\n  const selected = [...entries].find(\n    ([, value]) => value === state.hex.value,\n  )?.[0];\n  if (!container || !selected || disposed) {\n    visible.value = false;\n    return;\n  }\n  let left = -3,\n    top = -3;\n  for (\n    let element: HTMLElement | null = selected;\n    element && element !== container;\n    element = element.offsetParent as HTMLElement | null\n  ) {\n    left += element.offsetLeft;\n    top += element.offsetTop;\n  }\n  animation?.stop();\n  width.set(selected.offsetWidth + 6);\n  height.set(selected.offsetHeight + 6);\n  if (!visible.value || reduced.value) {\n    x.jump(left);\n    y.jump(top);\n  } else {\n    const curve = arc({ x: x.get(), y: y.get() }, { x: left, y: top });\n    animation = animate(0, 1, {\n      ...SPRING_LAYOUT,\n      onUpdate: (phase) => {\n        const point = curve(phase);\n        x.set(point.x);\n        y.set(point.y);\n      },\n      onComplete: () => {\n        if (!disposed) {\n          x.set(left);\n          y.set(top);\n        }\n      },\n    });\n  }\n  visible.value = true;\n}\nasync function schedule() {\n  const version = ++revision;\n  await nextTick();\n  if (!disposed && version === revision) measure();\n}\nprovide(\"orvui-color-presets\", {\n  register(node: HTMLElement, value: string) {\n    entries.set(node, value);\n    void schedule();\n    return () => {\n      entries.delete(node);\n      void schedule();\n    };\n  },\n});\nwatch([state.hex, reduced], schedule);\nonMounted(() => {\n  if (root.value && typeof ResizeObserver !== \"undefined\") {\n    observer = new ResizeObserver(measure);\n    observer.observe(root.value);\n  }\n  void schedule();\n});\nonBeforeUnmount(() => {\n  disposed = true;\n  ++revision;\n  observer?.disconnect();\n  animation?.stop();\n  for (const value of [x, y, width, height]) value.destroy();\n});\n</script>\n<template>\n  <div ref=\"root\" class=\"relative flex flex-wrap gap-2\">\n    <motion.span\n      v-if=\"visible\"\n      aria-hidden=\"true\"\n      data-color-picker-preset-ring=\"\"\n      class=\"pointer-events-none absolute left-0 top-0 rounded-full border-2 border-foreground/70\"\n      :style=\"{ x, y, width, height }\"\n    /><slot />\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerSwatch.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerSwatch.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { usePicker, CHECKERBOARD } from \"./context\";\nconst state = usePicker();\n</script>\n<template>\n  <span\n    aria-hidden=\"true\"\n    class=\"relative block size-9 shrink-0 overflow-hidden rounded-lg\"\n    :style=\"{ background: CHECKERBOARD }\"\n    ><span\n      class=\"absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)] transition-colors duration-150\"\n      :style=\"{ backgroundColor: state.hex.value }\"\n  /></span>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorPickerTrigger.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorPickerTrigger.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from \"vue\";\nimport { motion, AnimatePresence } from \"motion-v\";\nimport { SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { usePicker, CHECKERBOARD, COLOR_MORPH } from \"./context\";\nconst state = usePicker();\nconst anchor = state.anchor;\nconst reduced = useReducedMotion();\nconst text = ref<HTMLElement | null>(null);\nconst width = ref<number | null>(null);\nconst alpha = computed(() => state.hex.value.slice(7));\nlet observer: ResizeObserver | undefined;\nfunction measure() {\n  if (text.value) width.value = text.value.offsetWidth;\n}\nonMounted(() => {\n  measure();\n  if (text.value && typeof ResizeObserver !== \"undefined\") {\n    observer = new ResizeObserver(measure);\n    observer.observe(text.value);\n  }\n});\nonBeforeUnmount(() => observer?.disconnect());\nfunction toggle() {\n  if (!state.disabled.value) state.open.value = !state.open.value;\n}\n</script>\n<template>\n  <button\n    ref=\"anchor\"\n    type=\"button\"\n    data-color-picker-trigger=\"\"\n    :disabled=\"state.disabled.value\"\n    aria-haspopup=\"dialog\"\n    :aria-expanded=\"state.open.value\"\n    :aria-controls=\"state.open.value ? `${state.id}-content` : undefined\"\n    @click=\"toggle\"\n    class=\"inline-flex h-10 w-fit items-center gap-2.5 rounded-xl border border-border bg-background pr-3.5 pl-2.5 text-sm text-foreground outline-none transition-colors hover:border-foreground/20 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed\"\n  >\n    <span aria-hidden=\"true\" class=\"relative size-6 shrink-0\"\n      ><span\n        class=\"absolute inset-0 rounded-md border border-dashed border-foreground/20\" /><motion.span\n        v-if=\"!state.open.value\"\n        :layout-id=\"reduced ? undefined : `${state.id}-chip`\"\n        :transition=\"COLOR_MORPH\"\n        class=\"absolute inset-0 overflow-hidden\"\n        :style=\"{ borderRadius: '6px', background: CHECKERBOARD }\"\n        ><span\n          class=\"absolute inset-0 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)]\"\n          :style=\"{\n            backgroundColor: state.hex.value,\n            borderRadius: '6px',\n          }\" /></motion.span></span\n    ><slot\n      ><motion.span\n        class=\"relative inline-flex overflow-hidden\"\n        :initial=\"false\"\n        :animate=\"{ width: width ?? 'auto' }\"\n        :transition=\"reduced ? { duration: 0 } : SPRING_LAYOUT\"\n        ><span\n          ref=\"text\"\n          class=\"relative inline-flex shrink-0 whitespace-nowrap font-mono uppercase tabular-nums\"\n          >{{ state.hex.value.slice(0, 7)\n          }}<AnimatePresence mode=\"popLayout\" :initial=\"false\"\n            ><motion.span\n              v-if=\"alpha\"\n              key=\"alpha\"\n              class=\"text-muted-foreground\"\n              :initial=\"{\n                opacity: 0,\n                x: reduced ? 0 : -4,\n                filter: reduced ? 'blur(0px)' : 'blur(3px)',\n              }\"\n              :animate=\"{ opacity: 1, x: 0, filter: 'blur(0px)' }\"\n              :exit=\"{\n                opacity: 0,\n                filter: reduced ? 'blur(0px)' : 'blur(3px)',\n                transition: { duration: 0.12 },\n              }\"\n              :transition=\"SPRING_LAYOUT\"\n              >{{ alpha }}</motion.span\n            ></AnimatePresence\n          ></span\n        ></motion.span\n      ></slot\n    >\n  </button>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/ColorThumb.vue",
+      "target": "~/src/components/orvui/motion/color-picker/src/ColorThumb.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\ndefineOptions({ inheritAttrs: false });\nimport { computed, onBeforeUnmount } from \"vue\";\nimport {\n  motion,\n  AnimatePresence,\n  useVelocity,\n  useSpring,\n  useTransform,\n  type MotionValue,\n} from \"motion-v\";\nimport { SPRING_PRESS, EASE_OUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { CHECKERBOARD } from \"./context\";\nconst props = defineProps<{\n  dragging: boolean;\n  color: string;\n  glide: MotionValue<number>;\n  x: MotionValue<string>;\n  y?: MotionValue<string>;\n  setThumb?: (node: HTMLElement | null) => void;\n}>();\nconst reduced = useReducedMotion();\nconst velocity = useVelocity(props.glide);\nconst leaning = useTransform(velocity, (value) =>\n  Math.max(-16, Math.min(16, -value * 0.04)),\n);\nconst tilt = useSpring(leaning, SPRING_PRESS);\nconst lifted = computed(() => props.dragging && !reduced.value);\nonBeforeUnmount(() => {\n  tilt.destroy();\n  leaning.destroy();\n  velocity.destroy();\n});\n</script>\n<template>\n  <motion.div class=\"pointer-events-none absolute inset-0\" :style=\"y ? { x, y } : { x }\"\n    ><div\n      v-bind=\"$attrs\"\n      :ref=\"(node) => setThumb?.(node as HTMLElement | null)\"\n      :class=\"[\n        'absolute left-0 size-[18px] -translate-x-1/2 -translate-y-1/2 rounded-full outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground',\n        y ? 'top-0' : 'top-1/2',\n      ]\"\n    >\n      <motion.span\n        aria-hidden=\"true\"\n        :animate=\"{ scale: lifted ? 0.78 : 1 }\"\n        :transition=\"SPRING_PRESS\"\n        class=\"block size-full rounded-full border-[2px] border-white shadow-[0_0_0_1px_rgb(0_0_0/0.12),0_2px_6px_rgb(0_0_0/0.25)]\"\n        :style=\"{ backgroundColor: color }\"\n      /><AnimatePresence\n        ><motion.span\n          v-if=\"lifted\"\n          aria-hidden=\"true\"\n          data-color-picker-loupe=\"\"\n          class=\"pointer-events-none absolute bottom-[calc(100%+12px)] left-1/2 z-10 -ml-5 block size-10\"\n          :style=\"{ rotate: tilt, originX: 0.5, originY: 1.3 }\"\n          :initial=\"{ opacity: 0, scale: 0.3, y: 16 }\"\n          :animate=\"{\n            opacity: 1,\n            scale: 1,\n            y: 0,\n            transition: {\n              type: 'spring',\n              stiffness: 520,\n              damping: 24,\n              mass: 0.6,\n            },\n          }\"\n          :exit=\"{\n            opacity: 0,\n            scale: 0.3,\n            y: 16,\n            transition: { duration: 0.12, ease: EASE_OUT },\n          }\"\n          ><span\n            class=\"absolute inset-0 -rotate-45 overflow-hidden rounded-[50%_50%_50%_0] border-[3px] border-white shadow-[0_0_0_1px_rgb(0_0_0/0.1),0_6px_16px_rgb(0_0_0/0.28)]\"\n            :style=\"{ background: CHECKERBOARD }\"\n            ><span\n              class=\"absolute inset-0\"\n              :style=\"{ background: color }\" /></span></motion.span\n      ></AnimatePresence></div\n  ></motion.div>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/context.ts",
+      "target": "~/src/components/orvui/motion/color-picker/src/context.ts",
+      "type": "registry:lib",
+      "content": "import { computed, inject, onBeforeUnmount, ref, watch, type Ref } from \"vue\";\nimport { motionValue, useSpring, useTransform } from \"motion-v\";\nimport { useReducedMotion, resolveElement } from \"../../../lib/composables\";\nimport { SPRING_GLIDE } from \"../../../lib/ease\";\nimport type { Hsva, Rgba } from \"./color\";\nexport const CHECKERBOARD =\n  \"repeating-conic-gradient(#d4d4d8 0% 25%, #fafafa 0% 50%) 0 0 / 8px 8px\";\nexport const COLOR_MORPH = {\n  type: \"spring\",\n  duration: 0.5,\n  bounce: 0.2,\n} as const;\nexport interface ColorContext {\n  id: string;\n  hsva: Ref<Hsva>;\n  rgba: Ref<Rgba>;\n  hex: Ref<string>;\n  open: Ref<boolean>;\n  anchor: Ref<HTMLElement | null>;\n  alpha: Ref<boolean>;\n  disabled: Ref<boolean>;\n  update: (next: Partial<Hsva>) => void;\n  setColor: (value: string) => void;\n  commit: () => void;\n}\nexport function usePicker() {\n  const state = inject<ColorContext>(\"orvui-color-picker\");\n  if (!state) throw Error(\"Color picker parts must be inside ColorPicker\");\n  return state;\n}\nexport function useGlide(target: Ref<number>) {\n  const reduced = useReducedMotion();\n  const source = motionValue(target.value);\n  const spring = useSpring(source, SPRING_GLIDE);\n  const offset = useTransform(spring, (value) => `${value}%`);\n  watch(\n    [target, reduced],\n    ([value, reduced]) => {\n      if (reduced) {\n        source.jump(value);\n        spring.jump(value);\n      } else source.set(value);\n    },\n    { immediate: true },\n  );\n  onBeforeUnmount(() => {\n    offset.destroy();\n    spring.destroy();\n    source.destroy();\n  });\n  return { spring, offset };\n}\nexport function useColorDrag(\n  onPoint: (x: number, y: number) => void,\n  onEnd: () => void,\n  disabled: Ref<boolean>,\n) {\n  const rail = ref<unknown>(null);\n  const thumb = ref<HTMLElement | null>(null);\n  const dragging = ref(false);\n  let contact: { id: number; element: HTMLElement } | undefined;\n  const clamp = (value: number) => Math.min(1, Math.max(0, value));\n  function sample(event: PointerEvent) {\n    const box = resolveElement<HTMLElement>(\n      rail.value,\n    )?.getBoundingClientRect();\n    if (box?.width && box.height)\n      onPoint(\n        clamp((event.clientX - box.left) / box.width),\n        clamp((event.clientY - box.top) / box.height),\n      );\n  }\n  function release() {\n    const previous = contact;\n    contact = undefined;\n    dragging.value = false;\n    if (previous)\n      try {\n        previous.element.releasePointerCapture(previous.id);\n      } catch {\n        /* Capture may already be lost. */\n      }\n  }\n  function down(event: PointerEvent) {\n    if (disabled.value || event.button !== 0 || contact) return;\n    const element = event.currentTarget as HTMLElement;\n    contact = { id: event.pointerId, element };\n    dragging.value = true;\n    try {\n      element.setPointerCapture(event.pointerId);\n    } catch {\n      /* Synthetic pointer event. */\n    }\n    thumb.value?.focus({ preventScroll: true });\n    sample(event);\n  }\n  function move(event: PointerEvent) {\n    if (!disabled.value && contact?.id === event.pointerId) sample(event);\n  }\n  function end(event: PointerEvent) {\n    if (contact?.id !== event.pointerId) return;\n    release();\n    if (!disabled.value) onEnd();\n  }\n  watch(disabled, (blocked) => {\n    if (blocked) release();\n  });\n  onBeforeUnmount(release);\n  return { rail, thumb, dragging, down, move, end };\n}\nexport function keyStep(\n  event: KeyboardEvent,\n  big = 10,\n): { axis: \"x\" | \"y\"; delta: number } | \"min\" | \"max\" | null {\n  if (event.key === \"Home\") return \"min\";\n  if (event.key === \"End\") return \"max\";\n  const move = (\n    {\n      ArrowRight: [\"x\", 1],\n      ArrowLeft: [\"x\", -1],\n      ArrowUp: [\"y\", 1],\n      ArrowDown: [\"y\", -1],\n      PageUp: [\"y\", 1],\n      PageDown: [\"y\", -1],\n    } as const\n  )[event.key as \"ArrowRight\"];\n  return move\n    ? {\n        axis: move[0],\n        delta:\n          move[1] * (event.shiftKey || event.key.startsWith(\"Page\") ? big : 1),\n      }\n    : null;\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/preset-motion.ts",
+      "target": "~/src/components/orvui/motion/color-picker/src/preset-motion.ts",
+      "type": "registry:lib",
+      "content": "type Point = { x: number; y: number };\n\n/** Keep consecutive preset transitions curving toward the same visual side. */\nexport function createPresetArc() {\n  let curvature: number | undefined;\n  return (from: Point, to: Point) => {\n    const horizontal = to.x - from.x;\n    const vertical = to.y - from.y;\n    const horizontalTravel = Math.abs(horizontal) >= Math.abs(vertical);\n    const dominant = horizontalTravel ? horizontal : vertical;\n    let bend = dominant < 0 ? 0.3 : -0.3;\n    let normalX = -vertical * bend;\n    let normalY = horizontal * bend;\n    const side = Math.sign(horizontalTravel ? normalY : normalX);\n    if (curvature === undefined && side !== 0) curvature = side;\n    else if (side !== 0 && curvature !== side) {\n      normalX = -normalX;\n      normalY = -normalY;\n    }\n    return (progress: number): Point => {\n      const bow = 2 * progress * (1 - progress);\n      return {\n        x: from.x + horizontal * progress + normalX * bow,\n        y: from.y + vertical * progress + normalY * bow,\n      };\n    };\n  };\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/color-picker/src/useColorPicker.ts",
+      "target": "~/src/components/orvui/motion/color-picker/src/useColorPicker.ts",
+      "type": "registry:lib",
+      "content": "import { usePicker } from \"./context\";\n/** Public context accessor for custom color-picker parts. */\nexport const useColorPicker = () => usePicker();\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",
+    "lucide-vue-next@^0.468.0",
+    "motion-v@^1.10.0",
+    "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/color-picker.json"
+  }
+}