@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/table-of-contents/src/TableOfContents.vue

@@ -0,0 +1,337 @@
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  unref,
+  useId,
+  watch,
+} from "vue";
+import { motion } from "motion-v";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import type { TableOfContentsItem, TableOfContentsTarget } from "./types";
+
+const props = withDefaults(
+  defineProps<{
+    items: TableOfContentsItem[];
+    target?: TableOfContentsTarget;
+    offset?: number;
+    modelValue?: string;
+    title?: string;
+  }>(),
+  { offset: 88, title: "On this page" },
+);
+const emit = defineEmits<{ "update:modelValue": [id: string] }>();
+defineSlots<{
+  title(): unknown;
+  item(props: { item: TableOfContentsItem; active: boolean }): unknown;
+}>();
+const id = useId();
+const reduce = useReducedMotion();
+const local = ref<string>();
+const active = computed(
+  () => props.modelValue ?? local.value ?? props.items[0]?.id,
+);
+let mounted = false;
+let frame = 0;
+let root: HTMLElement | null = null;
+let scroller: HTMLElement | Window;
+let resize: ResizeObserver | undefined;
+let cleanup: (() => void) | undefined;
+let anchor: string | undefined;
+
+function resolveRoot() {
+  const value =
+    typeof props.target === "function" ? props.target() : unref(props.target);
+  if (typeof value === "string") {
+    try {
+      return document.querySelector<HTMLElement>(value);
+    } catch {
+      return null;
+    }
+  }
+  return (
+    resolveElement<HTMLElement>(value) ??
+    (props.target === undefined ? document.body : null)
+  );
+}
+function destination(itemId: string) {
+  const element = root?.ownerDocument.getElementById(itemId);
+  return element instanceof HTMLElement && root?.contains(element)
+    ? element
+    : null;
+}
+function select(itemId: string) {
+  if (local.value === itemId) return;
+  local.value = itemId;
+  if (props.modelValue !== itemId) emit("update:modelValue", itemId);
+}
+function measure() {
+  frame = 0;
+  if (!mounted || !root) return;
+  const targets = props.items.flatMap((item) => {
+    const element = destination(item.id);
+    return element && element.getClientRects().length
+      ? [{ item, element }]
+      : [];
+  });
+  if (!targets.length) return;
+  const viewportTop =
+    scroller === window
+      ? 0
+      : (scroller as HTMLElement).getBoundingClientRect().top;
+  let current = targets[0].item.id;
+  for (const { item, element } of targets) {
+    if (element.getBoundingClientRect().top <= viewportTop + props.offset + 1)
+      current = item.id;
+  }
+  const scrollTop =
+    scroller === window ? window.scrollY : (scroller as HTMLElement).scrollTop;
+  const height =
+    scroller === window
+      ? window.innerHeight
+      : (scroller as HTMLElement).clientHeight;
+  const total =
+    scroller === window
+      ? document.documentElement.scrollHeight
+      : (scroller as HTMLElement).scrollHeight;
+  if (total > height + 1 && scrollTop + height >= total - 2) {
+    // A near-end anchor cannot always reach the offset. Retain that explicit
+    // destination while it is visible instead of jumping to the final footer.
+    const requested = targets.find((target) => target.item.id === anchor);
+    const top = requested?.element.getBoundingClientRect().top;
+    current =
+      requested &&
+      top! >= viewportTop + props.offset - 1 &&
+      top! < viewportTop + height
+        ? requested.item.id
+        : targets.at(-1)!.item.id;
+  }
+  select(current);
+}
+function schedule() {
+  if (mounted && !frame) frame = requestAnimationFrame(measure);
+}
+function scrollTo(element: HTMLElement, behavior: ScrollBehavior) {
+  const viewportTop =
+    scroller === window
+      ? 0
+      : (scroller as HTMLElement).getBoundingClientRect().top;
+  const scrollTop =
+    scroller === window ? window.scrollY : (scroller as HTMLElement).scrollTop;
+  scroller.scrollTo({
+    top:
+      scrollTop +
+      element.getBoundingClientRect().top -
+      viewportTop -
+      props.offset,
+    behavior,
+  });
+}
+function followHash() {
+  let hash: string;
+  try {
+    hash = decodeURIComponent(window.location.hash.slice(1));
+  } catch {
+    return;
+  }
+  if (!props.items.some((item) => item.id === hash)) {
+    schedule();
+    return;
+  }
+  anchor = hash;
+  const element = destination(hash);
+  if (element) scrollTo(element, "instant");
+  schedule();
+}
+function navigate(event: MouseEvent, item: TableOfContentsItem) {
+  if (
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  )
+    return;
+  const element = destination(item.id);
+  if (!element) return; // Keep native links usable even before their target mounts.
+  event.preventDefault();
+  anchor = item.id;
+  const hash = "#" + encodeURIComponent(item.id);
+  if (window.location.hash !== hash) {
+    // Retain router state and the query string; scrolling itself never writes history.
+    const oldURL = window.location.href;
+    window.history.pushState(window.history.state, "", hash);
+    window.dispatchEvent(
+      new HashChangeEvent("hashchange", {
+        oldURL,
+        newURL: window.location.href,
+      }),
+    );
+  }
+  scrollTo(element, reduce.value ? "instant" : "smooth");
+  select(item.id);
+  const previous = element.getAttribute("tabindex");
+  element.setAttribute("tabindex", "-1");
+  element.focus({ preventScroll: true });
+  if (previous === null) element.removeAttribute("tabindex");
+}
+function bind() {
+  cleanup?.();
+  resize?.disconnect();
+  cancelAnimationFrame(frame);
+  frame = 0;
+  root = resolveRoot();
+  if (!root) return;
+  let parent: HTMLElement | null = root;
+  while (
+    parent &&
+    parent !== document.body &&
+    !/(auto|scroll)/.test(getComputedStyle(parent).overflowY)
+  )
+    parent = parent.parentElement;
+  scroller = parent && parent !== document.body ? parent : window;
+  scroller.addEventListener("scroll", schedule, { passive: true });
+  window.addEventListener("resize", schedule);
+  window.addEventListener("hashchange", schedule);
+  window.addEventListener("popstate", followHash);
+  cleanup = () => {
+    scroller.removeEventListener("scroll", schedule);
+    window.removeEventListener("resize", schedule);
+    window.removeEventListener("hashchange", schedule);
+    window.removeEventListener("popstate", followHash);
+  };
+  if (typeof ResizeObserver !== "undefined") {
+    resize = new ResizeObserver(schedule);
+    resize.observe(root);
+    for (const item of props.items) {
+      const el = destination(item.id);
+      if (el) resize.observe(el);
+    }
+  }
+  schedule();
+}
+watch(
+  () => [props.items, props.target, props.offset],
+  async () => {
+    if (!mounted) return;
+    await nextTick();
+    if (mounted) {
+      local.value = undefined;
+      anchor = undefined;
+      bind();
+    }
+  },
+  { deep: true },
+);
+onMounted(() => {
+  mounted = true;
+  bind();
+  void nextTick(() => {
+    if (mounted) followHash();
+  });
+  if (document.fonts)
+    void document.fonts.ready.then(() => {
+      if (mounted) schedule();
+    });
+});
+onBeforeUnmount(() => {
+  mounted = false;
+  cleanup?.();
+  resize?.disconnect();
+  cancelAnimationFrame(frame);
+});
+</script>
+
+<template>
+  <nav data-slot="table-of-contents" :aria-label="title" class="orvui-toc">
+    <p class="orvui-toc-title">
+      <slot name="title">{{ title }}</slot>
+    </p>
+    <ol class="orvui-toc-list">
+      <li v-for="item in items" :key="item.id">
+        <a
+          :href="'#' + encodeURIComponent(item.id)"
+          :aria-current="active === item.id ? 'location' : undefined"
+          :data-level="item.level ?? 2"
+          class="orvui-toc-link"
+          @click="navigate($event, item)"
+        >
+          <motion.span
+            v-if="active === item.id"
+            :layout-id="`${id}-indicator`"
+            :initial="false"
+            :transition="reduce ? { duration: 0 } : SPRING_LAYOUT"
+            class="orvui-toc-indicator"
+            aria-hidden="true"
+          />
+          <slot name="item" :item="item" :active="active === item.id">{{
+            item.label
+          }}</slot>
+        </a>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style>
+.orvui-toc {
+  min-width: 0;
+  color: var(--foreground);
+}
+.orvui-toc-title {
+  margin: 0 0 12px;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+}
+.orvui-toc-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-inline-start: 1px solid var(--border);
+}
+.orvui-toc-link {
+  position: relative;
+  display: block;
+  padding: 7px 12px 7px 16px;
+  border-radius: 4px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--muted-foreground);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  transition: color 150ms;
+}
+.orvui-toc-link[data-level="3"] {
+  padding-inline-start: 28px;
+}
+.orvui-toc-link:hover,
+.orvui-toc-link[aria-current] {
+  color: var(--foreground);
+}
+.orvui-toc-link[aria-current] {
+  font-weight: 500;
+}
+.orvui-toc-link:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+.orvui-toc-indicator {
+  position: absolute;
+  inset-block: 7px;
+  inset-inline-start: -1px;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--primary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .orvui-toc-link {
+    transition: none;
+  }
+}
+</style>

package/src/motion/table-of-contents/src/api-types.ts

@@ -0,0 +1,3 @@
+export type TableOfContentsProps = InstanceType<
+  (typeof import("./TableOfContents.vue"))["default"]
+>["$props"];

package/src/motion/table-of-contents/src/types.ts

@@ -0,0 +1,15 @@
+import type { ComponentPublicInstance, Ref } from "vue";
+
+export interface TableOfContentsItem {
+  id: string;
+  label: string;
+  level?: 2 | 3;
+}
+
+/** The article scope, optionally also its scrollable viewport. */
+export type TableOfContentsTarget =
+  | string
+  | HTMLElement
+  | ComponentPublicInstance
+  | Ref<HTMLElement | ComponentPublicInstance | null | undefined>
+  | (() => HTMLElement | null);

package/src/motion/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./src/Tabs.vue";
+export { default as TabsList } from "./src/TabsList.vue";
+export { default as TabsTrigger } from "./src/TabsTrigger.vue";
+export { default as TabsContent } from "./src/TabsContent.vue";

package/src/motion/tabs/src/Tabs.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed, provide, ref, shallowRef, useId } from "vue";
+import { motion, useSpring } from "motion-v";
+import { useMotionState } from "../../state";
+import { TabsContext, TABS_TRANSITION } from "./context";
+const props = withDefaults(defineProps<{ modelValue?: string; defaultValue?: string; variant?: "pill" | "underline" | "segment"; icons?: "always" | "selected" }>(), { defaultValue: "", variant: "pill", icons: "always" });
+const emit = defineEmits(["update:modelValue", "change"]);
+const value = useMotionState(props, emit, "modelValue", props.defaultValue);
+const id = useId();
+const track = { x: useSpring(0, TABS_TRANSITION), y: useSpring(0, TABS_TRANSITION), width: useSpring(0, TABS_TRANSITION), height: useSpring(0, TABS_TRANSITION) };
+const placed = ref(false);
+const tabs = shallowRef(new Map<string, boolean>());
+const panels = shallowRef(new Set<string>());
+function registerTab(value: string, disabled: boolean) { if (tabs.value.has(value) && tabs.value.get(value) === disabled) return; tabs.value = new Map([...tabs.value, [value, disabled]]); }
+function unregisterTab(value: string) { const entries = new Map(tabs.value); entries.delete(value); tabs.value = entries; }
+function registerPanel(value: string) { if (!panels.value.has(value)) panels.value = new Set([...panels.value, value]); }
+function unregisterPanel(value: string) { const entries = new Set(panels.value); entries.delete(value); panels.value = entries; }
+const tabStop = computed(() => { if (!tabs.value.size) return null; const enabled = [...tabs.value].filter(([, disabled]) => !disabled).map(([value]) => value); return enabled.includes(value.value) ? value.value : enabled[0] ?? ""; });
+function elementId(kind: string, value: string) { return `${id}-${kind}-${value.replace(/[^\w-]/g, "_")}`; }
+provide(TabsContext, { value, id, variant: computed(() => props.variant), icons: computed(() => props.icons), track, placed, tabStop, tabs, panels, registerTab, unregisterTab, registerPanel, unregisterPanel, tabId: value => elementId("tab", value), panelId: value => elementId("panel", value) });
+</script>
+<template><motion.div layout-root><slot /></motion.div></template>

package/src/motion/tabs/src/TabsContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watch } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { useTabs } from "./context";
+const props = defineProps<{ value: string; forceMount?: boolean }>();
+const state = useTabs();
+const reduced = useReducedMotion();
+const active = computed(() => state.value.value === props.value);
+onMounted(() => state.registerPanel(props.value));
+watch(() => props.value, (value, previous) => { state.unregisterPanel(previous); state.registerPanel(value); });
+onBeforeUnmount(() => state.unregisterPanel(props.value));
+</script>
+<template><motion.div :id="state.panelId(value)" role="tabpanel" :aria-labelledby="state.tabId(value)" :hidden="!active" :tabindex="active ? 0 : undefined" :initial="false" :animate="active ? { opacity: 1, y: 0 } : { opacity: 0, y: reduced ? 0 : 4 }" :transition="{ duration: .18, ease: EASE_OUT }" :class="active ? 'mt-4 outline-none focus-visible:ring-2 focus-visible:ring-ring/40 rounded-md' : undefined"><slot /></motion.div></template>

package/src/motion/tabs/src/TabsList.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, ref, useId } from "vue";
+import { motion } from "motion-v";
+import { ChevronLeft, ChevronRight } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+import { useTabs } from "./context";
+import { useTabsList } from "./list-state";
+defineOptions({ inheritAttrs: false });
+defineProps<{ wrapperClassName?: string }>();
+const state = useTabs();
+const reduced = useReducedMotion();
+const root = ref<HTMLElement | null>(null);
+const viewport = ref<HTMLElement | null>(null);
+const list = ref<HTMLElement | null>(null);
+const viewportId = useId();
+const { edges, tracked, keyboard, scroll, focus } = useTabsList(state, reduced, root, viewport, list);
+const classes = { pill: "inline-flex items-center gap-1 rounded-full bg-card p-1", underline: "inline-flex items-center gap-1 border-b border-border", segment: "inline-flex items-center gap-0 rounded-lg bg-card p-0.5" };
+const surface = computed(() => state.variant.value === "pill" ? "rounded-full bg-card" : state.variant.value === "segment" ? "rounded-lg bg-card" : "");
+const control = "absolute inset-y-0 z-20 inline-flex w-9 items-center justify-center text-foreground transition-opacity hover:opacity-70 focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-0";
+const mask = computed(() => edges.value.overflow ? { maskImage: `linear-gradient(to right, ${edges.value.left ? 'transparent, black 40px' : 'black, black 0px'}, ${edges.value.right ? 'black calc(100% - 40px), transparent' : 'black 100%'})` } : undefined);
+</script>
+<template><div ref="root" :class="cn('relative isolate flex w-full max-w-full min-w-0 items-center', edges.overflow && surface, wrapperClassName)"><button v-if="edges.overflow" type="button" aria-label="Scroll tabs left" :aria-controls="viewportId" :disabled="!edges.left" @click="scroll(-1)" :class="cn(control, 'left-0 rounded-l-full')"><ChevronLeft :size="20" aria-hidden="true" /></button><motion.div :ref="element => viewport = resolveElement<HTMLElement>(element)" :id="viewportId" layout-scroll :class="cn('w-full min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', edges.overflow && '[border-radius:inherit]')" :style="mask" @focus.capture="focus"><div ref="list" v-bind="$attrs" role="tablist" @keydown="keyboard" :class="cn(classes[state.variant.value], 'w-max', tracked && 'relative', $attrs.class as string)"><slot /></div></motion.div><span v-if="edges.overflow && edges.left" aria-hidden="true" class="pointer-events-none absolute inset-y-0 left-0 z-10 w-10 rounded-l-[inherit] backdrop-blur-[2px] [mask-image:linear-gradient(to_right,black,transparent)]" /><span v-if="edges.overflow && edges.right" aria-hidden="true" class="pointer-events-none absolute inset-y-0 right-0 z-10 w-10 rounded-r-[inherit] backdrop-blur-[2px] [mask-image:linear-gradient(to_left,black,transparent)]" /><button v-if="edges.overflow" type="button" aria-label="Scroll tabs right" :aria-controls="viewportId" :disabled="!edges.right" @click="scroll(1)" :class="cn(control, 'right-0 rounded-r-full')"><ChevronRight :size="20" aria-hidden="true" /></button></div></template>

package/src/motion/tabs/src/TabsTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watch } from "vue";
+import { motion, useTransform } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { TABS_TRANSITION, useTabs } from "./context";
+import TriggerContent from "./TriggerContent.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps<{ value: string; disabled?: boolean; icon?: any; indicatorClassName?: string }>();
+const state = useTabs();
+const reduced = useReducedMotion();
+const active = computed(() => state.value.value === props.value);
+const radius = computed(() => state.variant.value === "pill" ? "rounded-full" : "rounded-md");
+const tracked = computed(() => state.icons.value === "selected" && state.placed.value);
+const initialClip = active.value ? "inset(0)" : "inset(0 100% 0 0)";
+const width = useTransform(state.track.width, value => `${value}px`);
+const height = useTransform(state.track.height, value => `${value}px`);
+const tabIndex = computed(() => !props.disabled && (state.tabStop.value === null || state.tabStop.value === props.value) ? 0 : -1);
+const border = computed(() => state.variant.value === "pill" ? "9999px" : "8px");
+function select(event: MouseEvent) { if (!event.defaultPrevented) state.value.value = props.value; }
+onMounted(() => state.registerTab(props.value, !!props.disabled));
+watch([() => props.value, () => props.disabled], ([value, disabled], [previous]) => { if (previous !== value) state.unregisterTab(previous); state.registerTab(value, !!disabled); });
+onBeforeUnmount(() => state.unregisterTab(props.value));
+</script>
+<template>
+  <button v-if="state.variant.value === 'underline'" :id="state.tabId(value)" :aria-controls="state.panels.value.has(value) ? state.panelId(value) : undefined" :tabindex="tabIndex" v-bind="$attrs" type="button" role="tab" :aria-selected="active" :disabled="disabled" :data-tabs-value="value" @click="select" :class="cn('relative isolate px-3 pb-2.5 pt-1 -mb-px text-sm font-medium transition-colors min-h-[44px] inline-flex items-center whitespace-nowrap shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring', active ? 'text-foreground' : 'text-muted-foreground hover:text-foreground', $attrs.class as string)"><TriggerContent :active="active" :icon="icon"><template v-if="$slots.icon" #icon><slot name="icon" /></template><slot /></TriggerContent><motion.span v-if="active" :layout-id="`${state.id}-indicator`" layout :transition="reduced ? { duration: 0 } : TABS_TRANSITION" :class="cn('absolute bottom-0 left-0 right-0 h-px bg-primary', indicatorClassName)" /></button>
+  <div v-else :class="cn('shrink-0', !tracked && 'relative')"><motion.span v-if="active && tracked" key="tracked" data-tabs-indicator="" :style="{ ...state.track, width, height, borderRadius: border }" :class="cn('absolute top-0 left-0 bg-primary', radius, indicatorClassName)" /><motion.span v-else-if="active" key="layout" data-tabs-indicator="" :layout-id="`${state.id}-indicator`" layout :transition="reduced ? { duration: 0 } : TABS_TRANSITION" :style="{ borderRadius: border }" :class="cn('absolute inset-0 bg-primary', radius, indicatorClassName)" /><button :id="state.tabId(value)" :aria-controls="state.panels.value.has(value) ? state.panelId(value) : undefined" :tabindex="tabIndex" v-bind="$attrs" type="button" role="tab" :aria-selected="active" :disabled="disabled" :data-tabs-value="value" @click="select" :class="cn('relative z-10 inline-flex items-center justify-center whitespace-nowrap bg-transparent px-3.5 py-1.5 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring text-muted-foreground hover:text-foreground', radius, $attrs.class as string)"><TriggerContent :active="active" :icon="icon"><template v-if="$slots.icon" #icon><slot name="icon" /></template><slot /></TriggerContent><span data-tabs-label="" aria-hidden="true" inert class="pointer-events-none absolute inset-0 inline-flex items-center justify-center text-primary-foreground [gap:inherit] [padding:inherit]" :style="{ clipPath: initialClip }"><TriggerContent :active="active" :icon="icon"><template v-if="$slots.icon" #icon><slot name="icon" /></template><slot /></TriggerContent></span></button></div>
+</template>

package/src/motion/tabs/src/TriggerContent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { SPRING_SWAP } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { useTabs } from "./context";
+const props = defineProps<{ active: boolean; icon?: any }>();
+const state = useTabs();
+const reduced = useReducedMotion();
+const iconPose = computed(() => ({ width: props.active ? "auto" : "0px", marginRight: props.active ? "6px" : "0px", opacity: props.active ? 1 : 0, scale: props.active ? 1 : .6 }));
+</script>
+<template><template v-if="$slots.icon || icon"><span v-if="state.icons.value === 'always'" aria-hidden="true" class="mr-1.5 inline-flex shrink-0 items-center"><slot name="icon"><component :is="icon" /></slot></span><motion.span v-else aria-hidden="true" data-tabs-icon="" :initial="false" :animate="iconPose" :transition="reduced ? { duration: 0 } : SPRING_SWAP" class="inline-flex shrink-0 items-center justify-center overflow-hidden"><slot name="icon"><component :is="icon" /></slot></motion.span></template><slot /></template>

package/src/motion/tabs/src/context.ts

@@ -0,0 +1,6 @@
+import { inject, type ComputedRef, type InjectionKey, type Ref, type ShallowRef } from "vue";
+import type { MotionValue } from "motion-v";
+export interface TabsState { value: Ref<string>; id: string; variant: ComputedRef<"pill" | "underline" | "segment">; icons: ComputedRef<"always" | "selected">; track: Record<"x" | "y" | "width" | "height", MotionValue<number>>; placed: Ref<boolean>; tabStop: ComputedRef<string | null>; tabs: ShallowRef<Map<string, boolean>>; panels: ShallowRef<Set<string>>; registerTab: (value: string, disabled: boolean) => void; unregisterTab: (value: string) => void; registerPanel: (value: string) => void; unregisterPanel: (value: string) => void; tabId: (value: string) => string; panelId: (value: string) => string }
+export const TabsContext = Symbol("orvui-tabs") as InjectionKey<TabsState>;
+export const TABS_TRANSITION = { type: "spring" as const, stiffness: 245, damping: 36, mass: 1.2 };
+export function useTabs() { const state = inject(TabsContext); if (!state) throw new Error("Tabs components must be used inside Tabs"); return state; }

package/src/motion/tabs/src/list-state.ts

@@ -0,0 +1,50 @@
+import { computed, nextTick, onBeforeUnmount, onMounted, onUpdated, ref, watch, type Ref } from "vue";
+import { cancelFrame, frame } from "motion-v";
+import type { TabsState } from "./context";
+const clamp = (value: number, max: number) => Math.max(0, Math.min(max, value));
+export function useTabsList(state: TabsState, reduced: Ref<boolean>, root: Ref<HTMLElement | null>, viewport: Ref<HTMLElement | null>, list: Ref<HTMLElement | null>) {
+  const edges = ref({ overflow: false, left: false, right: false });
+  const tracked = computed(() => state.icons.value === "selected" && state.variant.value !== "underline");
+  let observer: ResizeObserver | undefined;
+  let mounted = false;
+  let ticks = 0;
+  let still = 0;
+  let previous: { left: number; right: number } | undefined;
+  let bound: HTMLElement | null = null;
+  function scrollPosition(view: HTMLElement) { const max = Math.max(0, view.scrollWidth - view.clientWidth); const offset = getComputedStyle(view).direction === "rtl" ? max + view.scrollLeft : view.scrollLeft; return { max, left: clamp(offset, max) }; }
+  function measure() { if (!root.value || !viewport.value) return; const view = viewport.value; const { max, left } = scrollPosition(view); const next = { overflow: view.scrollWidth > root.value.clientWidth + 1, left: left > 1, right: left < max - 1 }; if (next.overflow !== edges.value.overflow || next.left !== edges.value.left || next.right !== edges.value.right) edges.value = next; }
+  function reveal(tab: HTMLElement | null) { const view = viewport.value; if (!view || !tab) return; const bounds = view.getBoundingClientRect(); const item = tab.getBoundingClientRect(); const position = scrollPosition(view); const left = bounds.left + (position.left > 1 ? 36 : 0); const right = bounds.right - (position.left < position.max - 1 ? 36 : 0); const delta = item.left < left ? item.left - left : item.right > right ? item.right - right : 0; if (delta) view.scrollBy({ left: delta, behavior: reduced.value ? "instant" : "smooth" }); }
+  function withSelectedIconLayout(measure: () => void) {
+    const icons = state.icons.value === "selected" ? Array.from(list.value?.querySelectorAll<HTMLElement>("[role=tab] > [data-tabs-icon]") ?? []) : [];
+    const restore = icons.map(icon => ({ icon, width: icon.style.width, margin: icon.style.marginRight }));
+    for (const icon of icons) { const selected = icon.parentElement?.dataset.tabsValue === state.value.value; icon.style.width = selected ? "auto" : "0px"; icon.style.marginRight = selected ? "6px" : "0px"; }
+    try { measure(); } finally { restore.forEach(({ icon, width, margin }) => { icon.style.width = width; icon.style.marginRight = margin; }); }
+  }
+  function place() { const element = list.value; if (!tracked.value || !element) return; const target = Array.from(element.querySelectorAll<HTMLElement>("[role=tab]")).find(tab => tab.dataset.tabsValue === state.value.value)?.parentElement; if (!target) return; withSelectedIconLayout(() => { const box = { x: target.offsetLeft, y: target.offsetTop, width: target.getBoundingClientRect().width, height: target.offsetHeight }; const instant = reduced.value || state.track.width.get() === 0; for (const key of ["x", "y", "width", "height"] as const) { if (instant) state.track[key].jump(box[key]); else state.track[key].set(box[key]); } if (box.width > 0) state.placed.value = true; }); }
+  function synchronizeClips() {
+    const element = list.value; if (!element || state.variant.value === "underline") { cancelFrame(synchronizeClips); return; }
+    const labels = Array.from(element.querySelectorAll<HTMLElement>("[data-tabs-label]")); const indicator = element.querySelector<HTMLElement>("[data-tabs-indicator]"); const target = element.querySelector<HTMLElement>("[role=tab][aria-selected=true]");
+    if (!indicator || !target || target.dataset.tabsValue !== state.value.value) { labels.forEach(label => label.style.clipPath = "inset(0 100% 0 0)"); cancelFrame(synchronizeClips); return; }
+    const pill = (reduced.value ? target : indicator).getBoundingClientRect();
+    for (const label of labels) { const bounds = label.getBoundingClientRect(); const left = clamp(pill.left - bounds.left, bounds.width); const right = clamp(bounds.right - pill.right, bounds.width); const clip = left + right >= bounds.width ? "inset(0 100% 0 0)" : `inset(0 ${right}px 0 ${left}px)`; if (label.style.clipPath !== clip) label.style.clipPath = clip; }
+    const destination = target.getBoundingClientRect();
+    const arrived = Math.abs(pill.left - destination.left) < .1 && Math.abs(pill.right - destination.right) < .1;
+    ticks++; still = previous && Math.abs(pill.left - previous.left) < .01 && Math.abs(pill.right - previous.right) < .01 ? still + 1 : 0; previous = { left: pill.left, right: pill.right };
+    // Shared-layout projection can start after several still frames. Keep the
+    // contrast mask tracking until the indicator actually settles on its tab.
+    if (reduced.value || ticks > 10 && still >= 3 && arrived || ticks > 180) cancelFrame(synchronizeClips);
+  }
+  function clips() { ticks = 0; still = 0; previous = undefined; cancelFrame(synchronizeClips); frame.postRender(synchronizeClips, true); }
+  // Edge updates and resize observations must preserve the user's scroll position.
+  function update() { if (!mounted) return; measure(); place(); clips(); }
+  function revealSelected() { if (mounted) withSelectedIconLayout(() => reveal(list.value?.querySelector<HTMLElement>("[role=tab][aria-selected=true]") ?? null)); }
+  function keyboard(event: KeyboardEvent) { if (event.defaultPrevented || !list.value || !(event.target instanceof HTMLElement)) return; const rows = Array.from(list.value.querySelectorAll<HTMLButtonElement>("[role=tab]")).filter(tab => !tab.disabled && tab.closest("[role=tablist]") === list.value); const at = rows.indexOf(event.target as HTMLButtonElement); if (at < 0 || !rows.length) return; const rtl = getComputedStyle(list.value).direction === "rtl"; let next: HTMLButtonElement | undefined; if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) next = rows[(at + 1) % rows.length]; else if (event.key === (rtl ? "ArrowRight" : "ArrowLeft")) next = rows[(at + rows.length - 1) % rows.length]; else if (event.key === "Home") next = rows[0]; else if (event.key === "End") next = rows.at(-1); if (next) { event.preventDefault(); next.focus(); next.click(); } }
+  function scroll(direction: number) { const view = viewport.value; view?.scrollBy({ left: direction * view.clientWidth * .8, behavior: reduced.value ? "instant" : "smooth" }); }
+  function focus(event: FocusEvent) { const target = event.target as HTMLElement; if (target.getAttribute("role") === "tab") reveal(target); }
+  watch([state.value, state.icons, state.variant, reduced, state.placed], () => { void nextTick(update); }, { flush: "post" });
+  watch(state.value, () => { void nextTick(revealSelected); }, { flush: "post" });
+  onUpdated(update);
+  onMounted(() => { mounted = true; if (typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(update); for (const element of [root.value, viewport.value, list.value]) if (element) observer.observe(element); for (const tab of list.value?.querySelectorAll("[role=tab]") ?? []) if (tab.parentElement) observer.observe(tab.parentElement); } bound = viewport.value; bound?.addEventListener("scroll", measure, { passive: true }); update(); revealSelected(); });
+  onBeforeUnmount(() => { mounted = false; observer?.disconnect(); bound?.removeEventListener("scroll", measure); cancelFrame(synchronizeClips); });
+  return { edges, tracked, keyboard, scroll, focus };
+}

package/src/motion/text-animation/index.ts

@@ -0,0 +1,7 @@
+export { default as TextReveal } from "./src/TextReveal.vue";
+export { default as TextScramble } from "./src/TextScramble.vue";
+export { default as TextShimmer } from "./src/TextShimmer.vue";
+export { default as TextCascade } from "./src/TextCascade.vue";
+export { default as ChromaticTextReveal } from "./src/ChromaticTextReveal.vue";
+
+export type * from "./src/api-types";

package/src/motion/text-animation/src/ChromaticTextReveal.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch, type CSSProperties } from "vue";
+import { motion } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { EASE_IN_OUT, EASE_OUT } from "../../../lib/ease";
+import { chromaticGradient } from "./reveal-sequence";
+const props = withDefaults(defineProps<{ prefix: string; words: string[]; colors?: string[]; foregroundColor?: string; duration?: number; delay?: number; pauseDuration?: number; loop?: boolean; startOnView?: boolean; once?: boolean; inViewMargin?: string }>(), { colors: () => ["#60a5fa", "#818cf8", "#c084fc", "#fb7185", "#fbbf24"], foregroundColor: "var(--foreground)", duration: 1.2, delay: 0, pauseDuration: .8, loop: true, startOnView: true, once: true });
+const root = ref<HTMLElement | null>(null);
+const cycle = ref(0);
+const intersecting = ref(false);
+const reduced = useReducedMotion();
+const index = computed(() => props.words.length ? cycle.value % props.words.length : 0);
+const word = computed(() => props.words[index.value] ?? "");
+const widths = computed(() => Array.from(new Set(props.words)));
+const visible = computed(() => !props.startOnView || intersecting.value || reduced.value);
+const gradient = computed(() => chromaticGradient(props.colors, props.foregroundColor));
+const timing = computed(() => ({ "--chromatic-sweep": reduced.value ? { duration: 0 } : { duration: props.duration, delay: props.delay, ease: EASE_IN_OUT }, opacity: { duration: reduced.value ? 0 : .28, ease: EASE_OUT }, filter: { duration: reduced.value ? 0 : .36, ease: EASE_OUT }, transform: { duration: reduced.value ? 0 : .36, ease: EASE_OUT } }));
+let mounted = false;
+let timer: ReturnType<typeof setTimeout> | undefined;
+let observer: IntersectionObserver | undefined;
+function clear() { clearTimeout(timer); timer = undefined; }
+function next() { clear(); if (!mounted || reduced.value || !visible.value || props.words.length < 2 || !props.loop && index.value === props.words.length - 1) return; timer = setTimeout(() => { cycle.value = (cycle.value + 1) % props.words.length; }, props.pauseDuration * 1000); }
+function observe() { observer?.disconnect(); if (!mounted || !root.value || !props.startOnView) return; if (typeof IntersectionObserver === "undefined") { intersecting.value = true; return; } observer = new IntersectionObserver(entries => { intersecting.value = !!entries[0]?.isIntersecting; if (intersecting.value && props.once) observer?.disconnect(); }, { threshold: .4, rootMargin: props.inViewMargin }); observer.observe(root.value); }
+watch([() => props.words, () => props.loop, () => props.pauseDuration, reduced], clear);
+watch([() => props.startOnView, () => props.once, () => props.inViewMargin], observe);
+onMounted(() => { mounted = true; observe(); });
+onBeforeUnmount(() => { mounted = false; clear(); observer?.disconnect(); });
+</script>
+<template>
+  <span ref="root" class="inline-flex items-baseline"><span class="whitespace-nowrap">{{ prefix }}{{ words.length ? '\u00a0' : '' }}</span><span v-if="words.length" class="relative inline-grid"><span v-for="sizing in widths" :key="sizing" aria-hidden="true" class="invisible col-start-1 row-start-1 whitespace-nowrap">{{ sizing }}</span><motion.span :key="`${word}-${index}`" aria-hidden="true" :initial="reduced ? false : { opacity: .56, filter: 'blur(6px)', transform: 'translateY(5px)' }" :animate="{ '--chromatic-sweep': visible ? '114%' : '-14%', opacity: 1, filter: 'blur(0px)', transform: 'translateY(0px)' }" :transition="timing" @animation-complete="next" class="absolute start-0 top-0 whitespace-nowrap bg-clip-text text-transparent [background-image:var(--chromatic-gradient)] [contain:paint]" :style="{ '--chromatic-sweep': reduced ? '114%' : '-14%', '--chromatic-gradient': gradient, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' } as CSSProperties">{{ word }}</motion.span><span class="sr-only">{{ word }}</span></span></span>
+</template>

package/src/motion/text-animation/src/TextCascade.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import ActionSwapText from "../../action-swap/src/ActionSwapText.vue";
+const props = defineProps<{ text: string }>();
+const current = computed(() => props.text);
+</script>
+<template><ActionSwapText :value="current" animation="cascade">{{ current }}</ActionSwapText></template>

package/src/motion/text-animation/src/TextReveal.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { EASE_OUT } from "../../../lib/ease";
+import { revealSequence } from "./reveal-sequence";
+const props = withDefaults(defineProps<{ text: string | string[]; as?: string; split?: "word" | "char"; stagger?: number; delay?: number; blur?: number; yOffset?: string | number; spring?: { stiffness?: number; damping?: number; mass?: number }; once?: boolean; whileInView?: boolean }>(), { as: "span", split: "word", stagger: .09, delay: 0, blur: 12, yOffset: "40%", once: true, whileInView: false });
+const reduced = useReducedMotion();
+const sequence = computed(() => revealSequence(props.text, props.split));
+const concealed = computed(() => reduced.value ? { opacity: 0 } : { y: props.yOffset, opacity: 0, filter: `blur(${props.blur}px)` });
+const revealed = computed(() => reduced.value ? { opacity: 1 } : { y: 0, opacity: 1, filter: "blur(0px)" });
+function timing(index: number) { const delay = props.delay + index * props.stagger; return reduced.value ? { opacity: { duration: .25, ease: EASE_OUT, delay: delay * .3 } } : { y: { type: "spring" as const, stiffness: props.spring?.stiffness ?? 140, damping: props.spring?.damping ?? 26, mass: props.spring?.mass ?? 1.2, delay }, opacity: { duration: .7, ease: EASE_OUT, delay }, filter: { duration: .9, ease: EASE_OUT, delay } }; }
+function animation(index: number) { return { initial: concealed.value, animate: props.whileInView ? undefined : revealed.value, whileInView: props.whileInView ? revealed.value : undefined, inViewOptions: { once: props.once, amount: .4 }, transition: timing(index) }; }
+</script>
+<template><component :is="as" class="block"><span v-for="(line, lineIndex) in sequence" :key="lineIndex" class="block"><template v-for="(word, wordIndex) in line" :key="wordIndex"><span v-if="split === 'char'" class="inline-block whitespace-pre"><motion.span v-for="unit in word" :key="unit.index" v-bind="animation(unit.index)" class="inline-block whitespace-pre will-change-transform">{{ unit.text }}</motion.span></span><motion.span v-else v-bind="animation(word[0].index)" class="inline-block whitespace-pre will-change-transform">{{ word[0].text }}</motion.span></template></span><slot /></component></template>