@haptics/svelte 1.0.0

package/dist/index.cjs

@@ -0,0 +1,119 @@
+'use strict';
+
+var core = require('@haptics/core');
+
+// src/context.ts
+var _config = null;
+function setupHaptics(options = {}) {
+  const patterns = {
+    ...core.PRESETS,
+    ...options.patterns
+  };
+  const respectReducedMotion = options.respectReducedMotion ?? true;
+  const config = { patterns, respectReducedMotion };
+  _config = config;
+  if (typeof document !== "undefined" && core.isIOS()) {
+    let prefersReducedMotion = false;
+    if (typeof window !== "undefined" && window.matchMedia) {
+      const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+      prefersReducedMotion = mql.matches;
+      mql.addEventListener("change", (e) => {
+        prefersReducedMotion = e.matches;
+      });
+    }
+    const handler = (e) => {
+      if (respectReducedMotion && prefersReducedMotion) return;
+      const target = e.target?.closest("[data-haptic]");
+      if (!target) return;
+      const action = target.getAttribute("data-haptic");
+      if (action && action in patterns) {
+        core.schedulePattern(patterns[action]);
+      }
+    };
+    document.addEventListener("click", handler, {
+      capture: true,
+      passive: true
+    });
+  }
+}
+function getHapticsConfig() {
+  return _config;
+}
+function haptic(node, action) {
+  let currentAction = action;
+  const config = getHapticsConfig();
+  const patterns = config?.patterns ?? core.PRESETS;
+  const respectReducedMotion = config?.respectReducedMotion ?? true;
+  let prefersReducedMotion = false;
+  let mqlCleanup = null;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    prefersReducedMotion = mql.matches;
+    const onChange = (e) => {
+      prefersReducedMotion = e.matches;
+    };
+    mql.addEventListener("change", onChange);
+    mqlCleanup = () => mql.removeEventListener("change", onChange);
+  }
+  node.setAttribute("data-haptic", currentAction);
+  const handler = () => {
+    if (respectReducedMotion && prefersReducedMotion) return;
+    const pattern = patterns[currentAction];
+    if (!pattern) return;
+    if (core.isVibrationSupported()) {
+      navigator.vibrate(core.toVibrateSequence(pattern));
+    } else if (core.isIOS() && !config) {
+      core.schedulePattern(pattern);
+    }
+  };
+  node.addEventListener("click", handler);
+  return {
+    update(newAction) {
+      currentAction = newAction;
+      node.setAttribute("data-haptic", newAction);
+    },
+    destroy() {
+      node.removeEventListener("click", handler);
+      node.removeAttribute("data-haptic");
+      mqlCleanup?.();
+    }
+  };
+}
+function createHaptics() {
+  const config = getHapticsConfig();
+  const patterns = config?.patterns ?? core.PRESETS;
+  const respectReducedMotion = config?.respectReducedMotion ?? true;
+  let prefersReducedMotion = false;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    prefersReducedMotion = mql.matches;
+    mql.addEventListener("change", (e) => {
+      prefersReducedMotion = e.matches;
+    });
+  }
+  const trigger = (action) => {
+    if (respectReducedMotion && prefersReducedMotion) return;
+    const pattern = patterns[action];
+    if (!pattern) return;
+    if (core.isVibrationSupported()) {
+      navigator.vibrate(core.toVibrateSequence(pattern));
+    } else if (core.isIOS()) {
+      core.schedulePattern(pattern);
+    }
+  };
+  const cancel = () => {
+    if (core.isVibrationSupported()) navigator.vibrate(0);
+  };
+  return {
+    trigger,
+    cancel,
+    isSupported: core.isVibrationSupported(),
+    isIOSSupported: core.isIOS()
+  };
+}
+
+exports.createHaptics = createHaptics;
+exports.haptic = haptic;
+exports.setupHaptics = setupHaptics;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.ts","../src/action.ts","../src/create-haptics.ts"],"names":["PRESETS","isIOS","schedulePattern","isVibrationSupported","toVibrateSequence"],"mappings":"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","file":"index.cjs","sourcesContent":["import { PRESETS, isIOS, schedulePattern } from \"@haptics/core\";\nimport type { HapticPattern } from \"@haptics/core\";\n\nexport interface HapticsConfig {\n\tpatterns: Record<string, HapticPattern>;\n\trespectReducedMotion: boolean;\n}\n\nlet _config: HapticsConfig | null = null;\n\n/**\n * Initialize haptics context in a Svelte component tree.\n * Call this in your root layout's <script> block.\n *\n * Registers a capture-phase click listener on document for iOS haptics\n * and sets up context for child components using `use:haptic` and `createHaptics`.\n *\n * @example\n * ```svelte\n * <script>\n *   import { setupHaptics } from '@haptics/svelte';\n *   setupHaptics({ patterns: { 'my-buzz': [{ duration: 30 }] } });\n * </script>\n * <slot />\n * ```\n */\nexport function setupHaptics(\n\toptions: {\n\t\tpatterns?: Record<string, HapticPattern>;\n\t\trespectReducedMotion?: boolean;\n\t} = {},\n): void {\n\tconst patterns: Record<string, HapticPattern> = {\n\t\t...PRESETS,\n\t\t...options.patterns,\n\t};\n\tconst respectReducedMotion = options.respectReducedMotion ?? true;\n\tconst config: HapticsConfig = { patterns, respectReducedMotion };\n\t_config = config;\n\n\tif (typeof document !== \"undefined\" && isIOS()) {\n\t\tlet prefersReducedMotion = false;\n\n\t\tif (typeof window !== \"undefined\" && window.matchMedia) {\n\t\t\tconst mql = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\t\tprefersReducedMotion = mql.matches;\n\t\t\tmql.addEventListener(\"change\", (e) => {\n\t\t\t\tprefersReducedMotion = e.matches;\n\t\t\t});\n\t\t}\n\n\t\tconst handler = (e: MouseEvent) => {\n\t\t\tif (respectReducedMotion && prefersReducedMotion) return;\n\t\t\tconst target = (e.target as Element)?.closest(\"[data-haptic]\");\n\t\t\tif (!target) return;\n\t\t\tconst action = target.getAttribute(\"data-haptic\");\n\t\t\tif (action && action in patterns) {\n\t\t\t\tschedulePattern(patterns[action]);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"click\", handler, {\n\t\t\tcapture: true,\n\t\t\tpassive: true,\n\t\t});\n\t}\n}\n\nexport function getHapticsConfig(): HapticsConfig | null {\n\treturn _config;\n}\n\n/** @internal Reset config for testing only. */\nexport function _resetConfig(): void {\n\t_config = null;\n}\n","import type { HapticPattern } from \"@haptics/core\";\nimport {\n\tPRESETS,\n\tisIOS,\n\tisVibrationSupported,\n\ttoVibrateSequence,\n\tschedulePattern,\n} from \"@haptics/core\";\nimport { getHapticsConfig } from \"./context\";\n\ntype HapticAction = string;\n\n/**\n * Svelte action for declarative haptic feedback.\n *\n * @example\n * ```svelte\n * <script>\n *   import { haptic } from '@haptics/svelte';\n * </script>\n * <button use:haptic={'success'}>Save</button>\n * <button use:haptic={'impact-heavy'}>Delete</button>\n * ```\n *\n * On iOS: sets data-haptic for the capture-phase listener from setupHaptics().\n * On Android: calls navigator.vibrate() directly in the click handler.\n * Svelte actions have native event access — no gesture chain issues.\n */\nexport function haptic(\n\tnode: HTMLElement,\n\taction: HapticAction,\n): { update: (action: HapticAction) => void; destroy: () => void } {\n\tlet currentAction = action;\n\tconst config = getHapticsConfig();\n\tconst patterns: Record<string, HapticPattern> = config?.patterns ?? PRESETS;\n\tconst respectReducedMotion = config?.respectReducedMotion ?? true;\n\n\tlet prefersReducedMotion = false;\n\tlet mqlCleanup: (() => void) | null = null;\n\n\tif (typeof window !== \"undefined\" && window.matchMedia) {\n\t\tconst mql = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\tprefersReducedMotion = mql.matches;\n\t\tconst onChange = (e: MediaQueryListEvent) => {\n\t\t\tprefersReducedMotion = e.matches;\n\t\t};\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tmqlCleanup = () => mql.removeEventListener(\"change\", onChange);\n\t}\n\n\tnode.setAttribute(\"data-haptic\", currentAction);\n\n\tconst handler = () => {\n\t\tif (respectReducedMotion && prefersReducedMotion) return;\n\t\tconst pattern = patterns[currentAction];\n\t\tif (!pattern) return;\n\n\t\tif (isVibrationSupported()) {\n\t\t\tnavigator.vibrate(toVibrateSequence(pattern));\n\t\t} else if (isIOS() && !config) {\n\t\t\tschedulePattern(pattern);\n\t\t}\n\t};\n\n\tnode.addEventListener(\"click\", handler);\n\n\treturn {\n\t\tupdate(newAction: HapticAction) {\n\t\t\tcurrentAction = newAction;\n\t\t\tnode.setAttribute(\"data-haptic\", newAction);\n\t\t},\n\t\tdestroy() {\n\t\t\tnode.removeEventListener(\"click\", handler);\n\t\t\tnode.removeAttribute(\"data-haptic\");\n\t\t\tmqlCleanup?.();\n\t\t},\n\t};\n}\n","import {\n\tPRESETS,\n\tisVibrationSupported,\n\tisIOS,\n\ttoVibrateSequence,\n\tschedulePattern,\n} from \"@haptics/core\";\nimport type { PresetName } from \"@haptics/core\";\nimport { getHapticsConfig } from \"./context\";\n\n/**\n * Create an imperative haptics controller.\n *\n * Can be called inside a Svelte component's <script> block (will use\n * setupHaptics context if available) or outside components (falls back\n * to built-in presets).\n *\n * @example\n * ```svelte\n * <script>\n *   import { createHaptics } from '@haptics/svelte';\n *   const haptics = createHaptics();\n *   function handleSave() { haptics.trigger('success'); }\n * </script>\n * ```\n */\nexport function createHaptics() {\n\tconst config = getHapticsConfig();\n\tconst patterns = config?.patterns ?? PRESETS;\n\tconst respectReducedMotion = config?.respectReducedMotion ?? true;\n\n\tlet prefersReducedMotion = false;\n\tif (typeof window !== \"undefined\" && window.matchMedia) {\n\t\tconst mql = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\tprefersReducedMotion = mql.matches;\n\t\tmql.addEventListener(\"change\", (e) => {\n\t\t\tprefersReducedMotion = e.matches;\n\t\t});\n\t}\n\n\tconst trigger = (action: PresetName | (string & {})) => {\n\t\tif (respectReducedMotion && prefersReducedMotion) return;\n\n\t\tconst pattern = patterns[action as keyof typeof patterns];\n\t\tif (!pattern) return;\n\n\t\tif (isVibrationSupported()) {\n\t\t\tnavigator.vibrate(toVibrateSequence(pattern));\n\t\t} else if (isIOS()) {\n\t\t\tschedulePattern(pattern);\n\t\t}\n\t};\n\n\tconst cancel = () => {\n\t\tif (isVibrationSupported()) navigator.vibrate(0);\n\t};\n\n\treturn {\n\t\ttrigger,\n\t\tcancel,\n\t\tisSupported: isVibrationSupported(),\n\t\tisIOSSupported: isIOS(),\n\t};\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,73 @@
+import { HapticPattern, PresetName } from '@haptics/core';
+
+interface HapticsConfig {
+    patterns: Record<string, HapticPattern>;
+    respectReducedMotion: boolean;
+}
+/**
+ * Initialize haptics context in a Svelte component tree.
+ * Call this in your root layout's <script> block.
+ *
+ * Registers a capture-phase click listener on document for iOS haptics
+ * and sets up context for child components using `use:haptic` and `createHaptics`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { setupHaptics } from '@haptics/svelte';
+ *   setupHaptics({ patterns: { 'my-buzz': [{ duration: 30 }] } });
+ * </script>
+ * <slot />
+ * ```
+ */
+declare function setupHaptics(options?: {
+    patterns?: Record<string, HapticPattern>;
+    respectReducedMotion?: boolean;
+}): void;
+
+type HapticAction = string;
+/**
+ * Svelte action for declarative haptic feedback.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { haptic } from '@haptics/svelte';
+ * </script>
+ * <button use:haptic={'success'}>Save</button>
+ * <button use:haptic={'impact-heavy'}>Delete</button>
+ * ```
+ *
+ * On iOS: sets data-haptic for the capture-phase listener from setupHaptics().
+ * On Android: calls navigator.vibrate() directly in the click handler.
+ * Svelte actions have native event access — no gesture chain issues.
+ */
+declare function haptic(node: HTMLElement, action: HapticAction): {
+    update: (action: HapticAction) => void;
+    destroy: () => void;
+};
+
+/**
+ * Create an imperative haptics controller.
+ *
+ * Can be called inside a Svelte component's <script> block (will use
+ * setupHaptics context if available) or outside components (falls back
+ * to built-in presets).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createHaptics } from '@haptics/svelte';
+ *   const haptics = createHaptics();
+ *   function handleSave() { haptics.trigger('success'); }
+ * </script>
+ * ```
+ */
+declare function createHaptics(): {
+    trigger: (action: PresetName | (string & {})) => void;
+    cancel: () => void;
+    isSupported: boolean;
+    isIOSSupported: boolean;
+};
+
+export { type HapticsConfig, createHaptics, haptic, setupHaptics };

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import { HapticPattern, PresetName } from '@haptics/core';
+
+interface HapticsConfig {
+    patterns: Record<string, HapticPattern>;
+    respectReducedMotion: boolean;
+}
+/**
+ * Initialize haptics context in a Svelte component tree.
+ * Call this in your root layout's <script> block.
+ *
+ * Registers a capture-phase click listener on document for iOS haptics
+ * and sets up context for child components using `use:haptic` and `createHaptics`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { setupHaptics } from '@haptics/svelte';
+ *   setupHaptics({ patterns: { 'my-buzz': [{ duration: 30 }] } });
+ * </script>
+ * <slot />
+ * ```
+ */
+declare function setupHaptics(options?: {
+    patterns?: Record<string, HapticPattern>;
+    respectReducedMotion?: boolean;
+}): void;
+
+type HapticAction = string;
+/**
+ * Svelte action for declarative haptic feedback.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { haptic } from '@haptics/svelte';
+ * </script>
+ * <button use:haptic={'success'}>Save</button>
+ * <button use:haptic={'impact-heavy'}>Delete</button>
+ * ```
+ *
+ * On iOS: sets data-haptic for the capture-phase listener from setupHaptics().
+ * On Android: calls navigator.vibrate() directly in the click handler.
+ * Svelte actions have native event access — no gesture chain issues.
+ */
+declare function haptic(node: HTMLElement, action: HapticAction): {
+    update: (action: HapticAction) => void;
+    destroy: () => void;
+};
+
+/**
+ * Create an imperative haptics controller.
+ *
+ * Can be called inside a Svelte component's <script> block (will use
+ * setupHaptics context if available) or outside components (falls back
+ * to built-in presets).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createHaptics } from '@haptics/svelte';
+ *   const haptics = createHaptics();
+ *   function handleSave() { haptics.trigger('success'); }
+ * </script>
+ * ```
+ */
+declare function createHaptics(): {
+    trigger: (action: PresetName | (string & {})) => void;
+    cancel: () => void;
+    isSupported: boolean;
+    isIOSSupported: boolean;
+};
+
+export { type HapticsConfig, createHaptics, haptic, setupHaptics };

package/dist/index.js

@@ -0,0 +1,115 @@
+import { PRESETS, isIOS, isVibrationSupported, toVibrateSequence, schedulePattern } from '@haptics/core';
+
+// src/context.ts
+var _config = null;
+function setupHaptics(options = {}) {
+  const patterns = {
+    ...PRESETS,
+    ...options.patterns
+  };
+  const respectReducedMotion = options.respectReducedMotion ?? true;
+  const config = { patterns, respectReducedMotion };
+  _config = config;
+  if (typeof document !== "undefined" && isIOS()) {
+    let prefersReducedMotion = false;
+    if (typeof window !== "undefined" && window.matchMedia) {
+      const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+      prefersReducedMotion = mql.matches;
+      mql.addEventListener("change", (e) => {
+        prefersReducedMotion = e.matches;
+      });
+    }
+    const handler = (e) => {
+      if (respectReducedMotion && prefersReducedMotion) return;
+      const target = e.target?.closest("[data-haptic]");
+      if (!target) return;
+      const action = target.getAttribute("data-haptic");
+      if (action && action in patterns) {
+        schedulePattern(patterns[action]);
+      }
+    };
+    document.addEventListener("click", handler, {
+      capture: true,
+      passive: true
+    });
+  }
+}
+function getHapticsConfig() {
+  return _config;
+}
+function haptic(node, action) {
+  let currentAction = action;
+  const config = getHapticsConfig();
+  const patterns = config?.patterns ?? PRESETS;
+  const respectReducedMotion = config?.respectReducedMotion ?? true;
+  let prefersReducedMotion = false;
+  let mqlCleanup = null;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    prefersReducedMotion = mql.matches;
+    const onChange = (e) => {
+      prefersReducedMotion = e.matches;
+    };
+    mql.addEventListener("change", onChange);
+    mqlCleanup = () => mql.removeEventListener("change", onChange);
+  }
+  node.setAttribute("data-haptic", currentAction);
+  const handler = () => {
+    if (respectReducedMotion && prefersReducedMotion) return;
+    const pattern = patterns[currentAction];
+    if (!pattern) return;
+    if (isVibrationSupported()) {
+      navigator.vibrate(toVibrateSequence(pattern));
+    } else if (isIOS() && !config) {
+      schedulePattern(pattern);
+    }
+  };
+  node.addEventListener("click", handler);
+  return {
+    update(newAction) {
+      currentAction = newAction;
+      node.setAttribute("data-haptic", newAction);
+    },
+    destroy() {
+      node.removeEventListener("click", handler);
+      node.removeAttribute("data-haptic");
+      mqlCleanup?.();
+    }
+  };
+}
+function createHaptics() {
+  const config = getHapticsConfig();
+  const patterns = config?.patterns ?? PRESETS;
+  const respectReducedMotion = config?.respectReducedMotion ?? true;
+  let prefersReducedMotion = false;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    prefersReducedMotion = mql.matches;
+    mql.addEventListener("change", (e) => {
+      prefersReducedMotion = e.matches;
+    });
+  }
+  const trigger = (action) => {
+    if (respectReducedMotion && prefersReducedMotion) return;
+    const pattern = patterns[action];
+    if (!pattern) return;
+    if (isVibrationSupported()) {
+      navigator.vibrate(toVibrateSequence(pattern));
+    } else if (isIOS()) {
+      schedulePattern(pattern);
+    }
+  };
+  const cancel = () => {
+    if (isVibrationSupported()) navigator.vibrate(0);
+  };
+  return {
+    trigger,
+    cancel,
+    isSupported: isVibrationSupported(),
+    isIOSSupported: isIOS()
+  };
+}
+
+export { createHaptics, haptic, setupHaptics };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.ts","../src/action.ts","../src/create-haptics.ts"],"names":["PRESETS","isIOS","schedulePattern","isVibrationSupported","toVibrateSequence"],"mappings":"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","file":"index.js","sourcesContent":["import { PRESETS, isIOS, schedulePattern } from \"@haptics/core\";\nimport type { HapticPattern } from \"@haptics/core\";\n\nexport interface HapticsConfig {\n\tpatterns: Record<string, HapticPattern>;\n\trespectReducedMotion: boolean;\n}\n\nlet _config: HapticsConfig | null = null;\n\n/**\n * Initialize haptics context in a Svelte component tree.\n * Call this in your root layout's <script> block.\n *\n * Registers a capture-phase click listener on document for iOS haptics\n * and sets up context for child components using `use:haptic` and `createHaptics`.\n *\n * @example\n * ```svelte\n * <script>\n *   import { setupHaptics } from '@haptics/svelte';\n *   setupHaptics({ patterns: { 'my-buzz': [{ duration: 30 }] } });\n * </script>\n * <slot />\n * ```\n */\nexport function setupHaptics(\n\toptions: {\n\t\tpatterns?: Record<string, HapticPattern>;\n\t\trespectReducedMotion?: boolean;\n\t} = {},\n): void {\n\tconst patterns: Record<string, HapticPattern> = {\n\t\t...PRESETS,\n\t\t...options.patterns,\n\t};\n\tconst respectReducedMotion = options.respectReducedMotion ?? true;\n\tconst config: HapticsConfig = { patterns, respectReducedMotion };\n\t_config = config;\n\n\tif (typeof document !== \"undefined\" && isIOS()) {\n\t\tlet prefersReducedMotion = false;\n\n\t\tif (typeof window !== \"undefined\" && window.matchMedia) {\n\t\t\tconst mql = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\t\tprefersReducedMotion = mql.matches;\n\t\t\tmql.addEventListener(\"change\", (e) => {\n\t\t\t\tprefersReducedMotion = e.matches;\n\t\t\t});\n\t\t}\n\n\t\tconst handler = (e: MouseEvent) => {\n\t\t\tif (respectReducedMotion && prefersReducedMotion) return;\n\t\t\tconst target = (e.target as Element)?.closest(\"[data-haptic]\");\n\t\t\tif (!target) return;\n\t\t\tconst action = target.getAttribute(\"data-haptic\");\n\t\t\tif (action && action in patterns) {\n\t\t\t\tschedulePattern(patterns[action]);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"click\", handler, {\n\t\t\tcapture: true,\n\t\t\tpassive: true,\n\t\t});\n\t}\n}\n\nexport function getHapticsConfig(): HapticsConfig | null {\n\treturn _config;\n}\n\n/** @internal Reset config for testing only. */\nexport function _resetConfig(): void {\n\t_config = null;\n}\n","import type { HapticPattern } from \"@haptics/core\";\nimport {\n\tPRESETS,\n\tisIOS,\n\tisVibrationSupported,\n\ttoVibrateSequence,\n\tschedulePattern,\n} from \"@haptics/core\";\nimport { getHapticsConfig } from \"./context\";\n\ntype HapticAction = string;\n\n/**\n * Svelte action for declarative haptic feedback.\n *\n * @example\n * ```svelte\n * <script>\n *   import { haptic } from '@haptics/svelte';\n * </script>\n * <button use:haptic={'success'}>Save</button>\n * <button use:haptic={'impact-heavy'}>Delete</button>\n * ```\n *\n * On iOS: sets data-haptic for the capture-phase listener from setupHaptics().\n * On Android: calls navigator.vibrate() directly in the click handler.\n * Svelte actions have native event access — no gesture chain issues.\n */\nexport function haptic(\n\tnode: HTMLElement,\n\taction: HapticAction,\n): { update: (action: HapticAction) => void; destroy: () => void } {\n\tlet currentAction = action;\n\tconst config = getHapticsConfig();\n\tconst patterns: Record<string, HapticPattern> = config?.patterns ?? PRESETS;\n\tconst respectReducedMotion = config?.respectReducedMotion ?? true;\n\n\tlet prefersReducedMotion = false;\n\tlet mqlCleanup: (() => void) | null = null;\n\n\tif (typeof window !== \"undefined\" && window.matchMedia) {\n\t\tconst mql = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\tprefersReducedMotion = mql.matches;\n\t\tconst onChange = (e: MediaQueryListEvent) => {\n\t\t\tprefersReducedMotion = e.matches;\n\t\t};\n\t\tmql.addEventListener(\"change\", onChange);\n\t\tmqlCleanup = () => mql.removeEventListener(\"change\", onChange);\n\t}\n\n\tnode.setAttribute(\"data-haptic\", currentAction);\n\n\tconst handler = () => {\n\t\tif (respectReducedMotion && prefersReducedMotion) return;\n\t\tconst pattern = patterns[currentAction];\n\t\tif (!pattern) return;\n\n\t\tif (isVibrationSupported()) {\n\t\t\tnavigator.vibrate(toVibrateSequence(pattern));\n\t\t} else if (isIOS() && !config) {\n\t\t\tschedulePattern(pattern);\n\t\t}\n\t};\n\n\tnode.addEventListener(\"click\", handler);\n\n\treturn {\n\t\tupdate(newAction: HapticAction) {\n\t\t\tcurrentAction = newAction;\n\t\t\tnode.setAttribute(\"data-haptic\", newAction);\n\t\t},\n\t\tdestroy() {\n\t\t\tnode.removeEventListener(\"click\", handler);\n\t\t\tnode.removeAttribute(\"data-haptic\");\n\t\t\tmqlCleanup?.();\n\t\t},\n\t};\n}\n","import {\n\tPRESETS,\n\tisVibrationSupported,\n\tisIOS,\n\ttoVibrateSequence,\n\tschedulePattern,\n} from \"@haptics/core\";\nimport type { PresetName } from \"@haptics/core\";\nimport { getHapticsConfig } from \"./context\";\n\n/**\n * Create an imperative haptics controller.\n *\n * Can be called inside a Svelte component's <script> block (will use\n * setupHaptics context if available) or outside components (falls back\n * to built-in presets).\n *\n * @example\n * ```svelte\n * <script>\n *   import { createHaptics } from '@haptics/svelte';\n *   const haptics = createHaptics();\n *   function handleSave() { haptics.trigger('success'); }\n * </script>\n * ```\n */\nexport function createHaptics() {\n\tconst config = getHapticsConfig();\n\tconst patterns = config?.patterns ?? PRESETS;\n\tconst respectReducedMotion = config?.respectReducedMotion ?? true;\n\n\tlet prefersReducedMotion = false;\n\tif (typeof window !== \"undefined\" && window.matchMedia) {\n\t\tconst mql = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\tprefersReducedMotion = mql.matches;\n\t\tmql.addEventListener(\"change\", (e) => {\n\t\t\tprefersReducedMotion = e.matches;\n\t\t});\n\t}\n\n\tconst trigger = (action: PresetName | (string & {})) => {\n\t\tif (respectReducedMotion && prefersReducedMotion) return;\n\n\t\tconst pattern = patterns[action as keyof typeof patterns];\n\t\tif (!pattern) return;\n\n\t\tif (isVibrationSupported()) {\n\t\t\tnavigator.vibrate(toVibrateSequence(pattern));\n\t\t} else if (isIOS()) {\n\t\t\tschedulePattern(pattern);\n\t\t}\n\t};\n\n\tconst cancel = () => {\n\t\tif (isVibrationSupported()) navigator.vibrate(0);\n\t};\n\n\treturn {\n\t\ttrigger,\n\t\tcancel,\n\t\tisSupported: isVibrationSupported(),\n\t\tisIOSSupported: isIOS(),\n\t};\n}\n"]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@haptics/svelte",
+  "version": "1.0.0",
+  "description": "Svelte actions and imperative API for haptic feedback. iOS Safari and Android Vibration API.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/howdoiusekeyboard/haptics.git",
+    "directory": "packages/svelte"
+  },
+  "author": "Howdoiusekeyboard",
+  "license": "MIT",
+  "keywords": [
+    "haptics",
+    "svelte",
+    "haptic-feedback",
+    "vibration",
+    "ios",
+    "android",
+    "action"
+  ],
+  "dependencies": {
+    "@haptics/core": "^1.0.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=4"
+  },
+  "devDependencies": {
+    "jsdom": "^29.0.0",
+    "tsup": "^8.0.0",
+    "vitest": "^4.1.0"
+  }
+}