masoneffect 2.0.2 → 2.0.4

package/dist/vue/typing/index.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("vue");function e(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const s=e-44032,n=Math.floor(s/588),i=Math.floor(s%588/28),r=s%28,o=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],a=[];return a.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),a.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][i]),r>0&&a.push(o[r]),a}function s(t,e,s){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),i=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),r=s?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(s):0;if(-1===n||-1===i)return t+(e||"")+(s||"");const o=44032+21*n*28+28*i+r;return String.fromCharCode(o)}function n(t){const s=[],n=[];for(let i=0;i<t.length;i++){const r=t[i],o=r.charCodeAt(0),a=s.length;if(o>=44032&&o<=55203){const t=e(r);s.push(...t),n.push({start:a,end:s.length,isHangul:!0})}else s.push(r),n.push({start:a,end:s.length,isHangul:!1})}return{units:s,charUnitRanges:n}}class i{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const s=n(this.config.text);this.textUnits=s.units,this.charUnitRanges=s.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.disconnect()))},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}buildTextFromUnits(t){if(0===t)return"";let e="";for(let n=0;n<this.charUnitRanges.length;n++){const i=this.charUnitRanges[n];if(i.start>=t)break;const r=Math.min(t-i.start,i.end-i.start);if(r<=0)break;if(i.isHangul){const t=this.textUnits.slice(i.start,i.start+r);1===t.length?e+=t[0]:2===t.length?e+=s(t[0],t[1]):t.length>=3&&(e+=s(t[0],t[1],t[2]))}else r>0&&(e+=this.textUnits[i.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const e=n(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}const r=t.defineComponent({__name:"Typing",props:{className:{},style:{},onUpdate:{},onComplete:{},text:{},speed:{default:50},delay:{default:0},enabled:{type:Boolean,default:!0},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},showCursor:{type:Boolean,default:!0},cursorChar:{default:"|"}},setup(e,{expose:s}){const n=e,r=t.ref(null),o=t.ref(null);return t.onMounted(()=>{if(!r.value)return;const t={text:n.text,speed:n.speed,delay:n.delay,enabled:n.enabled,threshold:n.threshold,rootMargin:n.rootMargin,triggerOnce:n.triggerOnce,showCursor:n.showCursor,cursorChar:n.cursorChar,onUpdate:n.onUpdate,onComplete:n.onComplete};o.value=new i(r.value,t)}),t.onUnmounted(()=>{o.value&&(o.value.destroy(),o.value=null)}),t.watch(()=>n.text,t=>{o.value&&t!==o.value.originalText&&o.value.setText(t)}),s({start:()=>{var t;return null==(t=o.value)?void 0:t.start()},stop:()=>{var t;return null==(t=o.value)?void 0:t.stop()},reset:()=>{var t;return null==(t=o.value)?void 0:t.reset()},setText:t=>{var e;return null==(e=o.value)?void 0:e.setText(t)},destroy:()=>{o.value&&(o.value.destroy(),o.value=null)}}),(s,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"containerRef",ref:r,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=r;

package/dist/vue/typing/index.d.ts

@@ -0,0 +1,216 @@
+export declare class Count {
+    container: HTMLElement;
+    config: Required<Omit<CountOptions, 'onUpdate' | 'onComplete'>> & {
+        onUpdate: CountOptions['onUpdate'];
+        onComplete: CountOptions['onComplete'];
+    };
+    currentValue: number;
+    startTime: number | null;
+    animationFrameId: number | null;
+    intersectionObserver: IntersectionObserver | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    constructor(container: HTMLElement | string, options: CountOptions);
+    init(): void;
+    setupIntersectionObserver(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateDisplay(value: number): void;
+    formatNumber(value: number): string;
+    updateConfig(newConfig: Partial<CountOptions>): void;
+    getValue(): number;
+    destroy(): void;
+}
+
+/**
+ * Count - 숫자 카운팅 애니메이션 효과
+ * 바닐라 JS 코어 클래스
+ *
+ * 사용법:
+ * import { Count } from 'masoneffect/count';
+ */
+export declare interface CountOptions {
+    targetValue: number;
+    duration?: number;
+    startValue?: number;
+    enabled?: boolean;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    onUpdate?: (value: number) => void;
+    onComplete?: () => void;
+}
+
+export declare const easingFunctions: {
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+};
+
+export declare interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    tx: number;
+    ty: number;
+    initialX?: number;
+    initialY?: number;
+    j: number;
+}
+
+declare class TextToParticle {
+    container: HTMLElement;
+    config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
+        onReady: TextToParticleOptions['onReady'];
+        onUpdate: TextToParticleOptions['onUpdate'];
+    };
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    offCanvas: HTMLCanvasElement;
+    offCtx: CanvasRenderingContext2D;
+    W: number;
+    H: number;
+    DPR: number;
+    particles: Particle[];
+    mouse: {
+        x: number;
+        y: number;
+        down: boolean;
+    };
+    animationId: number | null;
+    isRunning: boolean;
+    isVisible: boolean;
+    intersectionObserver: IntersectionObserver | null;
+    debounceDelay: number;
+    _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
+    _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
+    constructor(container: HTMLElement | string, options?: TextToParticleOptions);
+    init(): void;
+    setupIntersectionObserver(): void;
+    resize(): void;
+    /**
+     * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
+     * @param fontSize 확인할 폰트 크기
+     * @param text 텍스트 (\n으로 줄바꿈 구분)
+     * @param maxWidth 최대 너비
+     * @param maxHeight 최대 높이
+     * @returns { width: number, height: number, fits: boolean }
+         */
+     private measureTextFit;
+     /**
+      * 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
+      * 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
+      */
+     private findOptimalFontSize;
+     buildTargets(): void;
+     makeParticle(): Particle;
+     initParticles(): void;
+     scatter(): void;
+     morph(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
+     _morphInternal(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
+     update(): void;
+     animate(): void;
+     start(): void;
+     stop(): void;
+     setupEventListeners(): void;
+     removeEventListeners(): void;
+     handleResize(): void;
+     handleMouseMove(e: MouseEvent): void;
+     handleMouseLeave(): void;
+     handleMouseDown(): void;
+     handleMouseUp(): void;
+     updateConfig(newConfig: Partial<TextToParticleOptions>): void;
+     _updateConfigInternal(newConfig: Partial<TextToParticleOptions>): void;
+     destroy(): void;
+    }
+    export { TextToParticle as MasonEffect }
+    export { TextToParticle }
+    export default TextToParticle;
+
+    /**
+     * TextToParticle - 텍스트를 파티클로 변환하는 효과
+     * 바닐라 JS 코어 클래스
+     *
+     * 사용법:
+     * import { TextToParticle } from 'masoneffect/textToParticle';
+     */
+    declare interface TextToParticleOptions {
+        text?: string;
+        densityStep?: number;
+        maxParticles?: number;
+        pointSize?: number;
+        ease?: number;
+        repelRadius?: number;
+        repelStrength?: number;
+        particleColor?: string;
+        fontFamily?: string;
+        fontSize?: number | null;
+        width?: number | null;
+        height?: number | null;
+        devicePixelRatio?: number | null;
+        debounceDelay?: number;
+        onReady?: (instance: TextToParticle) => void;
+        onUpdate?: (instance: TextToParticle) => void;
+    }
+    export { TextToParticleOptions as MasonEffectOptions }
+    export { TextToParticleOptions }
+
+    export declare class Typing {
+        container: HTMLElement;
+        config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
+            onUpdate: TypingOptions['onUpdate'];
+            onComplete: TypingOptions['onComplete'];
+        };
+        textUnits: string[];
+        charUnitRanges: Array<{
+            start: number;
+            end: number;
+            isHangul: boolean;
+        }>;
+        currentIndex: number;
+        displayedText: string;
+        timeoutId: ReturnType<typeof setTimeout> | null;
+        intersectionObserver: IntersectionObserver | null;
+        isRunning: boolean;
+        hasTriggered: boolean;
+        originalText: string;
+        constructor(container: HTMLElement | string, options: TypingOptions);
+        init(): void;
+        setupIntersectionObserver(): void;
+        private buildTextFromUnits;
+        start(): void;
+        typeNext(): void;
+        stop(): void;
+        reset(): void;
+        updateDisplay(text: string): void;
+        setText(newText: string): void;
+        destroy(): void;
+    }
+
+    /**
+     * Typing - 타이핑 애니메이션 효과
+     * 바닐라 JS 코어 클래스
+     *
+     * 사용법:
+     * import { Typing } from 'masoneffect/typing';
+     */
+    export declare interface TypingOptions {
+        text: string;
+        speed?: number;
+        delay?: number;
+        enabled?: boolean;
+        threshold?: number;
+        rootMargin?: string;
+        triggerOnce?: boolean;
+        showCursor?: boolean;
+        cursorChar?: string;
+        onUpdate?: (text: string) => void;
+        onComplete?: () => void;
+    }
+
+    export { }

package/dist/vue/typing/index.mjs

@@ -0,0 +1,312 @@
+import { defineComponent, ref, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+function decomposeHangul(char) {
+  const code = char.charCodeAt(0);
+  if (code < 44032 || code > 55203) {
+    return [char];
+  }
+  const base = code - 44032;
+  const initial = Math.floor(base / (21 * 28));
+  const medial = Math.floor(base % (21 * 28) / 28);
+  const final = base % 28;
+  const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
+  const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const result = [];
+  result.push(initialChars[initial]);
+  result.push(medialChars[medial]);
+  if (final > 0) {
+    result.push(finalChars[final]);
+  }
+  return result;
+}
+function composeHangul(initial, medial, final) {
+  const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
+  const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const initialIndex = initialChars.indexOf(initial);
+  const medialIndex = medialChars.indexOf(medial);
+  const finalIndex = final ? finalChars.indexOf(final) : 0;
+  if (initialIndex === -1 || medialIndex === -1) {
+    return initial + (medial || "") + (final || "");
+  }
+  const code = 44032 + initialIndex * 21 * 28 + medialIndex * 28 + finalIndex;
+  return String.fromCharCode(code);
+}
+function decomposeText(text) {
+  const units = [];
+  const charUnitRanges = [];
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    const code = char.charCodeAt(0);
+    const startIndex = units.length;
+    if (code >= 44032 && code <= 55203) {
+      const decomposed = decomposeHangul(char);
+      units.push(...decomposed);
+      charUnitRanges.push({
+        start: startIndex,
+        end: units.length,
+        isHangul: true
+      });
+    } else {
+      units.push(char);
+      charUnitRanges.push({
+        start: startIndex,
+        end: units.length,
+        isHangul: false
+      });
+    }
+  }
+  return { units, charUnitRanges };
+}
+class Typing {
+  // 원본 텍스트
+  constructor(container, options) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    this.originalText = options.text;
+    this.config = {
+      text: options.text,
+      speed: options.speed ?? 50,
+      delay: options.delay ?? 0,
+      enabled: options.enabled ?? true,
+      threshold: options.threshold ?? 0.2,
+      rootMargin: options.rootMargin ?? "0px 0px -100px 0px",
+      triggerOnce: options.triggerOnce ?? false,
+      showCursor: options.showCursor ?? true,
+      cursorChar: options.cursorChar ?? "|",
+      onUpdate: options.onUpdate || null,
+      onComplete: options.onComplete || null
+    };
+    const decomposed = decomposeText(this.config.text);
+    this.textUnits = decomposed.units;
+    this.charUnitRanges = decomposed.charUnitRanges;
+    this.currentIndex = 0;
+    this.displayedText = "";
+    this.timeoutId = null;
+    this.intersectionObserver = null;
+    this.isRunning = false;
+    this.hasTriggered = false;
+    this.init();
+  }
+  init() {
+    this.updateDisplay("");
+    this.setupIntersectionObserver();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      if (this.config.enabled) {
+        setTimeout(() => this.start(), this.config.delay);
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        var _a;
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting && !this.hasTriggered) {
+            if (this.config.enabled) {
+              setTimeout(() => this.start(), this.config.delay);
+            }
+            this.hasTriggered = true;
+            if (this.config.triggerOnce) {
+              (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect();
+            }
+          }
+        }
+      },
+      {
+        threshold: this.config.threshold,
+        rootMargin: this.config.rootMargin
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  // 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
+  // 한글의 경우 자음/모음이 하나씩 보이도록 합성
+  buildTextFromUnits(unitCount) {
+    if (unitCount === 0) return "";
+    let result = "";
+    for (let charIndex = 0; charIndex < this.charUnitRanges.length; charIndex++) {
+      const range = this.charUnitRanges[charIndex];
+      if (range.start >= unitCount) {
+        break;
+      }
+      const unitsEntered = Math.min(unitCount - range.start, range.end - range.start);
+      if (unitsEntered <= 0) {
+        break;
+      }
+      if (range.isHangul) {
+        const charUnits = this.textUnits.slice(range.start, range.start + unitsEntered);
+        if (charUnits.length === 1) {
+          result += charUnits[0];
+        } else if (charUnits.length === 2) {
+          result += composeHangul(charUnits[0], charUnits[1]);
+        } else if (charUnits.length >= 3) {
+          result += composeHangul(charUnits[0], charUnits[1], charUnits[2]);
+        }
+      } else {
+        if (unitsEntered > 0) {
+          result += this.textUnits[range.start];
+        }
+      }
+    }
+    return result;
+  }
+  start() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    this.currentIndex = 0;
+    this.displayedText = "";
+    this.typeNext();
+  }
+  typeNext() {
+    if (this.currentIndex >= this.textUnits.length) {
+      this.isRunning = false;
+      if (this.config.showCursor) {
+        this.updateDisplay(this.originalText);
+      }
+      if (this.config.onComplete) {
+        this.config.onComplete();
+      }
+      return;
+    }
+    this.displayedText = this.buildTextFromUnits(this.currentIndex + 1);
+    let displayText = this.displayedText;
+    if (this.config.showCursor) {
+      displayText += this.config.cursorChar;
+    }
+    this.updateDisplay(displayText);
+    if (this.config.onUpdate) {
+      this.config.onUpdate(this.displayedText);
+    }
+    this.currentIndex++;
+    this.timeoutId = setTimeout(() => {
+      this.typeNext();
+    }, this.config.speed);
+  }
+  stop() {
+    this.isRunning = false;
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  }
+  reset() {
+    this.stop();
+    this.currentIndex = 0;
+    this.displayedText = "";
+    this.hasTriggered = false;
+    this.updateDisplay("");
+  }
+  updateDisplay(text) {
+    this.container.textContent = text;
+  }
+  // 텍스트 변경
+  setText(newText) {
+    this.originalText = newText;
+    this.config.text = newText;
+    const decomposed = decomposeText(newText);
+    this.textUnits = decomposed.units;
+    this.charUnitRanges = decomposed.charUnitRanges;
+    this.reset();
+    if (this.config.enabled) {
+      setTimeout(() => this.start(), this.config.delay);
+    }
+  }
+  destroy() {
+    this.stop();
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+  }
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Typing",
+  props: {
+    className: {},
+    style: {},
+    onUpdate: {},
+    onComplete: {},
+    text: {},
+    speed: { default: 50 },
+    delay: { default: 0 },
+    enabled: { type: Boolean, default: true },
+    threshold: { default: 0.2 },
+    rootMargin: { default: "0px 0px -100px 0px" },
+    triggerOnce: { type: Boolean, default: false },
+    showCursor: { type: Boolean, default: true },
+    cursorChar: { default: "|" }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const containerRef = ref(null);
+    const instanceRef = ref(null);
+    onMounted(() => {
+      if (!containerRef.value) return;
+      const options = {
+        text: props.text,
+        speed: props.speed,
+        delay: props.delay,
+        enabled: props.enabled,
+        threshold: props.threshold,
+        rootMargin: props.rootMargin,
+        triggerOnce: props.triggerOnce,
+        showCursor: props.showCursor,
+        cursorChar: props.cursorChar,
+        onUpdate: props.onUpdate,
+        onComplete: props.onComplete
+      };
+      instanceRef.value = new Typing(containerRef.value, options);
+    });
+    onUnmounted(() => {
+      if (instanceRef.value) {
+        instanceRef.value.destroy();
+        instanceRef.value = null;
+      }
+    });
+    watch(() => props.text, (newText) => {
+      if (instanceRef.value && newText !== instanceRef.value["originalText"]) {
+        instanceRef.value.setText(newText);
+      }
+    });
+    __expose({
+      start: () => {
+        var _a;
+        return (_a = instanceRef.value) == null ? void 0 : _a.start();
+      },
+      stop: () => {
+        var _a;
+        return (_a = instanceRef.value) == null ? void 0 : _a.stop();
+      },
+      reset: () => {
+        var _a;
+        return (_a = instanceRef.value) == null ? void 0 : _a.reset();
+      },
+      setText: (text) => {
+        var _a;
+        return (_a = instanceRef.value) == null ? void 0 : _a.setText(text);
+      },
+      destroy: () => {
+        if (instanceRef.value) {
+          instanceRef.value.destroy();
+          instanceRef.value = null;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: normalizeClass(__props.className),
+        style: normalizeStyle(__props.style)
+      }, null, 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with Tree-shaking support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -21,6 +21,11 @@
       "require": "./dist/count/index.cjs",
       "types": "./dist/count/index.d.ts"
     },
+    "./typing": {
+      "import": "./dist/typing/index.mjs",
+      "require": "./dist/typing/index.cjs",
+      "types": "./dist/typing/index.d.ts"
+    },
     "./react": {
       "import": "./dist/react/index.mjs",
       "require": "./dist/react/index.cjs",
@@ -36,6 +41,11 @@
       "require": "./dist/react/count/index.cjs",
       "types": "./dist/react/count/index.d.ts"
     },
+    "./react/typing": {
+      "import": "./dist/react/typing/index.mjs",
+      "require": "./dist/react/typing/index.cjs",
+      "types": "./dist/react/typing/index.d.ts"
+    },
     "./vue": {
       "import": "./dist/vue/index.mjs",
       "require": "./dist/vue/index.cjs",
@@ -51,6 +61,11 @@
       "require": "./dist/vue/count/index.cjs",
       "types": "./dist/vue/count/index.d.ts"
     },
+    "./vue/typing": {
+      "import": "./dist/vue/typing/index.mjs",
+      "require": "./dist/vue/typing/index.cjs",
+      "types": "./dist/vue/typing/index.d.ts"
+    },
     "./svelte": {
       "import": "./dist/svelte/index.mjs",
       "require": "./dist/svelte/index.cjs",
@@ -65,19 +80,26 @@
       "import": "./dist/svelte/count/index.mjs",
       "require": "./dist/svelte/count/index.cjs",
       "types": "./dist/svelte/count/index.d.ts"
+    },
+    "./svelte/typing": {
+      "import": "./dist/svelte/typing/index.mjs",
+      "require": "./dist/svelte/typing/index.cjs",
+      "types": "./dist/svelte/typing/index.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && node scripts/generate-react-types.js",
+    "build": "rollup -c rollup.config.mjs && npm run build:vue && npm run build:vue:textToParticle && npm run build:vue:count && npm run build:vue:typing && npm run build:svelte && npm run build:svelte:textToParticle && npm run build:svelte:count && npm run build:svelte:typing && node scripts/generate-react-types.js",
     "build:vue": "vite build --config vite.config.vue.mjs",
     "build:vue:textToParticle": "vite build --config vite.config.vue.textToParticle.mjs",
     "build:vue:count": "vite build --config vite.config.vue.count.mjs",
+    "build:vue:typing": "vite build --config vite.config.vue.typing.mjs",
     "build:svelte": "vite build --config vite.config.svelte.mjs",
     "build:svelte:textToParticle": "vite build --config vite.config.svelte.textToParticle.mjs",
     "build:svelte:count": "vite build --config vite.config.svelte.count.mjs",
+    "build:svelte:typing": "vite build --config vite.config.svelte.typing.mjs",
     "dev": "rollup -c rollup.config.mjs -w",
     "serve": "npx http-server . -p 8080 -o --cors",
     "dev:example": "npm run serve",
@@ -108,7 +130,7 @@
   "bugs": {
     "url": "https://github.com/fe-hyunsu/masoneffect/issues"
   },
-  "aiAgentGuide": "./AI_SETUP_GUIDE.md",
+  "aiAgentGuide": "./llms.txt",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",