@celestia-island/hikari 0.4.4

package/src/runtime/animationBus.ts

@@ -0,0 +1,278 @@
+export interface FrameContext {
+  delta: number;
+  elapsed: number;
+  now: number;
+}
+
+export interface AnimationHandle {
+  disconnect(): void;
+}
+
+type Callback = (ctx: FrameContext) => void;
+type Priority = "sync" | "normal" | "idle";
+
+interface Entry {
+  cb: Callback;
+  priority: Priority;
+  lastRun: number;
+}
+
+interface OneShotEntry {
+  cb: Callback;
+  cancelled: boolean;
+}
+
+interface IntervalEntry {
+  cb: () => void;
+  interval: number;
+  lastRun: number;
+  once: boolean;
+}
+
+const syncEntries = new Map<string, Entry>();
+const normalEntries = new Map<string, Entry>();
+const idleEntries = new Map<string, Entry>();
+const oneShotEntries = new Map<string, OneShotEntry>();
+const intervalEntries = new Map<string, IntervalEntry>();
+
+const activeTransitions = new Set<string>();
+
+let raf = 0;
+let origin = 0;
+let prev = 0;
+let paused = false;
+let scrolling = false;
+let scrollTimer: ReturnType<typeof setTimeout> | null = null;
+let idleTimer: ReturnType<typeof setTimeout> | null = null;
+let oneShotRaf = 0;
+
+const NORMAL_FRAME_BUDGET = 33;
+const IDLE_FRAME_BUDGET = 2000;
+
+function uid(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+
+function busyCount(): number {
+  return syncEntries.size + normalEntries.size + idleEntries.size + intervalEntries.size + activeTransitions.size;
+}
+
+function pickRegistry(priority: Priority): Map<string, Entry> {
+  switch (priority) {
+    case "sync": return syncEntries;
+    case "normal": return normalEntries;
+    case "idle": return idleEntries;
+  }
+}
+
+function tick(now: number) {
+  raf = 0;
+  if (busyCount() === 0 || paused) {
+    return;
+  }
+  if (!origin) {
+    origin = now;
+    prev = now;
+  }
+  const ctx: FrameContext = {
+    delta: (now - prev) / 1000,
+    elapsed: (now - origin) / 1000,
+    now,
+  };
+  prev = now;
+
+  for (const e of syncEntries.values()) {
+    e.cb(ctx);
+  }
+
+  const skipNormal = scrolling;
+  if (!skipNormal) {
+    for (const e of normalEntries.values()) {
+      if (now - e.lastRun >= NORMAL_FRAME_BUDGET) {
+        e.lastRun = now;
+        e.cb(ctx);
+      }
+    }
+  }
+
+  for (const e of idleEntries.values()) {
+    if (now - e.lastRun >= IDLE_FRAME_BUDGET) {
+      e.lastRun = now;
+      e.cb(ctx);
+    }
+  }
+
+  const disconnected: string[] = [];
+  for (const [id, e] of intervalEntries) {
+    if (now - e.lastRun >= e.interval) {
+      e.lastRun = now;
+      e.cb();
+      if (e.once) disconnected.push(id);
+    }
+  }
+  for (const id of disconnected) intervalEntries.delete(id);
+
+  if (raf !== 0 || idleTimer !== null) return;
+
+  if (syncEntries.size > 0 || normalEntries.size > 0 || intervalEntries.size > 0 || activeTransitions.size > 0) {
+    raf = requestAnimationFrame(tick);
+  } else if (idleEntries.size > 0) {
+    idleTimer = setTimeout(() => {
+      idleTimer = null;
+      raf = requestAnimationFrame(tick);
+    }, IDLE_FRAME_BUDGET);
+  }
+}
+
+function ensure() {
+  if (paused) return;
+  if (syncEntries.size > 0 || normalEntries.size > 0 || intervalEntries.size > 0 || activeTransitions.size > 0) {
+    if (idleTimer !== null) {
+      clearTimeout(idleTimer);
+      idleTimer = null;
+    }
+    if (raf === 0) {
+      origin = 0;
+      prev = 0;
+      raf = requestAnimationFrame(tick);
+    }
+  } else if (idleEntries.size > 0 && raf === 0 && idleTimer === null) {
+    origin = 0;
+    prev = 0;
+    idleTimer = setTimeout(() => {
+      idleTimer = null;
+      raf = requestAnimationFrame(tick);
+    }, IDLE_FRAME_BUDGET);
+  }
+}
+
+function halt() {
+  if (raf !== 0) {
+    cancelAnimationFrame(raf);
+    raf = 0;
+  }
+  if (idleTimer !== null) {
+    clearTimeout(idleTimer);
+    idleTimer = null;
+  }
+  if (busyCount() > 0 && !paused) {
+    ensure();
+  }
+}
+
+export function setReducedMotion(flag: boolean) {
+  if (paused === flag) return;
+  paused = flag;
+  if (flag) {
+    if (raf !== 0) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    }
+    if (idleTimer !== null) {
+      clearTimeout(idleTimer);
+      idleTimer = null;
+    }
+  } else {
+    ensure();
+  }
+}
+
+export function notifyScrollStart() {
+  scrolling = true;
+  if (scrollTimer) clearTimeout(scrollTimer);
+  scrollTimer = setTimeout(() => {
+    scrolling = false;
+    scrollTimer = null;
+  }, 150);
+}
+
+export function onFrame(cb: Callback, priority: Priority = "sync"): AnimationHandle {
+  const id = uid();
+  const registry = pickRegistry(priority);
+  registry.set(id, { cb, priority, lastRun: 0 });
+  ensure();
+  return {
+    disconnect() {
+      registry.delete(id);
+      halt();
+    },
+  };
+}
+
+function ensureOneShotDrain(): void {
+  if (oneShotRaf !== 0) return;
+  oneShotRaf = requestAnimationFrame(pumpOneShots);
+}
+
+function pumpOneShots(now: number): void {
+  oneShotRaf = 0;
+  if (oneShotEntries.size === 0) return;
+  const ctx: FrameContext = { delta: 0, elapsed: 0, now };
+  const batch = Array.from(oneShotEntries.values());
+  oneShotEntries.clear();
+  for (const e of batch) {
+    if (!e.cancelled) e.cb(ctx);
+  }
+}
+
+export function onceFrame(cb: Callback): void {
+  oneShotEntries.set(uid(), { cb, cancelled: false });
+  ensureOneShotDrain();
+}
+
+export function scheduleFrame(cb: Callback): AnimationHandle {
+  const entry: OneShotEntry = { cb, cancelled: false };
+  const id = uid();
+  oneShotEntries.set(id, entry);
+  ensureOneShotDrain();
+  return {
+    disconnect() {
+      entry.cancelled = true;
+      oneShotEntries.delete(id);
+    },
+  };
+}
+
+export function reportTransition(durationMs: number): AnimationHandle {
+  const id = uid();
+  activeTransitions.add(id);
+  ensure();
+  const timer = setTimeout(() => {
+    activeTransitions.delete(id);
+    halt();
+  }, Math.max(0, durationMs));
+  return {
+    disconnect() {
+      clearTimeout(timer);
+      activeTransitions.delete(id);
+      halt();
+    },
+  };
+}
+
+export function scheduleEvery(cb: () => void, intervalMs: number): AnimationHandle {
+  const id = uid();
+  intervalEntries.set(id, { cb, interval: intervalMs, lastRun: 0, once: false });
+  ensure();
+  return {
+    disconnect() {
+      intervalEntries.delete(id);
+      halt();
+    },
+  };
+}
+
+export function scheduleAfter(cb: () => void, delayMs: number): AnimationHandle {
+  const id = uid();
+  intervalEntries.set(id, { cb, interval: delayMs, lastRun: performance.now(), once: true });
+  ensure();
+  return {
+    disconnect() {
+      intervalEntries.delete(id);
+      halt();
+    },
+  };
+}

package/src/runtime/cronBus.ts

@@ -0,0 +1,25 @@
+export interface CronHandle {
+  disconnect(): void;
+}
+
+export function scheduleCron(cb: () => void, intervalMs: number): CronHandle {
+  const id = setInterval(cb, intervalMs);
+  return {
+    disconnect() {
+      clearInterval(id);
+    },
+  };
+}
+
+export function scheduleCronAfter(cb: () => void, delayMs: number): CronHandle {
+  let fired = false;
+  const id = setTimeout(() => {
+    fired = true;
+    cb();
+  }, delayMs);
+  return {
+    disconnect() {
+      if (!fired) clearTimeout(id);
+    },
+  };
+}

package/src/runtime/index.ts

@@ -0,0 +1,12 @@
+export * from "./animationBus";
+export * from "./cronBus";
+export { useOverlay, closeAll, isOverlayOpen, type OverlayHandle, type UseOverlayOptions } from "./useOverlay";
+export { usePopupManager, type PopupHandle, type PopupKind } from "./usePopupManager";
+export { useToast, TOAST_DURATION, type ToastItem, type ToastMessage, type ToastType } from "./useToast";
+export { useConfirm } from "./useConfirm";
+export { useBreakpoint } from "./useBreakpoint";
+export { useClipboard } from "./useClipboard";
+export { useAsyncData, type UseAsyncDataReturn } from "./useAsyncData";
+export { provideScrollWindow, useScrollWindow, type ScrollWindowContext } from "../composables/useScrollWindow";
+export { useReportedTransition, type ReportedTransition, type ReportedTransitionTrack } from "../composables/useReportedTransition";
+export { showProgressDialog, useProgressDialog, type ProgressDialogHandle, type ProgressDialogState } from "../composables/useProgressDialog";

package/src/runtime/useAsyncData.ts

@@ -0,0 +1,30 @@
+import { ref, type Ref } from "vue";
+
+export interface UseAsyncDataReturn<T> {
+  data: Ref<T | null>;
+  loading: Ref<boolean>;
+  error: Ref<Error | null>;
+  refresh: () => Promise<void>;
+}
+
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+): UseAsyncDataReturn<T> {
+  const data = ref<T | null>(null) as Ref<T | null>;
+  const loading = ref(false);
+  const error = ref<Error | null>(null);
+
+  async function refresh() {
+    loading.value = true;
+    error.value = null;
+    try {
+      data.value = await fetcher();
+    } catch (e) {
+      error.value = e instanceof Error ? e : new Error(String(e));
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return { data, loading, error, refresh };
+}

package/src/runtime/useBreakpoint.ts

@@ -0,0 +1,62 @@
+import { computed, onMounted, onUnmounted, ref } from "vue";
+
+type BreakpointKey = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+const breakpointValues: Record<BreakpointKey, number> = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};
+
+const isServer = typeof window === "undefined";
+
+export function useBreakpoint() {
+  if (isServer) {
+    const fallbackWidth = ref(1024);
+    const current = computed<BreakpointKey>(() => "lg");
+    const isMobile = computed(() => false);
+    const isTablet = computed(() => false);
+    const isDesktop = computed(() => true);
+    const isAbove = (_bp: BreakpointKey) => computed(() => true);
+    const isBelow = (_bp: BreakpointKey) => computed(() => false);
+    return { width: fallbackWidth, current, isMobile, isTablet, isDesktop, isAbove, isBelow };
+  }
+
+  const width = ref(window.innerWidth);
+
+  function handleResize() {
+    width.value = window.innerWidth;
+  }
+
+  onMounted(() => {
+    window.addEventListener("resize", handleResize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", handleResize);
+  });
+
+  const current = computed<BreakpointKey>(() => {
+    const w = width.value;
+    if (w >= 1536) return "2xl";
+    if (w >= 1280) return "xl";
+    if (w >= 1024) return "lg";
+    if (w >= 768) return "md";
+    if (w >= 640) return "sm";
+    return "xs";
+  });
+
+  const isMobile = computed(() => width.value < 768);
+  const isTablet = computed(() => width.value >= 768 && width.value < 1024);
+  const isDesktop = computed(() => width.value >= 1024);
+
+  const isAbove = (bp: BreakpointKey) =>
+    computed(() => width.value >= breakpointValues[bp]);
+  const isBelow = (bp: BreakpointKey) =>
+    computed(() => width.value < breakpointValues[bp]);
+
+  return { width, current, isMobile, isTablet, isDesktop, isAbove, isBelow };
+}

package/src/runtime/useClipboard.ts

@@ -0,0 +1,37 @@
+import { ref } from "vue";
+
+export function useClipboard() {
+  const copied = ref(false);
+
+  async function copy(text: string): Promise<boolean> {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2000);
+      return true;
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      try {
+        document.execCommand("copy");
+        copied.value = true;
+        setTimeout(() => {
+          copied.value = false;
+        }, 2000);
+        return true;
+      } catch {
+        return false;
+      } finally {
+        document.body.removeChild(textarea);
+      }
+    }
+  }
+
+  return { copied, copy };
+}

package/src/runtime/useConfirm.ts

@@ -0,0 +1,35 @@
+import { ref } from "vue";
+
+export function useConfirm() {
+  const resolveRef = ref<((value: boolean) => void) | null>(null);
+  const open = ref(false);
+  const message = ref("");
+  const title = ref("Confirm");
+  const confirmText = ref("Confirm");
+  const cancelText = ref("Cancel");
+
+  function confirm(text: string, opts?: { title?: string; confirmText?: string; cancelText?: string }): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      resolveRef.value = resolve;
+      message.value = text;
+      title.value = opts?.title ?? "Confirm";
+      confirmText.value = opts?.confirmText ?? "Confirm";
+      cancelText.value = opts?.cancelText ?? "Cancel";
+      open.value = true;
+    });
+  }
+
+  function onConfirm() {
+    open.value = false;
+    resolveRef.value?.(true);
+    resolveRef.value = null;
+  }
+
+  function onCancel() {
+    open.value = false;
+    resolveRef.value?.(false);
+    resolveRef.value = null;
+  }
+
+  return { open, title, message, confirmText, cancelText, confirm, onConfirm, onCancel };
+}

package/src/runtime/useOverlay.ts

@@ -0,0 +1,82 @@
+import { onUnmounted, ref, type Ref } from "vue";
+
+interface OverlayRegistryEntry {
+  close: () => void;
+  group?: string;
+}
+
+const registry = new Map<string, OverlayRegistryEntry>();
+
+function closeGroup(group: string) {
+  for (const [name, entry] of registry) {
+    if (entry.group === group) {
+      entry.close();
+      registry.delete(name);
+    }
+  }
+}
+
+function register(name: string, close: () => void, group?: string) {
+  registry.set(name, { close, group });
+}
+
+function unregister(name: string) {
+  registry.delete(name);
+}
+
+export function closeAll() {
+  for (const [, entry] of registry) {
+    entry.close();
+  }
+  registry.clear();
+}
+
+export function isOverlayOpen(name: string): boolean {
+  return registry.has(name);
+}
+
+export interface UseOverlayOptions {
+  name: string;
+  group?: string;
+}
+
+export interface OverlayHandle {
+  isOpen: Ref<boolean>;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  onUpdate: (v: boolean) => void;
+}
+
+export function useOverlay(opts: UseOverlayOptions): OverlayHandle {
+  const isOpen = ref(false);
+
+  function open(): void {
+    if (isOpen.value) return;
+    if (opts.group) closeGroup(opts.group);
+    isOpen.value = true;
+    register(opts.name, close, opts.group);
+  }
+
+  function close(): void {
+    if (!isOpen.value) return;
+    isOpen.value = false;
+    unregister(opts.name);
+  }
+
+  function toggle(): void {
+    if (isOpen.value) close();
+    else open();
+  }
+
+  function onUpdate(v: boolean): void {
+    if (v) open();
+    else close();
+  }
+
+  onUnmounted(() => {
+    if (isOpen.value) unregister(opts.name);
+  });
+
+  return { isOpen, open, close, toggle, onUpdate };
+}

package/src/runtime/usePopupManager.ts

@@ -0,0 +1,89 @@
+import { readonly, ref } from "vue";
+
+export type PopupKind = "dropdown" | "modal" | "drawer" | "tooltip" | "toast";
+
+interface PopupEntry {
+  id: string;
+  kind: PopupKind;
+  locksScroll: boolean;
+  zIndex: number;
+  title?: string;
+}
+
+const Z_BASE = 1000;
+const Z_STEP = 2;
+
+function uid(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+
+const registry = ref<Map<string, PopupEntry>>(new Map());
+let nextZ = Z_BASE;
+let scrollLockCount = 0;
+
+function updateBodyScroll() {
+  if (scrollLockCount > 0) {
+    document.body.style.overflow = "hidden";
+  } else {
+    document.body.style.overflow = "";
+  }
+}
+
+export interface PopupHandle {
+  id: string;
+  zIndex: number;
+}
+
+export function usePopupManager() {
+  function register(
+    kind: PopupKind,
+    locksScroll = false,
+    title?: string,
+  ): PopupHandle {
+    const id = uid();
+    const zIndex = nextZ;
+    nextZ += Z_STEP;
+    const entry: PopupEntry = { id, kind, locksScroll, zIndex, title };
+    registry.value.set(id, entry);
+    if (locksScroll) {
+      scrollLockCount++;
+      updateBodyScroll();
+    }
+    return { id, zIndex };
+  }
+
+  function setTitle(id: string, title: string) {
+    const entry = registry.value.get(id);
+    if (!entry) return;
+    entry.title = title;
+    registry.value = new Map(registry.value);
+  }
+
+  function unregister(id: string) {
+    const entry = registry.value.get(id);
+    if (!entry) return;
+    registry.value.delete(id);
+    if (entry.locksScroll) {
+      scrollLockCount = Math.max(0, scrollLockCount - 1);
+      updateBodyScroll();
+    }
+    if (registry.value.size === 0) {
+      nextZ = Z_BASE;
+    }
+  }
+
+  function isOpen(id: string): boolean {
+    return registry.value.has(id);
+  }
+
+  return {
+    registry: readonly(registry),
+    register,
+    setTitle,
+    unregister,
+    isOpen,
+  };
+}