@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/shader-background/src/presets.ts

@@ -0,0 +1,66 @@
+/** orvui uniform adapter. The GPU programs remain licensed Paper Design dependencies. */
+import * as Shaders from "@paper-design/shaders";
+type Input = Record<string, any>;
+type Spec = {
+  sizing: "object" | "pattern"; shader: string; params: Input;
+  enums?: Record<string, Record<string, number>>; names?: Record<string, string>;
+  noise?: boolean; static?: boolean;
+};
+// Numerical defaults are frozen appearance/API data; the compiler below owns conversion.
+const specifications = {
+  "mesh-gradient": { sizing: "object", shader: Shaders.meshGradientFragmentShader, params: { speed: 1, frame: 0, colors: ["#e0eaff", "#241d9a", "#f75092", "#9f50d3"], distortion: 0.8, swirl: 0.1, grainMixer: 0, grainOverlay: 0, } },
+  "grain-gradient": { sizing: "object", shader: Shaders.grainGradientFragmentShader, params: { speed: 1, frame: 0, colorBack: "#000000", colors: ["#7300ff", "#eba8ff", "#00bfff", "#2a00ff"], softness: 0.5, intensity: 0.5, noise: 0.25, shape: "corners", }, enums: {shape: Shaders.GrainGradientShapes}, noise: true },
+  "dot-grid": { sizing: "pattern", shader: Shaders.dotGridFragmentShader, params: { colorBack: "#000000", colorFill: "#ffffff", colorStroke: "#ffaa00", size: 2, gapX: 32, gapY: 32, strokeWidth: 0, sizeRange: 0, opacityRange: 0, shape: "circle", }, enums: {shape: Shaders.DotGridShapes}, static: true, names: { size: "dotSize" } },
+  "dot-orbit": { sizing: "pattern", shader: Shaders.dotOrbitFragmentShader, params: { speed: 1.5, frame: 0, colorBack: "#000000", colors: ["#ffc96b", "#ff6200", "#ff2f00", "#421100", "#1a0000"], size: 1, sizeRange: 0, spreading: 1, stepsPerColor: 4, }, noise: true },
+  "warp": { sizing: "pattern", shader: Shaders.warpFragmentShader, params: { rotation: 0, speed: 1, frame: 0, colors: ["#121212", "#9470ff", "#121212", "#8838ff"], proportion: 0.45, softness: 1, distortion: 0.25, swirl: 0.8, swirlIterations: 10, shapeScale: 0.1, shape: "checks", }, enums: {shape: Shaders.WarpPatterns}, noise: true },
+  "waves": { sizing: "pattern", shader: Shaders.wavesFragmentShader, params: { scale: 0.6, colorFront: "#ffbb00", colorBack: "#000000", shape: 0, frequency: 0.5, amplitude: 0.5, spacing: 1.2, proportion: 0.1, softness: 0, }, static: true },
+  "water": { sizing: "object", shader: Shaders.waterFragmentShader, params: { scale: 0.8, speed: 1, frame: 0, colorBack: "#909090", colorHighlight: "#ffffff", highlights: 0.07, layering: 0.5, edges: 0.8, waves: 0.3, caustic: 0.1, size: 1, } },
+  "voronoi": { sizing: "pattern", shader: Shaders.voronoiFragmentShader, params: { speed: 0.5, frame: 0, colors: ["#ff8247", "#ffe53d"], stepsPerColor: 3, colorGlow: "#ffffff", colorGap: "#2e0000", distortion: 0.4, gap: 0.04, glow: 0, scale: 0.5, }, noise: true },
+  "swirl": { sizing: "object", shader: Shaders.swirlFragmentShader, params: { speed: 0.32, frame: 0, colorBack: "#330000", colors: ["#ffd1d1", "#ff8a8a", "#660000"], bandCount: 4, twist: 0.1, center: 0.2, proportion: 0.5, softness: 0, noiseFrequency: 0.4, noise: 0.2, } },
+  "smoke-ring": { sizing: "object", shader: Shaders.smokeRingFragmentShader, params: { speed: 0.5, frame: 0, colorBack: "#000000", colors: ["#ffffff"], noiseScale: 3, noiseIterations: 8, radius: 0.25, thickness: 0.65, innerShape: 0.7, scale: 0.8, }, noise: true },
+  "static-radial-gradient": { sizing: "object", shader: Shaders.staticRadialGradientFragmentShader, params: { scale: 1, speed: 0, frame: 0, colorBack: "#000000", colors: ["#00bbff", "#00ffe1", "#ffffff"], radius: 0.8, focalDistance: 0.99, focalAngle: 0, falloff: 0.24, mixing: 0.5, distortion: 0, distortionShift: 0, distortionFreq: 12, grainMixer: 0, grainOverlay: 0, } },
+  "neuro-noise": { sizing: "pattern", shader: Shaders.neuroNoiseFragmentShader, params: { speed: 1, frame: 0, colorFront: "#ffffff", colorMid: "#47a6ff", colorBack: "#000000", brightness: 0.05, contrast: 0.3, } },
+  "metaballs": { sizing: "object", shader: Shaders.metaballsFragmentShader, params: { scale: 1, speed: 1, frame: 0, colorBack: "#000000", colors: ["#6e33cc", "#ff5500", "#ffc105", "#ffc800", "#f585ff"], count: 10, size: 0.83, }, noise: true },
+  "god-rays": { sizing: "object", shader: Shaders.godRaysFragmentShader, params: { offsetX: 0, offsetY: -0.55, colorBack: "#000000", colorBloom: "#0000ff", colors: ["#a600ff6e", "#6200fff0", "#ffffff", "#33fff5"], density: 0.3, spotty: 0.3, midIntensity: 0.4, midSize: 0.2, intensity: 0.8, bloom: 0.4, speed: 0.75, frame: 0, }, noise: true },
+  "spiral": { sizing: "pattern", shader: Shaders.spiralFragmentShader, params: { scale: 1, colorBack: "#001429", colorFront: "#79D1FF", density: 1, distortion: 0, strokeWidth: 0.5, strokeTaper: 0, strokeCap: 0, noise: 0, noiseFrequency: 0, softness: 0, speed: 1, frame: 0, } },
+  "dithering": { sizing: "pattern", shader: Shaders.ditheringFragmentShader, params: { speed: 1, frame: 0, scale: 0.6, colorBack: "#000000", colorFront: "#00b2ff", shape: "sphere", type: "4x4", size: 2, }, enums: {shape: Shaders.DitheringShapes, type: Shaders.DitheringTypes}, names: { size: "pxSize" } },
+  "pulsing-border": { sizing: "object", shader: Shaders.pulsingBorderFragmentShader, params: { speed: 1, frame: 0, scale: 0.6, colorBack: "#000000", colors: ["#0dc1fd", "#d915ef", "#ff3f2ecc"], roundness: 0.25, thickness: 0.1, margin: 0, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0, aspectRatio: "auto", softness: 0.75, intensity: 0.2, bloom: 0.25, spots: 5, spotSize: 0.5, pulse: 0.25, smoke: 0.3, smokeSize: 0.6, }, enums: {aspectRatio: Shaders.PulsingBorderAspectRatios}, noise: true },
+  "color-panels": { sizing: "object", shader: Shaders.colorPanelsFragmentShader, params: { speed: 0.5, frame: 0, colors: [ "#ff9d00", "#fd4f30", "#809bff", "#6d2eff", "#333aff", "#f15cff", "#ffd557", ], colorBack: "#000000", angle1: 0, angle2: 0, length: 1.1, edges: false, blur: 0, fadeIn: 1, fadeOut: 0.3, gradient: 0, density: 3, scale: 0.8, } },
+  "static-mesh-gradient": { sizing: "object", shader: Shaders.staticMeshGradientFragmentShader, params: { rotation: 270, speed: 0, frame: 0, colors: ["#ffad0a", "#6200ff", "#e2a3ff", "#ff99fd"], positions: 2, waveX: 1, waveXShift: 0.6, waveY: 1, waveYShift: 0.21, mixing: 0.93, grainMixer: 0, grainOverlay: 0, } },
+  "simplex-noise": { sizing: "pattern", shader: Shaders.simplexNoiseFragmentShader, params: { scale: 0.6, speed: 0.5, frame: 0, colors: ["#4449CF", "#FFD1E0", "#F94446", "#FFD36B", "#FFFFFF"], stepsPerColor: 2, softness: 0, } },
+  "perlin-noise": { sizing: "pattern", shader: Shaders.perlinNoiseFragmentShader, params: { speed: 0.5, frame: 0, colorBack: "#632ad5", colorFront: "#fccff7", proportion: 0.35, softness: 0.1, octaveCount: 1, persistence: 1, lacunarity: 1.5, } },
+} satisfies Record<string, Spec>;
+export type ShaderBackgroundVariant = keyof typeof specifications;
+export const SHADER_BACKGROUND_VARIANTS = Object.keys(specifications) as ShaderBackgroundVariant[];
+const sizingKeys = ["fit", "rotation", "scale", "offsetX", "offsetY", "originX", "originY", "worldWidth", "worldHeight"];
+function compile(variant: ShaderBackgroundVariant, input: Input) {
+  const spec: Spec = specifications[variant];
+  const values: Input = { ...(spec.sizing === "object" ? Shaders.defaultObjectSizing : Shaders.defaultPatternSizing), ...spec.params };
+  for (const [key, value] of Object.entries(input)) if (value !== undefined) values[key] = value;
+  if (variant === "water") {
+    values.image ??= "";
+    if (input.size === undefined && input.effectScale !== undefined) values.size = 10 / 9 / input.effectScale - 1 / 9;
+  }
+  if (variant === "pulsing-border") for (const side of ["Left", "Right", "Top", "Bottom"]) {
+    const key = `margin${side}`;
+    if (input[key] === undefined && input.margin != null) values[key] = input.margin;
+  }
+  if (variant === "perlin-noise") for (const key of ["softness", "octaveCount", "persistence", "lacunarity"]) values[key] ??= spec.params[key];
+  const fields = new Set([...sizingKeys, ...Object.keys(spec.params), ...(variant === "water" ? ["image"] : [])]);
+  const uniforms: Input = {};
+  for (const key of fields) {
+    if (["speed", "frame", "margin"].includes(key)) continue;
+    const value = values[key];
+    const name = `u_${spec.names?.[key] ?? key}`;
+    if (key === "colors") {
+      uniforms[name] = value.map(Shaders.getShaderColorFromString);
+      uniforms.u_colorsCount = value.length;
+    } else if (key.startsWith("color")) uniforms[name] = Shaders.getShaderColorFromString(value);
+    else if (key === "fit") uniforms[name] = (Shaders.ShaderFitOptions as Record<string, number>)[value];
+    else if (spec.enums?.[key]) uniforms[name] = spec.enums[key][value];
+    else uniforms[name] = value;
+  }
+  if (spec.noise) uniforms.u_noiseTexture = Shaders.getShaderNoiseTexture();
+  return { uniforms, fragmentShader: spec.shader, speed: spec.static ? 0 : values.speed, frame: spec.static ? input.frame ?? 0 : values.frame };
+}
+export const shaderFactories = Object.fromEntries(SHADER_BACKGROUND_VARIANTS.map(variant => [variant, (input: Input) => compile(variant, input)])) as Record<ShaderBackgroundVariant, (input: Input) => ReturnType<typeof compile>>;

package/src/motion/shader-background/src/shader-session.ts

@@ -0,0 +1,65 @@
+import { ShaderMount, emptyPixel, type ShaderMountUniforms } from "@paper-design/shaders";
+import type { shaderFactories } from "./presets";
+type Configuration = ReturnType<(typeof shaderFactories)[keyof typeof shaderFactories]>;
+type Options = {
+  speed: number; minPixelRatio?: number; maxPixelCount?: number;
+  webGlContextAttributes?: WebGLContextAttributes; mipmaps?: string[];
+};
+
+/** One GPU owner; stale image work cannot replace the current scene. */
+export function createShaderSession(reportFailure: (failed: boolean) => void) {
+  let renderer: ShaderMount | undefined;
+  let program: string | undefined;
+  let frame: number | undefined;
+  let revision = 0;
+  let disposed = false;
+  const assets = new Map<string, { promise: Promise<HTMLImageElement>; cancel: () => void }>();
+  function image(url: string) {
+    const cached = assets.get(url);
+    if (cached) return cached.promise;
+    const element = new Image();
+    let rejectPending: (error: Error) => void = () => {};
+    const promise = new Promise<HTMLImageElement>((resolve, reject) => {
+      rejectPending = reject;
+      element.crossOrigin = "anonymous";
+      element.onload = () => { element.onload = element.onerror = null; resolve(element); };
+      element.onerror = () => { element.onload = element.onerror = null; reject(new Error("Shader texture unavailable")); };
+      element.src = url || emptyPixel;
+    });
+    const entry = { promise, cancel() {
+      element.onload = element.onerror = null;
+      rejectPending(new Error("Shader texture released"));
+    } };
+    assets.set(url, entry);
+    return promise;
+  }
+  function releaseRenderer() { renderer?.dispose(); renderer = undefined; program = undefined; frame = undefined; }
+  async function update(root: HTMLElement, config: Configuration, options: Options) {
+    const token = ++revision;
+    const current = () => !disposed && token === revision;
+    try {
+      const entries = await Promise.all(Object.entries(config.uniforms).map(async ([key, value]) => [key, typeof value === "string" ? await image(value) : value]));
+      if (!current()) return;
+      const uniforms = Object.fromEntries(entries) as ShaderMountUniforms;
+      if (!renderer || program !== config.fragmentShader) {
+        releaseRenderer();
+        renderer = new ShaderMount(root, config.fragmentShader, uniforms, options.webGlContextAttributes,
+          options.speed, config.frame, options.minPixelRatio, options.maxPixelCount, options.mipmaps);
+        program = config.fragmentShader; frame = config.frame;
+      } else {
+        renderer.setUniforms(uniforms);
+        renderer.setSpeed(options.speed);
+        renderer.setMinPixelRatio(options.minPixelRatio);
+        renderer.setMaxPixelCount(options.maxPixelCount);
+        if (frame !== config.frame) { renderer.setFrame(config.frame); frame = config.frame; }
+      }
+      reportFailure(false);
+    } catch {
+      if (current()) { releaseRenderer(); reportFailure(true); }
+    }
+  }
+  return { update, get renderer() { return renderer; }, dispose() {
+    disposed = true; ++revision; releaseRenderer();
+    assets.forEach(asset => asset.cancel()); assets.clear();
+  } };
+}

package/src/motion/shared-layout-bg/index.ts

@@ -0,0 +1,3 @@
+export { default as SharedLayoutBg } from "./src/SharedLayoutBg.vue";
+
+export type * from "./src/api-types";

package/src/motion/shared-layout-bg/src/SharedLayoutBg.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+import { Comment, Fragment, cloneVNode, defineComponent, h, isVNode, mergeProps, ref, useId, type PropType, type VNode, type VNodeChild } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+export interface SharedLayoutBgProps { as?: "div" | "ul"; pillClassName?: string; inset?: number; pillContainerClassName?: string }
+function children(nodes: unknown[]): VNode[] {
+  return nodes.flatMap(node => !isVNode(node) || node.type === Comment ? [] : node.type === Fragment && Array.isArray(node.children) ? children(node.children) : typeof node.type === "symbol" ? [] : [node]);
+}
+function replaceContents(child: VNode, additions: Record<string, unknown>, contents: VNode[]) {
+  const result = cloneVNode(child, additions, true);
+  const component = (child.shapeFlag & 6) !== 0;
+  result.children = component ? { ...(child.children && typeof child.children === "object" && !Array.isArray(child.children) ? child.children : {}), default: () => contents } : contents;
+  result.shapeFlag = (result.shapeFlag & ~(8 | 16 | 32)) | (component ? 32 : 16);
+  result.patchFlag = -2;
+  return result;
+}
+export default defineComponent({
+  name: "SharedLayoutBg", inheritAttrs: false,
+  props: { as: { type: String as PropType<"div" | "ul">, default: "div" }, pillClassName: String, inset: { type: Number, default: 20 }, pillContainerClassName: String },
+  setup(props, { attrs, slots }) {
+    const active = ref<string | null>(null), id = useId(), reduced = useReducedMotion();
+    let pointerInside = false;
+    function leave(event: MouseEvent) {
+      pointerInside = false;
+      const root = event.currentTarget as HTMLElement;
+      if (!root.contains(root.ownerDocument.activeElement)) active.value = null;
+    }
+    function blur(event: FocusEvent) {
+      if (!pointerInside && !(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node | null)) active.value = null;
+    }
+    function presence() {
+      const rest = reduced.value ? { opacity: 1 } : { opacity: 1, filter: "blur(0px)" };
+      const hidden = reduced.value ? { opacity: 0 } : { opacity: 0, filter: "blur(6px)" };
+      return { initial: hidden, animate: rest, exit: (another: unknown) => another ? {} : hidden };
+    }
+    function row(child: VNode, index: number) {
+      const key = child.key == null ? `item-${index}` : String(child.key);
+      const slots = child.children && typeof child.children === "object" && !Array.isArray(child.children) ? child.children as { default?: () => VNodeChild } : undefined;
+      const body = slots ? slots.default?.() : child.children;
+      const pill = h(AnimatePresence, { custom: active.value !== null ? 1 : 0 }, () => active.value === null ? null : h(motion.div, {
+        key: "pill-wrapper", variants: presence(), initial: "initial", animate: "animate", exit: "exit", custom: active.value !== null ? 1 : 0,
+        class: cn("pointer-events-none absolute inset-y-0", props.pillContainerClassName), style: { left: `${-props.inset}px`, right: `${-props.inset}px` },
+      }, () => active.value !== key ? null : h(motion.div, { layoutId: `shared-bg-${id}`, transition: reduced.value ? { duration: 0 } : SPRING_LAYOUT, class: cn("pointer-events-none h-full w-full rounded-2xl bg-muted/80", props.pillClassName) })));
+      return replaceContents(child, {
+        key, class: cn("relative", child.props?.class), onMouseenter() { pointerInside = true; active.value = key; }, onFocusin() { active.value = key; },
+      }, [pill, h("div", { class: "relative z-10" }, body as any)]);
+    }
+    return () => h(props.as === "ul" ? motion.ul : motion.div,
+      mergeProps(attrs, { layoutRoot: true, class: cn("flex w-full flex-col", attrs.class), onMouseleave: leave, onFocusout: blur }),
+      () => children(slots.default?.() ?? []).map(row));
+  },
+});
+</script>

package/src/motion/shared-layout-bg/src/api-types.ts

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

package/src/motion/sortable-stack/index.ts

@@ -0,0 +1,10 @@
+export { default as SortableList } from "./src/SortableList.vue";
+export { default as SortableListGroup } from "./src/SortableListGroup.vue";
+export { default as SortableListItem } from "./src/SortableListItem.vue";
+export { default as SortableListHandle } from "./src/SortableListHandle.vue";
+export { default as SortableListItemContent } from "./src/SortableListItemContent.vue";
+export { default as SortableListUndo } from "./src/SortableListUndo.vue";
+export * from "./src/useSortableList";
+export { default as SortableStack } from "./src/SortableList.vue";
+
+export type * from "./src/api-types";

package/src/motion/sortable-stack/src/SortableList.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, provide, ref, useId, watch } from "vue";
+import { useMotionState } from "../../state";
+import SortableListGroup from "./SortableListGroup.vue";
+import SortableListItem from "./SortableListItem.vue";
+import SortableListHandle from "./SortableListHandle.vue";
+import SortableListItemContent from "./SortableListItemContent.vue";
+import SortableListUndo from "./SortableListUndo.vue";
+import type { MoveDirection, SortableContext } from "./context";
+const props = withDefaults(defineProps<{ modelValue?: any[]; items?: any[]; defaultItems?: any[]; getItemLabel?: (item: any) => string; label?: string; disabled?: boolean; showUndo?: boolean; itemClassName?: string }>(), { defaultItems: () => [], label: "Sortable items", showUndo: true });
+const emit = defineEmits(["update:modelValue", "update:items", "itemsChange", "change"]);
+const model = useMotionState<any[]>(props, emit, "modelValue", props.defaultItems);
+const items = computed({ get: () => props.items ?? model.value, set: (value: any[]) => { model.value = value; emit("update:items", value); emit("itemsChange", value); } });
+const ids = computed<string[]>(() => items.value.map(item => item.id));
+const history = ref<string[] | null>(null);
+const announcement = ref("");
+const root = ref<HTMLElement | null>(null);
+const id = useId();
+let draggingFrom: string[] | undefined;
+let disposed = false;
+let focusRevision = 0;
+function sameMembers(order: string[], current = ids.value) { return order.length === current.length && new Set(order).size === order.length && order.every(id => current.includes(id)); }
+watch([ids, history], ([current, previous]) => { if (new Set(current).size !== current.length) throw new Error("SortableList requires unique item ids."); if (previous && !sameMembers(previous, current)) history.value = null; }, { immediate: true, flush: "sync" });
+const canUndo = computed(() => !!history.value && sameMembers(history.value) && history.value.some((id, index) => id !== ids.value[index]));
+function reorder(order: string[]) { if (props.disabled || !sameMembers(order)) return; const lookup = new Map(items.value.map(item => [item.id, item])); items.value = order.map(id => lookup.get(id)); }
+function describe(itemId: string, position: number) { const item = items.value.find(item => item.id === itemId); return `${props.getItemLabel?.(item) ?? item?.label ?? itemId} moved to position ${position + 1} of ${ids.value.length}.`; }
+function move(itemId: string, direction: MoveDirection) { const from = ids.value.indexOf(itemId); const to = direction === "first" ? 0 : direction === "last" ? ids.value.length - 1 : from + direction; if (props.disabled || from < 0 || to < 0 || to >= ids.value.length || from === to) return; const before = ids.value.slice(); const after = before.slice(); after.splice(to, 0, after.splice(from, 1)[0]); history.value = before; reorder(after); announcement.value = describe(itemId, to); }
+function undo() { if (props.disabled || !canUndo.value || !history.value) return; const order = history.value; const focusId = order.find((id, index) => id !== ids.value[index]) ?? order[0]; reorder(order); history.value = null; announcement.value = "Previous order restored."; const revision = ++focusRevision; void nextTick(() => { if (disposed || revision !== focusRevision) return; const buttons = root.value?.querySelectorAll<HTMLButtonElement>("button[data-sortable-id]"); Array.from(buttons ?? []).find(button => button.dataset.sortableId === focusId)?.focus({ preventScroll: true }); }); }
+function begin() { draggingFrom = ids.value.slice(); }
+function finish(itemId: string) { const order = draggingFrom; draggingFrom = undefined; if (!order || !items.value.some(item => item.id === itemId) || !order.some((id, index) => id !== ids.value[index])) return; history.value = order; announcement.value = describe(itemId, ids.value.indexOf(itemId)); }
+provide<SortableContext>("orvui-sortable", { items, ids, canUndo, props, id, reorder, move, undo, begin, finish });
+onBeforeUnmount(() => { disposed = true; ++focusRevision; draggingFrom = undefined; });
+</script>
+<template>
+  <div ref="root" class="w-full max-w-md">
+    <p :id="`${id}-instructions`" class="sr-only">Drag a handle to reorder. Use Up and Down to move, Home and End to move to the edges.</p>
+    <slot :items="items" :move-item="move" :undo="undo"><SortableListGroup><SortableListItem v-for="(item, index) in items" :key="item.id" :id="item.id"><SortableListHandle /><SortableListItemContent><slot name="item" :item="item" :index="index">{{ getItemLabel?.(item) ?? item.label ?? item.id }}</slot></SortableListItemContent></SortableListItem></SortableListGroup><SortableListUndo v-if="showUndo" /></slot>
+    <p role="status" aria-live="polite" class="sr-only">{{ announcement }}</p>
+  </div>
+</template>

package/src/motion/sortable-stack/src/SortableListGroup.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import { ReorderGroup } from "motion-v";
+import { sortableContext } from "./context";
+const list = sortableContext("SortableListGroup");
+</script>
+<template><ReorderGroup axis="y" :values="list.ids.value" :aria-label="list.props.label" class="space-y-2" @update:values="list.reorder"><slot /></ReorderGroup></template>

package/src/motion/sortable-stack/src/SortableListHandle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed, inject, useAttrs } from "vue";
+import { sortableContext, type MoveDirection, type SortableItemContext } from "./context";
+defineOptions({ inheritAttrs: false });
+const props = defineProps<{ disabled?: boolean }>();
+const attrs = useAttrs();
+const list = sortableContext("SortableListHandle");
+const item = inject<SortableItemContext>("orvui-sortable-item");
+if (!item) throw new Error("SortableListHandle must be used within SortableListItem");
+const unavailable = computed(() => props.disabled || list.props.disabled);
+const label = computed(() => { const entry = list.items.value.find(entry => entry.id === item.id); return list.props.getItemLabel?.(entry) ?? entry?.label ?? item.id; });
+function pointer(event: PointerEvent) { if (event.defaultPrevented || unavailable.value || event.button !== 0) return; (event.currentTarget as HTMLElement).focus({ preventScroll: true }); item!.controls.start(event); }
+const directions: Record<string, MoveDirection> = { ArrowUp: -1, ArrowDown: 1, Home: "first", End: "last" };
+function keyboard(event: KeyboardEvent) { if (event.defaultPrevented || unavailable.value || event.ctrlKey || event.altKey || event.metaKey || !(event.key in directions)) return; event.preventDefault(); list.move(item!.id, directions[event.key]); }
+</script>
+<template><button v-bind="attrs" type="button" :disabled="unavailable" :data-sortable-id="item.id" :aria-label="(attrs['aria-label'] as string | undefined) ?? `Reorder ${label}`" :aria-describedby="[`${list.id}-instructions`, attrs['aria-describedby']].filter(Boolean).join(' ')" @pointerdown="pointer" @keydown="keyboard" class="flex size-9 shrink-0 touch-none items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40" :style="{ cursor: unavailable ? undefined : item.dragging.value ? 'grabbing' : 'grab' }"><slot><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><rect x="4" y="3" width="5" height="5" rx="1.5" /><rect x="15" y="3" width="5" height="5" rx="1.5" /><rect x="4" y="9.5" width="5" height="5" rx="1.5" /><rect x="15" y="9.5" width="5" height="5" rx="1.5" /><rect x="4" y="16" width="5" height="5" rx="1.5" /><rect x="15" y="16" width="5" height="5" rx="1.5" /></svg></slot></button></template>

package/src/motion/sortable-stack/src/SortableListItem.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { ReorderItem, useDragControls } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import { sortableContext, type SortableItemContext } from "./context";
+const props = defineProps<{ id: string; label?: string }>();
+const list = sortableContext("SortableListItem");
+if (!list.ids.value.includes(props.id)) throw new Error(`SortableListItem ${props.id} is not present in the root items`);
+const controls = useDragControls();
+const dragging = ref(false);
+const reduced = useReducedMotion();
+provide<SortableItemContext>("orvui-sortable-item", { get id() { return props.id; }, controls, dragging });
+function start() { dragging.value = true; list.begin(); }
+function end() { dragging.value = false; list.finish(props.id); }
+</script>
+<template><ReorderItem :value="id" layout="position" :drag-listener="false" :drag-controls="controls" :drag="list.props.disabled ? false : 'y'" :while-drag="reduced ? undefined : { scale: 1.025 }" :transition="reduced ? { duration: 0 } : SPRING_LAYOUT" :aria-posinset="list.ids.value.indexOf(id) + 1" :aria-setsize="list.ids.value.length" @drag-start="start" @drag-end="end" :class="cn('relative flex items-center gap-3 rounded-2xl border border-border bg-background p-3', dragging && 'shadow-lg', list.props.itemClassName)"><slot /></ReorderItem></template>

package/src/motion/sortable-stack/src/SortableListItemContent.vue

@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import { cn } from "../../../lib/utils";
+</script>
+<template><div :class="cn('min-w-0 flex-1 text-sm', $attrs.class)"><slot /></div></template>

package/src/motion/sortable-stack/src/SortableListUndo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useAttrs } from "vue";
+import { Undo2 } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { sortableContext } from "./context";
+defineOptions({ inheritAttrs: false });
+const props = defineProps<{ disabled?: boolean }>();
+const attrs = useAttrs();
+const list = sortableContext("SortableListUndo");
+function click(event: MouseEvent) { if (!event.defaultPrevented) list.undo(); }
+</script>
+<template><button v-bind="{ ...attrs, class: undefined }" type="button" :disabled="props.disabled || list.props.disabled || !list.canUndo.value" @click="click" :class="cn('mt-4 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40', attrs.class)"><slot><Undo2 class="size-[13px]" />Undo reorder</slot></button></template>

package/src/motion/sortable-stack/src/api-types.ts

@@ -0,0 +1,22 @@
+// Vue public prop types, derived from the actual components.
+export type SortableListGroupProps = InstanceType<
+  (typeof import("./SortableListGroup.vue"))["default"]
+>["$props"];
+export type SortableListHandleProps = InstanceType<
+  (typeof import("./SortableListHandle.vue"))["default"]
+>["$props"];
+export type SortableListItemContentProps = InstanceType<
+  (typeof import("./SortableListItemContent.vue"))["default"]
+>["$props"];
+export type SortableListItemProps = InstanceType<
+  (typeof import("./SortableListItem.vue"))["default"]
+>["$props"];
+export type SortableListProps = InstanceType<
+  (typeof import("./SortableList.vue"))["default"]
+>["$props"];
+export type SortableListUndoProps = InstanceType<
+  (typeof import("./SortableListUndo.vue"))["default"]
+>["$props"];
+export type SortableStackProps = InstanceType<
+  (typeof import("./SortableList.vue"))["default"]
+>["$props"];

package/src/motion/sortable-stack/src/context.ts

@@ -0,0 +1,6 @@
+import { inject, type ComputedRef, type Ref } from "vue";
+import type { useDragControls } from "motion-v";
+export type MoveDirection = -1 | 1 | "first" | "last";
+export interface SortableContext { items: Ref<any[]>; ids: ComputedRef<string[]>; canUndo: ComputedRef<boolean>; props: { disabled?: boolean; label: string; itemClassName?: string; getItemLabel?: (item: any) => string }; id: string; reorder: (ids: string[]) => void; move: (id: string, direction: MoveDirection) => void; undo: () => void; begin: () => void; finish: (id: string) => void }
+export interface SortableItemContext { id: string; controls: ReturnType<typeof useDragControls>; dragging: Ref<boolean> }
+export function sortableContext(component: string) { const context = inject<SortableContext>("orvui-sortable"); if (!context) throw new Error(`${component} must be inside SortableList`); return context; }

package/src/motion/sortable-stack/src/useSortableList.ts

@@ -0,0 +1,6 @@
+import { computed } from "vue";
+import { sortableContext } from "./context";
+export function useSortableList() {
+  const list = sortableContext("useSortableList");
+  return { ids: list.ids, disabled: computed(() => !!list.props.disabled), canUndo: list.canUndo, moveItem: list.move, undo: list.undo };
+}

package/src/motion/state.ts

@@ -0,0 +1,41 @@
+import { computed, ref, type Ref, type WritableComputedRef } from "vue";
+
+/** A value may move between parent control and local ownership during its life. */
+export function useMotionState<T>(
+  props: Record<string, any>,
+  emit: (...args: any[]) => void,
+  key: string,
+  fallback: T,
+): WritableComputedRef<T> {
+  const memory = ref(fallback) as Ref<T>;
+  return computed({
+    get(): T {
+      const supplied = props[key];
+      return supplied === undefined ? memory.value : supplied;
+    },
+    set(requested: T) {
+      memory.value = requested;
+      emit(`update:${key}`, requested);
+      if (key === "modelValue") emit("change", requested);
+    },
+  });
+}
+
+/** Rove focus within the event surface, using its own document. */
+export function focusList(event: KeyboardEvent, selector = "button:not(:disabled)") {
+  const direction = new Map<string, number>([
+    ["ArrowDown", 1], ["ArrowRight", 1], ["ArrowUp", -1], ["ArrowLeft", -1],
+  ]).get(event.key);
+  if (direction === undefined && event.key !== "Home" && event.key !== "End") return;
+  const surface = event.currentTarget as HTMLElement | null;
+  if (!surface) return;
+  const candidates = [...surface.querySelectorAll<HTMLElement>(selector)];
+  if (!candidates.length) return;
+  const current = candidates.indexOf(surface.ownerDocument.activeElement as HTMLElement);
+  const index = event.key === "Home" ? 0
+    : event.key === "End" ? candidates.length - 1
+    : current === -1 ? (direction === -1 ? candidates.length - 1 : 0)
+    : (current + direction! + candidates.length) % candidates.length;
+  event.preventDefault();
+  candidates[index]?.focus();
+}

package/src/motion/switch/index.ts

@@ -0,0 +1,3 @@
+export { default as Switch } from "./src/Switch.vue";
+
+export type * from "./src/api-types";

package/src/motion/switch/src/Switch.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, onBeforeUnmount, ref, useId, watch } from "vue";
+import { animate, motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+import { useMotionState } from "../../state";
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean; defaultValue?: boolean; disabled?: boolean; label?: string; ariaLabel?: string;
+}>(), { modelValue: undefined, defaultValue: false });
+const emit = defineEmits(["update:modelValue", "change"]);
+const checked = useMotionState(props, emit, "modelValue", props.defaultValue);
+const controlId = useId();
+const reduced = useReducedMotion();
+const thumb = ref<HTMLElement | null>(null), pressing = ref(false);
+const squashed = computed(() => pressing.value && !props.disabled && !reduced.value);
+let feedback: ReturnType<typeof animate> | undefined;
+function toggle(event: MouseEvent) {
+  if (!props.disabled && !event.defaultPrevented) checked.value = !checked.value;
+}
+function release() { pressing.value = false; }
+watch([pressing, () => props.disabled, reduced], ([down, disabled, quiet]) => {
+  feedback?.stop();
+  feedback = undefined;
+  if (down && disabled && !quiet && thumb.value)
+    feedback = animate(thumb.value, { x: [0, -2, 2, -1, 0] }, { delay: 0.2, duration: 0.6 });
+});
+onBeforeUnmount(() => { feedback?.stop(); });
+</script>
+
+<template>
+  <span :class="cn('inline-flex items-center gap-3', $attrs.class as string)" :style="$attrs.style as any">
+    <motion.button v-bind="{ ...$attrs, class: undefined, style: undefined }" :id="controlId"
+      type="button" role="switch" :aria-checked="checked" :disabled="disabled"
+      :aria-label="ariaLabel ?? ($attrs['aria-label'] as string)" :data-state="checked ? 'checked' : 'unchecked'"
+      :initial="false" @click="toggle" @pointerdown="pressing = true" @pointerup="release" @pointerleave="release" @pointercancel="release"
+      :class="cn('group peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center px-1 rounded-full outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-60', checked ? 'justify-end bg-primary' : 'justify-start bg-muted-foreground/60')">
+      <motion.div :ref="element => thumb = resolveElement<HTMLElement>(element)" layout
+        :animate="{ scale: squashed ? 0.9 : 1 }"
+        :transition="reduced ? { duration: 0 } : { type: 'spring', stiffness: 800, damping: 80, mass: 4 }"
+        class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-sm">
+        <div :class="cn('size-5', squashed && (checked ? 'ml-1' : 'mr-1'))" />
+      </motion.div>
+    </motion.button>
+    <label v-if="label" :for="controlId" class="cursor-pointer text-sm text-foreground">{{ label }}</label>
+  </span>
+</template>

package/src/motion/switch/src/api-types.ts

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

package/src/motion/table/index.ts

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

package/src/motion/table/src/EditableCell.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{ value: string; label: string }>();
+const emit = defineEmits<{ change: [value: string] }>();
+const update = (event: Event) =>
+  emit("change", (event.target as HTMLInputElement).value);
+</script>
+<template>
+  <input
+    :value="value"
+    :aria-label="label"
+    :size="1"
+    placeholder="Empty"
+    class="-mx-2 w-full min-w-0 appearance-none rounded-md border-0 bg-transparent px-2 py-1 text-foreground outline-none transition-colors placeholder:text-muted-foreground/40 focus:bg-muted focus:ring-1 focus:ring-ring"
+    @input="update"
+  />
+</template>

package/src/motion/table/src/SkeletonRows.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { TableColumn } from "./types";
+defineProps<{
+  count: number;
+  columns: TableColumn<any>[];
+  selectable: boolean;
+  rowHeight: number;
+}>();
+const alignment = (side?: string) =>
+  side === "right"
+    ? "text-right"
+    : side === "center"
+      ? "text-center"
+      : "text-left";
+</script>
+<template>
+  <tr
+    v-for="row in count"
+    :key="row"
+    aria-hidden="true"
+    :style="{ height: rowHeight + 'px' }"
+    class="border-border/60 border-b"
+  >
+    <td v-if="selectable" />
+    <td
+      v-for="column in columns"
+      :key="column.key"
+      :class="['px-4', alignment(column.align)]"
+    >
+      <div
+        :class="[
+          'h-3 animate-pulse rounded-full bg-muted',
+          column.align === 'right' ? 'ml-auto w-10' : 'w-2/3',
+        ]"
+      />
+    </td>
+    <td />
+  </tr>
+</template>