@stroke-stabilizer/react 0.1.3

package/README.md

@@ -0,0 +1,155 @@
+# @stroke-stabilizer/react
+
+[![npm version](https://img.shields.io/npm/v/@stroke-stabilizer/react.svg)](https://www.npmjs.com/package/@stroke-stabilizer/react)
+
+[日本語](./docs/README.ja.md)
+
+> This is part of the [stroke-stabilizer](https://github.com/usapopopooon/stroke-stabilizer) monorepo
+
+React hooks for stroke stabilization in digital drawing applications.
+
+## Installation
+
+```bash
+npm install @stroke-stabilizer/react @stroke-stabilizer/core
+```
+
+## Usage
+
+### useStabilizedPointer
+
+```tsx
+import { useStabilizedPointer } from '@stroke-stabilizer/react'
+import { oneEuroFilter } from '@stroke-stabilizer/core'
+
+function DrawingCanvas() {
+  const { process, reset, pointer } = useStabilizedPointer({
+    level: 50,
+    onPoint: (point) => {
+      draw(point.x, point.y)
+    },
+  })
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    process({
+      x: e.clientX,
+      y: e.clientY,
+      pressure: e.pressure,
+      timestamp: e.timeStamp,
+    })
+  }
+
+  const handlePointerUp = () => {
+    reset()
+  }
+
+  return (
+    <canvas onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} />
+  )
+}
+```
+
+### With rAF Batch Processing
+
+For high-frequency input devices, use the underlying `StabilizedPointer`'s batch processing:
+
+```tsx
+import { useStabilizedPointer } from '@stroke-stabilizer/react'
+import { useEffect } from 'react'
+
+function DrawingCanvas() {
+  const { pointer } = useStabilizedPointer({ level: 50 })
+
+  useEffect(() => {
+    pointer.enableBatching({
+      onBatch: (points) => drawPoints(points),
+    })
+    return () => pointer.disableBatching()
+  }, [pointer])
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    pointer.queue({
+      x: e.clientX,
+      y: e.clientY,
+      pressure: e.pressure,
+      timestamp: e.timeStamp,
+    })
+  }
+
+  return <canvas onPointerMove={handlePointerMove} />
+}
+```
+
+### useStabilizationLevel
+
+A hook for managing stabilization level state.
+
+```tsx
+import { useStabilizationLevel } from '@stroke-stabilizer/react'
+
+function StabilizationSlider() {
+  const { level, setLevel, isEnabled } = useStabilizationLevel({
+    initialLevel: 50,
+  })
+
+  return (
+    <div>
+      <input
+        type="range"
+        min={0}
+        max={100}
+        value={level}
+        onChange={(e) => setLevel(Number(e.target.value))}
+      />
+      <span>{level}%</span>
+      {isEnabled && <span>Stabilization enabled</span>}
+    </div>
+  )
+}
+```
+
+## API
+
+### useStabilizedPointer(options?)
+
+Creates a stabilized pointer instance.
+
+**Options:**
+
+- `level` - Stabilization level (0-100). Uses preset when specified
+- `filters` - Custom filter array. Used when level is not specified
+- `onPoint` - Callback when a point is processed
+
+**Returns:**
+
+- `process(point)` - Process a single point
+- `processAll(points)` - Process multiple points
+- `flushBuffer()` - Flush internal buffer
+- `reset()` - Reset the pointer state
+- `addFilter(filter)` - Add a filter dynamically
+- `removeFilter(type)` - Remove a filter by type
+- `updateFilter(type, params)` - Update filter parameters
+- `pointer` - Reference to the StabilizedPointer instance
+
+### useStabilizationLevel(options?)
+
+Manages stabilization level state.
+
+**Options:**
+
+- `initialLevel` - Initial level (default: 0)
+- `min` - Minimum level (default: 0)
+- `max` - Maximum level (default: 100)
+- `onChange` - Callback when level changes
+
+**Returns:**
+
+- `level` - Current level
+- `setLevel(value)` - Set the level
+- `increase(amount?)` - Increase level by amount (default: 10)
+- `decrease(amount?)` - Decrease level by amount (default: 10)
+- `isEnabled` - Whether stabilization is active (level > 0)
+
+## License
+
+[MIT](../../LICENSE)

package/dist/index.cjs

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const core = require("@stroke-stabilizer/core");
+function useStabilizedPointer(options = {}) {
+  const { level, filters, onPoint } = options;
+  const pointerRef = react.useRef(null);
+  const getPointer = react.useCallback(() => {
+    if (!pointerRef.current) {
+      if (level !== void 0) {
+        pointerRef.current = core.createStabilizedPointer(level);
+      } else {
+        pointerRef.current = new core.StabilizedPointer();
+        if (filters) {
+          for (const filter of filters) {
+            pointerRef.current.addFilter(filter);
+          }
+        }
+      }
+    }
+    return pointerRef.current;
+  }, [level, filters]);
+  const process = react.useCallback(
+    (point) => {
+      const result = getPointer().process(point);
+      if (result && onPoint) {
+        onPoint(result);
+      }
+      return result;
+    },
+    [getPointer, onPoint]
+  );
+  const processAll = react.useCallback(
+    (points) => {
+      const results = getPointer().processAll(points);
+      if (onPoint) {
+        for (const point of results) {
+          onPoint(point);
+        }
+      }
+      return results;
+    },
+    [getPointer, onPoint]
+  );
+  const flushBuffer = react.useCallback(() => {
+    return getPointer().flushBuffer();
+  }, [getPointer]);
+  const reset = react.useCallback(() => {
+    getPointer().reset();
+  }, [getPointer]);
+  const addFilter = react.useCallback(
+    (filter) => {
+      getPointer().addFilter(filter);
+    },
+    [getPointer]
+  );
+  const removeFilter = react.useCallback(
+    (type) => {
+      return getPointer().removeFilter(type);
+    },
+    [getPointer]
+  );
+  const updateFilter = react.useCallback(
+    (type, params) => {
+      return getPointer().updateFilter(type, params);
+    },
+    [getPointer]
+  );
+  return react.useMemo(
+    () => ({
+      process,
+      processAll,
+      flushBuffer,
+      reset,
+      addFilter,
+      removeFilter,
+      updateFilter,
+      pointer: getPointer()
+    }),
+    [
+      process,
+      processAll,
+      flushBuffer,
+      reset,
+      addFilter,
+      removeFilter,
+      updateFilter,
+      getPointer
+    ]
+  );
+}
+function useStabilizationLevel(options = {}) {
+  const { initialLevel = 0, min = 0, max = 100, onChange } = options;
+  const [level, setLevelState] = react.useState(
+    () => Math.max(min, Math.min(max, initialLevel))
+  );
+  const setLevel = react.useCallback(
+    (newLevel) => {
+      const clamped = Math.max(min, Math.min(max, newLevel));
+      setLevelState(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    },
+    [min, max, onChange]
+  );
+  const increase = react.useCallback(
+    (amount = 10) => {
+      setLevel(level + amount);
+    },
+    [level, setLevel]
+  );
+  const decrease = react.useCallback(
+    (amount = 10) => {
+      setLevel(level - amount);
+    },
+    [level, setLevel]
+  );
+  return {
+    level,
+    setLevel,
+    increase,
+    decrease,
+    isEnabled: level > 0
+  };
+}
+exports.useStabilizationLevel = useStabilizationLevel;
+exports.useStabilizedPointer = useStabilizedPointer;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/useStabilizedPointer.ts","../src/useStabilizationLevel.ts"],"sourcesContent":["import { useCallback, useRef, useMemo } from 'react'\nimport {\n  StabilizedPointer,\n  createStabilizedPointer,\n  type PointerPoint,\n  type Filter,\n} from '@stroke-stabilizer/core'\n\nexport interface UseStabilizedPointerOptions {\n  /** Stabilization level (0-100). Uses preset when specified */\n  level?: number\n  /** Custom filters. Used when level is not specified */\n  filters?: Filter[]\n  /** Callback when a point is processed */\n  onPoint?: (point: PointerPoint) => void\n}\n\nexport interface UseStabilizedPointerReturn {\n  /** Process a point */\n  process: (point: PointerPoint) => PointerPoint | null\n  /** Process multiple points at once */\n  processAll: (points: PointerPoint[]) => PointerPoint[]\n  /** Flush buffer */\n  flushBuffer: () => PointerPoint[]\n  /** Reset */\n  reset: () => void\n  /** Add a filter */\n  addFilter: (filter: Filter) => void\n  /** Remove a filter */\n  removeFilter: (type: string) => boolean\n  /** Update filter parameters */\n  updateFilter: <T>(type: string, params: Partial<T>) => boolean\n  /** Reference to StabilizedPointer instance */\n  pointer: StabilizedPointer\n}\n\n/**\n * React Hook for stroke stabilization\n *\n * @example\n * ```tsx\n * function DrawingCanvas() {\n *   const { process, reset } = useStabilizedPointer({\n *     level: 50,\n *     onPoint: (point) => {\n *       // Draw with stabilized point\n *       drawPoint(point)\n *     }\n *   })\n *\n *   const handlePointerMove = (e: React.PointerEvent) => {\n *     process({\n *       x: e.clientX,\n *       y: e.clientY,\n *       pressure: e.pressure,\n *       timestamp: e.timeStamp\n *     })\n *   }\n *\n *   const handlePointerUp = () => {\n *     reset()\n *   }\n *\n *   return <canvas onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} />\n * }\n * ```\n */\nexport function useStabilizedPointer(\n  options: UseStabilizedPointerOptions = {}\n): UseStabilizedPointerReturn {\n  const { level, filters, onPoint } = options\n\n  const pointerRef = useRef<StabilizedPointer | null>(null)\n\n  // Lazy initialization\n  const getPointer = useCallback(() => {\n    if (!pointerRef.current) {\n      if (level !== undefined) {\n        pointerRef.current = createStabilizedPointer(level)\n      } else {\n        pointerRef.current = new StabilizedPointer()\n        if (filters) {\n          for (const filter of filters) {\n            pointerRef.current.addFilter(filter)\n          }\n        }\n      }\n    }\n    return pointerRef.current\n  }, [level, filters])\n\n  const process = useCallback(\n    (point: PointerPoint): PointerPoint | null => {\n      const result = getPointer().process(point)\n      if (result && onPoint) {\n        onPoint(result)\n      }\n      return result\n    },\n    [getPointer, onPoint]\n  )\n\n  const processAll = useCallback(\n    (points: PointerPoint[]): PointerPoint[] => {\n      const results = getPointer().processAll(points)\n      if (onPoint) {\n        for (const point of results) {\n          onPoint(point)\n        }\n      }\n      return results\n    },\n    [getPointer, onPoint]\n  )\n\n  const flushBuffer = useCallback(() => {\n    return getPointer().flushBuffer()\n  }, [getPointer])\n\n  const reset = useCallback(() => {\n    getPointer().reset()\n  }, [getPointer])\n\n  const addFilter = useCallback(\n    (filter: Filter) => {\n      getPointer().addFilter(filter)\n    },\n    [getPointer]\n  )\n\n  const removeFilter = useCallback(\n    (type: string) => {\n      return getPointer().removeFilter(type)\n    },\n    [getPointer]\n  )\n\n  const updateFilter = useCallback(\n    <T>(type: string, params: Partial<T>) => {\n      return getPointer().updateFilter(type, params)\n    },\n    [getPointer]\n  )\n\n  return useMemo(\n    () => ({\n      process,\n      processAll,\n      flushBuffer,\n      reset,\n      addFilter,\n      removeFilter,\n      updateFilter,\n      pointer: getPointer(),\n    }),\n    [\n      process,\n      processAll,\n      flushBuffer,\n      reset,\n      addFilter,\n      removeFilter,\n      updateFilter,\n      getPointer,\n    ]\n  )\n}\n","import { useState, useCallback } from 'react'\n\nexport interface UseStabilizationLevelOptions {\n  /** Initial value (default: 0) */\n  initialLevel?: number\n  /** Minimum value (default: 0) */\n  min?: number\n  /** Maximum value (default: 100) */\n  max?: number\n  /** Callback when level changes */\n  onChange?: (level: number) => void\n}\n\nexport interface UseStabilizationLevelReturn {\n  /** Current stabilization level */\n  level: number\n  /** Set level */\n  setLevel: (level: number) => void\n  /** Increase level */\n  increase: (amount?: number) => void\n  /** Decrease level */\n  decrease: (amount?: number) => void\n  /** Whether stabilization is enabled */\n  isEnabled: boolean\n}\n\n/**\n * React Hook for managing stabilization level\n *\n * @example\n * ```tsx\n * function StabilizationControl() {\n *   const { level, setLevel, isEnabled } = useStabilizationLevel({\n *     initialLevel: 50,\n *     onChange: (newLevel) => console.log('Level changed:', newLevel)\n *   })\n *\n *   return (\n *     <div>\n *       <input\n *         type=\"range\"\n *         min={0}\n *         max={100}\n *         value={level}\n *         onChange={(e) => setLevel(Number(e.target.value))}\n *       />\n *       <span>{level}%</span>\n *       {isEnabled && <span>Stabilization enabled</span>}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useStabilizationLevel(\n  options: UseStabilizationLevelOptions = {}\n): UseStabilizationLevelReturn {\n  const { initialLevel = 0, min = 0, max = 100, onChange } = options\n\n  const [level, setLevelState] = useState(() =>\n    Math.max(min, Math.min(max, initialLevel))\n  )\n\n  const setLevel = useCallback(\n    (newLevel: number) => {\n      const clamped = Math.max(min, Math.min(max, newLevel))\n      setLevelState(clamped)\n      onChange?.(clamped)\n    },\n    [min, max, onChange]\n  )\n\n  const increase = useCallback(\n    (amount = 10) => {\n      setLevel(level + amount)\n    },\n    [level, setLevel]\n  )\n\n  const decrease = useCallback(\n    (amount = 10) => {\n      setLevel(level - amount)\n    },\n    [level, setLevel]\n  )\n\n  return {\n    level,\n    setLevel,\n    increase,\n    decrease,\n    isEnabled: level > 0,\n  }\n}\n"],"names":["useRef","useCallback","createStabilizedPointer","StabilizedPointer","useMemo","useState"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { useStabilizedPointer } from './useStabilizedPointer';
+export type { UseStabilizedPointerOptions, UseStabilizedPointerReturn, } from './useStabilizedPointer';
+export { useStabilizationLevel } from './useStabilizationLevel';
+export type { UseStabilizationLevelOptions, UseStabilizationLevelReturn, } from './useStabilizationLevel';
+export type { Point, PointerPoint, Filter } from '@stroke-stabilizer/core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,YAAY,EACV,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,wBAAwB,CAAA;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAA;AAGhC,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/index.js

@@ -0,0 +1,127 @@
+import { useRef, useCallback, useMemo, useState } from "react";
+import { createStabilizedPointer, StabilizedPointer } from "@stroke-stabilizer/core";
+function useStabilizedPointer(options = {}) {
+  const { level, filters, onPoint } = options;
+  const pointerRef = useRef(null);
+  const getPointer = useCallback(() => {
+    if (!pointerRef.current) {
+      if (level !== void 0) {
+        pointerRef.current = createStabilizedPointer(level);
+      } else {
+        pointerRef.current = new StabilizedPointer();
+        if (filters) {
+          for (const filter of filters) {
+            pointerRef.current.addFilter(filter);
+          }
+        }
+      }
+    }
+    return pointerRef.current;
+  }, [level, filters]);
+  const process = useCallback(
+    (point) => {
+      const result = getPointer().process(point);
+      if (result && onPoint) {
+        onPoint(result);
+      }
+      return result;
+    },
+    [getPointer, onPoint]
+  );
+  const processAll = useCallback(
+    (points) => {
+      const results = getPointer().processAll(points);
+      if (onPoint) {
+        for (const point of results) {
+          onPoint(point);
+        }
+      }
+      return results;
+    },
+    [getPointer, onPoint]
+  );
+  const flushBuffer = useCallback(() => {
+    return getPointer().flushBuffer();
+  }, [getPointer]);
+  const reset = useCallback(() => {
+    getPointer().reset();
+  }, [getPointer]);
+  const addFilter = useCallback(
+    (filter) => {
+      getPointer().addFilter(filter);
+    },
+    [getPointer]
+  );
+  const removeFilter = useCallback(
+    (type) => {
+      return getPointer().removeFilter(type);
+    },
+    [getPointer]
+  );
+  const updateFilter = useCallback(
+    (type, params) => {
+      return getPointer().updateFilter(type, params);
+    },
+    [getPointer]
+  );
+  return useMemo(
+    () => ({
+      process,
+      processAll,
+      flushBuffer,
+      reset,
+      addFilter,
+      removeFilter,
+      updateFilter,
+      pointer: getPointer()
+    }),
+    [
+      process,
+      processAll,
+      flushBuffer,
+      reset,
+      addFilter,
+      removeFilter,
+      updateFilter,
+      getPointer
+    ]
+  );
+}
+function useStabilizationLevel(options = {}) {
+  const { initialLevel = 0, min = 0, max = 100, onChange } = options;
+  const [level, setLevelState] = useState(
+    () => Math.max(min, Math.min(max, initialLevel))
+  );
+  const setLevel = useCallback(
+    (newLevel) => {
+      const clamped = Math.max(min, Math.min(max, newLevel));
+      setLevelState(clamped);
+      onChange == null ? void 0 : onChange(clamped);
+    },
+    [min, max, onChange]
+  );
+  const increase = useCallback(
+    (amount = 10) => {
+      setLevel(level + amount);
+    },
+    [level, setLevel]
+  );
+  const decrease = useCallback(
+    (amount = 10) => {
+      setLevel(level - amount);
+    },
+    [level, setLevel]
+  );
+  return {
+    level,
+    setLevel,
+    increase,
+    decrease,
+    isEnabled: level > 0
+  };
+}
+export {
+  useStabilizationLevel,
+  useStabilizedPointer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/useStabilizedPointer.ts","../src/useStabilizationLevel.ts"],"sourcesContent":["import { useCallback, useRef, useMemo } from 'react'\nimport {\n  StabilizedPointer,\n  createStabilizedPointer,\n  type PointerPoint,\n  type Filter,\n} from '@stroke-stabilizer/core'\n\nexport interface UseStabilizedPointerOptions {\n  /** Stabilization level (0-100). Uses preset when specified */\n  level?: number\n  /** Custom filters. Used when level is not specified */\n  filters?: Filter[]\n  /** Callback when a point is processed */\n  onPoint?: (point: PointerPoint) => void\n}\n\nexport interface UseStabilizedPointerReturn {\n  /** Process a point */\n  process: (point: PointerPoint) => PointerPoint | null\n  /** Process multiple points at once */\n  processAll: (points: PointerPoint[]) => PointerPoint[]\n  /** Flush buffer */\n  flushBuffer: () => PointerPoint[]\n  /** Reset */\n  reset: () => void\n  /** Add a filter */\n  addFilter: (filter: Filter) => void\n  /** Remove a filter */\n  removeFilter: (type: string) => boolean\n  /** Update filter parameters */\n  updateFilter: <T>(type: string, params: Partial<T>) => boolean\n  /** Reference to StabilizedPointer instance */\n  pointer: StabilizedPointer\n}\n\n/**\n * React Hook for stroke stabilization\n *\n * @example\n * ```tsx\n * function DrawingCanvas() {\n *   const { process, reset } = useStabilizedPointer({\n *     level: 50,\n *     onPoint: (point) => {\n *       // Draw with stabilized point\n *       drawPoint(point)\n *     }\n *   })\n *\n *   const handlePointerMove = (e: React.PointerEvent) => {\n *     process({\n *       x: e.clientX,\n *       y: e.clientY,\n *       pressure: e.pressure,\n *       timestamp: e.timeStamp\n *     })\n *   }\n *\n *   const handlePointerUp = () => {\n *     reset()\n *   }\n *\n *   return <canvas onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} />\n * }\n * ```\n */\nexport function useStabilizedPointer(\n  options: UseStabilizedPointerOptions = {}\n): UseStabilizedPointerReturn {\n  const { level, filters, onPoint } = options\n\n  const pointerRef = useRef<StabilizedPointer | null>(null)\n\n  // Lazy initialization\n  const getPointer = useCallback(() => {\n    if (!pointerRef.current) {\n      if (level !== undefined) {\n        pointerRef.current = createStabilizedPointer(level)\n      } else {\n        pointerRef.current = new StabilizedPointer()\n        if (filters) {\n          for (const filter of filters) {\n            pointerRef.current.addFilter(filter)\n          }\n        }\n      }\n    }\n    return pointerRef.current\n  }, [level, filters])\n\n  const process = useCallback(\n    (point: PointerPoint): PointerPoint | null => {\n      const result = getPointer().process(point)\n      if (result && onPoint) {\n        onPoint(result)\n      }\n      return result\n    },\n    [getPointer, onPoint]\n  )\n\n  const processAll = useCallback(\n    (points: PointerPoint[]): PointerPoint[] => {\n      const results = getPointer().processAll(points)\n      if (onPoint) {\n        for (const point of results) {\n          onPoint(point)\n        }\n      }\n      return results\n    },\n    [getPointer, onPoint]\n  )\n\n  const flushBuffer = useCallback(() => {\n    return getPointer().flushBuffer()\n  }, [getPointer])\n\n  const reset = useCallback(() => {\n    getPointer().reset()\n  }, [getPointer])\n\n  const addFilter = useCallback(\n    (filter: Filter) => {\n      getPointer().addFilter(filter)\n    },\n    [getPointer]\n  )\n\n  const removeFilter = useCallback(\n    (type: string) => {\n      return getPointer().removeFilter(type)\n    },\n    [getPointer]\n  )\n\n  const updateFilter = useCallback(\n    <T>(type: string, params: Partial<T>) => {\n      return getPointer().updateFilter(type, params)\n    },\n    [getPointer]\n  )\n\n  return useMemo(\n    () => ({\n      process,\n      processAll,\n      flushBuffer,\n      reset,\n      addFilter,\n      removeFilter,\n      updateFilter,\n      pointer: getPointer(),\n    }),\n    [\n      process,\n      processAll,\n      flushBuffer,\n      reset,\n      addFilter,\n      removeFilter,\n      updateFilter,\n      getPointer,\n    ]\n  )\n}\n","import { useState, useCallback } from 'react'\n\nexport interface UseStabilizationLevelOptions {\n  /** Initial value (default: 0) */\n  initialLevel?: number\n  /** Minimum value (default: 0) */\n  min?: number\n  /** Maximum value (default: 100) */\n  max?: number\n  /** Callback when level changes */\n  onChange?: (level: number) => void\n}\n\nexport interface UseStabilizationLevelReturn {\n  /** Current stabilization level */\n  level: number\n  /** Set level */\n  setLevel: (level: number) => void\n  /** Increase level */\n  increase: (amount?: number) => void\n  /** Decrease level */\n  decrease: (amount?: number) => void\n  /** Whether stabilization is enabled */\n  isEnabled: boolean\n}\n\n/**\n * React Hook for managing stabilization level\n *\n * @example\n * ```tsx\n * function StabilizationControl() {\n *   const { level, setLevel, isEnabled } = useStabilizationLevel({\n *     initialLevel: 50,\n *     onChange: (newLevel) => console.log('Level changed:', newLevel)\n *   })\n *\n *   return (\n *     <div>\n *       <input\n *         type=\"range\"\n *         min={0}\n *         max={100}\n *         value={level}\n *         onChange={(e) => setLevel(Number(e.target.value))}\n *       />\n *       <span>{level}%</span>\n *       {isEnabled && <span>Stabilization enabled</span>}\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useStabilizationLevel(\n  options: UseStabilizationLevelOptions = {}\n): UseStabilizationLevelReturn {\n  const { initialLevel = 0, min = 0, max = 100, onChange } = options\n\n  const [level, setLevelState] = useState(() =>\n    Math.max(min, Math.min(max, initialLevel))\n  )\n\n  const setLevel = useCallback(\n    (newLevel: number) => {\n      const clamped = Math.max(min, Math.min(max, newLevel))\n      setLevelState(clamped)\n      onChange?.(clamped)\n    },\n    [min, max, onChange]\n  )\n\n  const increase = useCallback(\n    (amount = 10) => {\n      setLevel(level + amount)\n    },\n    [level, setLevel]\n  )\n\n  const decrease = useCallback(\n    (amount = 10) => {\n      setLevel(level - amount)\n    },\n    [level, setLevel]\n  )\n\n  return {\n    level,\n    setLevel,\n    increase,\n    decrease,\n    isEnabled: level > 0,\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/useStabilizationLevel.d.ts

@@ -0,0 +1,51 @@
+export interface UseStabilizationLevelOptions {
+    /** Initial value (default: 0) */
+    initialLevel?: number;
+    /** Minimum value (default: 0) */
+    min?: number;
+    /** Maximum value (default: 100) */
+    max?: number;
+    /** Callback when level changes */
+    onChange?: (level: number) => void;
+}
+export interface UseStabilizationLevelReturn {
+    /** Current stabilization level */
+    level: number;
+    /** Set level */
+    setLevel: (level: number) => void;
+    /** Increase level */
+    increase: (amount?: number) => void;
+    /** Decrease level */
+    decrease: (amount?: number) => void;
+    /** Whether stabilization is enabled */
+    isEnabled: boolean;
+}
+/**
+ * React Hook for managing stabilization level
+ *
+ * @example
+ * ```tsx
+ * function StabilizationControl() {
+ *   const { level, setLevel, isEnabled } = useStabilizationLevel({
+ *     initialLevel: 50,
+ *     onChange: (newLevel) => console.log('Level changed:', newLevel)
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         type="range"
+ *         min={0}
+ *         max={100}
+ *         value={level}
+ *         onChange={(e) => setLevel(Number(e.target.value))}
+ *       />
+ *       <span>{level}%</span>
+ *       {isEnabled && <span>Stabilization enabled</span>}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useStabilizationLevel(options?: UseStabilizationLevelOptions): UseStabilizationLevelReturn;
+//# sourceMappingURL=useStabilizationLevel.d.ts.map

package/dist/useStabilizationLevel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStabilizationLevel.d.ts","sourceRoot":"","sources":["../src/useStabilizationLevel.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,4BAA4B;IAC3C,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,MAAM,WAAW,2BAA2B;IAC1C,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,qBAAqB;IACrB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,qBAAqB;IACrB,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,GAAE,4BAAiC,GACzC,2BAA2B,CAqC7B"}

package/dist/useStabilizedPointer.d.ts

@@ -0,0 +1,60 @@
+import { StabilizedPointer, type PointerPoint, type Filter } from '@stroke-stabilizer/core';
+export interface UseStabilizedPointerOptions {
+    /** Stabilization level (0-100). Uses preset when specified */
+    level?: number;
+    /** Custom filters. Used when level is not specified */
+    filters?: Filter[];
+    /** Callback when a point is processed */
+    onPoint?: (point: PointerPoint) => void;
+}
+export interface UseStabilizedPointerReturn {
+    /** Process a point */
+    process: (point: PointerPoint) => PointerPoint | null;
+    /** Process multiple points at once */
+    processAll: (points: PointerPoint[]) => PointerPoint[];
+    /** Flush buffer */
+    flushBuffer: () => PointerPoint[];
+    /** Reset */
+    reset: () => void;
+    /** Add a filter */
+    addFilter: (filter: Filter) => void;
+    /** Remove a filter */
+    removeFilter: (type: string) => boolean;
+    /** Update filter parameters */
+    updateFilter: <T>(type: string, params: Partial<T>) => boolean;
+    /** Reference to StabilizedPointer instance */
+    pointer: StabilizedPointer;
+}
+/**
+ * React Hook for stroke stabilization
+ *
+ * @example
+ * ```tsx
+ * function DrawingCanvas() {
+ *   const { process, reset } = useStabilizedPointer({
+ *     level: 50,
+ *     onPoint: (point) => {
+ *       // Draw with stabilized point
+ *       drawPoint(point)
+ *     }
+ *   })
+ *
+ *   const handlePointerMove = (e: React.PointerEvent) => {
+ *     process({
+ *       x: e.clientX,
+ *       y: e.clientY,
+ *       pressure: e.pressure,
+ *       timestamp: e.timeStamp
+ *     })
+ *   }
+ *
+ *   const handlePointerUp = () => {
+ *     reset()
+ *   }
+ *
+ *   return <canvas onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} />
+ * }
+ * ```
+ */
+export declare function useStabilizedPointer(options?: UseStabilizedPointerOptions): UseStabilizedPointerReturn;
+//# sourceMappingURL=useStabilizedPointer.d.ts.map

package/dist/useStabilizedPointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStabilizedPointer.d.ts","sourceRoot":"","sources":["../src/useStabilizedPointer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EAEjB,KAAK,YAAY,EACjB,KAAK,MAAM,EACZ,MAAM,yBAAyB,CAAA;AAEhC,MAAM,WAAW,2BAA2B;IAC1C,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;CACxC;AAED,MAAM,WAAW,0BAA0B;IACzC,sBAAsB;IACtB,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,YAAY,GAAG,IAAI,CAAA;IACrD,sCAAsC;IACtC,UAAU,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,CAAA;IACtD,mBAAmB;IACnB,WAAW,EAAE,MAAM,YAAY,EAAE,CAAA;IACjC,YAAY;IACZ,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,mBAAmB;IACnB,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,sBAAsB;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;IACvC,+BAA+B;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,OAAO,CAAA;IAC9D,8CAA8C;IAC9C,OAAO,EAAE,iBAAiB,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,2BAAgC,GACxC,0BAA0B,CAiG5B"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@stroke-stabilizer/react",
+  "version": "0.1.3",
+  "description": "React hooks for stroke stabilization",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@stroke-stabilizer/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "keywords": [
+    "react",
+    "hook",
+    "stroke",
+    "stabilization",
+    "drawing",
+    "canvas"
+  ],
+  "author": "usapopopooon <usapopopooon@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/usapopopooon/stroke-stabilizer"
+  },
+  "homepage": "https://github.com/usapopopooon/stroke-stabilizer",
+  "sideEffects": false
+}