@orvui/vue 0.0.0-stage → 0.1.0

package/src/motion/select/src/context.ts

@@ -0,0 +1,308 @@
+import {
+  computed,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useId,
+  watch,
+  type InjectionKey,
+} from "vue";
+import { animate, motionValue } from "motion-v";
+import { EASE_OUT } from "../../../lib/ease";
+import {
+  resolveElement,
+  useFloatingLayer,
+  useReducedMotion,
+} from "../../../lib/composables";
+export interface SelectProps {
+  modelValue?: string;
+  value?: string;
+  defaultValue?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+// These visual endpoints and timings are part of the frozen interaction contract.
+export const UNFOLD_SPRING = {
+  type: "spring",
+  visualDuration: 0.2,
+  bounce: 0.12,
+} as const;
+export const UNFOLD_EXIT = { duration: 0.2, ease: EASE_OUT } as const;
+export const MORPH = { type: "spring", duration: 0.5, bounce: 0.22 } as const;
+export const ROW =
+  "flex w-full items-center justify-between gap-2 px-3.5 py-2.5 text-sm";
+export const ITEM_VARIANTS = {
+  hidden: { opacity: 0, y: -4, transition: { duration: 0.08, ease: EASE_OUT } },
+  show: { opacity: 1, y: 0, transition: { duration: 0.12, ease: EASE_OUT } },
+};
+export const MORPH_ITEM = {
+  hidden: { opacity: 0, y: -6, filter: "blur(3px)" },
+  show: { opacity: 1, y: 0, filter: "blur(0px)" },
+};
+type Registration = { label: string; disabled: boolean };
+export function createSelect(
+  props: SelectProps,
+  emit: (event: any, ...args: any[]) => void,
+  morph = false,
+) {
+  const instance = useId();
+  const root = ref<HTMLElement | null>(null);
+  const trigger = shallowRef<unknown>(null);
+  const list = shallowRef<unknown>(null);
+  const memory = ref(props.defaultValue);
+  const expanded = ref(!!props.defaultOpen);
+  const reduce = useReducedMotion();
+  const placeholder = ref("Select");
+  const placement = ref<"top" | "bottom">("bottom");
+  const active = ref<string | null>(null);
+  const registry = shallowRef(new Map<string, Map<symbol, Registration>>());
+  const value = computed({
+    get: () => props.modelValue ?? props.value ?? memory.value,
+    set: (next: string | undefined) => {
+      if (props.modelValue === undefined && props.value === undefined)
+        memory.value = next;
+      for (const event of ["update:modelValue", "valueChange", "change"])
+        emit(event, next);
+    },
+  });
+  const open = computed({
+    get: () => props.open ?? expanded.value,
+    set: (next: boolean) => {
+      if (props.open === undefined) expanded.value = next;
+      emit("update:open", next);
+      emit("openChange", next);
+    },
+  });
+  const disabled = computed(() => !!props.disabled);
+  const progress = motionValue(open.value ? 1 : 0);
+  const rows = computed(() =>
+    [...registry.value].map(([id, tokens]) => ({
+      id,
+      ...[...tokens.values()].at(-1)!,
+    })),
+  );
+  const enabled = computed(() => rows.value.filter((row) => !row.disabled));
+  const activeId = computed(
+    () =>
+      enabled.value.find((row) => row.id === active.value)?.id ??
+      enabled.value[0]?.id,
+  );
+  const layer = useFloatingLayer(open, list);
+  let mounted = false;
+  let disposed = false;
+  let initialOpening = open.value;
+  let focusRevision = 0;
+  let animation: ReturnType<typeof animate> | undefined;
+  let typed = { text: "", timestamp: 0 };
+  function register(
+    id: string,
+    label: string,
+    disabled: boolean,
+    token: symbol,
+  ) {
+    const entry = registry.value.get(id)?.get(token);
+    if (entry?.label === label && entry.disabled === disabled) return;
+    const tokens = new Map(registry.value.get(id));
+    tokens.set(token, { label, disabled });
+    registry.value = new Map([...registry.value, [id, tokens]]);
+  }
+  function unregister(id: string, token: symbol) {
+    const tokens = new Map(registry.value.get(id));
+    if (!tokens.delete(token)) return;
+    const next = new Map(registry.value);
+    if (tokens.size) next.set(id, tokens);
+    else next.delete(id);
+    registry.value = next;
+  }
+  async function focusActive() {
+    const revision = ++focusRevision;
+    await nextTick();
+    if (disposed || !open.value || revision !== focusRevision) return;
+    const surface = resolveElement<HTMLElement>(list.value);
+    const option = [
+      ...(surface?.querySelectorAll<HTMLElement>("[data-listbox-id]") ?? []),
+    ].find((element) => element.dataset.listboxId === activeId.value);
+    option?.focus({ preventScroll: false });
+  }
+  function close() {
+    const source = root.value?.ownerDocument.activeElement;
+    const restore =
+      source &&
+      root.value?.contains(source) &&
+      source !== resolveElement(trigger.value);
+    ++focusRevision;
+    open.value = false;
+    if (!restore) return;
+    if (!morph) resolveElement<HTMLElement>(trigger.value)?.focus();
+    else
+      void nextTick(() => {
+        if (!disposed && !open.value)
+          resolveElement<HTMLElement>(trigger.value)?.focus();
+      });
+  }
+  function select(id: string) {
+    if (disabled.value || !enabled.value.some((row) => row.id === id)) return;
+    value.value = id;
+    close();
+  }
+  function keydown(event: KeyboardEvent) {
+    if (
+      event.defaultPrevented ||
+      event.isComposing ||
+      disabled.value ||
+      !enabled.value.length
+    )
+      return;
+    const choices = enabled.value;
+    const current = Math.max(
+      0,
+      choices.findIndex((row) => row.id === activeId.value),
+    );
+    const delta =
+      event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+    if (delta || event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const next =
+        event.key === "Home"
+          ? 0
+          : event.key === "End"
+            ? choices.length - 1
+            : (current + delta + choices.length) % choices.length;
+      active.value = choices[next]!.id;
+      return;
+    }
+    if (
+      event.key.length !== 1 ||
+      event.key === " " ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.altKey
+    )
+      return;
+    const timestamp = Date.now();
+    const text =
+      timestamp - typed.timestamp < 500
+        ? typed.text + event.key.toLocaleLowerCase()
+        : event.key.toLocaleLowerCase();
+    typed = { timestamp, text };
+    const start = text.length === 1 ? current + 1 : current;
+    const found = Array.from(
+      { length: choices.length },
+      (_, offset) => choices[(start + offset) % choices.length]!,
+    ).find((row) => row.label.toLocaleLowerCase().startsWith(text));
+    if (found) active.value = found.id;
+  }
+  function animateToState() {
+    animation?.stop();
+    if (mounted)
+      animation = animate(
+        progress,
+        open.value ? 1 : 0,
+        reduce.value
+          ? { duration: 0.12 }
+          : open.value
+            ? UNFOLD_SPRING
+            : UNFOLD_EXIT,
+      );
+  }
+  watch(
+    open,
+    (next, previous) => {
+      if (!next) {
+        initialOpening = false;
+        ++focusRevision;
+        return;
+      }
+      if (!previous)
+        active.value =
+          enabled.value.find((row) => row.id === value.value)?.id ?? null;
+      if (!initialOpening) void focusActive();
+    },
+    { flush: "post" },
+  );
+  watch(
+    activeId,
+    () => {
+      const surface = resolveElement<HTMLElement>(list.value);
+      if (
+        open.value &&
+        (!initialOpening ||
+          surface?.contains(surface.ownerDocument.activeElement))
+      )
+        void focusActive();
+    },
+    { flush: "post" },
+  );
+  watch([open, reduce], animateToState, { flush: "post" });
+  const outside = (event: PointerEvent) => {
+    if (
+      open.value &&
+      !layer.containsHigher(event.target) &&
+      event.target instanceof Node &&
+      !root.value?.contains(event.target)
+    )
+      open.value = false;
+  };
+  const escape = (event: KeyboardEvent) => {
+    if (layer.claimEscape(event)) close();
+  };
+  onMounted(() => {
+    mounted = true;
+    animateToState();
+    window.addEventListener("pointerdown", outside);
+    window.addEventListener("keydown", escape);
+  });
+  onBeforeUnmount(() => {
+    disposed = true;
+    mounted = false;
+    ++focusRevision;
+    animation?.stop();
+    progress.destroy();
+    window.removeEventListener("pointerdown", outside);
+    window.removeEventListener("keydown", escape);
+  });
+  return {
+    root,
+    trigger,
+    list,
+    value,
+    open,
+    progress,
+    reduce,
+    rows,
+    enabled,
+    activeId,
+    active,
+    register,
+    unregister,
+    close,
+    select,
+    keydown,
+    focusActive,
+    placeholder,
+    placement,
+    morph,
+    disabled,
+    labelFor: (id: string | undefined) =>
+      rows.value.find((row) => row.id === id)?.label,
+    triggerId: `${instance}-trigger`,
+    listId: `${instance}-list`,
+    headerId: `${instance}-header`,
+    layoutId: `${instance}-surface`,
+  };
+}
+export const selectKey: InjectionKey<ReturnType<typeof createSelect>> =
+  Symbol("orvui-select");
+export const registrarKey: InjectionKey<boolean> = Symbol(
+  "orvui-select-registrar",
+);
+export function useSelect() {
+  const state = inject(selectKey);
+  if (!state) throw Error("Select parts must be inside Select or MorphSelect.");
+  return state;
+}

package/src/motion/select/src/unfold.ts

@@ -0,0 +1,25 @@
+export function unfoldGeometry(
+  progress: number,
+  height: number,
+  top: boolean,
+  reduced: boolean,
+) {
+  const bounded = (value: number) => Math.min(1, Math.max(0, value));
+  const phase = bounded(progress);
+  const separation = bounded((phase - 0.4) / 0.6);
+  const moving = height > 0 && !reduced;
+  const near = moving ? 12 * separation : 12;
+  const radius = top
+    ? `12px 12px ${near}px ${near}px`
+    : `${near}px ${near}px 12px 12px`;
+  const hidden = Math.max(0, (height - 8) * (1 - phase));
+  return {
+    y: moving ? (top ? 8 : -8) * (1 - separation) : 0,
+    radius,
+    clip:
+      !moving || phase === 1
+        ? "none"
+        : `inset(${top ? `${hidden}px 0 0 0` : `0 0 ${hidden}px 0`} round ${radius})`,
+    opacity: bounded(progress / (reduced ? 1 : 0.12)),
+  };
+}

package/src/motion/shader-background/LICENSE.paper-design

@@ -0,0 +1,164 @@
+# PolyForm Shield License 1.0.0
+
+<https://polyformproject.org/licenses/shield/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the
+software to do everything you might do with the software
+that would otherwise infringe the licensor's copyright
+in it for any permitted purpose.  However, you may
+only distribute the software according to [Distribution
+License](#distribution-license) and make changes or new works
+based on the software according to [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license
+to distribute copies of the software.  Your license
+to distribute covers distributing the software with
+changes and new works permitted by [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of
+the software from you also gets a copy of these terms or the
+URL for them above, as well as copies of any plain-text lines
+beginning with `Required Notice:` that the licensor provided
+with the software.  For example:
+
+> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Noncompete
+
+Any purpose is a permitted purpose, except for providing any
+product that competes with the software or any product the
+licensor or any of its affiliates provides using the software.
+
+## Competition
+
+Goods and services compete even when they provide functionality
+through different kinds of interfaces or for different technical
+platforms.  Applications can compete with services, libraries
+with plugins, frameworks with development tools, and so on,
+even if they're written in different programming languages
+or for different computer architectures.  Goods and services
+compete even when provided free of charge.  If you market a
+product as a practical substitute for the software or another
+product, it definitely competes.
+
+## New Products
+
+If you are using the software to provide a product that does
+not compete, but the licensor or any of its affiliates brings
+your product into competition by providing a new version of
+the software or another product using the software, you may
+continue using versions of the software available under these
+terms beforehand to provide your competing product, but not
+any later versions.
+
+## Discontinued Products
+
+You may begin using the software to compete with a product
+or service that the licensor or any of its affiliates has
+stopped providing, unless the licensor includes a plain-text
+line beginning with `Licensor Line of Business:` with the
+software that mentions that line of business.  For example:
+
+> Licensor Line of Business: YoyodyneCMS Content Management
+System (http://example.com/cms)
+
+## Sales of Business
+
+If the licensor or any of its affiliates sells a line of
+business developing the software or using the software
+to provide a product, the buyer can also enforce
+[Noncompete](#noncompete) for that product.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else.  These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have
+violated any of these terms, or done anything with the software
+not covered by your licenses, your licenses can nonetheless
+continue if you come into full compliance with these terms,
+and take practical steps to correct past violations, within
+32 days of receiving notice.  Otherwise, all your licenses
+end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+A **product** can be a good or service, or a combination
+of them.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+its affiliates.
+
+**Affiliates** means the other organizations than an
+organization has control over, is under the control of, or is
+under common control with.
+
+**Control** means ownership of substantially all the assets of
+an entity, or the power to direct its management and policies
+by vote, contract, or otherwise.  Control can be direct or
+indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.

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

@@ -0,0 +1,5 @@
+export { default as ShaderBackground } from "./src/ShaderBackground.vue";
+export { SHADER_BACKGROUND_VARIANTS } from "./src/presets";
+export type { ShaderBackgroundVariant } from "./src/presets";
+
+export type * from "./src/api-types";

package/src/motion/shader-background/src/ShaderBackground.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { camelize, computed, onBeforeUnmount, onMounted, ref, useAttrs, watch, type StyleValue } from "vue";
+import { useReducedMotion } from "../../../lib/composables";
+import { cn } from "../../../lib/utils";
+import { shaderFactories, type ShaderBackgroundVariant } from "./presets";
+import { createShaderSession } from "./shader-session";
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(defineProps<{ variant?: ShaderBackgroundVariant; speed?: number; frame?: number; fallback?: string }>(), {
+  variant: "mesh-gradient", fallback: "linear-gradient(135deg,#e0eaff,#9f50d3,#f75092)",
+});
+const attrs = useAttrs();
+const root = ref<HTMLElement | null>(null), failed = ref(false), reduce = useReducedMotion();
+const rootAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) =>
+  ["id", "role", "tabindex", "title"].includes(key) || /^(aria-|data-|on[A-Z])/.test(key))));
+function dimension(value: unknown) {
+  if (typeof value === "number") return `${value}px`;
+  if (typeof value !== "string") return undefined;
+  return value.trim() && Number.isFinite(Number(value)) ? `${Number(value)}px` : value;
+}
+const rootStyle = computed(() => [{ width: dimension(attrs.width), height: dimension(attrs.height), background: failed.value ? props.fallback : undefined }, attrs.style as StyleValue]);
+const session = createShaderSession(value => { failed.value = value; });
+let mounted = false;
+function synchronize() {
+  if (!mounted || !root.value) return;
+  const input = Object.fromEntries(Object.entries(attrs).map(([key, value]) => [camelize(key), value]));
+  if (props.speed !== undefined) input.speed = props.speed;
+  if (props.frame !== undefined) input.frame = props.frame;
+  try {
+    const config = shaderFactories[props.variant](input);
+    void session.update(root.value, config, {
+      speed: reduce.value ? 0 : config.speed,
+      minPixelRatio: input.minPixelRatio as number | undefined,
+      maxPixelCount: input.maxPixelCount as number | undefined ?? (["dot-grid", "waves"].includes(props.variant) ? 6016 * 3384 : undefined),
+      webGlContextAttributes: input.webGlContextAttributes as WebGLContextAttributes | undefined,
+      mipmaps: input.mipmaps as string[] | undefined,
+    });
+  } catch { failed.value = true; }
+}
+watch(() => [props.variant, props.speed, props.frame, reduce.value, { ...attrs }], synchronize, { deep: true });
+onMounted(() => { mounted = true; synchronize(); });
+onBeforeUnmount(() => { mounted = false; session.dispose(); });
+defineExpose({ get mount() { return session.renderer; }, failed });
+</script>
+<template>
+  <div
+    ref="root"
+    v-bind="rootAttrs"
+    :class="cn('relative h-full w-full overflow-hidden', attrs.class as string)"
+    :style="rootStyle"
+    :aria-hidden="(attrs['aria-hidden'] as boolean | undefined) ?? true"
+  >
+    <slot v-if="failed" name="fallback" />
+  </div>
+</template>

package/src/motion/shader-background/src/api-types.ts

@@ -0,0 +1,60 @@
+import type { HTMLAttributes } from "vue";
+import type {
+  MeshGradientParams,
+  GrainGradientParams,
+  DotGridParams,
+  DotOrbitParams,
+  WarpParams,
+  WavesParams,
+  WaterParams,
+  VoronoiParams,
+  SwirlParams,
+  SmokeRingParams,
+  StaticRadialGradientParams,
+  NeuroNoiseParams,
+  MetaballsParams,
+  GodRaysParams,
+  SpiralParams,
+  DitheringParams,
+  PulsingBorderParams,
+  ColorPanelsParams,
+  StaticMeshGradientParams,
+  SimplexNoiseParams,
+  PerlinNoiseParams,
+} from "@paper-design/shaders";
+
+export interface ShaderVariantProps {
+  "mesh-gradient": MeshGradientParams;
+  "grain-gradient": GrainGradientParams;
+  "dot-grid": DotGridParams;
+  "dot-orbit": DotOrbitParams;
+  warp: WarpParams;
+  waves: WavesParams;
+  water: WaterParams;
+  voronoi: VoronoiParams;
+  swirl: SwirlParams;
+  "smoke-ring": SmokeRingParams;
+  "static-radial-gradient": StaticRadialGradientParams;
+  "neuro-noise": NeuroNoiseParams;
+  metaballs: MetaballsParams;
+  "god-rays": GodRaysParams;
+  spiral: SpiralParams;
+  dithering: DitheringParams;
+  "pulsing-border": PulsingBorderParams;
+  "color-panels": ColorPanelsParams;
+  "static-mesh-gradient": StaticMeshGradientParams;
+  "simplex-noise": SimplexNoiseParams;
+  "perlin-noise": PerlinNoiseParams;
+}
+export type ShaderBackgroundProps = {
+  [K in keyof ShaderVariantProps]: {
+    variant: K;
+    fallback?: string;
+    minPixelRatio?: number;
+    maxPixelCount?: number;
+    webGlContextAttributes?: WebGLContextAttributes;
+    width?: string | number;
+    height?: string | number;
+  } & ShaderVariantProps[K] &
+    Omit<HTMLAttributes, "color">;
+}[keyof ShaderVariantProps];