@orvui/vue 0.0.0-stage → 0.1.0

package/src/agents/loading-states/src/AgentProgress.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_IN_OUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    elapsedSeconds?: number;
+    initialSeconds?: number;
+    running?: boolean;
+  }>(),
+  { label: "Churning", initialSeconds: 0, running: true },
+);
+const reduced = useReducedMotion();
+const internal = ref(props.initialSeconds);
+const elapsed = computed(() =>
+  Math.max(0, props.elapsedSeconds ?? internal.value),
+);
+const readout = computed(() => {
+  const seconds = elapsed.value;
+  const remainder = (seconds % 60).toFixed(1);
+  return seconds < 60
+    ? `${seconds.toFixed(1)}s`
+    : `${Math.floor(seconds / 60)}m ${remainder}s`;
+});
+let clock: ReturnType<typeof setInterval> | undefined;
+let mounted = false;
+function synchronize() {
+  if (clock !== undefined) clearInterval(clock);
+  clock = undefined;
+  if (!mounted || !props.running || props.elapsedSeconds !== undefined) return;
+  const origin = performance.now();
+  const start = props.initialSeconds;
+  clock = setInterval(() => {
+    internal.value = start + (performance.now() - origin) / 1000;
+  }, 100);
+}
+watch(
+  [() => props.running, () => props.elapsedSeconds, () => props.initialSeconds],
+  synchronize,
+);
+onMounted(() => {
+  mounted = true;
+  synchronize();
+});
+onBeforeUnmount(() => {
+  mounted = false;
+  if (clock !== undefined) clearInterval(clock);
+});
+</script>
+<template>
+  <span
+    role="status"
+    :aria-label="`${label}, in progress`"
+    :class="
+      cn(
+        'inline-flex items-center gap-3 font-mono text-sm text-muted-foreground',
+        $attrs.class,
+      )
+    "
+  >
+    <span aria-hidden="true" class="grid size-5 shrink-0 grid-cols-3 gap-[2px]">
+      <motion.span
+        v-for="cell in 9"
+        :key="cell"
+        class="rounded-[1px] bg-current"
+        :animate="
+          reduced
+            ? { opacity: 0.55 }
+            : { opacity: [0.28, 1, 0.28], scale: [0.72, 1, 0.72] }
+        "
+        :transition="
+          reduced
+            ? { duration: 0 }
+            : {
+                duration: 1.55,
+                ease: EASE_IN_OUT,
+                repeat: Infinity,
+                delay: (cell - 1) * 0.14,
+              }
+        "
+      />
+    </span>
+    <span class="font-sans font-medium">{{ label }}</span
+    ><span aria-hidden="true" class="tabular-nums text-muted-foreground/70">{{
+      readout
+    }}</span>
+  </span>
+</template>

package/src/agents/loading-states/src/CascadePhrase.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT, SPRING_SWAP } from "../../../lib/ease";
+const props = defineProps<{ phrase: string; duration: number }>();
+const glyphs = computed(() => Array.from(`${props.phrase}…`));
+const choreography = {
+  enter: { opacity: 0, y: "100%" },
+  shown: (order: unknown) => ({
+    opacity: 1,
+    y: "0%",
+    transition: { ...SPRING_SWAP, delay: Number(order) * 0.025 },
+  }),
+  leave: (order: unknown) => ({
+    opacity: 0,
+    y: "-100%",
+    transition: {
+      duration: 0.14,
+      ease: EASE_OUT,
+      delay: Number(order) * 0.01125,
+    },
+  }),
+};
+</script>
+<template>
+  <motion.span
+    class="col-start-1 row-start-1 inline-block justify-self-start whitespace-pre"
+    initial="enter"
+    animate="shown"
+    exit="leave"
+  >
+    <motion.span
+      v-for="(glyph, index) in glyphs"
+      :key="index"
+      :custom="index"
+      :variants="choreography"
+      initial="enter"
+      animate="shown"
+      exit="leave"
+      class="orvui-agent-text-shimmer inline-block whitespace-pre will-change-[opacity,transform]"
+      :style="{
+        animation: `orvui-agent-text-shimmer ${duration}s linear infinite`,
+      }"
+      >{{ glyph }}</motion.span
+    >
+  </motion.span>
+</template>

package/src/agents/loading-states/src/LoadingStates.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts">
+import ReasoningText from "./ReasoningText.vue";
+defineOptions({ inheritAttrs: false });
+</script>
+<template><ReasoningText v-bind="$attrs" /></template>

package/src/agents/loading-states/src/ReasoningText.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { Loader } from "../../../motion/loader";
+import { TextScramble } from "../../../motion/text-animation";
+import { EASE_OUT } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { RenderNode, type Content } from "../../shared";
+import CascadePhrase from "./CascadePhrase.vue";
+import ThinkingShimmer from "./ThinkingShimmer.vue";
+export type ReasoningTextVariant = "cascade" | "swap" | "scramble";
+const fallback = () => [
+  "Thinking",
+  "Reading the context",
+  "Connecting the details",
+  "Forming a response",
+];
+const props = withDefaults(
+  defineProps<{
+    phrases?: string[];
+    variant?: ReasoningTextVariant;
+    interval?: number;
+    shimmerDuration?: number;
+    indicator?: Content;
+  }>(),
+  {
+    phrases: () => [
+      "Thinking",
+      "Reading the context",
+      "Connecting the details",
+      "Forming a response",
+    ],
+    variant: "cascade",
+    interval: 1800,
+    shimmerDuration: 2.2,
+    indicator: undefined,
+  },
+);
+const reduced = useReducedMotion();
+const identity = useId();
+const cursor = ref(0);
+const choices = computed(() =>
+  props.phrases.length ? props.phrases : fallback(),
+);
+const selected = computed(
+  () => choices.value[cursor.value % choices.value.length],
+);
+const measure = computed(() =>
+  choices.value.reduce(
+    (previous, candidate) =>
+      candidate.length > previous.length ? candidate : previous,
+    "",
+  ),
+);
+let active = false;
+let clock: ReturnType<typeof setInterval> | undefined;
+function cycle() {
+  if (clock !== undefined) clearInterval(clock);
+  clock = undefined;
+  if (!active || choices.value.length < 2) return;
+  clock = setInterval(
+    () => {
+      cursor.value = (cursor.value + 1) % choices.value.length;
+    },
+    Math.max(600, props.interval),
+  );
+}
+watch([() => props.interval, () => choices.value.length], cycle);
+onMounted(() => {
+  active = true;
+  cycle();
+});
+onBeforeUnmount(() => {
+  active = false;
+  if (clock !== undefined) clearInterval(clock);
+});
+</script>
+<template>
+  <span
+    role="status"
+    aria-live="polite"
+    :aria-labelledby="identity"
+    :class="
+      cn(
+        'inline-flex items-center gap-2 text-sm font-medium text-muted-foreground',
+        $attrs.class,
+      )
+    "
+  >
+    <span
+      aria-hidden="true"
+      class="inline-flex size-3 shrink-0 items-center justify-center"
+      ><slot name="indicator"
+        ><RenderNode v-if="indicator != null" :node="indicator" /><Loader
+          v-else
+          variant="ascii-line"
+          :size="14"
+          :speed="0.8"
+          label="Reasoning" /></slot
+    ></span>
+    <span aria-hidden="true" class="grid overflow-hidden text-left">
+      <span class="invisible col-start-1 row-start-1 whitespace-nowrap"
+        >{{ measure }}…</span
+      >
+      <ThinkingShimmer
+        v-if="variant === 'cascade' && reduced"
+        :duration="shimmerDuration"
+        class="col-start-1 row-start-1 inline-block justify-self-start whitespace-pre"
+        >{{ selected }}…</ThinkingShimmer
+      >
+      <AnimatePresence v-else-if="variant === 'cascade'" :initial="false"
+        ><CascadePhrase
+          :key="selected"
+          :phrase="selected"
+          :duration="shimmerDuration"
+      /></AnimatePresence>
+      <TextScramble
+        v-else-if="variant === 'scramble'"
+        :text="`${selected}…`"
+        class="orvui-agent-text-shimmer col-start-1 row-start-1 justify-self-start tabular-nums"
+        :style="{
+          animation: `orvui-agent-text-shimmer ${shimmerDuration}s linear infinite`,
+        }"
+      />
+      <AnimatePresence v-else :initial="false"
+        ><motion.span
+          :key="selected"
+          class="orvui-agent-text-shimmer col-start-1 row-start-1 inline-block justify-self-start whitespace-nowrap will-change-[opacity,transform]"
+          :style="{
+            animation: `orvui-agent-text-shimmer ${shimmerDuration}s linear infinite`,
+          }"
+          :initial="reduced ? { opacity: 0 } : { opacity: 0, y: 3 }"
+          :animate="reduced ? { opacity: 1 } : { opacity: 1, y: 0 }"
+          :exit="reduced ? { opacity: 0 } : { opacity: 0, y: -3 }"
+          :transition="{ duration: reduced ? 0.12 : 0.2, ease: EASE_OUT }"
+          >{{ selected }}…</motion.span
+        ></AnimatePresence
+      > </span
+    ><span :id="identity" class="sr-only">{{ selected }}</span>
+  </span>
+</template>

package/src/agents/loading-states/src/ThinkingShimmer.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { TextShimmer } from "../../../motion/text-animation";
+const props = withDefaults(defineProps<{ duration?: number }>(), {
+  duration: 1.8,
+});
+</script>
+<template>
+  <TextShimmer as="span" class="font-medium" :duration="props.duration"
+    ><slot>Thinking…</slot></TextShimmer
+  >
+</template>
+<style>
+.orvui-agent-text-shimmer {
+  color: transparent;
+  background-clip: text;
+  background-size: 200% 100%;
+  background-image: linear-gradient(
+    110deg,
+    var(--muted-foreground) 30%,
+    var(--foreground) 50%,
+    var(--muted-foreground) 70%
+  );
+}
+@keyframes orvui-agent-text-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .orvui-agent-text-shimmer {
+    animation: none !important;
+  }
+}
+</style>

package/src/agents/loading-states/src/api-types.ts

@@ -0,0 +1,10 @@
+// Vue public prop types, derived from the actual components.
+export type AgentProgressProps = InstanceType<
+  (typeof import("./AgentProgress.vue"))["default"]
+>["$props"];
+export type ReasoningTextProps = InstanceType<
+  (typeof import("./ReasoningText.vue"))["default"]
+>["$props"];
+export type ThinkingShimmerProps = InstanceType<
+  (typeof import("./ThinkingShimmer.vue"))["default"]
+>["$props"];

package/src/agents/message/index.ts

@@ -0,0 +1,14 @@
+export { default as Message } from "./src/Message.vue";
+export { default as MessageGroup } from "./src/MessageGroup.vue";
+export { default as MessageAvatar } from "./src/MessageAvatar.vue";
+export { default as MessageContent } from "./src/MessageContent.vue";
+export { default as MessageHeader } from "./src/MessageHeader.vue";
+export { default as MessageFooter } from "./src/MessageFooter.vue";
+export { default as MessageMarker } from "./src/MessageMarker.vue";
+export { default as MessageTyping } from "./src/MessageTyping.vue";
+export * from "./src/context";
+
+export type * from "./src/api-types";
+
+export * from "../message-bubble";
+export * from "../message-scroller";

package/src/agents/message/src/Message.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { useReduced } from "../../shared";
+import { messageKey, type MessageFrom } from "./context";
+const props = withDefaults(
+  defineProps<{ from: MessageFrom; animateIn?: boolean }>(),
+  { animateIn: false },
+);
+const side = computed(() => props.from);
+provide(messageKey, side);
+const reduced = useReduced();
+const initial = computed(() =>
+  props.animateIn && !reduced.value ? { opacity: 0, y: 8, scale: 0.95 } : false,
+);
+</script>
+<template>
+  <motion.article
+    data-slot="message"
+    :data-from="from"
+    :aria-label="`${from} message`"
+    :class="
+      cn(
+        'group/message flex w-full items-start gap-2',
+        from === 'user' ? 'flex-row-reverse' : 'flex-row',
+      )
+    "
+    :style="{ transformOrigin: from === 'user' ? '100% 100%' : '0% 100%' }"
+    :initial="initial"
+    :animate="{ opacity: 1, y: 0, scale: 1 }"
+    :exit="reduced ? { opacity: 0 } : { opacity: 0, y: -3, scale: 0.99 }"
+    :transition="
+      reduced
+        ? { duration: 0.12 }
+        : { type: 'spring', stiffness: 480, damping: 32, mass: 0.62 }
+    "
+    ><slot
+  /></motion.article>
+</template>

package/src/agents/message/src/MessageAvatar.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { h, renderSlot, useAttrs } from "vue";
+import { cn } from "../../../lib/utils";
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(defineProps<{ placeholder?: boolean }>(), {
+  placeholder: false,
+});
+const slots = defineSlots<{ default?(props: {}): any }>();
+const attrs = useAttrs();
+const frame =
+  "grid size-7 shrink-0 place-items-center overflow-hidden rounded-full bg-muted text-xs font-medium text-muted-foreground [&_img]:size-full [&_img]:object-cover [&_svg]:size-3.5";
+const RenderFrame = () => {
+  const presentation = props.placeholder
+    ? { class: "invisible", hidden: true }
+    : { class: undefined, hidden: undefined };
+  return h(
+    "div",
+    {
+      "data-slot": "message-avatar",
+      ...attrs,
+      "aria-hidden": presentation.hidden,
+      class: cn(frame, presentation.class, attrs.class),
+    },
+    [renderSlot(slots, "default")],
+  );
+};
+</script>
+<template><RenderFrame /></template>

package/src/agents/message/src/MessageContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "../../../lib/utils";
+import { useMessageAlignment } from "./alignment";
+defineOptions({ inheritAttrs: false });
+const end = useMessageAlignment();
+</script>
+<template>
+  <div
+    data-slot="message-content"
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex min-w-0 flex-1 flex-col gap-1.5',
+        end ? 'items-end' : 'items-start',
+        $attrs.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/agents/message/src/MessageFooter.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "../../../lib/utils";
+import { useMessageAlignment } from "./alignment";
+defineOptions({ inheritAttrs: false });
+const end = useMessageAlignment();
+</script>
+<template>
+  <div
+    data-slot="message-footer"
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex min-h-5 items-center gap-1 px-1 text-[11px] text-muted-foreground',
+        end ? 'justify-end' : 'justify-start',
+        $attrs.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/agents/message/src/MessageGroup.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { h, renderSlot, useAttrs } from "vue";
+import { cn } from "../../../lib/utils";
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(defineProps<{ spacing?: "compact" | "default" }>(), {
+  spacing: "compact",
+});
+const slots = defineSlots<{ default?(props: {}): any }>();
+const attrs = useAttrs();
+const gaps = { compact: "gap-1.5", default: "gap-4" } as const;
+const RenderFrame = () =>
+  h(
+    "div",
+    {
+      "data-slot": "message-group",
+      ...attrs,
+      class: cn(
+        "flex w-full flex-col",
+        gaps[props.spacing === "compact" ? "compact" : "default"],
+        attrs.class,
+      ),
+    },
+    [renderSlot(slots, "default")],
+  );
+</script>
+<template><RenderFrame /></template>

package/src/agents/message/src/MessageHeader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "../../../lib/utils";
+import { useMessageAlignment } from "./alignment";
+defineOptions({ inheritAttrs: false });
+const end = useMessageAlignment();
+</script>
+<template>
+  <div
+    data-slot="message-header"
+    v-bind="$attrs"
+    :class="
+      cn(
+        'flex items-center gap-1.5 px-1 text-[11px] leading-none text-muted-foreground',
+        end ? 'justify-end' : 'justify-start',
+        $attrs.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/agents/message/src/MessageMarker.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from "../../../lib/utils";
+defineOptions({ inheritAttrs: false });
+</script>
+<template>
+  <div
+    data-slot="message-marker"
+    v-bind="$attrs"
+    :class="
+      cn(
+        'mx-auto flex w-fit max-w-[88%] items-center gap-1.5 rounded-full bg-muted/70 px-2.5 py-1 text-center text-xs text-muted-foreground',
+        $attrs.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/agents/message/src/MessageTyping.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+defineOptions({ inheritAttrs: false });
+withDefaults(defineProps<{ label?: string }>(), { label: "Responding" });
+const reduced = useReducedMotion();
+const phases = computed(() =>
+  [0, 0.14, 0.28].map((delay) => ({
+    delay,
+    duration: 1.05,
+    ease: EASE_OUT,
+    repeat: Infinity,
+  })),
+);
+</script>
+<template>
+  <span
+    data-slot="message-typing"
+    v-bind="$attrs"
+    :class="cn('inline-flex h-5 items-center gap-1', $attrs.class)"
+    ><span class="sr-only">{{ label }}</span
+    ><motion.span
+      v-for="(phase, index) in phases"
+      :key="index"
+      aria-hidden="true"
+      class="size-1 rounded-full bg-current"
+      :animate="
+        reduced
+          ? { opacity: 0.45 }
+          : { opacity: [0.28, 0.85, 0.28], y: [0, -2, 0] }
+      "
+      :transition="reduced ? { duration: 0 } : phase"
+  /></span>
+</template>

package/src/agents/message/src/alignment.ts

@@ -0,0 +1,9 @@
+import { computed, inject } from "vue";
+import { messageKey, type MessageFrom } from "./context";
+export function useMessageAlignment() {
+  const inherited = inject(
+    messageKey,
+    computed<MessageFrom>(() => "assistant"),
+  );
+  return computed(() => inherited.value === "user");
+}

package/src/agents/message/src/api-types.ts

@@ -0,0 +1,25 @@
+// Vue public prop types, derived from the actual components.
+export type MessageAvatarProps = InstanceType<
+  (typeof import("./MessageAvatar.vue"))["default"]
+>["$props"];
+export type MessageContentProps = InstanceType<
+  (typeof import("./MessageContent.vue"))["default"]
+>["$props"];
+export type MessageFooterProps = InstanceType<
+  (typeof import("./MessageFooter.vue"))["default"]
+>["$props"];
+export type MessageGroupProps = InstanceType<
+  (typeof import("./MessageGroup.vue"))["default"]
+>["$props"];
+export type MessageHeaderProps = InstanceType<
+  (typeof import("./MessageHeader.vue"))["default"]
+>["$props"];
+export type MessageMarkerProps = InstanceType<
+  (typeof import("./MessageMarker.vue"))["default"]
+>["$props"];
+export type MessageProps = InstanceType<
+  (typeof import("./Message.vue"))["default"]
+>["$props"];
+export type MessageTypingProps = InstanceType<
+  (typeof import("./MessageTyping.vue"))["default"]
+>["$props"];

package/src/agents/message/src/context.ts

@@ -0,0 +1,5 @@
+import type { ComputedRef, InjectionKey } from "vue";
+export type MessageFrom = "user" | "assistant";
+export const messageKey = Symbol("orvui-message") as InjectionKey<
+  ComputedRef<MessageFrom>
+>;

package/src/agents/message-bubble/index.ts

@@ -0,0 +1,7 @@
+export { default as MessageBubble } from "./src/MessageBubble.vue";
+export { default as MessageBubbleContent } from "./src/MessageBubbleContent.vue";
+export { default as MessageBubbleGroup } from "./src/MessageBubbleGroup.vue";
+export { default as MessageBubbleCollapsible } from "./src/MessageBubbleCollapsible.vue";
+export * from "./src/context";
+
+export type * from "./src/api-types";

package/src/agents/message-bubble/src/MessageBubble.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, inject, provide } from "vue";
+import { motion } from "motion-v";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { messageKey } from "../../message/src/context";
+import {
+  bubbleKey,
+  type MessageBubbleAlign,
+  type MessageBubbleVariant,
+} from "./context";
+const props = withDefaults(
+  defineProps<{
+    variant?: MessageBubbleVariant;
+    align?: MessageBubbleAlign;
+    animateIn?: boolean;
+  }>(),
+  { variant: "soft", animateIn: false },
+);
+const parent = inject(
+  messageKey,
+  computed(() => "assistant" as const),
+);
+const alignment = computed(
+  () => props.align ?? (parent.value === "user" ? "end" : "start"),
+);
+const context = computed(() => ({
+  align: alignment.value,
+  variant: props.variant,
+  animateIn: props.animateIn,
+}));
+provide(bubbleKey, context);
+const reduced = useReducedMotion();
+</script>
+<template>
+  <motion.div
+    data-slot="message-bubble"
+    :data-align="alignment"
+    :data-variant="variant"
+    :class="
+      cn(
+        'group/bubble flex w-full flex-col',
+        alignment === 'end' ? 'items-end' : 'items-start',
+      )
+    "
+    :exit="{ opacity: 0, y: -3, scale: 0.99 }"
+    :transition="reduced ? { duration: 0 } : SPRING_LAYOUT"
+    ><slot
+  /></motion.div>
+</template>