@orvui/vue 0.0.0-stage → 0.1.0

package/src/motion/color-picker/src/ColorPickerPresets.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
+import { animate, motion, motionValue } from "motion-v";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { usePicker } from "./context";
+import { createPresetArc } from "./preset-motion";
+const state = usePicker();
+const reduced = useReducedMotion();
+const root = ref<HTMLElement | null>(null);
+const visible = ref(false);
+const x = motionValue(0),
+  y = motionValue(0),
+  width = motionValue(30),
+  height = motionValue(30);
+const entries = new Map<HTMLElement, string>();
+const arc = createPresetArc();
+let animation: ReturnType<typeof animate> | undefined;
+let observer: ResizeObserver | undefined;
+let disposed = false;
+let revision = 0;
+function measure() {
+  const container = root.value;
+  const selected = [...entries].find(
+    ([, value]) => value === state.hex.value,
+  )?.[0];
+  if (!container || !selected || disposed) {
+    visible.value = false;
+    return;
+  }
+  let left = -3,
+    top = -3;
+  for (
+    let element: HTMLElement | null = selected;
+    element && element !== container;
+    element = element.offsetParent as HTMLElement | null
+  ) {
+    left += element.offsetLeft;
+    top += element.offsetTop;
+  }
+  animation?.stop();
+  width.set(selected.offsetWidth + 6);
+  height.set(selected.offsetHeight + 6);
+  if (!visible.value || reduced.value) {
+    x.jump(left);
+    y.jump(top);
+  } else {
+    const curve = arc({ x: x.get(), y: y.get() }, { x: left, y: top });
+    animation = animate(0, 1, {
+      ...SPRING_LAYOUT,
+      onUpdate: (phase) => {
+        const point = curve(phase);
+        x.set(point.x);
+        y.set(point.y);
+      },
+      onComplete: () => {
+        if (!disposed) {
+          x.set(left);
+          y.set(top);
+        }
+      },
+    });
+  }
+  visible.value = true;
+}
+async function schedule() {
+  const version = ++revision;
+  await nextTick();
+  if (!disposed && version === revision) measure();
+}
+provide("orvui-color-presets", {
+  register(node: HTMLElement, value: string) {
+    entries.set(node, value);
+    void schedule();
+    return () => {
+      entries.delete(node);
+      void schedule();
+    };
+  },
+});
+watch([state.hex, reduced], schedule);
+onMounted(() => {
+  if (root.value && typeof ResizeObserver !== "undefined") {
+    observer = new ResizeObserver(measure);
+    observer.observe(root.value);
+  }
+  void schedule();
+});
+onBeforeUnmount(() => {
+  disposed = true;
+  ++revision;
+  observer?.disconnect();
+  animation?.stop();
+  for (const value of [x, y, width, height]) value.destroy();
+});
+</script>
+<template>
+  <div ref="root" class="relative flex flex-wrap gap-2">
+    <motion.span
+      v-if="visible"
+      aria-hidden="true"
+      data-color-picker-preset-ring=""
+      class="pointer-events-none absolute left-0 top-0 rounded-full border-2 border-foreground/70"
+      :style="{ x, y, width, height }"
+    /><slot />
+  </div>
+</template>

package/src/motion/color-picker/src/ColorPickerSwatch.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { usePicker, CHECKERBOARD } from "./context";
+const state = usePicker();
+</script>
+<template>
+  <span
+    aria-hidden="true"
+    class="relative block size-9 shrink-0 overflow-hidden rounded-lg"
+    :style="{ background: CHECKERBOARD }"
+    ><span
+      class="absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)] transition-colors duration-150"
+      :style="{ backgroundColor: state.hex.value }"
+  /></span>
+</template>

package/src/motion/color-picker/src/ColorPickerTrigger.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { motion, AnimatePresence } from "motion-v";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { usePicker, CHECKERBOARD, COLOR_MORPH } from "./context";
+const state = usePicker();
+const anchor = state.anchor;
+const reduced = useReducedMotion();
+const text = ref<HTMLElement | null>(null);
+const width = ref<number | null>(null);
+const alpha = computed(() => state.hex.value.slice(7));
+let observer: ResizeObserver | undefined;
+function measure() {
+  if (text.value) width.value = text.value.offsetWidth;
+}
+onMounted(() => {
+  measure();
+  if (text.value && typeof ResizeObserver !== "undefined") {
+    observer = new ResizeObserver(measure);
+    observer.observe(text.value);
+  }
+});
+onBeforeUnmount(() => observer?.disconnect());
+function toggle() {
+  if (!state.disabled.value) state.open.value = !state.open.value;
+}
+</script>
+<template>
+  <button
+    ref="anchor"
+    type="button"
+    data-color-picker-trigger=""
+    :disabled="state.disabled.value"
+    aria-haspopup="dialog"
+    :aria-expanded="state.open.value"
+    :aria-controls="state.open.value ? `${state.id}-content` : undefined"
+    @click="toggle"
+    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"
+  >
+    <span aria-hidden="true" class="relative size-6 shrink-0"
+      ><span
+        class="absolute inset-0 rounded-md border border-dashed border-foreground/20" /><motion.span
+        v-if="!state.open.value"
+        :layout-id="reduced ? undefined : `${state.id}-chip`"
+        :transition="COLOR_MORPH"
+        class="absolute inset-0 overflow-hidden"
+        :style="{ borderRadius: '6px', background: CHECKERBOARD }"
+        ><span
+          class="absolute inset-0 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)]"
+          :style="{
+            backgroundColor: state.hex.value,
+            borderRadius: '6px',
+          }" /></motion.span></span
+    ><slot
+      ><motion.span
+        class="relative inline-flex overflow-hidden"
+        :initial="false"
+        :animate="{ width: width ?? 'auto' }"
+        :transition="reduced ? { duration: 0 } : SPRING_LAYOUT"
+        ><span
+          ref="text"
+          class="relative inline-flex shrink-0 whitespace-nowrap font-mono uppercase tabular-nums"
+          >{{ state.hex.value.slice(0, 7)
+          }}<AnimatePresence mode="popLayout" :initial="false"
+            ><motion.span
+              v-if="alpha"
+              key="alpha"
+              class="text-muted-foreground"
+              :initial="{
+                opacity: 0,
+                x: reduced ? 0 : -4,
+                filter: reduced ? 'blur(0px)' : 'blur(3px)',
+              }"
+              :animate="{ opacity: 1, x: 0, filter: 'blur(0px)' }"
+              :exit="{
+                opacity: 0,
+                filter: reduced ? 'blur(0px)' : 'blur(3px)',
+                transition: { duration: 0.12 },
+              }"
+              :transition="SPRING_LAYOUT"
+              >{{ alpha }}</motion.span
+            ></AnimatePresence
+          ></span
+        ></motion.span
+      ></slot
+    >
+  </button>
+</template>

package/src/motion/color-picker/src/ColorThumb.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, onBeforeUnmount } from "vue";
+import {
+  motion,
+  AnimatePresence,
+  useVelocity,
+  useSpring,
+  useTransform,
+  type MotionValue,
+} from "motion-v";
+import { SPRING_PRESS, EASE_OUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { CHECKERBOARD } from "./context";
+const props = defineProps<{
+  dragging: boolean;
+  color: string;
+  glide: MotionValue<number>;
+  x: MotionValue<string>;
+  y?: MotionValue<string>;
+  setThumb?: (node: HTMLElement | null) => void;
+}>();
+const reduced = useReducedMotion();
+const velocity = useVelocity(props.glide);
+const leaning = useTransform(velocity, (value) =>
+  Math.max(-16, Math.min(16, -value * 0.04)),
+);
+const tilt = useSpring(leaning, SPRING_PRESS);
+const lifted = computed(() => props.dragging && !reduced.value);
+onBeforeUnmount(() => {
+  tilt.destroy();
+  leaning.destroy();
+  velocity.destroy();
+});
+</script>
+<template>
+  <motion.div class="pointer-events-none absolute inset-0" :style="y ? { x, y } : { x }"
+    ><div
+      v-bind="$attrs"
+      :ref="(node) => setThumb?.(node as HTMLElement | null)"
+      :class="[
+        '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',
+        y ? 'top-0' : 'top-1/2',
+      ]"
+    >
+      <motion.span
+        aria-hidden="true"
+        :animate="{ scale: lifted ? 0.78 : 1 }"
+        :transition="SPRING_PRESS"
+        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)]"
+        :style="{ backgroundColor: color }"
+      /><AnimatePresence
+        ><motion.span
+          v-if="lifted"
+          aria-hidden="true"
+          data-color-picker-loupe=""
+          class="pointer-events-none absolute bottom-[calc(100%+12px)] left-1/2 z-10 -ml-5 block size-10"
+          :style="{ rotate: tilt, originX: 0.5, originY: 1.3 }"
+          :initial="{ opacity: 0, scale: 0.3, y: 16 }"
+          :animate="{
+            opacity: 1,
+            scale: 1,
+            y: 0,
+            transition: {
+              type: 'spring',
+              stiffness: 520,
+              damping: 24,
+              mass: 0.6,
+            },
+          }"
+          :exit="{
+            opacity: 0,
+            scale: 0.3,
+            y: 16,
+            transition: { duration: 0.12, ease: EASE_OUT },
+          }"
+          ><span
+            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)]"
+            :style="{ background: CHECKERBOARD }"
+            ><span
+              class="absolute inset-0"
+              :style="{ background: color }" /></span></motion.span
+      ></AnimatePresence></div
+  ></motion.div>
+</template>

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

@@ -0,0 +1,37 @@
+// Vue public prop types, derived from the actual components.
+export type ColorPickerAlphaProps = InstanceType<
+  (typeof import("./ColorPickerAlpha.vue"))["default"]
+>["$props"];
+export type ColorPickerAreaProps = InstanceType<
+  (typeof import("./ColorPickerArea.vue"))["default"]
+>["$props"];
+export type ColorPickerChannelsProps = InstanceType<
+  (typeof import("./ColorPickerChannels.vue"))["default"]
+>["$props"];
+export type ColorPickerContentProps = InstanceType<
+  (typeof import("./ColorPickerContent.vue"))["default"]
+>["$props"];
+export type ColorPickerEyeDropperProps = InstanceType<
+  (typeof import("./ColorPickerEyeDropper.vue"))["default"]
+>["$props"];
+export type ColorPickerHexInputProps = InstanceType<
+  (typeof import("./ColorPickerHexInput.vue"))["default"]
+>["$props"];
+export type ColorPickerHueProps = InstanceType<
+  (typeof import("./ColorPickerHue.vue"))["default"]
+>["$props"];
+export type ColorPickerPresetProps = InstanceType<
+  (typeof import("./ColorPickerPreset.vue"))["default"]
+>["$props"];
+export type ColorPickerPresetsProps = InstanceType<
+  (typeof import("./ColorPickerPresets.vue"))["default"]
+>["$props"];
+export type ColorPickerProps = InstanceType<
+  (typeof import("./ColorPicker.vue"))["default"]
+>["$props"];
+export type ColorPickerSwatchProps = InstanceType<
+  (typeof import("./ColorPickerSwatch.vue"))["default"]
+>["$props"];
+export type ColorPickerTriggerProps = InstanceType<
+  (typeof import("./ColorPickerTrigger.vue"))["default"]
+>["$props"];

package/src/motion/color-picker/src/color.ts

@@ -0,0 +1,70 @@
+/** Hue in degrees, saturation/value in percent, and opacity in [0, 1]. */
+export type Hsva = { h: number; s: number; v: number; a: number };
+/** Red, green and blue in [0, 255], and opacity in [0, 1]. */
+export type Rgba = { r: number; g: number; b: number; a: number };
+
+export function hsvaToRgba(color: Hsva): Rgba {
+  const brightness = color.v / 100;
+  const chroma = brightness * color.s / 100;
+  const sector = ((color.h % 360) + 360) % 360 / 60;
+  const secondary = chroma * (1 - Math.abs(sector % 2 - 1));
+  const channels = sector < 1 ? [chroma, secondary, 0]
+    : sector < 2 ? [secondary, chroma, 0]
+    : sector < 3 ? [0, chroma, secondary]
+    : sector < 4 ? [0, secondary, chroma]
+    : sector < 5 ? [secondary, 0, chroma] : [chroma, 0, secondary];
+  const floor = brightness - chroma;
+  const [r, g, b] = channels.map(channel => Math.round((channel + floor) * 255));
+  return { r: r!, g: g!, b: b!, a: color.a };
+}
+
+/** Achromatic colors retain the otherwise unrepresentable editing channels. */
+export function rgbaToHsva(color: Rgba, previous?: Hsva): Hsva {
+  const channels = [color.r, color.g, color.b];
+  const light = Math.max(...channels), dark = Math.min(...channels), span = light - dark;
+  let hue = previous?.h ?? 0;
+  if (span > 0) {
+    const dominant = channels.indexOf(light);
+    const angles = [
+      (color.g - color.b) / span,
+      (color.b - color.r) / span + 2,
+      (color.r - color.g) / span + 4,
+    ];
+    hue = (angles[dominant]! * 60 + 360) % 360;
+  }
+  return {
+    h: hue,
+    s: light === 0 ? (previous?.s ?? 0) : 100 * span / light,
+    v: 100 * light / 255,
+    a: color.a,
+  };
+}
+
+export function parseHex(input: string): Rgba | null {
+  const digits = input.trim().replace(/^#/, "");
+  if (![3, 4, 6, 8].includes(digits.length) || /[^0-9a-f]/i.test(digits)) return null;
+  const expanded = digits.length < 5 ? Array.from(digits, digit => digit.repeat(2)).join("") : digits;
+  const bytes = expanded.match(/../g)!.map(pair => Number.parseInt(pair, 16));
+  return { r: bytes[0]!, g: bytes[1]!, b: bytes[2]!, a: bytes.length === 4 ? Math.round(bytes[3]! / 255 * 100) / 100 : 1 };
+}
+
+export function formatHex(color: Rgba): string {
+  const components = [color.r, color.g, color.b];
+  if (color.a < 1) components.push(color.a * 255);
+  return "#" + components.map(component => Math.round(component).toString(16).padStart(2, "0")).join("");
+}
+
+export function hsvToHsl(color: Hsva) {
+  const value = color.v / 100;
+  const low = value * (1 - color.s / 100);
+  const lightness = (value + low) / 2;
+  const range = Math.min(lightness, 1 - lightness);
+  return { h: color.h, s: range === 0 ? 0 : 100 * (value - lightness) / range, l: 100 * lightness };
+}
+
+export function hslToHsv(h: number, s: number, l: number, previous: Hsva, a: number): Hsva {
+  const lightness = l / 100;
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * s / 100;
+  const value = lightness + chroma / 2;
+  return { h, s: value === 0 ? previous.s : chroma / value * 100, v: value * 100, a };
+}

package/src/motion/color-picker/src/context.ts

@@ -0,0 +1,134 @@
+import { computed, inject, onBeforeUnmount, ref, watch, type Ref } from "vue";
+import { motionValue, useSpring, useTransform } from "motion-v";
+import { useReducedMotion, resolveElement } from "../../../lib/composables";
+import { SPRING_GLIDE } from "../../../lib/ease";
+import type { Hsva, Rgba } from "./color";
+export const CHECKERBOARD =
+  "repeating-conic-gradient(#d4d4d8 0% 25%, #fafafa 0% 50%) 0 0 / 8px 8px";
+export const COLOR_MORPH = {
+  type: "spring",
+  duration: 0.5,
+  bounce: 0.2,
+} as const;
+export interface ColorContext {
+  id: string;
+  hsva: Ref<Hsva>;
+  rgba: Ref<Rgba>;
+  hex: Ref<string>;
+  open: Ref<boolean>;
+  anchor: Ref<HTMLElement | null>;
+  alpha: Ref<boolean>;
+  disabled: Ref<boolean>;
+  update: (next: Partial<Hsva>) => void;
+  setColor: (value: string) => void;
+  commit: () => void;
+}
+export function usePicker() {
+  const state = inject<ColorContext>("orvui-color-picker");
+  if (!state) throw Error("Color picker parts must be inside ColorPicker");
+  return state;
+}
+export function useGlide(target: Ref<number>) {
+  const reduced = useReducedMotion();
+  const source = motionValue(target.value);
+  const spring = useSpring(source, SPRING_GLIDE);
+  const offset = useTransform(spring, (value) => `${value}%`);
+  watch(
+    [target, reduced],
+    ([value, reduced]) => {
+      if (reduced) {
+        source.jump(value);
+        spring.jump(value);
+      } else source.set(value);
+    },
+    { immediate: true },
+  );
+  onBeforeUnmount(() => {
+    offset.destroy();
+    spring.destroy();
+    source.destroy();
+  });
+  return { spring, offset };
+}
+export function useColorDrag(
+  onPoint: (x: number, y: number) => void,
+  onEnd: () => void,
+  disabled: Ref<boolean>,
+) {
+  const rail = ref<unknown>(null);
+  const thumb = ref<HTMLElement | null>(null);
+  const dragging = ref(false);
+  let contact: { id: number; element: HTMLElement } | undefined;
+  const clamp = (value: number) => Math.min(1, Math.max(0, value));
+  function sample(event: PointerEvent) {
+    const box = resolveElement<HTMLElement>(
+      rail.value,
+    )?.getBoundingClientRect();
+    if (box?.width && box.height)
+      onPoint(
+        clamp((event.clientX - box.left) / box.width),
+        clamp((event.clientY - box.top) / box.height),
+      );
+  }
+  function release() {
+    const previous = contact;
+    contact = undefined;
+    dragging.value = false;
+    if (previous)
+      try {
+        previous.element.releasePointerCapture(previous.id);
+      } catch {
+        /* Capture may already be lost. */
+      }
+  }
+  function down(event: PointerEvent) {
+    if (disabled.value || event.button !== 0 || contact) return;
+    const element = event.currentTarget as HTMLElement;
+    contact = { id: event.pointerId, element };
+    dragging.value = true;
+    try {
+      element.setPointerCapture(event.pointerId);
+    } catch {
+      /* Synthetic pointer event. */
+    }
+    thumb.value?.focus({ preventScroll: true });
+    sample(event);
+  }
+  function move(event: PointerEvent) {
+    if (!disabled.value && contact?.id === event.pointerId) sample(event);
+  }
+  function end(event: PointerEvent) {
+    if (contact?.id !== event.pointerId) return;
+    release();
+    if (!disabled.value) onEnd();
+  }
+  watch(disabled, (blocked) => {
+    if (blocked) release();
+  });
+  onBeforeUnmount(release);
+  return { rail, thumb, dragging, down, move, end };
+}
+export function keyStep(
+  event: KeyboardEvent,
+  big = 10,
+): { axis: "x" | "y"; delta: number } | "min" | "max" | null {
+  if (event.key === "Home") return "min";
+  if (event.key === "End") return "max";
+  const move = (
+    {
+      ArrowRight: ["x", 1],
+      ArrowLeft: ["x", -1],
+      ArrowUp: ["y", 1],
+      ArrowDown: ["y", -1],
+      PageUp: ["y", 1],
+      PageDown: ["y", -1],
+    } as const
+  )[event.key as "ArrowRight"];
+  return move
+    ? {
+        axis: move[0],
+        delta:
+          move[1] * (event.shiftKey || event.key.startsWith("Page") ? big : 1),
+      }
+    : null;
+}

package/src/motion/color-picker/src/preset-motion.ts

@@ -0,0 +1,28 @@
+type Point = { x: number; y: number };
+
+/** Keep consecutive preset transitions curving toward the same visual side. */
+export function createPresetArc() {
+  let curvature: number | undefined;
+  return (from: Point, to: Point) => {
+    const horizontal = to.x - from.x;
+    const vertical = to.y - from.y;
+    const horizontalTravel = Math.abs(horizontal) >= Math.abs(vertical);
+    const dominant = horizontalTravel ? horizontal : vertical;
+    let bend = dominant < 0 ? 0.3 : -0.3;
+    let normalX = -vertical * bend;
+    let normalY = horizontal * bend;
+    const side = Math.sign(horizontalTravel ? normalY : normalX);
+    if (curvature === undefined && side !== 0) curvature = side;
+    else if (side !== 0 && curvature !== side) {
+      normalX = -normalX;
+      normalY = -normalY;
+    }
+    return (progress: number): Point => {
+      const bow = 2 * progress * (1 - progress);
+      return {
+        x: from.x + horizontal * progress + normalX * bow,
+        y: from.y + vertical * progress + normalY * bow,
+      };
+    };
+  };
+}

package/src/motion/color-picker/src/useColorPicker.ts

@@ -0,0 +1,3 @@
+import { usePicker } from "./context";
+/** Public context accessor for custom color-picker parts. */
+export const useColorPicker = () => usePicker();

package/src/motion/color-selector/index.ts

@@ -0,0 +1,6 @@
+export { default as ColorSelector } from "./src/ColorSelector.vue";
+export { default as ColorSelectorLabel } from "./src/ColorSelectorLabel.vue";
+export { default as ColorSelectorList } from "./src/ColorSelectorList.vue";
+export { default as ColorSelectorItem } from "./src/ColorSelectorItem.vue";
+
+export type * from "./src/api-types";

package/src/motion/color-selector/src/ColorSelector.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, useId, watch } from "vue";
+import { animate } from "motion-v";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+import type { ColorSelectorContext } from "./context";
+const props = withDefaults(defineProps<{ modelValue?: string; defaultValue?: string; name?: string; form?: string; disabled?: boolean; required?: boolean }>(), { defaultValue: "" });
+const emit = defineEmits(["update:modelValue", "change"]);
+const selected = useMotionState(props, emit, "modelValue", props.defaultValue);
+const instanceId = useId(), reduced = useReducedMotion();
+const root = ref<HTMLElement | null>(null), origin = ref<HTMLElement | null>(null), placed = ref(false);
+const ring = ref({ x: 0, y: 0, width: 52, height: 52, color: "transparent" });
+const options = new Map<string, { element: HTMLElement; color: string }>();
+let observer: ResizeObserver | undefined;
+let animation: ReturnType<typeof animate> | undefined;
+let disposed = false;
+function measure(immediate = false) {
+  if (disposed) return;
+  const option = options.get(selected.value), anchor = origin.value ?? root.value;
+  if (!option || !anchor) { placed.value = false; return; }
+  const bounds = anchor.getBoundingClientRect(), target = option.element.getBoundingClientRect();
+  const to = { x: target.left - bounds.left - 4, y: target.top - bounds.top - 4, width: target.width + 8, height: target.height + 8, color: option.color };
+  const from = ring.value;
+  animation?.stop();
+  if (!placed.value || immediate || reduced.value) { ring.value = to; placed.value = true; return; }
+  const lift = Math.hypot(to.x - from.x, to.y - from.y) * 0.4;
+  animation = animate(0, 1, { ...SPRING_LAYOUT, onUpdate(progress) {
+    if (disposed) return;
+    const bounded = Math.max(0, Math.min(1, progress));
+    const interpolate = (key: "x" | "y" | "width" | "height") => from[key] + progress * (to[key] - from[key]);
+    ring.value = { x: interpolate("x"), y: interpolate("y") - lift * bounded * (1 - bounded), width: interpolate("width"), height: interpolate("height"), color: to.color };
+  } });
+}
+const context: ColorSelectorContext = {
+  value: selected, name: computed(() => props.name ?? instanceId), form: computed(() => props.form),
+  disabled: computed(() => props.disabled), required: computed(() => props.required), placed,
+  register(key, option) {
+    const previous = options.get(key);
+    if (previous?.element !== option.element && previous) observer?.unobserve(previous.element);
+    options.set(key, option);
+    observer?.observe(option.element);
+    void nextTick(() => measure(true));
+  },
+  unregister(key) {
+    const option = options.get(key);
+    if (option) observer?.unobserve(option.element);
+    options.delete(key);
+    void nextTick(() => measure(true));
+  },
+  select(key) {
+    if (!props.disabled && key !== selected.value) selected.value = key;
+    void nextTick(() => {
+      if (disposed) return;
+      root.value?.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach(input => { input.checked = input.value === selected.value; });
+    });
+  },
+};
+provide("orvui-color-selector", context);
+watch(selected, () => void nextTick(() => measure()));
+watch(reduced, () => measure(true));
+onMounted(() => {
+  if (typeof ResizeObserver !== "undefined") {
+    observer = new ResizeObserver(() => measure(true));
+    if (root.value) observer.observe(root.value);
+    options.forEach(option => observer!.observe(option.element));
+  }
+  measure(true);
+});
+onBeforeUnmount(() => { disposed = true; animation?.stop(); observer?.disconnect(); options.clear(); });
+</script>
+<template>
+  <fieldset ref="root" :disabled="disabled" :form="form" class="relative min-w-0 border-0 p-0">
+    <slot /><span ref="origin" aria-hidden="true" class="pointer-events-none absolute left-0 top-0 size-0" />
+    <span v-if="placed" aria-hidden="true" data-color-selection="" class="pointer-events-none absolute rounded-full border-2"
+      :style="{ left: 0, top: 0, width: `${ring.width}px`, height: `${ring.height}px`, transform: `translate(${ring.x}px,${ring.y}px)`, borderColor: `color-mix(in srgb, ${ring.color} 85%, transparent)` }" />
+  </fieldset>
+</template>