@hunterchen/canvas 0.1.0

package/src/lib/copy.ts

@@ -0,0 +1,18 @@
+export const copyText = async (text: string): Promise<boolean> => {
+  try {
+    if (navigator.clipboard?.writeText && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+    // fallback: execCommand
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+};

package/src/lib/utils.ts

@@ -0,0 +1,18 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function debounce<T extends (...args: unknown[]) => void>(
+  cb: T,
+  wait = 20,
+) {
+  let h: number | NodeJS.Timeout = 0;
+  const callable = (...args: unknown[]) => {
+    clearTimeout(h);
+    h = setTimeout(() => cb(...args), wait);
+  };
+  return callable as T;
+}

package/src/types/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Generic types for the canvas library
+ * Apps should extend these types with their specific enums and constants
+ */
+
+export interface SectionCoordinates {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export enum CanvasSection {
+  Home = "home",
+  About = "about",
+  Projects = "projects",
+  Sponsors = "sponsors",
+  FAQ = "faq",
+  Team = "team",
+}

package/src/utils/performance.ts

@@ -0,0 +1,37 @@
+/**
+ * Performance optimization utilities for cross-platform compatibility
+ * Particularly focused on iOS Safari performance issues
+ */
+
+// Detect if the device is iOS
+export const isIOS = (): boolean => {
+  if (typeof window === "undefined") return false;
+
+  return /iPad|iPhone|iPod/.test(navigator.userAgent);
+};
+
+// Detect if the device is a mobile device
+export const isMobile = (): boolean => {
+  if (typeof window === "undefined") return false;
+
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent,
+  );
+};
+
+// Check if user prefers reduced motion
+export const prefersReducedMotion = (): boolean => {
+  if (typeof window === "undefined") return false;
+
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+};
+
+// Get optimized will-change value based on state
+export const getWillChange = (
+  isAnimating: boolean,
+  properties: string[] = ["transform"],
+): string => {
+  // Only apply will-change when actually animating
+  // Leaving it on causes memory issues on iOS
+  return isAnimating ? properties.join(", ") : "auto";
+};