First working POC

src/lib/utils/haptics.ts

@@ -0,0 +1,56 @@
+/**
+ * Haptic feedback utility for mobile interactions
+ * Provides tactile feedback for user actions
+ */
+
+type HapticStyle = "light" | "medium" | "heavy" | "success" | "warning" | "error";
+
+/**
+ * Trigger haptic feedback (if supported by the device)
+ */
+export function haptic(style: HapticStyle = "medium") {
+  // Check if running in a mobile environment with haptic support
+  if (!("vibrate" in navigator)) {
+    return;
+  }
+
+  // Map haptic styles to vibration patterns
+  const patterns: Record<HapticStyle, number | number[]> = {
+    light: 10,
+    medium: 20,
+    heavy: 40,
+    success: [10, 50, 10], // Double tap pattern
+    warning: [20, 100, 20, 100, 20], // Triple tap pattern
+    error: 50,
+  };
+
+  try {
+    navigator.vibrate(patterns[style]);
+  } catch (error) {
+    // Silently fail if vibration is not supported or blocked
+    console.debug("Haptic feedback not available:", error);
+  }
+}
+
+/**
+ * Haptic feedback for common UI interactions
+ */
+export const haptics = {
+  /** Light tap (e.g., button press) */
+  tap: () => haptic("light"),
+
+  /** Selection change (e.g., toggle, checkbox) */
+  select: () => haptic("medium"),
+
+  /** Successful action (e.g., item added, saved) */
+  success: () => haptic("success"),
+
+  /** Warning or important action (e.g., delete confirmation) */
+  warning: () => haptic("warning"),
+
+  /** Error or failed action */
+  error: () => haptic("error"),
+
+  /** Heavy impact (e.g., drag and drop) */
+  impact: () => haptic("heavy"),
+};