masoneffect 2.0.3 → 2.0.5

package/dist/svelte/textToParticle/index.d.ts

@@ -7,12 +7,12 @@ export declare class Count {
     currentValue: number;
     startTime: number | null;
     animationFrameId: number | null;
-    intersectionObserver: IntersectionObserver | null;
+    visibilityManager: VisibilityManager | null;
     isRunning: boolean;
     hasTriggered: boolean;
     constructor(container: HTMLElement | string, options: CountOptions);
     init(): void;
-    setupIntersectionObserver(): void;
+    setupVisibilityManager(): void;
     start(): void;
     stop(): void;
     reset(): void;
@@ -23,13 +23,6 @@ export declare class Count {
     destroy(): void;
 }
 
-/**
- * Count - 숫자 카운팅 애니메이션 효과
- * 바닐라 JS 코어 클래스
- *
- * 사용법:
- * import { Count } from 'masoneffect/count';
- */
 export declare interface CountOptions {
     targetValue: number;
     duration?: number;
@@ -84,14 +77,13 @@ declare class TextToParticle {
     };
     animationId: number | null;
     isRunning: boolean;
-    isVisible: boolean;
-    intersectionObserver: IntersectionObserver | null;
+    visibilityManager: VisibilityManager | 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;
+    setupVisibilityManager(): void;
     resize(): void;
     /**
      * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
@@ -132,13 +124,6 @@ declare class TextToParticle {
     export { TextToParticle }
     export default TextToParticle;
 
-    /**
-     * TextToParticle - 텍스트를 파티클로 변환하는 효과
-     * 바닐라 JS 코어 클래스
-     *
-     * 사용법:
-     * import { TextToParticle } from 'masoneffect/textToParticle';
-     */
     declare interface TextToParticleOptions {
         text?: string;
         densityStep?: number;
@@ -167,20 +152,21 @@ declare class TextToParticle {
             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;
+        visibilityManager: VisibilityManager | null;
         isRunning: boolean;
         hasTriggered: boolean;
         originalText: string;
         constructor(container: HTMLElement | string, options: TypingOptions);
         init(): void;
-        setupIntersectionObserver(): void;
-        private originalChars;
-        private charUnitMap;
-        private initializeTextStructure;
-        private getCharIndexFromUnitIndex;
+        setupVisibilityManager(): void;
         private buildTextFromUnits;
         start(): void;
         typeNext(): void;
@@ -191,13 +177,6 @@ declare class TextToParticle {
         destroy(): void;
     }
 
-    /**
-     * Typing - 타이핑 애니메이션 효과
-     * 바닐라 JS 코어 클래스
-     *
-     * 사용법:
-     * import { Typing } from 'masoneffect/typing';
-     */
     export declare interface TypingOptions {
         text: string;
         speed?: number;
@@ -212,4 +191,39 @@ declare class TextToParticle {
         onComplete?: () => void;
     }
 
+    declare class VisibilityManager {
+        private container;
+        private options;
+        private intersectionObserver;
+        private visibilityChangeHandler;
+        private isVisible;
+        private isPageVisible;
+        constructor(container: HTMLElement, options?: VisibilityManagerOptions);
+        private setupIntersectionObserver;
+        private setupPageVisibility;
+        /**
+         * 현재 요소가 화면에 보이는지 확인
+         */
+        getIsVisible(): boolean;
+        /**
+         * 옵션 업데이트
+         */
+        updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
+        /**
+         * 리소스 정리
+         */
+        destroy(): void;
+    }
+
+    /**
+     * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
+     * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
+     */
+    declare interface VisibilityManagerOptions {
+        threshold?: number;
+        rootMargin?: string;
+        onVisible?: () => void;
+        onHidden?: () => void;
+    }
+
     export { }

package/dist/svelte/textToParticle/index.mjs

@@ -263,6 +263,107 @@ class SvelteComponent {
 const PUBLIC_VERSION = "4";
 if (typeof window !== "undefined")
   (window.__svelte || (window.__svelte = { v: /* @__PURE__ */ new Set() })).v.add(PUBLIC_VERSION);
+class VisibilityManager {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      onVisible: options.onVisible,
+      onHidden: options.onHidden
+    };
+    this.intersectionObserver = null;
+    this.visibilityChangeHandler = null;
+    this.isVisible = false;
+    this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
+    this.setupIntersectionObserver();
+    this.setupPageVisibility();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      this.isVisible = true;
+      if (this.isPageVisible && this.options.onVisible) {
+        this.options.onVisible();
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting) {
+            this.isVisible = true;
+            if (this.isPageVisible && this.options.onVisible) {
+              this.options.onVisible();
+            }
+          } else {
+            this.isVisible = false;
+            if (this.options.onHidden) {
+              this.options.onHidden();
+            }
+          }
+        }
+      },
+      {
+        threshold: this.options.threshold,
+        rootMargin: this.options.rootMargin
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  setupPageVisibility() {
+    if (typeof document === "undefined") return;
+    this.visibilityChangeHandler = () => {
+      const wasVisible = this.isPageVisible;
+      this.isPageVisible = !document.hidden;
+      if (document.hidden) {
+        if (this.options.onHidden) {
+          this.options.onHidden();
+        }
+      } else if (wasVisible !== this.isPageVisible) {
+        if (this.isVisible && this.options.onVisible) {
+          this.options.onVisible();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    if (document.hidden && this.isVisible) {
+      if (this.options.onHidden) {
+        this.options.onHidden();
+      }
+    }
+  }
+  /**
+   * 현재 요소가 화면에 보이는지 확인
+   */
+  getIsVisible() {
+    return this.isVisible && this.isPageVisible;
+  }
+  /**
+   * 옵션 업데이트
+   */
+  updateOptions(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    this.setupIntersectionObserver();
+  }
+  /**
+   * 리소스 정리
+   */
+  destroy() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    if (this.visibilityChangeHandler && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+  }
+}
 function debounce(func, wait) {
   let timeout = null;
   return function executedFunction(...args) {
@@ -320,8 +421,7 @@ class TextToParticle {
     this.mouse = { x: 0, y: 0, down: false };
     this.animationId = null;
     this.isRunning = false;
-    this.isVisible = false;
-    this.intersectionObserver = null;
+    this.visibilityManager = null;
     this.debounceDelay = options.debounceDelay ?? 150;
     const boundHandleResize = this.handleResize.bind(this);
     this.handleResize = debounce(boundHandleResize, this.debounceDelay);
@@ -336,39 +436,22 @@ class TextToParticle {
   init() {
     this.resize();
     this.setupEventListeners();
-    this.setupIntersectionObserver();
+    this.setupVisibilityManager();
     if (this.config.onReady) {
       this.config.onReady(this);
     }
   }
-  setupIntersectionObserver() {
-    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
-      this.isVisible = true;
-      this.start();
-      return;
-    }
-    if (this.intersectionObserver) {
-      return;
-    }
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.target !== this.container) continue;
-          if (entry.isIntersecting) {
-            this.isVisible = true;
-            this.start();
-          } else {
-            this.isVisible = false;
-            this.stop();
-          }
-        }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: 0.1,
+      // 10% 이상 보일 때 동작
+      onVisible: () => {
+        this.start();
       },
-      {
-        threshold: 0.1
-        // 10% 이상 보일 때 동작
+      onHidden: () => {
+        this.stop();
       }
-    );
-    this.intersectionObserver.observe(this.container);
+    });
   }
   resize() {
     const width = this.config.width || this.container.clientWidth || window.innerWidth;
@@ -605,7 +688,10 @@ class TextToParticle {
       p.y += p.vy;
     }
     this.ctx.fillStyle = this.config.particleColor;
-    const r = this.config.pointSize * this.DPR;
+    const baseSize = 1920;
+    const currentSize = Math.min(this.W, this.H) / this.DPR;
+    const sizeRatio = Math.max(0.5, Math.min(2, currentSize / baseSize));
+    const r = this.config.pointSize * this.DPR * sizeRatio;
     for (const p of this.particles) {
       this.ctx.beginPath();
       this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
@@ -677,9 +763,9 @@ class TextToParticle {
   destroy() {
     this.stop();
     this.removeEventListeners();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
     }
     if (this.canvas && this.canvas.parentNode) {
       this.canvas.parentNode.removeChild(this.canvas);

package/dist/svelte/typing/index.cjs

@@ -1 +1 @@
-"use strict";var t=Object.defineProperty,e=(e,n,i)=>((e,n,i)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[n]=i)(e,"symbol"!=typeof n?n+"":n,i);const n=require("svelte");function i(){}function s(t){return t()}function r(){return Object.create(null)}function o(t){t.forEach(s)}function h(t){return"function"==typeof t}function c(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function u(t,e,n){t.$$.on_destroy.push(function(t,...e){if(null==t){for(const t of e)t(void 0);return i}const n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}(e,n))}function a(t){t.parentNode&&t.parentNode.removeChild(t)}function l(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}let d;function f(t){d=t}const p=[],g=[];let x=[];const $=[],y=Promise.resolve();let b=!1;function m(t){x.push(t)}const C=new Set;let T=0;function v(){if(0!==T)return;const t=d;do{try{for(;T<p.length;){const t=p[T];T++,f(t),w(t.$$)}}catch(e){throw p.length=0,T=0,e}for(f(null),p.length=0,T=0;g.length;)g.pop()();for(let t=0;t<x.length;t+=1){const e=x[t];C.has(e)||(C.add(e),e())}x.length=0}while(p.length);for(;$.length;)$.pop()();b=!1,C.clear(),f(t)}function w(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(m)}}const _=new Set;function O(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];x.forEach(i=>-1===t.indexOf(i)?e.push(i):n.push(i)),n.forEach(t=>t()),x=e}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function U(t,e){-1===t.$$.dirty[0]&&(p.push(t),b||(b=!0,y.then(v)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function I(t,e,n,c,u,l,p=null,g=[-1]){const x=d;f(t);const $=t.$$={fragment:null,ctx:[],props:l,update:i,not_equal:u,bound:r(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(x?x.$$.context:[])),callbacks:r(),dirty:g,skip_bound:!1,root:e.target||x.$$.root};p&&p($.root);let y=!1;if($.ctx=n?n(t,e.props||{},(e,n,...i)=>{const s=i.length?i[0]:n;return $.ctx&&u($.ctx[e],$.ctx[e]=s)&&(!$.skip_bound&&$.bound[e]&&$.bound[e](s),y&&U(t,e)),n}):[],$.update(),y=!0,o($.before_update),$.fragment=!!c&&c($.ctx),e.target){if(e.hydrate){const t=(T=e.target,Array.from(T.childNodes));$.fragment&&$.fragment.l(t),t.forEach(a)}else $.fragment&&$.fragment.c();e.intro&&((b=t.$$.fragment)&&b.i&&(_.delete(b),b.i(C))),function(t,e,n){const{fragment:i,after_update:r}=t.$$;i&&i.m(e,n),m(()=>{const e=t.$$.on_mount.map(s).filter(h);t.$$.on_destroy?t.$$.on_destroy.push(...e):o(e),t.$$.on_mount=[]}),r.forEach(m)}(t,e.target,e.anchor),v()}var b,C,T;f(x)}class M{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){O(this,1),this.$destroy=i}$on(t,e){if(!h(e))return i;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}function k(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const n=e-44032,i=Math.floor(n/588),s=Math.floor(n%588/28),r=n%28,o=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],h=[];return h.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][i]),h.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),r>0&&h.push(o[r]),h}function A(t){const e=[];for(let n=0;n<t.length;n++){const i=t[n],s=i.charCodeAt(0);if(s>=44032&&s<=55203){const t=k(i);e.push(...t)}else e.push(i)}return e}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class E{constructor(t,e){if(this.originalChars=[],this.charUnitMap=[],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},this.textUnits=A(this.config.text),this.originalChars=[],this.charUnitMap=[],this.initializeTextStructure(),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 n of t)n.target===this.container&&n.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)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let t=0;t<this.originalText.length;t++){const e=this.originalText[t],n=e.charCodeAt(0);if(this.originalChars.push(e),n>=44032&&n<=55203){const t=k(e);this.charUnitMap.push(t.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let e=0,n=0;for(let i=0;i<this.charUnitMap.length;i++){const s=this.charUnitMap[i];if(n+=s,!(t>=n)){const r=t-(n-s);if(r>0){const t=this.originalChars[i]&&this.originalChars[i].charCodeAt(0)>=44032&&this.originalChars[i].charCodeAt(0)<=55203;(t&&r>=2||!t&&r>=1)&&(e=i+1)}break}e=i+1}return e}buildTextFromUnits(t){if(0===t.length)return"";const e=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,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());const t=this.textUnits.slice(0,this.currentIndex+1);this.displayedText=this.buildTextFromUnits(t);let e=this.displayedText;this.config.showCursor&&(e+=this.config.cursorChar),this.updateDisplay(e),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,this.textUnits=A(t),this.initializeTextStructure(),this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function N(t){let e;return{c(){var n;n="div",e=document.createElement(n),l(e,"class",t[1]),l(e,"style",t[2])},m(n,i){!function(t,e,n){t.insertBefore(e,n||null)}(n,e,i),t[8](e)},p:i,i:i,o:i,d(n){n&&a(e),t[8](null)}}}function S(t,e,i){let s,r;u(t,effect,t=>i(10,s=t)),u(t,props,t=>i(11,r=t));let{text:o,speed:h=50,delay:c=0,enabled:a=!0,threshold:l=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:f=!1,showCursor:p=!0,cursorChar:x="|",className:$="",style:y="",onUpdate:b,onComplete:m}=r(),C=null,T=null;return n.onMount(()=>{if(!C)return;T=new E(C,{text:o,speed:h,delay:c,enabled:a,threshold:l,rootMargin:d,triggerOnce:f,showCursor:p,cursorChar:x,onUpdate:b,onComplete:m})}),n.onDestroy(()=>{T&&(T.destroy(),T=null)}),s(()=>{T&&o!==T.originalText&&T.setText(o)}),[C,$,y,function(){null==T||T.start()},function(){null==T||T.stop()},function(){null==T||T.reset()},function(t){null==T||T.setText(t)},function(){T&&(T.destroy(),T=null)},function(t){g[t?"unshift":"push"](()=>{C=t,i(0,C)})}]}module.exports=class extends M{constructor(t){super(),I(this,t,S,N,c,{start:3,stop:4,reset:5,setText:6,destroy:7})}get start(){return this.$$.ctx[3]}get stop(){return this.$$.ctx[4]}get reset(){return this.$$.ctx[5]}get setText(){return this.$$.ctx[6]}get destroy(){return this.$$.ctx[7]}};
+"use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function h(t){return"function"==typeof t}function l(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function a(t,e,i){t.$$.on_destroy.push(function(t,...e){if(null==t){for(const t of e)t(void 0);return n}const i=t.subscribe(...e);return i.unsubscribe?()=>i.unsubscribe():i}(e,i))}function u(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let d;function f(t){d=t}const g=[],p=[];let b=[];const y=[],x=Promise.resolve();let m=!1;function $(t){b.push(t)}const v=new Set;let C=0;function w(){if(0!==C)return;const t=d;do{try{for(;C<g.length;){const t=g[C];C++,f(t),V(t.$$)}}catch(e){throw g.length=0,C=0,e}for(f(null),g.length=0,C=0;p.length;)p.pop()();for(let t=0;t<b.length;t+=1){const e=b[t];v.has(e)||(v.add(e),e())}b.length=0}while(g.length);for(;y.length;)y.pop()();m=!1,v.clear(),f(t)}function V(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach($)}}const O=new Set;function _(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];b.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),b=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function T(t,e){-1===t.$$.dirty[0]&&(g.push(t),m||(m=!0,x.then(w)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function M(t,e,i,l,a,c,g=null,p=[-1]){const b=d;f(t);const y=t.$$={fragment:null,ctx:[],props:c,update:n,not_equal:a,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(b?b.$$.context:[])),callbacks:o(),dirty:p,skip_bound:!1,root:e.target||b.$$.root};g&&g(y.root);let x=!1;if(y.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return y.ctx&&a(y.ctx[e],y.ctx[e]=s)&&(!y.skip_bound&&y.bound[e]&&y.bound[e](s),x&&T(t,e)),i}):[],y.update(),x=!0,r(y.before_update),y.fragment=!!l&&l(y.ctx),e.target){if(e.hydrate){const t=(C=e.target,Array.from(C.childNodes));y.fragment&&y.fragment.l(t),t.forEach(u)}else y.fragment&&y.fragment.c();e.intro&&((m=t.$$.fragment)&&m.i&&(O.delete(m),m.i(v))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),$(()=>{const e=t.$$.on_mount.map(s).filter(h);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach($)}(t,e.target,e.anchor),w()}var m,v,C;f(b)}class U{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){_(this,1),this.$destroy=n}$on(t,e){if(!h(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class H{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function I(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,n=Math.floor(i/588),s=Math.floor(i%588/28),o=i%28,r=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],h=[];return h.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),h.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&h.push(r[o]),h}function R(t,e,i){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),s=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===n||-1===s)return t+(e||"")+(i||"");const r=44032+21*n*28+28*s+o;return String.fromCharCode(r)}function P(t){const e=[],i=[];for(let n=0;n<t.length;n++){const s=t[n],o=s.charCodeAt(0),r=e.length;if(o>=44032&&o<=55203){const t=I(s);e.push(...t),i.push({start:r,end:e.length,isHangul:!0})}else e.push(s),i.push({start:r,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:i}}class k{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 i=P(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupVisibilityManager()}setupVisibilityManager(){this.visibilityManager=new H(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const s=Math.min(t-n.start,n.end-n.start);if(s<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+s);1===t.length?e+=t[0]:2===t.length?e+=R(t[0],t[1]):t.length>=3&&(e+=R(t[0],t[1],t[2]))}else s>0&&(e+=this.textUnits[n.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=P(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}function E(t){let e;return{c(){var i;i="div",e=document.createElement(i),c(e,"class",t[1]),c(e,"style",t[2])},m(i,n){!function(t,e,i){t.insertBefore(e,i||null)}(i,e,n),t[8](e)},p:n,i:n,o:n,d(i){i&&u(e),t[8](null)}}}function N(t,e,n){let s,o;a(t,effect,t=>n(10,s=t)),a(t,props,t=>n(11,o=t));let{text:r,speed:h=50,delay:l=0,enabled:u=!0,threshold:c=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:f=!1,showCursor:g=!0,cursorChar:b="|",className:y="",style:x="",onUpdate:m,onComplete:$}=o(),v=null,C=null;return i.onMount(()=>{if(!v)return;C=new k(v,{text:r,speed:h,delay:l,enabled:u,threshold:c,rootMargin:d,triggerOnce:f,showCursor:g,cursorChar:b,onUpdate:m,onComplete:$})}),i.onDestroy(()=>{C&&(C.destroy(),C=null)}),s(()=>{C&&r!==C.originalText&&C.setText(r)}),[v,y,x,function(){null==C||C.start()},function(){null==C||C.stop()},function(){null==C||C.reset()},function(t){null==C||C.setText(t)},function(){C&&(C.destroy(),C=null)},function(t){p[t?"unshift":"push"](()=>{v=t,n(0,v)})}]}module.exports=class extends U{constructor(t){super(),M(this,t,N,E,l,{start:3,stop:4,reset:5,setText:6,destroy:7})}get start(){return this.$$.ctx[3]}get stop(){return this.$$.ctx[4]}get reset(){return this.$$.ctx[5]}get setText(){return this.$$.ctx[6]}get destroy(){return this.$$.ctx[7]}};

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

@@ -7,12 +7,12 @@ export declare class Count {
     currentValue: number;
     startTime: number | null;
     animationFrameId: number | null;
-    intersectionObserver: IntersectionObserver | null;
+    visibilityManager: VisibilityManager | null;
     isRunning: boolean;
     hasTriggered: boolean;
     constructor(container: HTMLElement | string, options: CountOptions);
     init(): void;
-    setupIntersectionObserver(): void;
+    setupVisibilityManager(): void;
     start(): void;
     stop(): void;
     reset(): void;
@@ -23,13 +23,6 @@ export declare class Count {
     destroy(): void;
 }
 
-/**
- * Count - 숫자 카운팅 애니메이션 효과
- * 바닐라 JS 코어 클래스
- *
- * 사용법:
- * import { Count } from 'masoneffect/count';
- */
 export declare interface CountOptions {
     targetValue: number;
     duration?: number;
@@ -84,14 +77,13 @@ declare class TextToParticle {
     };
     animationId: number | null;
     isRunning: boolean;
-    isVisible: boolean;
-    intersectionObserver: IntersectionObserver | null;
+    visibilityManager: VisibilityManager | 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;
+    setupVisibilityManager(): void;
     resize(): void;
     /**
      * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
@@ -132,13 +124,6 @@ declare class TextToParticle {
     export { TextToParticle }
     export default TextToParticle;
 
-    /**
-     * TextToParticle - 텍스트를 파티클로 변환하는 효과
-     * 바닐라 JS 코어 클래스
-     *
-     * 사용법:
-     * import { TextToParticle } from 'masoneffect/textToParticle';
-     */
     declare interface TextToParticleOptions {
         text?: string;
         densityStep?: number;
@@ -167,20 +152,21 @@ declare class TextToParticle {
             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;
+        visibilityManager: VisibilityManager | null;
         isRunning: boolean;
         hasTriggered: boolean;
         originalText: string;
         constructor(container: HTMLElement | string, options: TypingOptions);
         init(): void;
-        setupIntersectionObserver(): void;
-        private originalChars;
-        private charUnitMap;
-        private initializeTextStructure;
-        private getCharIndexFromUnitIndex;
+        setupVisibilityManager(): void;
         private buildTextFromUnits;
         start(): void;
         typeNext(): void;
@@ -191,13 +177,6 @@ declare class TextToParticle {
         destroy(): void;
     }
 
-    /**
-     * Typing - 타이핑 애니메이션 효과
-     * 바닐라 JS 코어 클래스
-     *
-     * 사용법:
-     * import { Typing } from 'masoneffect/typing';
-     */
     export declare interface TypingOptions {
         text: string;
         speed?: number;
@@ -212,4 +191,39 @@ declare class TextToParticle {
         onComplete?: () => void;
     }
 
+    declare class VisibilityManager {
+        private container;
+        private options;
+        private intersectionObserver;
+        private visibilityChangeHandler;
+        private isVisible;
+        private isPageVisible;
+        constructor(container: HTMLElement, options?: VisibilityManagerOptions);
+        private setupIntersectionObserver;
+        private setupPageVisibility;
+        /**
+         * 현재 요소가 화면에 보이는지 확인
+         */
+        getIsVisible(): boolean;
+        /**
+         * 옵션 업데이트
+         */
+        updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
+        /**
+         * 리소스 정리
+         */
+        destroy(): void;
+    }
+
+    /**
+     * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
+     * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
+     */
+    declare interface VisibilityManagerOptions {
+        threshold?: number;
+        rootMargin?: string;
+        onVisible?: () => void;
+        onHidden?: () => void;
+    }
+
     export { }