@stroke-stabilizer/vue 0.1.3

package/README.md

@@ -0,0 +1,168 @@
+# @stroke-stabilizer/vue
+
+[![npm version](https://img.shields.io/npm/v/@stroke-stabilizer/vue.svg)](https://www.npmjs.com/package/@stroke-stabilizer/vue)
+
+[日本語](./docs/README.ja.md)
+
+> This is part of the [stroke-stabilizer](https://github.com/usapopopooon/stroke-stabilizer) monorepo
+
+Vue composables for stroke stabilization in digital drawing applications.
+
+## Installation
+
+```bash
+npm install @stroke-stabilizer/vue @stroke-stabilizer/core
+```
+
+## Usage
+
+### useStabilizedPointer
+
+```vue
+<script setup lang="ts">
+import { useStabilizedPointer } from '@stroke-stabilizer/vue'
+
+const { process, reset, pointer } = useStabilizedPointer({
+  level: 50,
+  onPoint: (point) => {
+    draw(point.x, point.y)
+  },
+})
+
+function handlePointerMove(e: PointerEvent) {
+  process({
+    x: e.clientX,
+    y: e.clientY,
+    pressure: e.pressure,
+    timestamp: e.timeStamp,
+  })
+}
+
+function handlePointerUp() {
+  reset()
+}
+</script>
+
+<template>
+  <canvas @pointermove="handlePointerMove" @pointerup="handlePointerUp" />
+</template>
+```
+
+### With rAF Batch Processing
+
+For high-frequency input devices, use the underlying `StabilizedPointer`'s batch processing:
+
+```vue
+<script setup lang="ts">
+import { useStabilizedPointer } from '@stroke-stabilizer/vue'
+import { onMounted, onUnmounted } from 'vue'
+
+const { pointer } = useStabilizedPointer({ level: 50 })
+
+onMounted(() => {
+  pointer.value.enableBatching({
+    onBatch: (points) => drawPoints(points),
+  })
+})
+
+onUnmounted(() => {
+  pointer.value.disableBatching()
+})
+
+function handlePointerMove(e: PointerEvent) {
+  pointer.value.queue({
+    x: e.clientX,
+    y: e.clientY,
+    pressure: e.pressure,
+    timestamp: e.timeStamp,
+  })
+}
+</script>
+
+<template>
+  <canvas @pointermove="handlePointerMove" />
+</template>
+```
+
+### useStabilizationLevel
+
+A composable for managing stabilization level with reactive state.
+
+```vue
+<script setup lang="ts">
+import {
+  useStabilizationLevel,
+  useStabilizedPointer,
+} from '@stroke-stabilizer/vue'
+
+const { level, setLevel, isEnabled } = useStabilizationLevel({
+  initialLevel: 50,
+  onChange: (newLevel) => console.log('Level changed:', newLevel),
+})
+
+const { process, reset } = useStabilizedPointer({
+  level: level.value,
+})
+</script>
+
+<template>
+  <div>
+    <input
+      type="range"
+      :min="0"
+      :max="100"
+      :value="level"
+      @input="setLevel(Number(($event.target as HTMLInputElement).value))"
+    />
+    <span>{{ level }}%</span>
+    <span v-if="isEnabled">Stabilization enabled</span>
+  </div>
+</template>
+```
+
+## 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` - Computed ref to the StabilizedPointer instance
+- `filterCount` - Computed ref to the number of active filters
+
+### 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` - Computed ref to current level
+- `setLevel(value)` - Set the level
+- `increase(amount?)` - Increase level by amount (default: 10)
+- `decrease(amount?)` - Decrease level by amount (default: 10)
+- `isEnabled` - Computed ref indicating if stabilization is active (level > 0)
+
+## License
+
+[MIT](../../LICENSE)

package/dist/index.cjs

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("@stroke-stabilizer/core");
+function useStabilizedPointer(options = {}) {
+  const { level, filters, onPoint } = options;
+  const pointer = vue.shallowRef(
+    level !== void 0 ? core.createStabilizedPointer(level) : (() => {
+      const p = new core.StabilizedPointer();
+      if (filters) {
+        for (const filter of filters) {
+          p.addFilter(filter);
+        }
+      }
+      return p;
+    })()
+  );
+  const filterCount = vue.ref(pointer.value.length);
+  function process(point) {
+    const result = pointer.value.process(point);
+    if (result && onPoint) {
+      onPoint(result);
+    }
+    return result;
+  }
+  function processAll(points) {
+    const results = pointer.value.processAll(points);
+    if (onPoint) {
+      for (const p of results) {
+        onPoint(p);
+      }
+    }
+    return results;
+  }
+  function flushBuffer() {
+    return pointer.value.flushBuffer();
+  }
+  function reset() {
+    pointer.value.reset();
+  }
+  function addFilter(filter) {
+    pointer.value.addFilter(filter);
+    filterCount.value = pointer.value.length;
+  }
+  function removeFilter(type) {
+    const result = pointer.value.removeFilter(type);
+    filterCount.value = pointer.value.length;
+    return result;
+  }
+  function updateFilter(type, params) {
+    return pointer.value.updateFilter(type, params);
+  }
+  if (vue.getCurrentInstance()) {
+    vue.onUnmounted(() => {
+      pointer.value.clear();
+    });
+  }
+  return {
+    process,
+    processAll,
+    flushBuffer,
+    reset,
+    addFilter,
+    removeFilter,
+    updateFilter,
+    pointer: vue.computed(() => pointer.value),
+    filterCount: vue.computed(() => filterCount.value)
+  };
+}
+function useStabilizationLevel(options = {}) {
+  const { initialLevel = 0, min = 0, max = 100, onChange } = options;
+  const level = vue.ref(Math.max(min, Math.min(max, initialLevel)));
+  vue.watch(level, (newValue) => {
+    onChange == null ? void 0 : onChange(newValue);
+  });
+  function setLevel(value) {
+    level.value = Math.max(min, Math.min(max, value));
+  }
+  function increase(amount = 10) {
+    setLevel(level.value + amount);
+  }
+  function decrease(amount = 10) {
+    setLevel(level.value - amount);
+  }
+  return {
+    level: vue.computed(() => level.value),
+    setLevel,
+    increase,
+    decrease,
+    isEnabled: vue.computed(() => level.value > 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 { ref, shallowRef, computed, onUnmounted, getCurrentInstance } from 'vue'\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\n/**\n * Vue Composable for stroke stabilization\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStabilizedPointer } from '@stroke-stabilizer/vue'\n *\n * const { process, reset } = useStabilizedPointer({\n *   level: 50,\n *   onPoint: (point) => {\n *     // Draw with stabilized point\n *     drawPoint(point)\n *   }\n * })\n *\n * function handlePointerMove(e: PointerEvent) {\n *   process({\n *     x: e.clientX,\n *     y: e.clientY,\n *     pressure: e.pressure,\n *     timestamp: e.timeStamp\n *   })\n * }\n *\n * function handlePointerUp() {\n *   reset()\n * }\n * </script>\n *\n * <template>\n *   <canvas @pointermove=\"handlePointerMove\" @pointerup=\"handlePointerUp\" />\n * </template>\n * ```\n */\nexport function useStabilizedPointer(\n  options: UseStabilizedPointerOptions = {}\n) {\n  const { level, filters, onPoint } = options\n\n  // StabilizedPointer instance (non-reactive)\n  const pointer = shallowRef<StabilizedPointer>(\n    level !== undefined\n      ? createStabilizedPointer(level)\n      : (() => {\n          const p = new StabilizedPointer()\n          if (filters) {\n            for (const filter of filters) {\n              p.addFilter(filter)\n            }\n          }\n          return p\n        })()\n  )\n\n  // Filter count (reactive)\n  const filterCount = ref(pointer.value.length)\n\n  function process(point: PointerPoint): PointerPoint | null {\n    const result = pointer.value.process(point)\n    if (result && onPoint) {\n      onPoint(result)\n    }\n    return result\n  }\n\n  function processAll(points: PointerPoint[]): PointerPoint[] {\n    const results = pointer.value.processAll(points)\n    if (onPoint) {\n      for (const p of results) {\n        onPoint(p)\n      }\n    }\n    return results\n  }\n\n  function flushBuffer(): PointerPoint[] {\n    return pointer.value.flushBuffer()\n  }\n\n  function reset(): void {\n    pointer.value.reset()\n  }\n\n  function addFilter(filter: Filter): void {\n    pointer.value.addFilter(filter)\n    filterCount.value = pointer.value.length\n  }\n\n  function removeFilter(type: string): boolean {\n    const result = pointer.value.removeFilter(type)\n    filterCount.value = pointer.value.length\n    return result\n  }\n\n  function updateFilter<T>(type: string, params: Partial<T>): boolean {\n    return pointer.value.updateFilter(type, params)\n  }\n\n  // Cleanup (only register if in component context)\n  if (getCurrentInstance()) {\n    onUnmounted(() => {\n      pointer.value.clear()\n    })\n  }\n\n  return {\n    process,\n    processAll,\n    flushBuffer,\n    reset,\n    addFilter,\n    removeFilter,\n    updateFilter,\n    pointer: computed(() => pointer.value),\n    filterCount: computed(() => filterCount.value),\n  }\n}\n","import { ref, computed, watch } from 'vue'\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\n/**\n * Vue Composable for managing stabilization level\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStabilizationLevel } from '@stroke-stabilizer/vue'\n *\n * const { level, setLevel, isEnabled } = useStabilizationLevel({\n *   initialLevel: 50,\n *   onChange: (newLevel) => console.log('Level changed:', newLevel)\n * })\n * </script>\n *\n * <template>\n *   <div>\n *     <input\n *       type=\"range\"\n *       :min=\"0\"\n *       :max=\"100\"\n *       :value=\"level\"\n *       @input=\"setLevel(Number(($event.target as HTMLInputElement).value))\"\n *     />\n *     <span>{{ level }}%</span>\n *     <span v-if=\"isEnabled\">Stabilization enabled</span>\n *   </div>\n * </template>\n * ```\n */\nexport function useStabilizationLevel(\n  options: UseStabilizationLevelOptions = {}\n) {\n  const { initialLevel = 0, min = 0, max = 100, onChange } = options\n\n  const level = ref(Math.max(min, Math.min(max, initialLevel)))\n\n  // Watch for changes\n  watch(level, (newValue) => {\n    onChange?.(newValue)\n  })\n\n  function setLevel(value: number): void {\n    level.value = Math.max(min, Math.min(max, value))\n  }\n\n  function increase(amount = 10): void {\n    setLevel(level.value + amount)\n  }\n\n  function decrease(amount = 10): void {\n    setLevel(level.value - amount)\n  }\n\n  return {\n    level: computed(() => level.value),\n    setLevel,\n    increase,\n    decrease,\n    isEnabled: computed(() => level.value > 0),\n  }\n}\n"],"names":["shallowRef","createStabilizedPointer","StabilizedPointer","ref","getCurrentInstance","onUnmounted","computed","watch"],"mappings":";;;;AAoDO,SAAS,qBACd,UAAuC,IACvC;AACA,QAAM,EAAE,OAAO,SAAS,QAAA,IAAY;AAGpC,QAAM,UAAUA,IAAAA;AAAAA,IACd,UAAU,SACNC,KAAAA,wBAAwB,KAAK,KAC5B,MAAM;AACL,YAAM,IAAI,IAAIC,uBAAA;AACd,UAAI,SAAS;AACX,mBAAW,UAAU,SAAS;AAC5B,YAAE,UAAU,MAAM;AAAA,QACpB;AAAA,MACF;AACA,aAAO;AAAA,IACT,GAAA;AAAA,EAAG;AAIT,QAAM,cAAcC,IAAAA,IAAI,QAAQ,MAAM,MAAM;AAE5C,WAAS,QAAQ,OAA0C;AACzD,UAAM,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC1C,QAAI,UAAU,SAAS;AACrB,cAAQ,MAAM;AAAA,IAChB;AACA,WAAO;AAAA,EACT;AAEA,WAAS,WAAW,QAAwC;AAC1D,UAAM,UAAU,QAAQ,MAAM,WAAW,MAAM;AAC/C,QAAI,SAAS;AACX,iBAAW,KAAK,SAAS;AACvB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,WAAS,cAA8B;AACrC,WAAO,QAAQ,MAAM,YAAA;AAAA,EACvB;AAEA,WAAS,QAAc;AACrB,YAAQ,MAAM,MAAA;AAAA,EAChB;AAEA,WAAS,UAAU,QAAsB;AACvC,YAAQ,MAAM,UAAU,MAAM;AAC9B,gBAAY,QAAQ,QAAQ,MAAM;AAAA,EACpC;AAEA,WAAS,aAAa,MAAuB;AAC3C,UAAM,SAAS,QAAQ,MAAM,aAAa,IAAI;AAC9C,gBAAY,QAAQ,QAAQ,MAAM;AAClC,WAAO;AAAA,EACT;AAEA,WAAS,aAAgB,MAAc,QAA6B;AAClE,WAAO,QAAQ,MAAM,aAAa,MAAM,MAAM;AAAA,EAChD;AAGA,MAAIC,IAAAA,sBAAsB;AACxBC,QAAAA,YAAY,MAAM;AAChB,cAAQ,MAAM,MAAA;AAAA,IAChB,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAASC,IAAAA,SAAS,MAAM,QAAQ,KAAK;AAAA,IACrC,aAAaA,IAAAA,SAAS,MAAM,YAAY,KAAK;AAAA,EAAA;AAEjD;AC5FO,SAAS,sBACd,UAAwC,IACxC;AACA,QAAM,EAAE,eAAe,GAAG,MAAM,GAAG,MAAM,KAAK,aAAa;AAE3D,QAAM,QAAQH,IAAAA,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,YAAY,CAAC,CAAC;AAG5DI,YAAM,OAAO,CAAC,aAAa;AACzB,yCAAW;AAAA,EACb,CAAC;AAED,WAAS,SAAS,OAAqB;AACrC,UAAM,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAAA,EAClD;AAEA,WAAS,SAAS,SAAS,IAAU;AACnC,aAAS,MAAM,QAAQ,MAAM;AAAA,EAC/B;AAEA,WAAS,SAAS,SAAS,IAAU;AACnC,aAAS,MAAM,QAAQ,MAAM;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL,OAAOD,IAAAA,SAAS,MAAM,MAAM,KAAK;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAWA,IAAAA,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,EAAA;AAE7C;;;"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { useStabilizedPointer } from './useStabilizedPointer';
+export type { UseStabilizedPointerOptions } from './useStabilizedPointer';
+export { useStabilizationLevel } from './useStabilizationLevel';
+export type { UseStabilizationLevelOptions } 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,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAA;AAEzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,YAAY,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AAG3E,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/index.js

@@ -0,0 +1,95 @@
+import { shallowRef, ref, getCurrentInstance, onUnmounted, computed, watch } from "vue";
+import { createStabilizedPointer, StabilizedPointer } from "@stroke-stabilizer/core";
+function useStabilizedPointer(options = {}) {
+  const { level, filters, onPoint } = options;
+  const pointer = shallowRef(
+    level !== void 0 ? createStabilizedPointer(level) : (() => {
+      const p = new StabilizedPointer();
+      if (filters) {
+        for (const filter of filters) {
+          p.addFilter(filter);
+        }
+      }
+      return p;
+    })()
+  );
+  const filterCount = ref(pointer.value.length);
+  function process(point) {
+    const result = pointer.value.process(point);
+    if (result && onPoint) {
+      onPoint(result);
+    }
+    return result;
+  }
+  function processAll(points) {
+    const results = pointer.value.processAll(points);
+    if (onPoint) {
+      for (const p of results) {
+        onPoint(p);
+      }
+    }
+    return results;
+  }
+  function flushBuffer() {
+    return pointer.value.flushBuffer();
+  }
+  function reset() {
+    pointer.value.reset();
+  }
+  function addFilter(filter) {
+    pointer.value.addFilter(filter);
+    filterCount.value = pointer.value.length;
+  }
+  function removeFilter(type) {
+    const result = pointer.value.removeFilter(type);
+    filterCount.value = pointer.value.length;
+    return result;
+  }
+  function updateFilter(type, params) {
+    return pointer.value.updateFilter(type, params);
+  }
+  if (getCurrentInstance()) {
+    onUnmounted(() => {
+      pointer.value.clear();
+    });
+  }
+  return {
+    process,
+    processAll,
+    flushBuffer,
+    reset,
+    addFilter,
+    removeFilter,
+    updateFilter,
+    pointer: computed(() => pointer.value),
+    filterCount: computed(() => filterCount.value)
+  };
+}
+function useStabilizationLevel(options = {}) {
+  const { initialLevel = 0, min = 0, max = 100, onChange } = options;
+  const level = ref(Math.max(min, Math.min(max, initialLevel)));
+  watch(level, (newValue) => {
+    onChange == null ? void 0 : onChange(newValue);
+  });
+  function setLevel(value) {
+    level.value = Math.max(min, Math.min(max, value));
+  }
+  function increase(amount = 10) {
+    setLevel(level.value + amount);
+  }
+  function decrease(amount = 10) {
+    setLevel(level.value - amount);
+  }
+  return {
+    level: computed(() => level.value),
+    setLevel,
+    increase,
+    decrease,
+    isEnabled: computed(() => level.value > 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 { ref, shallowRef, computed, onUnmounted, getCurrentInstance } from 'vue'\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\n/**\n * Vue Composable for stroke stabilization\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStabilizedPointer } from '@stroke-stabilizer/vue'\n *\n * const { process, reset } = useStabilizedPointer({\n *   level: 50,\n *   onPoint: (point) => {\n *     // Draw with stabilized point\n *     drawPoint(point)\n *   }\n * })\n *\n * function handlePointerMove(e: PointerEvent) {\n *   process({\n *     x: e.clientX,\n *     y: e.clientY,\n *     pressure: e.pressure,\n *     timestamp: e.timeStamp\n *   })\n * }\n *\n * function handlePointerUp() {\n *   reset()\n * }\n * </script>\n *\n * <template>\n *   <canvas @pointermove=\"handlePointerMove\" @pointerup=\"handlePointerUp\" />\n * </template>\n * ```\n */\nexport function useStabilizedPointer(\n  options: UseStabilizedPointerOptions = {}\n) {\n  const { level, filters, onPoint } = options\n\n  // StabilizedPointer instance (non-reactive)\n  const pointer = shallowRef<StabilizedPointer>(\n    level !== undefined\n      ? createStabilizedPointer(level)\n      : (() => {\n          const p = new StabilizedPointer()\n          if (filters) {\n            for (const filter of filters) {\n              p.addFilter(filter)\n            }\n          }\n          return p\n        })()\n  )\n\n  // Filter count (reactive)\n  const filterCount = ref(pointer.value.length)\n\n  function process(point: PointerPoint): PointerPoint | null {\n    const result = pointer.value.process(point)\n    if (result && onPoint) {\n      onPoint(result)\n    }\n    return result\n  }\n\n  function processAll(points: PointerPoint[]): PointerPoint[] {\n    const results = pointer.value.processAll(points)\n    if (onPoint) {\n      for (const p of results) {\n        onPoint(p)\n      }\n    }\n    return results\n  }\n\n  function flushBuffer(): PointerPoint[] {\n    return pointer.value.flushBuffer()\n  }\n\n  function reset(): void {\n    pointer.value.reset()\n  }\n\n  function addFilter(filter: Filter): void {\n    pointer.value.addFilter(filter)\n    filterCount.value = pointer.value.length\n  }\n\n  function removeFilter(type: string): boolean {\n    const result = pointer.value.removeFilter(type)\n    filterCount.value = pointer.value.length\n    return result\n  }\n\n  function updateFilter<T>(type: string, params: Partial<T>): boolean {\n    return pointer.value.updateFilter(type, params)\n  }\n\n  // Cleanup (only register if in component context)\n  if (getCurrentInstance()) {\n    onUnmounted(() => {\n      pointer.value.clear()\n    })\n  }\n\n  return {\n    process,\n    processAll,\n    flushBuffer,\n    reset,\n    addFilter,\n    removeFilter,\n    updateFilter,\n    pointer: computed(() => pointer.value),\n    filterCount: computed(() => filterCount.value),\n  }\n}\n","import { ref, computed, watch } from 'vue'\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\n/**\n * Vue Composable for managing stabilization level\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStabilizationLevel } from '@stroke-stabilizer/vue'\n *\n * const { level, setLevel, isEnabled } = useStabilizationLevel({\n *   initialLevel: 50,\n *   onChange: (newLevel) => console.log('Level changed:', newLevel)\n * })\n * </script>\n *\n * <template>\n *   <div>\n *     <input\n *       type=\"range\"\n *       :min=\"0\"\n *       :max=\"100\"\n *       :value=\"level\"\n *       @input=\"setLevel(Number(($event.target as HTMLInputElement).value))\"\n *     />\n *     <span>{{ level }}%</span>\n *     <span v-if=\"isEnabled\">Stabilization enabled</span>\n *   </div>\n * </template>\n * ```\n */\nexport function useStabilizationLevel(\n  options: UseStabilizationLevelOptions = {}\n) {\n  const { initialLevel = 0, min = 0, max = 100, onChange } = options\n\n  const level = ref(Math.max(min, Math.min(max, initialLevel)))\n\n  // Watch for changes\n  watch(level, (newValue) => {\n    onChange?.(newValue)\n  })\n\n  function setLevel(value: number): void {\n    level.value = Math.max(min, Math.min(max, value))\n  }\n\n  function increase(amount = 10): void {\n    setLevel(level.value + amount)\n  }\n\n  function decrease(amount = 10): void {\n    setLevel(level.value - amount)\n  }\n\n  return {\n    level: computed(() => level.value),\n    setLevel,\n    increase,\n    decrease,\n    isEnabled: computed(() => level.value > 0),\n  }\n}\n"],"names":[],"mappings":";;AAoDO,SAAS,qBACd,UAAuC,IACvC;AACA,QAAM,EAAE,OAAO,SAAS,QAAA,IAAY;AAGpC,QAAM,UAAU;AAAA,IACd,UAAU,SACN,wBAAwB,KAAK,KAC5B,MAAM;AACL,YAAM,IAAI,IAAI,kBAAA;AACd,UAAI,SAAS;AACX,mBAAW,UAAU,SAAS;AAC5B,YAAE,UAAU,MAAM;AAAA,QACpB;AAAA,MACF;AACA,aAAO;AAAA,IACT,GAAA;AAAA,EAAG;AAIT,QAAM,cAAc,IAAI,QAAQ,MAAM,MAAM;AAE5C,WAAS,QAAQ,OAA0C;AACzD,UAAM,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC1C,QAAI,UAAU,SAAS;AACrB,cAAQ,MAAM;AAAA,IAChB;AACA,WAAO;AAAA,EACT;AAEA,WAAS,WAAW,QAAwC;AAC1D,UAAM,UAAU,QAAQ,MAAM,WAAW,MAAM;AAC/C,QAAI,SAAS;AACX,iBAAW,KAAK,SAAS;AACvB,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,WAAS,cAA8B;AACrC,WAAO,QAAQ,MAAM,YAAA;AAAA,EACvB;AAEA,WAAS,QAAc;AACrB,YAAQ,MAAM,MAAA;AAAA,EAChB;AAEA,WAAS,UAAU,QAAsB;AACvC,YAAQ,MAAM,UAAU,MAAM;AAC9B,gBAAY,QAAQ,QAAQ,MAAM;AAAA,EACpC;AAEA,WAAS,aAAa,MAAuB;AAC3C,UAAM,SAAS,QAAQ,MAAM,aAAa,IAAI;AAC9C,gBAAY,QAAQ,QAAQ,MAAM;AAClC,WAAO;AAAA,EACT;AAEA,WAAS,aAAgB,MAAc,QAA6B;AAClE,WAAO,QAAQ,MAAM,aAAa,MAAM,MAAM;AAAA,EAChD;AAGA,MAAI,sBAAsB;AACxB,gBAAY,MAAM;AAChB,cAAQ,MAAM,MAAA;AAAA,IAChB,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,SAAS,MAAM,QAAQ,KAAK;AAAA,IACrC,aAAa,SAAS,MAAM,YAAY,KAAK;AAAA,EAAA;AAEjD;AC5FO,SAAS,sBACd,UAAwC,IACxC;AACA,QAAM,EAAE,eAAe,GAAG,MAAM,GAAG,MAAM,KAAK,aAAa;AAE3D,QAAM,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,YAAY,CAAC,CAAC;AAG5D,QAAM,OAAO,CAAC,aAAa;AACzB,yCAAW;AAAA,EACb,CAAC;AAED,WAAS,SAAS,OAAqB;AACrC,UAAM,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAAA,EAClD;AAEA,WAAS,SAAS,SAAS,IAAU;AACnC,aAAS,MAAM,QAAQ,MAAM;AAAA,EAC/B;AAEA,WAAS,SAAS,SAAS,IAAU;AACnC,aAAS,MAAM,QAAQ,MAAM;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL,OAAO,SAAS,MAAM,MAAM,KAAK;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,EAAA;AAE7C;"}

package/dist/useStabilizationLevel.d.ts

@@ -0,0 +1,47 @@
+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;
+}
+/**
+ * Vue Composable for managing stabilization level
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useStabilizationLevel } from '@stroke-stabilizer/vue'
+ *
+ * const { level, setLevel, isEnabled } = useStabilizationLevel({
+ *   initialLevel: 50,
+ *   onChange: (newLevel) => console.log('Level changed:', newLevel)
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <input
+ *       type="range"
+ *       :min="0"
+ *       :max="100"
+ *       :value="level"
+ *       @input="setLevel(Number(($event.target as HTMLInputElement).value))"
+ *     />
+ *     <span>{{ level }}%</span>
+ *     <span v-if="isEnabled">Stabilization enabled</span>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useStabilizationLevel(options?: UseStabilizationLevelOptions): {
+    level: import("vue").ComputedRef<number>;
+    setLevel: (value: number) => void;
+    increase: (amount?: number) => void;
+    decrease: (amount?: number) => void;
+    isEnabled: import("vue").ComputedRef<boolean>;
+};
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,GAAE,4BAAiC;;sBAWjB,MAAM,KAAG,IAAI;mCAIN,IAAI;mCAIJ,IAAI;;EAWrC"}

package/dist/useStabilizedPointer.d.ts

@@ -0,0 +1,56 @@
+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;
+}
+/**
+ * Vue Composable for stroke stabilization
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useStabilizedPointer } from '@stroke-stabilizer/vue'
+ *
+ * const { process, reset } = useStabilizedPointer({
+ *   level: 50,
+ *   onPoint: (point) => {
+ *     // Draw with stabilized point
+ *     drawPoint(point)
+ *   }
+ * })
+ *
+ * function handlePointerMove(e: PointerEvent) {
+ *   process({
+ *     x: e.clientX,
+ *     y: e.clientY,
+ *     pressure: e.pressure,
+ *     timestamp: e.timeStamp
+ *   })
+ * }
+ *
+ * function handlePointerUp() {
+ *   reset()
+ * }
+ * </script>
+ *
+ * <template>
+ *   <canvas @pointermove="handlePointerMove" @pointerup="handlePointerUp" />
+ * </template>
+ * ```
+ */
+export declare function useStabilizedPointer(options?: UseStabilizedPointerOptions): {
+    process: (point: PointerPoint) => PointerPoint | null;
+    processAll: (points: PointerPoint[]) => PointerPoint[];
+    flushBuffer: () => PointerPoint[];
+    reset: () => void;
+    addFilter: (filter: Filter) => void;
+    removeFilter: (type: string) => boolean;
+    updateFilter: <T>(type: string, params: Partial<T>) => boolean;
+    pointer: import("vue").ComputedRef<StabilizedPointer>;
+    filterCount: import("vue").ComputedRef<number>;
+};
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,2BAAgC;qBAsBjB,YAAY,KAAG,YAAY,GAAG,IAAI;yBAQ9B,YAAY,EAAE,KAAG,YAAY,EAAE;uBAUnC,YAAY,EAAE;iBAIpB,IAAI;wBAIK,MAAM,KAAG,IAAI;yBAKZ,MAAM,KAAG,OAAO;mBAMtB,CAAC,QAAQ,MAAM,UAAU,OAAO,CAAC,CAAC,CAAC,KAAG,OAAO;;;EAsBpE"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@stroke-stabilizer/vue",
+  "version": "0.1.3",
+  "description": "Vue composables 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": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "vue": "^3.4.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "keywords": [
+    "vue",
+    "composable",
+    "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
+}