@orvui/vue 0.0.0-stage → 0.1.0

package/src/agents/voice-orb/src/renderer.ts

@@ -0,0 +1,283 @@
+export interface OrbFrame {
+  activity: number;
+  colors: readonly [string, string, string];
+  speed: number;
+  animated: boolean;
+}
+
+const vertexProgram = `
+attribute vec2 position;
+varying vec2 uv;
+void main() {
+  uv = position;
+  gl_Position = vec4(position, 0.0, 1.0);
+}`;
+
+// A spherical pigment field built from crossing waves and an analytic rim.
+const fragmentProgram = `
+precision highp float;
+varying vec2 uv;
+uniform vec2 resolution;
+uniform float clock;
+uniform float energy;
+uniform vec3 pigment;
+uniform vec3 highlight;
+uniform vec3 shade;
+
+float field(vec3 q) {
+  float a = sin(q.x * 2.7 + sin(q.y * 2.1) + q.z);
+  float b = cos(q.y * 3.2 - sin(q.z * 2.6) + q.x * .8);
+  float c = sin(q.z * 4.1 + cos(q.x * 2.2) + q.y);
+  return (a + b * .57 + c * .31) / 1.88;
+}
+void main() {
+  vec2 p = uv * resolution / min(resolution.x, resolution.y);
+  float angle = atan(p.y, p.x);
+  float wave = sin(angle * 3.0 + clock * .8) * .55
+             + cos(angle * 5.0 - clock * .65) * .3
+             + sin(angle * 2.0 + clock * .4) * .15;
+  float radius = .91 + .008 * sin(clock * 1.4) + energy * .025;
+  radius += wave * (.004 + energy * .024);
+  p /= radius;
+  float squared = dot(p, p);
+  float opacity = 1.0 - smoothstep(1.0 - 3.0 / min(resolution.x, resolution.y), 1.0, squared);
+  if (opacity < .001) { gl_FragColor = vec4(0.0); return; }
+  vec3 n = vec3(p, sqrt(max(0.0, 1.0 - squared)));
+  float time = clock * .25;
+  vec3 q = n * vec3(1.8, 1.6, 1.5) + vec3(time, -time * .7, time * .4);
+  float flow = field(q);
+  vec3 bent = q + vec3(field(q.yzx + 3.2), field(q.zxy - 2.8), flow) * (.45 + energy * .35);
+  float folds = field(bent) * .38 + n.x * .48 + n.y * .3;
+  vec3 ink = mix(shade, pigment, smoothstep(-.45, .35, folds));
+  ink = mix(ink, highlight, smoothstep(.1, .8, flow) * .3);
+  float lit = max(dot(n, normalize(vec3(-.4, .65, 1.0))), 0.0);
+  ink *= .64 + .46 * lit;
+  float seam = exp(-pow((folds + .04) * 8.0, 2.0)) * pow(n.z, .7);
+  ink = mix(ink, mix(highlight, vec3(1.0), .55), seam * .75);
+  ink = mix(ink, highlight, exp(-pow((folds - .28) * 4.0, 2.0)) * n.z * (.18 + energy * .16));
+  ink += pow(lit, 24.0) * .16;
+  ink = mix(ink, highlight, pow(1.0 - n.z, 3.0) * (.36 + .25 * max(-n.x, 0.0)));
+  float grain = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453) - .5;
+  gl_FragColor = vec4(clamp(ink + grain * .032, 0.0, 1.0), opacity);
+}`;
+
+function parseColor(value: string): Float32Array {
+  if (!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value))
+    throw new Error("VoiceOrb colors must be #RGB or #RRGGBB hex colors.");
+  const digits = value.slice(1);
+  const pairs =
+    digits.length === 3
+      ? Array.from(digits, (digit) => digit + digit)
+      : [digits.slice(0, 2), digits.slice(2, 4), digits.slice(4, 6)];
+  return Float32Array.from(pairs, (pair) => parseInt(pair, 16) / 255);
+}
+
+/** GPU lifetime and visibility scheduling are isolated from caller-owned audio. */
+export function createOrbRenderer(
+  canvas: HTMLCanvasElement,
+  read: () => OrbFrame,
+  onError: (error: Error) => void,
+) {
+  const context = canvas.getContext("webgl", {
+    alpha: true,
+    antialias: false,
+    premultipliedAlpha: false,
+    powerPreference: "low-power",
+  });
+  if (!context) throw new Error("WebGL is unavailable in this browser.");
+  const gpu = context;
+  const resources: {
+    program?: WebGLProgram;
+    buffer?: WebGLBuffer;
+    shaders: WebGLShader[];
+  } = { shaders: [] };
+  const locations = new Map<string, WebGLUniformLocation | null>();
+  let disposed = false,
+    unavailable = false,
+    failed = false,
+    inViewport = true;
+  let scheduled: number | undefined,
+    lastTime: number | undefined,
+    elapsed = 0;
+  let width = canvas.clientWidth || 256,
+    height = canvas.clientHeight || 256;
+  let colorKey = "";
+  const release = () => {
+    resources.shaders.splice(0).forEach((shader) => gpu.deleteShader(shader));
+    if (resources.buffer) gpu.deleteBuffer(resources.buffer);
+    if (resources.program) gpu.deleteProgram(resources.program);
+    resources.buffer = undefined;
+    resources.program = undefined;
+    locations.clear();
+  };
+  const link = () => {
+    const compile = (kind: number, text: string) => {
+      const shader = gpu.createShader(kind);
+      if (!shader) throw new Error("Could not allocate an orb shader.");
+      resources.shaders.push(shader);
+      gpu.shaderSource(shader, text);
+      gpu.compileShader(shader);
+      if (!gpu.getShaderParameter(shader, gpu.COMPILE_STATUS))
+        throw new Error(
+          gpu.getShaderInfoLog(shader) || "Could not compile the orb shader.",
+        );
+      return shader;
+    };
+    const vertex = compile(gpu.VERTEX_SHADER, vertexProgram);
+    const fragment = compile(gpu.FRAGMENT_SHADER, fragmentProgram);
+    const program = gpu.createProgram();
+    if (!program) throw new Error("Could not allocate the orb program.");
+    resources.program = program;
+    for (const shader of [vertex, fragment]) gpu.attachShader(program, shader);
+    gpu.linkProgram(program);
+    if (!gpu.getProgramParameter(program, gpu.LINK_STATUS))
+      throw new Error(
+        gpu.getProgramInfoLog(program) || "Could not link the orb program.",
+      );
+    gpu.useProgram(program);
+    const buffer = gpu.createBuffer();
+    if (!buffer) throw new Error("Could not allocate the orb buffer.");
+    resources.buffer = buffer;
+    gpu.bindBuffer(gpu.ARRAY_BUFFER, buffer);
+    gpu.bufferData(
+      gpu.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gpu.STATIC_DRAW,
+    );
+    const position = gpu.getAttribLocation(program, "position");
+    gpu.enableVertexAttribArray(position);
+    gpu.vertexAttribPointer(position, 2, gpu.FLOAT, false, 0, 0);
+    for (const name of [
+      "resolution",
+      "clock",
+      "energy",
+      "pigment",
+      "highlight",
+      "shade",
+    ])
+      locations.set(name, gpu.getUniformLocation(program, name));
+    colorKey = "";
+  };
+  const halt = () => {
+    if (scheduled !== undefined) cancelAnimationFrame(scheduled);
+    scheduled = undefined;
+    lastTime = undefined;
+  };
+  const canPaint = () =>
+    !disposed && !failed && !unavailable && inViewport && !document.hidden;
+  const report = (problem: unknown) => {
+    failed = true;
+    halt();
+    onError(problem instanceof Error ? problem : new Error(String(problem)));
+  };
+  const paint = (now: number) => {
+    scheduled = undefined;
+    if (!canPaint()) {
+      lastTime = undefined;
+      return;
+    }
+    try {
+      const state = read();
+      const delta =
+        lastTime === undefined
+          ? 0
+          : Math.min(50, Math.max(0, now - lastTime)) / 1000;
+      if (state.animated)
+        elapsed += delta * state.speed * (1 + state.activity * 0.6);
+      lastTime = state.animated ? now : undefined;
+      const ratio = Math.min(2, window.devicePixelRatio || 1);
+      const pixels = [
+        Math.max(1, Math.round(width * ratio)),
+        Math.max(1, Math.round(height * ratio)),
+      ];
+      if (canvas.width !== pixels[0]) canvas.width = pixels[0];
+      if (canvas.height !== pixels[1]) canvas.height = pixels[1];
+      gpu.viewport(0, 0, pixels[0], pixels[1]);
+      gpu.uniform2f(locations.get("resolution") ?? null, pixels[0], pixels[1]);
+      gpu.uniform1f(locations.get("clock") ?? null, elapsed);
+      gpu.uniform1f(locations.get("energy") ?? null, state.activity);
+      const nextColors = state.colors.join("|");
+      if (colorKey !== nextColors) {
+        const channels = state.colors.map(parseColor);
+        ["pigment", "highlight", "shade"].forEach((name, index) =>
+          gpu.uniform3fv(locations.get(name) ?? null, channels[index]),
+        );
+        colorKey = nextColors;
+      }
+      gpu.drawArrays(gpu.TRIANGLE_STRIP, 0, 4);
+      if (state.animated) requestDraw();
+    } catch (problem) {
+      report(problem);
+    }
+  };
+  function requestDraw() {
+    if (canPaint() && scheduled === undefined)
+      scheduled = requestAnimationFrame(paint);
+  }
+  const lost = (event: Event) => {
+    event.preventDefault();
+    unavailable = true;
+    halt();
+  };
+  const restored = () => {
+    if (disposed) return;
+    try {
+      release();
+      link();
+      unavailable = false;
+      failed = false;
+      requestDraw();
+    } catch (problem) {
+      report(problem);
+    }
+  };
+  const visibility = () => {
+    if (document.hidden) halt();
+    else requestDraw();
+  };
+  try {
+    link();
+  } catch (problem) {
+    release();
+    throw problem;
+  }
+  const resize =
+    typeof ResizeObserver === "undefined"
+      ? null
+      : new ResizeObserver((entries) => {
+          const entry = entries[0];
+          if (entry) {
+            width = entry.contentRect.width || width;
+            height = entry.contentRect.height || height;
+          }
+          requestDraw();
+        });
+  resize?.observe(canvas);
+  const intersection =
+    typeof IntersectionObserver === "undefined"
+      ? null
+      : new IntersectionObserver((entries) => {
+          inViewport = entries[0]?.isIntersecting ?? true;
+          if (inViewport) requestDraw();
+          else halt();
+        });
+  intersection?.observe(canvas);
+  canvas.addEventListener("webglcontextlost", lost);
+  canvas.addEventListener("webglcontextrestored", restored);
+  document.addEventListener("visibilitychange", visibility);
+  requestDraw();
+  return {
+    requestDraw,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      halt();
+      resize?.disconnect();
+      intersection?.disconnect();
+      canvas.removeEventListener("webglcontextlost", lost);
+      canvas.removeEventListener("webglcontextrestored", restored);
+      document.removeEventListener("visibilitychange", visibility);
+      release();
+    },
+  };
+}

package/src/blocks/availability-scheduler/index.ts

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

package/src/blocks/availability-scheduler/src/AvailabilityScheduler.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { motion, AnimatePresence } from "motion-v";
+import { Plus, X } from "lucide-vue-next";
+import { Switch } from "../../../motion/switch";
+import { Tooltip } from "../../../motion/tooltip";
+import { SPRING_LAYOUT, SPRING_PRESS } from "../../../lib/ease";
+import {
+  WEEKDAYS,
+  panelKey,
+  startOptions,
+  endOptions,
+  type WeekAvailability,
+} from "./types";
+import { useSchedule } from "./use-schedule";
+import TimeSelect from "./TimeSelect.vue";
+import CopyMenu from "./CopyMenu.vue";
+const props = withDefaults(
+  defineProps<{
+    modelValue?: WeekAvailability;
+    defaultValue?: WeekAvailability;
+    step?: number;
+    disabled?: boolean;
+  }>(),
+  { step: 30 },
+);
+const emit = defineEmits<{
+  "update:modelValue": [value: WeekAvailability];
+  change: [value: WeekAvailability];
+}>();
+const {
+  week,
+  reduce,
+  options,
+  openDay,
+  openPanel,
+  panel,
+  enabled,
+  time,
+  add,
+  remove,
+  copy,
+} = useSchedule(props, (value) => {
+  emit("update:modelValue", value);
+  emit("change", value);
+});
+const edges = ["start", "end"] as const;
+</script>
+<template>
+  <div class="w-full max-w-xl divide-y divide-border">
+    <motion.div
+      v-for="day in WEEKDAYS"
+      :key="day.key"
+      :layout="reduce ? false : 'position'"
+      :transition="SPRING_LAYOUT"
+      :style="{ zIndex: openDay === day.key ? 1 : undefined }"
+      class="relative flex flex-wrap items-start gap-3 py-4 sm:flex-nowrap sm:gap-4"
+    >
+      <div
+        class="order-1 flex flex-1 items-center gap-2.5 sm:w-36 sm:flex-none sm:pt-1"
+      >
+        <Switch
+          :model-value="week[day.key].enabled"
+          :disabled="disabled"
+          :aria-label="`Toggle ${day.label} availability`"
+          class="scale-90"
+          @update:model-value="enabled(day.key, $event)"
+        /><span class="text-sm font-medium">{{ day.label }}</span>
+      </div>
+      <div
+        class="order-3 flex w-full min-w-0 flex-col gap-2 sm:order-2 sm:w-auto sm:flex-1"
+      >
+        <AnimatePresence :initial="false" mode="popLayout"
+          ><template v-if="week[day.key].enabled"
+            ><motion.div
+              v-for="(range, index) in week[day.key].ranges"
+              :key="range.id"
+              :layout="reduce ? false : 'position'"
+              :style="{
+                zIndex: openPanel?.startsWith(`${day.key}:${range.id}:`)
+                  ? 1
+                  : undefined,
+              }"
+              :initial="
+                reduce
+                  ? { opacity: 0 }
+                  : { opacity: 0, y: -6, filter: 'blur(4px)' }
+              "
+              :animate="{ opacity: 1, y: 0, filter: 'blur(0px)' }"
+              :exit="
+                reduce
+                  ? { opacity: 0 }
+                  : { opacity: 0, y: -4, filter: 'blur(4px)' }
+              "
+              :transition="SPRING_LAYOUT"
+              class="relative flex items-center gap-2"
+            >
+              <template v-for="edge in edges" :key="edge"
+                ><span v-if="edge === 'end'" class="text-muted-foreground"
+                  >–</span
+                >
+                <div class="min-w-0 flex-1 sm:max-w-[132px]">
+                  <TimeSelect
+                    :value="range[edge]"
+                    :label="`${day.label} ${edge} time ${index + 1}`"
+                    :options="
+                      edge === 'start'
+                        ? startOptions(options, range.end, range.start)
+                        : endOptions(options, range.start, range.end)
+                    "
+                    :open="openPanel === panelKey(day.key, range.id, edge)"
+                    :disabled="disabled"
+                    @change="time(day.key, index, edge, $event)"
+                    @update:open="panel(day.key, range.id, edge, $event)"
+                  /></div
+              ></template>
+              <Tooltip content="Remove"
+                ><motion.button
+                  type="button"
+                  :disabled="disabled"
+                  :aria-label="`Remove ${day.label} range ${index + 1}`"
+                  class="flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+                  :while-press="reduce ? undefined : { scale: 0.92 }"
+                  :transition="SPRING_PRESS"
+                  @click="remove(day.key, range.id)"
+                  ><X
+                    class="size-4" /></motion.button></Tooltip></motion.div></template
+          ><motion.span
+            v-else
+            key="unavailable"
+            :layout="reduce ? false : 'position'"
+            :initial="reduce ? { opacity: 0 } : { opacity: 0, y: -4 }"
+            :animate="{ opacity: 1, y: 0 }"
+            :exit="reduce ? { opacity: 0 } : { opacity: 0, y: -4 }"
+            :transition="SPRING_LAYOUT"
+            class="py-1 text-sm text-muted-foreground sm:py-2"
+            >Unavailable</motion.span
+          ></AnimatePresence
+        >
+      </div>
+      <div class="order-2 flex shrink-0 items-center gap-1 pt-0.5 sm:order-3">
+        <Tooltip content="Add time"
+          ><motion.button
+            type="button"
+            :disabled="disabled"
+            :aria-label="`Add time range to ${day.label}`"
+            class="flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+            :while-press="reduce ? undefined : { scale: 0.92 }"
+            :transition="SPRING_PRESS"
+            @click="add(day.key)"
+            ><Plus class="size-4" /></motion.button></Tooltip
+        ><CopyMenu
+          :from-label="day.label"
+          :disabled="disabled"
+          :reduce="reduce"
+          @apply="copy(day.key, $event)"
+        />
+      </div>
+    </motion.div>
+  </div>
+</template>

package/src/blocks/availability-scheduler/src/CopyMenu.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from "vue";
+import { motion, AnimatePresence } from "motion-v";
+import { Copy, Check } from "lucide-vue-next";
+import { Checkbox } from "../../../motion/checkbox";
+import {
+  MorphPopover,
+  MorphPopoverTrigger,
+  MorphPopoverContent,
+} from "../../../motion/popover";
+import { Tooltip } from "../../../motion/tooltip";
+import { SPRING_PRESS } from "../../../lib/ease";
+import { WEEKDAYS, type DayKey } from "./types";
+const props = defineProps<{
+    fromLabel: string;
+    reduce: boolean;
+    disabled?: boolean;
+  }>(),
+  emit = defineEmits<{ apply: [targets: DayKey[]] }>();
+const open = ref(false),
+  copied = ref(false),
+  picked = ref(new Set<DayKey>()),
+  others = computed(() =>
+    WEEKDAYS.filter((day) => day.label !== props.fromLabel),
+  );
+let reset: ReturnType<typeof setTimeout> | undefined;
+function toggle(id: DayKey) {
+  const selection = new Set(picked.value);
+  if (selection.has(id)) selection.delete(id);
+  else selection.add(id);
+  picked.value = selection;
+}
+function apply(targets: DayKey[]) {
+  if (!targets.length) return;
+  emit("apply", targets);
+  open.value = false;
+  picked.value = new Set();
+  copied.value = true;
+  clearTimeout(reset);
+  reset = setTimeout(() => {
+    copied.value = false;
+  }, 1200);
+}
+onBeforeUnmount(() => clearTimeout(reset));
+</script>
+<template>
+  <MorphPopover v-model:open="open"
+    ><Tooltip content="Copy times"
+      ><MorphPopoverTrigger
+        ><motion.button
+          type="button"
+          :disabled="disabled"
+          :aria-label="`Copy ${fromLabel} hours to other days`"
+          class="flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+          :while-press="reduce ? undefined : { scale: 0.92 }"
+          :transition="SPRING_PRESS"
+          ><AnimatePresence mode="popLayout" :initial="false"
+            ><motion.span
+              :key="copied ? 'done' : 'copy'"
+              :initial="reduce ? { opacity: 0 } : { opacity: 0, scale: 0.5 }"
+              :animate="{ opacity: 1, scale: 1 }"
+              :exit="reduce ? { opacity: 0 } : { opacity: 0, scale: 0.5 }"
+              :transition="SPRING_PRESS"
+              ><component
+                :is="copied ? Check : Copy"
+                class="size-4" /></motion.span></AnimatePresence></motion.button></MorphPopoverTrigger></Tooltip
+    ><MorphPopoverContent align="end" class="w-52 p-2"
+      ><p class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+        Copy times to
+      </p>
+      <div class="flex flex-col">
+        <Checkbox
+          v-for="day in others"
+          :key="day.key"
+          :model-value="picked.has(day.key)"
+          :label="day.label"
+          :aria-label="day.label"
+          class="w-full flex-row-reverse justify-between rounded-lg px-2 py-1.5 transition-colors hover:bg-muted [&_button]:size-4 [&_button]:rounded-[5px] [&_button]:border"
+          @update:model-value="toggle(day.key)"
+        />
+      </div>
+      <div
+        class="mt-1 flex items-center gap-2 border-t border-border px-1 pt-2"
+      >
+        <button
+          type="button"
+          class="flex-1 rounded-lg px-2 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          @click="apply(others.map((day) => day.key))"
+        >
+          Every day</button
+        ><button
+          type="button"
+          :disabled="!picked.size"
+          class="flex-1 rounded-lg bg-primary px-2 py-1.5 text-xs font-semibold text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+          @click="apply([...picked])"
+        >
+          Apply
+        </button>
+      </div></MorphPopoverContent
+    ></MorphPopover
+  >
+</template>

package/src/blocks/availability-scheduler/src/TimeSelect.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "../../../motion/select";
+import type { TimeOption } from "./types";
+defineProps<{
+  value: string;
+  open: boolean;
+  options: TimeOption[];
+  disabled?: boolean;
+  label?: string;
+}>();
+const emit = defineEmits<{
+  change: [value: string];
+  "update:open": [open: boolean];
+}>();
+</script>
+<template>
+  <Select
+    :model-value="value"
+    :open="open"
+    :disabled="disabled"
+    class="w-full"
+    @update:model-value="emit('change', $event)"
+    @update:open="emit('update:open', $event)"
+    ><SelectTrigger :aria-label="label" class="tabular-nums"
+      ><SelectValue class="whitespace-nowrap" /></SelectTrigger
+    ><SelectContent
+      ><div class="max-h-56 overflow-y-auto overscroll-contain">
+        <SelectItem
+          v-for="{ value: option, label: caption } in options"
+          :key="option"
+          :value="option"
+          class="tabular-nums"
+          >{{ caption }}</SelectItem
+        >
+      </div></SelectContent
+    ></Select
+  >
+</template>

package/src/blocks/availability-scheduler/src/api-types.ts

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