// ES Module import
import CharWrapper from 'charwrapper';

const wrapper = new CharWrapper('.my-text', {
  wrap: { chars: true }
});

const { chars } = wrapper.wrap();

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      'charwrapper': path.resolve(__dirname, 'node_modules/charwrapper/dist/esm/CharWrapper.js')
    }
  }
};

// vite.config.js
export default {
  // ...
  resolve: {
    alias: {
      'charwrapper': 'charwrapper/dist/esm/CharWrapper.js'
    }
  }
};

// rollup.config.js
export default {
  // ...
  plugins: [
    resolve({
      // Enables node_modules resolution
      preferBuiltins: false
    })
  ]
};

// CharWrapper 2.0 - Grouped & Explicit
new CharWrapper('.text', {
  wrap: { chars: true, words: true },
  enumerate: { chars: true },
  classes: { char: 'c', word: 'w' }
});

// GSAP SplitText - Flat & Concise
new SplitText('.text', {
  type: 'chars,words',
  charsClass: 'c++',
  wordsClass: 'w++'
});

// One-liner for simple use cases
const wrapper = CharWrapper.create('.text', { wrap: { chars: true } });
const chars = wrapper.getChars();

{
  wrap: {
    chars: true,        // Wrap individual characters
    words: false,       // Wrap words (can combine with chars)
    spaces: false,      // Wrap space characters
    specialChars: false // Wrap special characters (!?.,)
  }
}

{
  enumerate: {
    chars: true,              // Add numbered classes (.char-001, .char-002)
    words: false,             // Add numbered classes to words
    includeSpaces: false,     // Include spaces in enumeration
    includeSpecialChars: false // Include special chars in enumeration
  }
}

{
  classes: {
    char: 'char',           // Base character class
    word: 'word',           // Base word class
    space: 'char--space',   // Space character class
    special: 'char--special', // Special character class
    regular: 'char--regular'  // Regular character class
  }
}

{
  tags: {
    char: 'span', // Tag for character wrapping (span, div, i, em, strong, mark)
    word: 'span'  // Tag for word wrapping
  }
}

{
  replaceSpaceWith: '\xa0', // Non-breaking space replacement

  processing: {
    stripHTML: true,        // Remove HTML tags before processing
    trimWhitespace: true,   // Trim leading/trailing whitespace (preserved when adjacent to inline elements)
    preserveStructure: true, // Maintain DOM structure
    lazyWrap: false,        // Wrap on-demand for performance
    ordered: false          // Order root/text records by data-root-order and data-set-order
  },

  performance: {
    useBatching: true,     // Use DocumentFragment (recommended)
    cacheSelectors: true   // Cache DOM queries
  },

  accessibility: {
    enabled: true,         // Enable accessibility features
    ariaLabel: 'auto',     // 'auto' = use original text, 'none' = disabled, or custom string
    ariaHidden: true,      // Add aria-hidden="true" to wrapped elements
    addTitle: true         // Add title attribute if not present
  }
}

const wrapper = new CharWrapper('.text', {
  wrap: { chars: true },
  accessibility: {
    enabled: true,       // Enable all accessibility features
    ariaLabel: 'auto',   // Adds aria-label with original text to root element
    ariaHidden: true,    // Adds aria-hidden="true" to all wrapped elements
    addTitle: true       // Adds title attribute if not present
  }
});

const wrapper = new CharWrapper('.text', {
  // Wrap Options - What to wrap
  wrap: {
    chars: true,        // Wrap individual characters
    words: false,       // Wrap words (can combine with chars)
    spaces: false,      // Wrap space characters  
    specialChars: false // Wrap special characters (!?.,)
  },

  // Enumeration Options - Add numbered classes
  enumerate: {
    rootSet: false,          // Add numbered classes with the root-set class prefix
    chars: false,             // Add numbered classes (.char-001, .char-002)
    words: false,             // Add numbered classes to words
    attributeSets: false,     // Add numbered classes with data-set-char-class / data-set-word-class
    includeSpaces: false,     // Include spaces in enumeration count
    includeSpecialChars: false // Include special chars in enumeration count
  },

  // CSS Classes - Customize the class names used
  classes: {
    rootSet: 'belongs-to-root-set', // Class applied to every wrapped character
    char: 'char',           // Base character class
    word: 'word',           // Base word class
    space: 'char--space',   // Space character class
    special: 'char--special', // Special character class
    regular: 'char--regular'  // Regular character class
  },

  // HTML Tags - Choose the element type for wrapping
  tags: {
    char: 'span', // Tag for character wrapping (span, div, i, em, strong, mark)
    word: 'span'  // Tag for word wrapping
  },

  // Data Attributes - Customize data attribute names
  dataAttributes: {
    rootSet: 'rootSet',          // data-root-set
    rootOrder: 'rootOrder',      // data-root-order
    setName: 'setName',          // data-set-name
    setOrder: 'setOrder',        // data-set-order
    setCharClass: 'setCharClass', // data-set-char-class
    setWordClass: 'setWordClass'  // data-set-word-class
  },

  // Root Set Options
  rootSet: {
    customSets: {},              // JS-defined animation targets under each root set
    exposeEmptyAttributeSets: false,
    autoDetectDataAttributes: true
  },

  // Advanced Options
  replaceSpaceWith: '\\xa0', // Replace spaces with non-breaking space

  // Processing Options - Text processing behavior
  processing: {
    stripHTML: true,        // Remove HTML tags before processing
    trimWhitespace: true,   // Trim leading/trailing whitespace (preserved when adjacent to inline elements)
    preserveStructure: true, // Maintain DOM structure
    lazyWrap: false,        // Wrap on-demand for performance
    ordered: false          // Order root/text records by data-root-order and data-set-order
  },

  // Performance Options
  performance: {
    useBatching: true,     // Use DocumentFragment for DOM updates (recommended)
    cacheSelectors: true   // Cache DOM queries
  },

  // Accessibility Options
  accessibility: {
    enabled: true,         // Enable accessibility features
    ariaLabel: 'auto',     // 'auto' = use original text, 'none' = disabled, or custom string
    ariaHidden: true,      // Add aria-hidden="true" to wrapped elements
    addTitle: true         // Add title attribute if not present
  },

  // Character Groups - Smart selection system for character subsets
  groups: {
    // Examples of different group types (these are optional):
    vowels: /[aeiou]/i,                    // Pattern matching
    everyThird: { nth: 3 },                // Every Nth character
    firstThree: { indices: [0, 1, 2] },    // Specific indices
    // Custom filter function
    firstLetters: {
      custom: (char, index, context) => context.isFirstInWord,
      class: 'first-letter'
    }
  }
});

const wrapper = new CharWrapper('.text', {
  wrap: { chars: true },
  groups: {
    vowels: /[aeiou]/i,
    consonants: /[bcdfghjklmnpqrstvwxyz]/i,
    everyThird: { nth: 3 }
  }
});

const { chars, groups } = wrapper.wrap();

// Animate vowels and consonants separately
gsap.from(groups.vowels, { opacity: 0, color: '#ff6b9d', stagger: 0.05 });
gsap.from(groups.consonants, { y: 20, stagger: 0.03, delay: 0.3 });

import { PREDEFINED_GROUPS } from 'charwrapper';

// Basic character types
PREDEFINED_GROUPS.vowels          // a, e, i, o, u (case insensitive)
PREDEFINED_GROUPS.consonants      // All consonants
PREDEFINED_GROUPS.numbers         // 0-9
PREDEFINED_GROUPS.lowercase       // a-z
PREDEFINED_GROUPS.uppercase       // A-Z

// Punctuation
PREDEFINED_GROUPS.punctuation     // . , ! ? ; :
PREDEFINED_GROUPS.quotes          // " ' ` ´
PREDEFINED_GROUPS.brackets        // [ ] ( ) { }

// Diacritics (accented characters) - Perfect for multilingual content!
PREDEFINED_GROUPS.diacritics      // All accented characters (à, é, ü, ñ, etc.)

// Language-specific diacritics
PREDEFINED_GROUPS.french          // é, è, ç, à, û, etc.
PREDEFINED_GROUPS.german          // ä, ö, ü, ß
PREDEFINED_GROUPS.spanish         // á, é, í, ó, ú, ñ, ¿, ¡
PREDEFINED_GROUPS.portuguese      // ã, õ, ç
PREDEFINED_GROUPS.slavic          // Czech, Polish, Croatian characters
PREDEFINED_GROUPS.scandinavian    // å, æ, ø

// Special symbols
PREDEFINED_GROUPS.currency        // $, €, £, ¥, ₹, ₽
PREDEFINED_GROUPS.math            // +, -, =, ×, ÷, ±, ∞, ≈
PREDEFINED_GROUPS.emoji           // Emoji ranges

{
  groups: {
    vowels: /[aeiou]/i,
    specialChars: /[!@#$%^&*]/
  }
}

{
  groups: {
    everySecond: { nth: 2 },  // Every 2nd character
    everyThird: { nth: 3 },   // Every 3rd character
    everyFifth: { nth: 5 }    // Every 5th character
  }
}

{
  groups: {
    firstThree: { indices: [0, 1, 2] },
    highlights: { indices: [5, 10, 15, 20] }
  }
}

{
  groups: {
    keywords: {
      words: ['CharWrapper', 'animation', 'GSAP'],
      class: 'keyword-highlight'  // Optional: add CSS class
    }
  }
}

{
  groups: {
    firstLetters: {
      custom: (char, index, context) => context.isFirstInWord,
      class: 'first-letter'
    },
    lastLetters: {
      custom: (char, index, context) => context.isLastInWord
    },
    oddPositions: {
      custom: (char, index) => index % 2 === 1
    }
  }
}

// Perfect for emphasizing accented characters in French text
const wrapper = new CharWrapper('.french-text', {
  wrap: { chars: true },
  groups: {
    accents: /[àâæçéèêëïîôùûüÿœ]/i
  }
});

const { groups } = wrapper.wrap();

gsap.to(groups.accents, {
  color: '#ff6b9d',
  scale: 1.2,
  stagger: 0.1,
  yoyo: true,
  repeat: -1,
  repeatDelay: 2
});

const wrapper = new CharWrapper('.price', {
  wrap: { chars: true },
  groups: {
    numbers: /[0-9]/,
    currency: /[$€£¥]/
  }
});

const { groups } = wrapper.wrap();

// Animate numbers and currency symbols differently
gsap.from(groups.currency, { scale: 0, duration: 0.5 });
gsap.from(groups.numbers, {
  opacity: 0,
  y: -20,
  stagger: 0.05,
  delay: 0.3
});

const wrapper = new CharWrapper('.headline', {
  wrap: { chars: true },
  groups: {
    firstLetters: {
      custom: (char, index, context) => context.isFirstInWord,
      class: 'drop-cap'
    }
  }
});

const { groups } = wrapper.wrap();

gsap.from(groups.firstLetters, {
  scale: 2,
  color: '#ffd700',
  stagger: 0.15,
  ease: 'back.out(1.7)'
});

const wrapper = new CharWrapper('.text', {
  wrap: { chars: true },
  groups: {
    vowels: /[aeiou]/i,
    numbers: /[0-9]/,
    everyThird: { nth: 3 },
    firstLetters: {
      custom: (char, index, context) => context.isFirstInWord
    }
  }
});

const { groups } = wrapper.wrap();

// Animate each group with different effects
gsap.from(groups.vowels, { opacity: 0, stagger: 0.02 });
gsap.from(groups.numbers, { scale: 2, stagger: 0.1 });
gsap.from(groups.everyThird, { color: '#ff6b9d' });
gsap.from(groups.firstLetters, { y: -30, ease: 'bounce.out' });

// Wrap the entire container - all text inside will be wrapped
const wrapper = new CharWrapper('[data-root-set="profile"]', {
  wrap: { chars: true }
});

// All text nodes inside this root set are now wrapped
const profileRootSet = wrapper.wrap();

// Animate all characters in document order
gsap.from(profileRootSet.chars, { opacity: 0, stagger: 0.02 });

// Wrap the container - all text inside will be wrapped in document order
const wrapper = new CharWrapper('[data-root-set="profile"]', {
  wrap: { chars: true }
});

const profileRootSet = wrapper.wrap();

// Animate all characters in the order they appear in HTML
gsap.from(profileRootSet.chars, { opacity: 0, stagger: 0.02 });

const wrapper = new CharWrapper('.profile', {
  wrap: { chars: true },
  processing: { ordered: true }  // Uses data-set-order inside this root
});

const wrapper = new CharWrapper('.profile', { wrap: { chars: true } });
const profileRootSet = wrapper.wrap();

const tl = gsap.timeline();

// First animate all text
tl.from(profileRootSet.chars, { opacity: 0, stagger: 0.02 });

// Then animate specific elements (e.g., a divider)
tl.from('.divider', { scaleX: 0 }, '-=0.5');

const wrapper = new CharWrapper('[data-root-set="business-card"]', {
  wrap: { chars: true }
});

const businessCardRootSet = wrapper.wrap();

// Create timeline
const tl = gsap.timeline();

// First name and last name appear
tl.from(businessCardRootSet.chars, { opacity: 0, y: 20, stagger: 0.02 });

// Then animate the divider
tl.from('.divider', {
  scaleX: 0,
  transformOrigin: 'center',
  duration: 0.6,
  ease: 'power2.out'
}, '-=0.3');

// Finally the title
tl.from('.title', { opacity: 0, y: 10 }, '-=0.2');

const wrapper = new CharWrapper('[data-text-root="profile"]', {
  wrap: { chars: true },
  dataAttributes: {
    rootSet: 'textRoot',           // data-text-root
    rootOrder: 'textRootOrder',    // data-text-root-order
    setName: 'profileItem',        // data-profile-item
    setOrder: 'profileItemOrder',  // data-profile-item-order
    setCharClass: 'profileChar',   // data-profile-char
    setWordClass: 'profileWord'    // data-profile-word
  }
});

const wrapper = new CharWrapper('.text', { wrap: { chars: true } });
wrapper.wrap();

// Use presets instead of writing GSAP code:
wrapper.animate('fadeInStagger');
wrapper.animate('typewriter', { stagger: 0.05 });
wrapper.animate('wave', { amplitude: 30 });

wrapper.animate('fadeInStagger', {
  duration: 1,
  stagger: 0.05,
  ease: 'power2.out',
  delay: 0.5,
  groups: 'vowels' // Animate only specific groups!
});

CharWrapper.registerPreset('myEffect', (elements, options) => {
  return gsap.from(elements, {
    opacity: 0,
    scale: 2,
    rotation: 360,
    stagger: options.stagger || 0.05
  });
});

wrapper.animate('myEffect');

const wrapper = new CharWrapper('.text', { wrap: { chars: true } });
wrapper.wrap();

// Transition to new text
wrapper.transitionTo('New Text Here');

// With options
wrapper.transitionTo('Updated!', {
  strategy: 'smart',
  addDuration: 0.5,
  removeDuration: 0.3,
  stagger: 0.02
});

wrapper.transitionTo('New Text', { strategy: 'smart' });

wrapper.transitionTo('Completely Different', { strategy: 'sequential' });

wrapper.transitionTo('New Text', {
  strategy: 'smart',        // 'smart' or 'sequential'
  addDuration: 0.4,         // Duration for adding characters
  removeDuration: 0.4,      // Duration for removing characters
  stagger: 0.02,            // Stagger between characters
  ease: 'power2.out',       // GSAP easing
  onComplete: () => {       // Callback when done
    console.log('Transition complete!');
  }
});

let count = 0;

function increment() {
  count++;
  wrapper.transitionTo(String(count));
}

wrapper.transitionTo('Loading...');
// later
wrapper.transitionTo('Success!');

wrapper.transitionTo('First', {
  onComplete: () => {
    setTimeout(() => {
      wrapper.transitionTo('Second', {
        onComplete: () => {
          wrapper.transitionTo('Done!');
        }
      });
    }, 1000);
  }
});

const wrapper = new CharWrapper('.text', {
  wrap: { chars: true },
  enumerate: { chars: true }
});

const { chars } = wrapper.wrap();

gsap.from(chars, {
  opacity: 0,
  y: 50,
  stagger: 0.03,
  ease: 'back.out(1.7)'
});

// Matrix decode effect
const originalText = chars.map(el => el.textContent);

chars.forEach((char, i) => {
  gsap.to(char, {
    duration: 0.05,
    repeat: 20,
    onRepeat: () => char.textContent = getRandomChar(),
    onComplete: () => char.textContent = originalText[i]
  });
});

chars.forEach(char => {
  char.addEventListener('mouseenter', () => {
    gsap.to(char, { y: -20, duration: 0.3 });
    gsap.to(char, { y: 0, duration: 0.5, delay: 0.3, ease: 'bounce.out' });
  });
});

gsap.registerPlugin(ScrollTrigger);

gsap.from(chars, {
  opacity: 0,
  y: 30,
  stagger: 0.02,
  scrollTrigger: {
    trigger: '.text',
    start: 'top 80%',
    end: 'top 50%',
    scrub: 1
  }
});

new CharWrapper(target, config)

const regularChars = wrapper.getCharsByType('regular');
const spaces = wrapper.getCharsByType('space');

wrapper.animate('fadeInStagger');
wrapper.animate('wave', { amplitude: 30, duration: 1 });
wrapper.animate('typewriter', { stagger: 0.05, groups: 'vowels' });

wrapper.transitionTo('New Text Here');
wrapper.transitionTo('Updated!', {
  strategy: 'smart',
  addDuration: 0.5,
  removeDuration: 0.3,
  stagger: 0.02
});

const wrapper = CharWrapper.create('.text', { wrap: { chars: true } });

const wrappers = CharWrapper.wrapMultiple(['.text1', '.text2'], {
  wrap: { chars: true }
});

CharWrapper.registerPreset('myEffect', (elements, options) => {
  return gsap.from(elements, {
    opacity: 0,
    scale: 2,
    rotation: 360,
    stagger: options.stagger || 0.05
  });
});

// Use it
wrapper.animate('myEffect');

let wrapper = new CharWrapper({
  rootSetIdentifier: '.text',
  wrapChars: true,
  enumerateRootSet: { includeSpaces: true },
  characterWrapTag: 'span',
  // ...30+ options
});
wrapper.initializeWrap();

// CharWrapper 2.0 - Grouped options
new CharWrapper('.text', {
  wrap: { chars: true, words: true },
  enumerate: { chars: true, includeSpaces: true },
  classes: { char: 'c', word: 'w' },
  tags: { char: 'span' }
});

// GSAP SplitText - Flat options
new SplitText('.text', {
  type: 'chars,words',
  charsClass: 'c++',
  wordsClass: 'w++',
  tag: 'span'
});

// CharWrapper 2.0 - Separate config
enumerate: { chars: true }
// Result: .char .char-001 .char-002

// GSAP SplitText - In class name
charsClass: 'char++'
// Result: .char .char1 .char2

// SplitText can do this:
const split = new SplitText('.title', { type: 'lines' });
gsap.from(split.lines, {
  y: 100,
  opacity: 0,
  stagger: 0.2
});

// CharWrapper cannot! ❌

// SplitText
const split = new SplitText('.text', {
  type: 'lines',
  mask: 'lines'  // ✅ Auto-creates masks
});
gsap.from(split.masks, { scaleY: 0, transformOrigin: 'top' });

// CharWrapper
// ❌ Must manually create wrapper elements and CSS

const split = new SplitText('.text', {
  type: 'lines',
  autoSplit: true  // ✅ Auto re-splits on font load & resize
});

// ❌ Must manually detect and rewrap
window.addEventListener('resize', debounce(() => {
  wrapper.rewrap();
}, 200));

document.fonts.ready.then(() => {
  wrapper.rewrap();
});

new SplitText('.text', { propIndex: true });

// ❌ Not supported, must use GSAP or manual styling

import CharWrapper from './src/CharWrapper.js';

const wrapper = new CharWrapper('.text', {
  wrap: { chars: true }
});
const { chars } = wrapper.wrap();

gsap.from(chars, {
  opacity: 0,
  stagger: 0.05
});

gsap.from(chars, {
  opacity: 0,
  y: 30,
  stagger: 0.03,
  ease: 'power2.out'
});

gsap.from(chars, {
  scale: 0,
  rotation: 360,
  stagger: 0.04,
  ease: 'back.out(2)'
});

const wrapper = new CharWrapper('.text', {
  wrap: { words: true, chars: true }
});
const { words, chars } = wrapper.wrap();

// Animate words
gsap.from(words, {
  opacity: 0,
  x: -50,
  stagger: 0.1
});

// Or animate individual characters
gsap.from(chars, {
  opacity: 0,
  stagger: 0.02
});

const wrapper = new CharWrapper('.text', {
  wrap: { chars: true },
  enumerate: { chars: true } // Adds .char-001, .char-002, etc.
});
const { chars } = wrapper.wrap();

// Now you can target specific characters in CSS!

const { chars } = wrapper.wrap();

chars.forEach(char => {
  char.addEventListener('mouseenter', () => {
    gsap.to(char, { scale: 1.5, duration: 0.3 });
  });

  char.addEventListener('mouseleave', () => {
    gsap.to(char, { scale: 1, duration: 0.3 });
  });
});

import CharWrapper from './src/CharWrapper.js';
gsap.registerPlugin(ScrollTrigger);

const wrapper = new CharWrapper('.text', {
  wrap: { chars: true }
});
const { chars } = wrapper.wrap();

gsap.from(chars, {
  opacity: 0,
  y: 30,
  stagger: 0.02,
  scrollTrigger: {
    trigger: '.text',
    start: 'top 80%',
    end: 'top 50%',
    scrub: 1
  }
});

new CharWrapper(selector, {
  // What to wrap
  wrap: {
    chars: true,        // Wrap individual characters
    words: false,       // Wrap words
    spaces: false,      // Wrap space characters
    specialChars: false // Wrap !?.,; etc.
  },

  // Add numbered classes (.char-001, .char-002)
  enumerate: {
    chars: false,             // Enable char numbering
    words: false,             // Enable word numbering
    includeSpaces: false,     // Include spaces in count
    includeSpecialChars: false // Include special chars in count
  },

  // CSS class names
  classes: {
    char: 'char',           // Base char class
    word: 'word',           // Base word class
    space: 'char--space',   // Space class
    special: 'char--special', // Special char class
    regular: 'char--regular'  // Regular char class
  },

  // HTML tags
  tags: {
    char: 'span', // span, div, i, em, strong, mark
    word: 'span'
  },

  // Space replacement
  replaceSpaceWith: '\xa0', // Non-breaking space

  // Performance (usually keep defaults)
  performance: {
    useBatching: true,    // DocumentFragment batching
    cacheSelectors: true  // Cache DOM queries
  }
});

const wrapper = new CharWrapper('.text', config);

// Wrap the text
const { chars, words } = wrapper.wrap();

// Get elements later
const allChars = wrapper.getChars();
const allWords = wrapper.getWords();

// Get specific element
const firstChar = wrapper.getChar(0);
const secondWord = wrapper.getWord(1);

// Filter by type
const regularChars = wrapper.getCharsByType('regular');
const spaces = wrapper.getCharsByType('space');
const specialChars = wrapper.getCharsByType('special');

// Check state
if (wrapper.isWrapped()) {
  // ...
}

// Unwrap (restore original)
wrapper.unwrap();

// Rewrap (unwrap + wrap)
wrapper.rewrap();

// Clean up (important!)
wrapper.destroy();

// In single-page apps, always clean up!
window.addEventListener('beforeunload', () => {
  wrapper.destroy();
});

// Quick one-liner
const wrapper = CharWrapper.create('.text', { wrap: { chars: true } });

const { chars } = wrapper.wrap();

// Only animate letters (not spaces)
const regularChars = wrapper.getCharsByType('regular');
gsap.from(regularChars, { opacity: 0, stagger: 0.05 });

const wrappers = CharWrapper.wrapMultiple(
  ['.title', '.subtitle', '.description'],
  { wrap: { chars: true } }
);

// Clean up all at once
wrappers.forEach(w => w.destroy());

// Memory leak in SPAs!
const wrapper = new CharWrapper('.text', config);
wrapper.wrap();
// ... never destroyed

const wrapper = new CharWrapper('.text', config);
wrapper.wrap();

// Later...
wrapper.destroy();

wrapper.wrap();
wrapper.wrap(); // Error! Already wrapped

wrapper.wrap();
wrapper.rewrap(); // Correct!
// OR
wrapper.unwrap();
wrapper.wrap(); // Also correct!

// In bundler environments (Webpack, Vite, etc.) - uses ES modules
import CharWrapper from 'charwrapper';

// In browsers with native modules - uses ES modules
<script type="module">
  import CharWrapper from 'charwrapper';
</script>

// In browsers without modules - uses IIFE version
<script src="https://cdn.jsdelivr.net/npm/charwrapper@latest/dist/charwrapper.min.js"></script>