typography-toolkit 1.0.0 → 1.2.1

package/README.md

@@ -7,6 +7,9 @@ Letter-by-letter text animations with proximity-based disintegration effects. Cr
 - **Letter-by-Letter Control** - Each letter is a separate DOM element with independent animations
 - **Base Animations** - Falling, splitting, glitching, and floating animations
 - **Proximity-Based Disintegration** - Letters react to cursor without direct interaction
+- **Font Selection** - Suggest Google Fonts based on natural language descriptions
+- **Font Refinement** - Refine suggestions based on feedback (e.g., "too casual, want gothic")
+- **Dynamic Font Loading** - Automatically load Google Fonts without manual `<link>` tags
 - **DOM-Based** - Uses CSS transforms (GPU-accelerated), accessible, and styleable
 - **Modular & Extensible** - Easy to add new animation types and behaviors
 - **Zero Dependencies** - Vanilla TypeScript/JavaScript
@@ -22,10 +25,18 @@ npm install typography-toolkit
 ```html
 <script src="https://unpkg.com/typography-toolkit/dist/typography-toolkit.umd.js"></script>
 <script>
-  const { AnimatedText } = TypographyToolkit;
+  // Option 1: Use TypographyToolkit namespace
+  const text = new TypographyToolkit.AnimatedText({...});
+  
+  // Option 2: Use AnimatedText directly (also available on window)
+  const text = new AnimatedText({...});
 </script>
 ```
 
+**Global Names:** When using the UMD build, the library exposes:
+- `window.TypographyToolkit` - Full namespace object
+- `window.AnimatedText` - Direct access to AnimatedText class (for convenience)
+
 ### ES Modules
 ```javascript
 import { AnimatedText } from 'typography-toolkit';
@@ -64,7 +75,9 @@ const text = new AnimatedText({
   style: {
     fontFamily: 'Arial',
     fontSize: 24,
-    color: 'rgba(60, 60, 60, 0.8)'
+    color: 'rgba(60, 60, 60, 0.8)',
+    textShadow: '2px 2px 4px rgba(0,0,0,0.5)',
+    letterSpacing: '2px'
   }
 });
 ```
@@ -148,6 +161,108 @@ interface StyleOptions {
   fontSize?: number;
   color?: string;
   fontWeight?: string;
+  textShadow?: string;      // CSS text-shadow value
+  letterSpacing?: string;  // CSS letter-spacing value
+  textTransform?: string;   // CSS text-transform value
+}
+```
+
+### Container Styling
+
+```typescript
+containerClass?: string;                    // CSS class to add to container
+containerStyle?: Record<string, string>;    // Inline styles for container
+```
+
+### Position Constraints
+
+```typescript
+position?: {
+  x?: number;
+  y?: number;
+  constrainToViewport?: boolean;  // Keep text within viewport bounds
+}
+```
+
+### Event Callbacks
+
+```typescript
+callbacks?: {
+  onCreate?: (element: HTMLElement) => void;    // Called when text is created
+  onDestroy?: () => void;                       // Called when text is destroyed
+  onDisintegrate?: (letterIndex: number) => void; // Called when a letter disintegrates
+}
+```
+
+### Font Selection API
+
+#### `suggestFont(description: string): FontSuggestion | undefined`
+
+Get a single font suggestion based on a natural language description.
+
+```typescript
+const font = suggestFont('gothic horror');
+// Returns best matching font, or undefined if no matches
+```
+
+#### `suggestFonts(description: string): FontSuggestion[]`
+
+Get multiple font suggestions sorted by relevance.
+
+```typescript
+const fonts = suggestFonts('hand-drawn');
+// Returns array of matching fonts, sorted by relevance
+```
+
+#### `loadGoogleFont(fontName: string): Promise<void>`
+
+Dynamically load a Google Font. Prevents duplicate loading.
+
+```typescript
+await loadGoogleFont('Caveat');
+// Adds <link> tag to document head if not already loaded
+```
+
+#### `getFontFamily(fontName: string, fallback?: string): string`
+
+Get CSS font-family string with appropriate fallback.
+
+```typescript
+getFontFamily('Caveat'); // "'Caveat', cursive"
+getFontFamily('VT323'); // "'VT323', monospace"
+```
+
+#### `refineFont(description: string, feedback: RefinementFeedback): FontSuggestion | undefined`
+
+Refine font suggestions based on user feedback using scoring algorithm.
+
+```typescript
+const refined = refineFont('hand-drawn', {
+  rejectedFont: 'Caveat',
+  negativeAspects: ['too casual'],
+  positiveAspects: ['gothic', 'ornate']
+});
+```
+
+#### `refineSuggestion(description: string, feedback: RefinementFeedback): FontSuggestion[]`
+
+Get multiple refined suggestions sorted by score.
+
+### Font Suggestion Types
+
+```typescript
+interface FontSuggestion {
+  name: string;              // Display name
+  googleFontsName: string;   // Exact Google Fonts name
+  categories: string[];       // Tags for matching
+  description: string;        // Human-readable description
+  artistic: boolean;         // True if striking/unique (not "safe")
+}
+
+interface RefinementFeedback {
+  rejectedFont: string;      // Font name they didn't like
+  negativeAspects: string[]; // What they don't like
+  positiveAspects: string[]; // What they want instead
 }
 ```
 
@@ -189,6 +304,56 @@ const text = new AnimatedText({
 });
 ```
 
+### Font Selection & Loading
+
+```javascript
+import { suggestFont, loadGoogleFont, getFontFamily, AnimatedText } from 'typography-toolkit';
+
+// Suggest a font based on description
+const font = suggestFont('hand-drawn');
+// Returns: { name: 'Hand-drawn Casual', googleFontsName: 'Caveat', ... }
+
+// Load the font dynamically
+await loadGoogleFont(font.googleFontsName);
+
+// Use in animation
+const text = new AnimatedText({
+  text: 'HELLO',
+  container: document.body,
+  style: {
+    fontFamily: getFontFamily(font.googleFontsName) // "'Caveat', cursive"
+  }
+});
+```
+
+### Font Refinement with Feedback
+
+```javascript
+import { suggestFont, refineFont, loadGoogleFont, getFontFamily, AnimatedText } from 'typography-toolkit';
+
+// Initial suggestion
+const initial = suggestFont('hand-drawn');
+// User doesn't like it: "too casual, want gothic and ornate"
+
+// Refine based on feedback
+const refined = refineFont('hand-drawn', {
+  rejectedFont: initial.googleFontsName,
+  negativeAspects: ['too casual', 'too simple'],
+  positiveAspects: ['gothic', 'ornate', 'striking']
+});
+// Returns: { name: 'Gothic Blackletter', googleFontsName: 'UnifrakturMaguntia', ... }
+
+// Load and use
+await loadGoogleFont(refined.googleFontsName);
+const text = new AnimatedText({
+  text: 'GOTHIC',
+  container: document.body,
+  style: {
+    fontFamily: getFontFamily(refined.googleFontsName)
+  }
+});
+```
+
 ## Performance
 
 - Uses `requestAnimationFrame` for smooth 60fps animations
@@ -196,11 +361,113 @@ const text = new AnimatedText({
 - Efficient proximity calculations
 - Automatic cleanup on destroy
 
+## Common Patterns
+
+### Creating Multiple Texts
+
+```javascript
+const messages = ['HELLO', 'WORLD', 'ANIMATED'];
+messages.forEach((msg, i) => {
+  new AnimatedText({
+    text: msg,
+    container: document.body,
+    position: { x: 100 + i * 200, y: 100 },
+    fadeOut: 5000
+  });
+});
+```
+
+### Styling with CSS Classes
+
+```javascript
+const text = new AnimatedText({
+  text: 'STYLED',
+  container: document.body,
+  containerClass: 'my-custom-class',
+  style: {
+    fontSize: 32,
+    color: '#ff0000'
+  }
+});
+
+// CSS:
+// .my-custom-class { background: rgba(0,0,0,0.1); padding: 10px; }
+```
+
+### Tracking Lifecycle Events
+
+```javascript
+const text = new AnimatedText({
+  text: 'TRACKED',
+  container: document.body,
+  callbacks: {
+    onCreate: (element) => {
+      console.log('Text created:', element);
+      // Analytics tracking, etc.
+    },
+    onDestroy: () => {
+      console.log('Text destroyed');
+    },
+    onDisintegrate: (letterIndex) => {
+      console.log('Letter disintegrated:', letterIndex);
+    }
+  }
+});
+```
+
+### Constraining to Viewport
+
+```javascript
+const text = new AnimatedText({
+  text: 'CONSTRAINED',
+  container: document.body,
+  position: {
+    x: window.innerWidth - 100, // Might be off-screen
+    y: window.innerHeight - 50,
+    constrainToViewport: true  // Automatically adjusts to stay on screen
+  }
+});
+```
+
+## Troubleshooting
+
+### Text Not Animating?
+
+- **Check container**: Ensure the container element exists and is visible
+- **Check animations array**: Make sure at least one animation type is specified
+- **Check browser support**: Requires modern browser with `requestAnimationFrame` support
+
+### Disintegration Not Working?
+
+- **Check disintegration.enabled**: Must be set to `true`
+- **Check radius**: Increase `radius` if cursor needs to be closer
+- **Check mouse tracking**: Ensure mouse events are not being blocked
+
+### Text Positioned Off-Screen?
+
+- **Use constrainToViewport**: Set `position.constrainToViewport: true`
+- **Check container bounds**: Ensure container has proper dimensions
+- **Manual bounds checking**: Calculate position manually based on container size
+
+### Performance Issues?
+
+- **Reduce animation types**: Fewer animations = better performance
+- **Reduce letter count**: Shorter text = better performance
+- **Use fadeOut**: Auto-destroy texts after a delay to prevent memory buildup
+- **Destroy manually**: Call `destroy()` when done with text instances
+
+### Fonts Not Loading?
+
+- **Check font name**: Ensure Google Font name is correct
+- **Check network**: Verify Google Fonts CDN is accessible
+- **Check font-family**: Use `getFontFamily()` helper for correct CSS format
+
 ## Browser Support
 
 - Modern browsers with ES2020 support
 - Requires `requestAnimationFrame` API
 - CSS transforms support
+- Mobile browsers supported (touch events coming soon)
 
 ## License
 

package/dist/typography-toolkit.es.js

@@ -1,153 +1,166 @@
-class y {
-  update(t, o, s, i = {}) {
-    const e = i.speed || 1, a = i.amplitude || 20, l = o * 0.2, r = (s * 10 * e + l * 5) % a - a / 2;
+class f {
+  update(e, o, n, t = {}) {
+    const i = t.speed || 1, l = t.amplitude || 20, r = o * 0.2, c = (n * 10 * i + r * 5) % l - l / 2;
     return {
-      ...t,
-      y: r
+      ...e,
+      y: c
     };
   }
 }
-class x {
-  update(t, o, s, i = {}) {
-    const e = i.speed || 1, a = i.amplitude || 4, l = o * 0.2, h = Math.sin(s * 0.5 * e + l) * a;
+class C {
+  update(e, o, n, t = {}) {
+    const i = t.speed || 1, l = t.amplitude || 4, r = o * 0.2, a = Math.sin(n * 0.5 * i + r) * l;
     return {
-      ...t,
-      x: h
+      ...e,
+      x: a
     };
   }
 }
-class C {
+class x {
   constructor() {
     this.lastUpdate = 0, this.glitchX = 0, this.glitchY = 0, this.glitchRot = 0;
   }
-  update(t, o, s, i = {}) {
-    const e = i.amplitude || 3;
-    return s - this.lastUpdate > 0.1 && (this.glitchX = (Math.random() - 0.5) * e, this.glitchY = (Math.random() - 0.5) * (e * 0.67), this.glitchRot = (Math.random() - 0.5) * e, this.lastUpdate = s), {
-      ...t,
+  update(e, o, n, t = {}) {
+    const i = t.amplitude || 3;
+    return n - this.lastUpdate > 0.1 && (this.glitchX = (Math.random() - 0.5) * i, this.glitchY = (Math.random() - 0.5) * (i * 0.67), this.glitchRot = (Math.random() - 0.5) * i, this.lastUpdate = n), {
+      ...e,
       x: this.glitchX,
       y: this.glitchY,
       rotation: this.glitchRot
     };
   }
 }
-class T {
-  update(t, o, s, i = {}) {
-    const e = i.speed || 1, a = i.amplitude || 15, l = o * 0.2, r = -((s * 8 * e + l * 4) % a - a / 2);
+class S {
+  update(e, o, n, t = {}) {
+    const i = t.speed || 1, l = t.amplitude || 15, r = o * 0.2, c = -((n * 8 * i + r * 4) % l - l / 2);
     return {
-      ...t,
-      y: r
+      ...e,
+      y: c
     };
   }
 }
-function b(c, t) {
-  const { x: o, y: s, rotation: i, scale: e, opacity: a } = t;
-  c.style.transform = `translate(${o}px, ${s}px) rotate(${i}deg) scale(${e})`, c.style.opacity = a.toString();
+function H(s, e) {
+  const { x: o, y: n, rotation: t, scale: i, opacity: l } = e;
+  s.style.transform = `translate(${o}px, ${n}px) rotate(${t}deg) scale(${i})`, s.style.opacity = l.toString();
 }
-function v(c, t, o, s, i, e) {
-  if (!e.enabled)
+function b(s, e, o, n, t, i) {
+  if (!i.enabled)
     return {
       state: { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 },
       applied: !1
     };
-  const a = e.radius || 80, l = e.strength || 1, h = e.behaviors || ["fall-away", "split-apart", "explode"], r = o - c, d = s - t, m = Math.sqrt(r * r + d * d);
-  if (m >= a)
+  const l = i.radius || 80, r = i.strength || 1, a = i.behaviors || ["fall-away", "split-apart", "explode"], c = o - s, h = n - e, d = Math.sqrt(c * c + h * h);
+  if (d >= l)
     return {
       state: { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 },
       applied: !1
     };
-  const n = (1 - m / a) * l, u = Math.atan2(d, r), M = h[i % h.length];
-  let p;
+  const g = (1 - d / l) * r, u = Math.atan2(h, c), M = a[t % a.length];
+  let m;
   switch (M) {
     case "fall-away":
-      const w = Math.cos(u) * n * 20, A = Math.sin(u) * n * 40 + n * 30;
-      p = {
-        x: w,
-        y: A,
-        rotation: n * 15,
+      const A = Math.cos(u) * g * 20, D = Math.sin(u) * g * 40 + g * 30;
+      m = {
+        x: A,
+        y: D,
+        rotation: g * 15,
         scale: 1,
-        opacity: 1 - n * 0.6
+        opacity: 1 - g * 0.6
       };
       break;
     case "split-apart":
-      const f = i % 2 === 0 ? 1 : -1;
-      p = {
-        x: f * n * 50,
-        y: (Math.random() - 0.5) * n * 10,
-        rotation: n * 10 * f,
+      const w = t % 2 === 0 ? 1 : -1;
+      m = {
+        x: w * g * 50,
+        y: (Math.random() - 0.5) * g * 10,
+        rotation: g * 10 * w,
         scale: 1,
-        opacity: 1 - n * 0.6
+        opacity: 1 - g * 0.6
       };
       break;
     case "explode":
-      const g = u + (Math.random() - 0.5) * 0.5;
-      p = {
-        x: Math.cos(g) * n * 40,
-        y: Math.sin(g) * n * 40,
-        rotation: n * 30,
-        scale: 1 + n * 0.4,
-        opacity: 1 - n * 0.6
+      const F = u + (Math.random() - 0.5) * 0.5;
+      m = {
+        x: Math.cos(F) * g * 40,
+        y: Math.sin(F) * g * 40,
+        rotation: g * 30,
+        scale: 1 + g * 0.4,
+        opacity: 1 - g * 0.6
       };
       break;
     default:
-      p = { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 };
+      m = { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 };
   }
   return {
-    state: p,
+    state: m,
     applied: !0
   };
 }
-class F {
-  constructor(t) {
-    this.letters = [], this.animationFrame = null, this.mouseX = 0, this.mouseY = 0, this.mouseMoveHandler = null, this.startTime = Date.now(), this.isDestroyed = !1, this.container = t.container, this.animationTypes = t.animations || ["falling", "splitting", "glitching", "floating"], this.cycle = t.cycle !== !1, this.speed = t.speed || 1, this.amplitude = t.amplitude || 1, this.disintegration = t.disintegration || { enabled: !1 }, this.style = t.style || {}, this.fadeOut = t.fadeOut || 0, this.textContainer = document.createElement("div"), this.textContainer.style.position = "absolute", this.textContainer.style.pointerEvents = "none", this.textContainer.style.zIndex = "1", t.position && (t.position.x !== void 0 && (this.textContainer.style.left = `${t.position.x}px`), t.position.y !== void 0 && (this.textContainer.style.top = `${t.position.y}px`)), this.createLetters(t.text), this.setupMouseTracking(), this.startAnimation(), this.fadeOut > 0 && setTimeout(() => this.destroy(), this.fadeOut);
+class v {
+  constructor(e) {
+    var o;
+    if (this.letters = [], this.animationFrame = null, this.mouseX = 0, this.mouseY = 0, this.mouseMoveHandler = null, this.startTime = Date.now(), this.isDestroyed = !1, this.container = e.container, this.animationTypes = e.animations || ["falling", "splitting", "glitching", "floating"], this.cycle = e.cycle !== !1, this.speed = e.speed || 1, this.amplitude = e.amplitude || 1, this.disintegration = e.disintegration || { enabled: !1 }, this.style = e.style || {}, this.fadeOut = e.fadeOut || 0, this.callbacks = e.callbacks, this.textContainer = document.createElement("div"), this.textContainer.style.position = "absolute", this.textContainer.style.pointerEvents = "none", this.textContainer.style.zIndex = "1", e.containerClass && (this.textContainer.className = e.containerClass), e.containerStyle && Object.entries(e.containerStyle).forEach(([n, t]) => {
+      this.textContainer.style.setProperty(n, t);
+    }), e.position) {
+      let n = e.position.x, t = e.position.y;
+      if (e.position.constrainToViewport) {
+        this.container.getBoundingClientRect();
+        const i = window.innerWidth, l = window.innerHeight, r = e.text.length * 20;
+        n !== void 0 && (n = Math.max(0, Math.min(n, i - r))), t !== void 0 && (t = Math.max(0, Math.min(t, l - 50)));
+      }
+      n !== void 0 && (this.textContainer.style.left = `${n}px`), t !== void 0 && (this.textContainer.style.top = `${t}px`);
+    }
+    this.createLetters(e.text), this.setupMouseTracking(), this.startAnimation(), (o = this.callbacks) != null && o.onCreate && this.callbacks.onCreate(this.textContainer), this.fadeOut > 0 && setTimeout(() => this.destroy(), this.fadeOut);
   }
-  createLetters(t) {
-    t.toUpperCase().split("").forEach((s, i) => {
-      if (s === " ") {
-        const l = document.createTextNode(" ");
-        this.textContainer.appendChild(l);
+  createLetters(e) {
+    e.toUpperCase().split("").forEach((n, t) => {
+      if (n === " ") {
+        const r = document.createTextNode(" ");
+        this.textContainer.appendChild(r);
         return;
       }
-      const e = document.createElement("span");
-      e.className = "animated-letter", e.textContent = s, e.dataset.index = i.toString(), e.dataset.char = s, this.applyStyle(e), e.style.display = "inline-block", e.style.position = "relative", e.style.transition = "transform 0.1s ease-out", this.textContainer.appendChild(e);
-      const a = e.getBoundingClientRect();
+      const i = document.createElement("span");
+      i.className = "animated-letter", i.textContent = n, i.dataset.index = t.toString(), i.dataset.char = n, this.applyStyle(i), i.style.display = "inline-block", i.style.position = "relative", i.style.transition = "transform 0.1s ease-out", this.textContainer.appendChild(i);
+      const l = i.getBoundingClientRect();
       this.letters.push({
-        element: e,
-        index: i,
-        char: s,
-        baseX: a.left,
-        baseY: a.top
+        element: i,
+        index: t,
+        char: n,
+        baseX: l.left,
+        baseY: l.top
       });
     }), this.container.appendChild(this.textContainer);
   }
-  applyStyle(t) {
-    this.style.fontFamily && (t.style.fontFamily = this.style.fontFamily), this.style.fontSize && (t.style.fontSize = `${this.style.fontSize}px`), this.style.color && (t.style.color = this.style.color), this.style.fontWeight && (t.style.fontWeight = this.style.fontWeight);
+  applyStyle(e) {
+    this.style.fontFamily && (e.style.fontFamily = this.style.fontFamily), this.style.fontSize && (e.style.fontSize = `${this.style.fontSize}px`), this.style.color && (e.style.color = this.style.color), this.style.fontWeight && (e.style.fontWeight = this.style.fontWeight), this.style.textShadow && (e.style.textShadow = this.style.textShadow), this.style.letterSpacing && (e.style.letterSpacing = this.style.letterSpacing), this.style.textTransform && (e.style.textTransform = this.style.textTransform);
   }
   setupMouseTracking() {
-    this.disintegration.enabled && (this.mouseMoveHandler = (t) => {
-      this.mouseX = t.clientX, this.mouseY = t.clientY;
+    this.disintegration.enabled && (this.mouseMoveHandler = (e) => {
+      this.mouseX = e.clientX, this.mouseY = e.clientY;
     }, document.addEventListener("mousemove", this.mouseMoveHandler));
   }
   startAnimation() {
-    const t = () => {
+    const e = () => {
       if (this.isDestroyed) return;
       const o = (Date.now() - this.startTime) * 1e-3;
-      this.letters.forEach((s, i) => {
-        const e = s.element.getBoundingClientRect(), a = e.left + e.width / 2, l = e.top + e.height / 2, h = v(
-          a,
+      this.letters.forEach((n, t) => {
+        var h;
+        const i = n.element.getBoundingClientRect(), l = i.left + i.width / 2, r = i.top + i.height / 2, a = b(
           l,
+          r,
           this.mouseX,
           this.mouseY,
-          i,
+          t,
           this.disintegration
         );
-        let r;
-        if (h.applied)
-          r = h.state;
+        let c;
+        if (a.applied)
+          c = a.state, (h = this.callbacks) != null && h.onDisintegrate && this.callbacks.onDisintegrate(t);
         else {
-          const d = this.getAnimationType(i);
-          r = this.getAnimation(d).update(
+          const d = this.getAnimationType(t);
+          c = this.getAnimation(d).update(
             { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 },
-            i,
+            t,
             o,
             {
               speed: this.speed,
@@ -155,33 +168,34 @@ class F {
             }
           );
         }
-        b(s.element, r);
-      }), this.animationFrame = requestAnimationFrame(t);
+        H(n.element, c);
+      }), this.animationFrame = requestAnimationFrame(e);
     };
-    this.animationFrame = requestAnimationFrame(t);
+    this.animationFrame = requestAnimationFrame(e);
   }
-  getAnimationType(t) {
-    return this.cycle ? this.animationTypes[t % this.animationTypes.length] : this.animationTypes[0];
+  getAnimationType(e) {
+    return this.cycle ? this.animationTypes[e % this.animationTypes.length] : this.animationTypes[0];
   }
-  getAnimation(t) {
-    switch (t) {
+  getAnimation(e) {
+    switch (e) {
       case "falling":
-        return new y();
+        return new f();
       case "splitting":
-        return new x();
-      case "glitching":
         return new C();
+      case "glitching":
+        return new x();
       case "floating":
-        return new T();
+        return new S();
       default:
-        return new y();
+        return new f();
     }
   }
   /**
    * Destroy the animated text instance
    */
   destroy() {
-    this.isDestroyed || (this.isDestroyed = !0, this.animationFrame !== null && cancelAnimationFrame(this.animationFrame), this.mouseMoveHandler && document.removeEventListener("mousemove", this.mouseMoveHandler), this.textContainer.style.transition = "opacity 3s ease", this.textContainer.style.opacity = "0", setTimeout(() => {
+    var e;
+    this.isDestroyed || (this.isDestroyed = !0, this.animationFrame !== null && cancelAnimationFrame(this.animationFrame), this.mouseMoveHandler && document.removeEventListener("mousemove", this.mouseMoveHandler), (e = this.callbacks) != null && e.onDestroy && this.callbacks.onDestroy(), this.textContainer.style.transition = "opacity 3s ease", this.textContainer.style.opacity = "0", setTimeout(() => {
       this.textContainer.parentNode && this.textContainer.parentNode.removeChild(this.textContainer);
     }, 3e3));
   }
@@ -192,19 +206,451 @@ class F {
     return this.textContainer;
   }
 }
-typeof window < "u" && (window.TypographyToolkit = {
-  AnimatedText: F,
-  FallingAnimation: y,
-  SplittingAnimation: x,
-  GlitchingAnimation: C,
-  FloatingAnimation: T,
-  calculateDisintegration: v
-});
+const E = [
+  "unsettling",
+  "eerie",
+  "decayed",
+  "weathered",
+  "organic",
+  "imperfect",
+  "uneven",
+  "scratchy"
+], R = ["subtle", "moderate", "intense"], k = [
+  // Hand-drawn / Handwriting
+  {
+    name: "Hand-drawn Casual",
+    googleFontsName: "Caveat",
+    categories: ["hand-drawn", "handwriting", "casual", "sketchy", "informal"],
+    description: "Casual handwritten style, friendly and approachable",
+    artistic: !1
+  },
+  {
+    name: "Hand-drawn Playful",
+    googleFontsName: "Finger Paint",
+    categories: ["hand-drawn", "playful", "childlike", "casual", "sketchy"],
+    description: "Bold hand-drawn style, playful and energetic",
+    artistic: !0
+  },
+  {
+    name: "Hand-drawn Script",
+    googleFontsName: "Dancing Script",
+    categories: ["hand-drawn", "script", "elegant", "flowing", "cursive"],
+    description: "Elegant flowing script, graceful and organic",
+    artistic: !1
+  },
+  // Gothic / Medieval
+  {
+    name: "Gothic Blackletter",
+    googleFontsName: "UnifrakturMaguntia",
+    categories: ["gothic", "medieval", "blackletter", "ornate", "historical"],
+    description: "Medieval blackletter style, ornate and historical",
+    artistic: !0
+  },
+  {
+    name: "Gothic Horror",
+    googleFontsName: "Creepster",
+    categories: ["gothic", "horror", "creepy", "dripping", "display", "striking", "intense"],
+    description: "Horror-style font with dripping effects, very striking",
+    artistic: !0
+  },
+  {
+    name: "Gothic Bold",
+    googleFontsName: "Eater",
+    categories: ["gothic", "bold", "aggressive", "display", "striking"],
+    description: "Bold aggressive display font, powerful impact",
+    artistic: !0
+  },
+  // Futuristic / Sci-fi
+  {
+    name: "Futuristic Digital",
+    googleFontsName: "Orbitron",
+    categories: ["futuristic", "sci-fi", "digital", "tech", "modern", "geometric"],
+    description: "Futuristic geometric font, tech-forward and modern",
+    artistic: !0
+  },
+  {
+    name: "Futuristic Display",
+    googleFontsName: "Bungee",
+    categories: ["futuristic", "display", "bold", "condensed", "striking"],
+    description: "Bold condensed display font, high impact",
+    artistic: !0
+  },
+  {
+    name: "Futuristic Outline",
+    googleFontsName: "Bungee Shade",
+    categories: ["futuristic", "outline", "display", "bold", "striking"],
+    description: "Outlined version of Bungee, bold and striking",
+    artistic: !0
+  },
+  // Retro / Vintage
+  {
+    name: "Retro Terminal",
+    googleFontsName: "VT323",
+    categories: ["retro", "terminal", "monospace", "pixel", "80s", "tech"],
+    description: "Retro terminal font, pixelated and nostalgic",
+    artistic: !0
+  },
+  {
+    name: "Retro Pixel",
+    googleFontsName: "Press Start 2P",
+    categories: ["retro", "pixel", "8-bit", "arcade", "nostalgic", "display"],
+    description: "8-bit pixel font, classic arcade style",
+    artistic: !0
+  },
+  {
+    name: "Retro Display",
+    googleFontsName: "Frijole",
+    categories: ["retro", "playful", "rounded", "display", "casual"],
+    description: "Playful rounded retro font, fun and casual",
+    artistic: !0
+  },
+  // Decorative / Ornate
+  {
+    name: "Decorative Ornate",
+    googleFontsName: "Fascinate",
+    categories: ["decorative", "ornate", "display", "striking", "elaborate"],
+    description: "Highly decorative display font, ornate and elaborate",
+    artistic: !0
+  },
+  {
+    name: "Decorative Outline",
+    googleFontsName: "Fascinate Inline",
+    categories: ["decorative", "outline", "display", "ornate", "striking"],
+    description: "Outlined decorative font, ornate and striking",
+    artistic: !0
+  },
+  {
+    name: "Decorative Script",
+    googleFontsName: "Fredericka the Great",
+    categories: ["decorative", "script", "ornate", "elegant", "display"],
+    description: "Elegant decorative script, ornate and sophisticated",
+    artistic: !0
+  },
+  // Creepy / Horror
+  {
+    name: "Horror Dripping",
+    googleFontsName: "Nosifer",
+    categories: ["horror", "creepy", "dripping", "blood", "striking", "display", "intense"],
+    description: "Creepy font with blood-dripping effects, very striking",
+    artistic: !0
+  },
+  // Tech / Monospace
+  {
+    name: "Tech Monospace",
+    googleFontsName: "Share Tech Mono",
+    categories: ["tech", "monospace", "terminal", "code", "modern"],
+    description: "Clean tech monospace font, modern and readable",
+    artistic: !1
+  },
+  {
+    name: "Tech Display",
+    googleFontsName: "Rajdhani",
+    categories: ["tech", "modern", "geometric", "sans-serif", "futuristic"],
+    description: "Modern geometric tech font, clean and futuristic",
+    artistic: !1
+  },
+  // Organic / Natural
+  {
+    name: "Organic Flowing",
+    googleFontsName: "Dancing Script",
+    categories: ["organic", "flowing", "natural", "script", "elegant"],
+    description: "Flowing organic script, natural and elegant",
+    artistic: !1
+  },
+  // Modern / Clean
+  {
+    name: "Modern Sans",
+    googleFontsName: "Roboto",
+    categories: ["modern", "clean", "sans-serif", "readable", "professional"],
+    description: "Clean modern sans-serif, professional and readable",
+    artistic: !1
+  },
+  {
+    name: "Modern Serif",
+    googleFontsName: "Playfair Display",
+    categories: ["modern", "serif", "elegant", "sophisticated", "readable"],
+    description: "Elegant modern serif, sophisticated and readable",
+    artistic: !1
+  },
+  // Bold / Display
+  {
+    name: "Bold Condensed",
+    googleFontsName: "Bungee",
+    categories: ["bold", "condensed", "display", "striking", "impact"],
+    description: "Bold condensed display font, high impact",
+    artistic: !0
+  },
+  {
+    name: "Bold Aggressive",
+    googleFontsName: "Eater",
+    categories: ["bold", "aggressive", "display", "striking", "powerful"],
+    description: "Bold aggressive display font, powerful and striking",
+    artistic: !0
+  },
+  // Subtle Unsettling / Organic Imperfect
+  {
+    name: "Handwritten Thin",
+    googleFontsName: "Amatic SC",
+    categories: ["hand-drawn", "uneven", "organic", "unsettling", "subtle", "scratchy"],
+    description: "Thin hand-drawn letters with subtle irregularity, organic feel",
+    artistic: !0
+  },
+  {
+    name: "Rough Handwriting",
+    googleFontsName: "Rock Salt",
+    categories: ["hand-drawn", "scratchy", "weathered", "rough", "unsettling", "moderate"],
+    description: "Rough, weathered handwriting with natural imperfection",
+    artistic: !0
+  },
+  {
+    name: "Typewriter Degraded",
+    googleFontsName: "Special Elite",
+    categories: ["typewriter", "decayed", "weathered", "imperfect", "unsettling", "moderate"],
+    description: "Degraded typewriter font, vintage with imperfection",
+    artistic: !0
+  },
+  {
+    name: "Casual Handwriting",
+    googleFontsName: "Handlee",
+    categories: ["hand-drawn", "casual", "imperfect", "organic", "subtle"],
+    description: "Casual handwriting with subtle imperfection",
+    artistic: !1
+  },
+  {
+    name: "Childlike Organic",
+    googleFontsName: "Indie Flower",
+    categories: ["hand-drawn", "childlike", "organic", "imperfect", "eerie", "subtle"],
+    description: "Childlike handwriting, can feel innocent or eerie depending on context",
+    artistic: !1
+  },
+  {
+    name: "Scratchy Personal",
+    googleFontsName: "Shadows Into Light",
+    categories: ["hand-drawn", "scratchy", "personal", "unsettling", "uneven", "moderate"],
+    description: "Scratchy personal handwriting with unsettling quality",
+    artistic: !0
+  },
+  {
+    name: "Hurried Scratchy",
+    googleFontsName: "Reenie Beanie",
+    categories: ["hand-drawn", "scratchy", "hurried", "uneven", "unsettling", "moderate"],
+    description: "Hurried scratchy handwriting with nervous energy",
+    artistic: !0
+  },
+  {
+    name: "Architectural Irregular",
+    googleFontsName: "Architects Daughter",
+    categories: ["hand-drawn", "imperfect", "uneven", "organic", "subtle"],
+    description: "Hand-drawn with architectural irregularity",
+    artistic: !1
+  },
+  {
+    name: "Informal Unsettling",
+    googleFontsName: "Coming Soon",
+    categories: ["hand-drawn", "informal", "imperfect", "unsettling", "subtle"],
+    description: "Informal handwriting that feels slightly off",
+    artistic: !1
+  },
+  {
+    name: "Manic Handwriting",
+    googleFontsName: "Gloria Hallelujah",
+    categories: ["hand-drawn", "playful", "manic", "uneven", "unsettling", "moderate"],
+    description: "Playful handwriting that can feel manic or unsettled",
+    artistic: !0
+  },
+  {
+    name: "Quick Imperfect",
+    googleFontsName: "Just Another Hand",
+    categories: ["hand-drawn", "scratchy", "quick", "imperfect", "uneven", "subtle"],
+    description: "Quick scratchy handwriting with natural imperfection",
+    artistic: !1
+  },
+  {
+    name: "Organic Handwriting",
+    googleFontsName: "Kalam",
+    categories: ["hand-drawn", "organic", "natural", "flowing", "subtle"],
+    description: "Organic natural handwriting with flowing quality",
+    artistic: !1
+  },
+  {
+    name: "Flowing Tension",
+    googleFontsName: "Satisfy",
+    categories: ["script", "flowing", "tension", "elegant", "unsettling", "subtle"],
+    description: "Flowing script with underlying tension",
+    artistic: !0
+  },
+  {
+    name: "Unsettling Elegance",
+    googleFontsName: "Yellowtail",
+    categories: ["script", "elegant", "stylized", "unsettling", "uneven", "moderate"],
+    description: "Stylized elegance with unsettling undertones",
+    artistic: !0
+  },
+  {
+    name: "Typewriter Imperfect",
+    googleFontsName: "Cutive Mono",
+    categories: ["typewriter", "monospace", "imperfect", "decayed", "vintage", "subtle"],
+    description: "Imperfect vintage typewriter with character",
+    artistic: !0
+  }
+];
+function L(s) {
+  const e = s.toLowerCase().split(/\s+/).filter((t) => t.length > 0), o = [], n = [];
+  for (const t of e)
+    t.startsWith("-") && t.length > 1 ? n.push(t.slice(1)) : o.push(t);
+  return { positive: o, negative: n };
+}
+function O(s, e) {
+  const o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map(), t = 2, i = [];
+  for (const l of s) {
+    if (i.length >= e) break;
+    if (o.has(l.font.googleFontsName))
+      continue;
+    const r = l.font.categories[0], a = n.get(r) || 0;
+    a >= t || (o.add(l.font.googleFontsName), n.set(r, a + 1), i.push(l.font));
+  }
+  return i;
+}
+function y(s, e) {
+  const { positive: o, negative: n } = L(s), t = (e == null ? void 0 : e.limit) ?? 10, l = k.map((r) => {
+    let a = 0;
+    for (const c of o) {
+      for (const h of r.categories)
+        (h.includes(c) || c.includes(h)) && (a += 10);
+      r.name.toLowerCase().includes(c) && (a += 15), r.description.toLowerCase().includes(c) && (a += 8);
+    }
+    for (const c of n) {
+      for (const h of r.categories)
+        (h.includes(c) || c.includes(h)) && (a -= 20);
+      r.name.toLowerCase().includes(c) && (a -= 15), r.description.toLowerCase().includes(c) && (a -= 10);
+    }
+    return r.artistic && (a += 1), { font: r, score: a };
+  }).filter((r) => r.score > 0).sort((r, a) => a.score - r.score);
+  return O(l, t);
+}
+function P(s) {
+  return y(s)[0];
+}
+const p = /* @__PURE__ */ new Set();
+function N(s) {
+  return new Promise((e, o) => {
+    const n = s.replace(/\s+/g, "+");
+    if (p.has(n)) {
+      e();
+      return;
+    }
+    if (document.querySelector(
+      `link[href*="fonts.googleapis.com"][href*="${n}"]`
+    )) {
+      p.add(n), e();
+      return;
+    }
+    const i = document.createElement("link");
+    i.rel = "stylesheet", i.href = `https://fonts.googleapis.com/css2?family=${n}:wght@400&display=swap`, i.onload = () => {
+      p.add(n), e();
+    }, i.onerror = () => {
+      console.warn(`Failed to load Google Font: ${s}`), o(new Error(`Failed to load Google Font: ${s}`));
+    }, document.head.appendChild(i);
+  });
+}
+function B(s) {
+  return Promise.all(s.map((e) => N(e)));
+}
+function G(s) {
+  const e = s.replace(/\s+/g, "+");
+  return p.has(e);
+}
+function I(s, e = "sans-serif") {
+  const o = [
+    "Caveat",
+    "Dancing Script",
+    "Finger Paint",
+    "Fredericka the Great",
+    // Subtle unsettling / organic fonts
+    "Amatic SC",
+    "Handlee",
+    "Indie Flower",
+    "Shadows Into Light",
+    "Rock Salt",
+    "Reenie Beanie",
+    "Architects Daughter",
+    "Coming Soon",
+    "Gloria Hallelujah",
+    "Just Another Hand",
+    "Kalam",
+    "Satisfy",
+    "Yellowtail"
+  ], n = [
+    "VT323",
+    "Press Start 2P",
+    "Share Tech Mono",
+    // Typewriter fonts
+    "Special Elite",
+    "Cutive Mono"
+  ];
+  let t = e;
+  return o.includes(s) ? t = "cursive" : n.includes(s) && (t = "monospace"), `'${s}', ${t}`;
+}
+function T(s, e) {
+  const o = s.toLowerCase(), n = e.rejectedFont.toLowerCase(), t = e.negativeAspects.map((a) => a.toLowerCase()), i = e.positiveAspects.map((a) => a.toLowerCase());
+  return y(s).filter(
+    (a) => a.googleFontsName.toLowerCase() !== n && a.name.toLowerCase() !== n
+  ).map((a) => {
+    let c = 0;
+    for (const d of a.categories)
+      o.includes(d) && (c += 5);
+    for (const d of i)
+      (a.categories.some((u) => u.includes(d) || d.includes(u)) || a.name.toLowerCase().includes(d) || a.description.toLowerCase().includes(d)) && (c += 15);
+    for (const d of t)
+      (a.categories.some((u) => u.includes(d) || d.includes(u)) || a.name.toLowerCase().includes(d) || a.description.toLowerCase().includes(d)) && (c -= 20);
+    const h = i.some(
+      (d) => d.includes("striking") || d.includes("artistic") || d.includes("unique")
+    );
+    return h && a.artistic && (c += 10), h && !a.artistic && (c -= 5), { font: a, score: c };
+  }).filter((a) => a.score > 0).sort((a, c) => c.score - a.score).map((a) => a.font);
+}
+function Y(s, e) {
+  return T(s, e)[0];
+}
+if (typeof window < "u") {
+  const s = {
+    AnimatedText: v,
+    FallingAnimation: f,
+    SplittingAnimation: C,
+    GlitchingAnimation: x,
+    FloatingAnimation: S,
+    calculateDisintegration: b,
+    // Font utilities
+    fontSuggestions: k,
+    suggestFonts: y,
+    suggestFont: P,
+    loadGoogleFont: N,
+    loadGoogleFonts: B,
+    isFontLoaded: G,
+    getFontFamily: I,
+    refineSuggestion: T,
+    refineFont: Y,
+    MOOD_CATEGORIES: E,
+    INTENSITY_CATEGORIES: R
+  };
+  window.TypographyToolkit = s, window.AnimatedText = v;
+}
 export {
-  F as AnimatedText,
-  y as FallingAnimation,
-  T as FloatingAnimation,
-  C as GlitchingAnimation,
-  x as SplittingAnimation,
-  v as calculateDisintegration
+  v as AnimatedText,
+  f as FallingAnimation,
+  S as FloatingAnimation,
+  x as GlitchingAnimation,
+  R as INTENSITY_CATEGORIES,
+  E as MOOD_CATEGORIES,
+  C as SplittingAnimation,
+  b as calculateDisintegration,
+  k as fontSuggestions,
+  I as getFontFamily,
+  G as isFontLoaded,
+  N as loadGoogleFont,
+  B as loadGoogleFonts,
+  Y as refineFont,
+  T as refineSuggestion,
+  P as suggestFont,
+  y as suggestFonts
 };

package/dist/typography-toolkit.iife.js

@@ -1 +1 @@
-var TypographyToolkit=function(d){"use strict";class u{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||20,l=o*.2,r=(n*10*e+l*5)%s-s/2;return{...t,y:r}}}class y{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||4,l=o*.2,h=Math.sin(n*.5*e+l)*s;return{...t,x:h}}}class f{constructor(){this.lastUpdate=0,this.glitchX=0,this.glitchY=0,this.glitchRot=0}update(t,o,n,i={}){const e=i.amplitude||3;return n-this.lastUpdate>.1&&(this.glitchX=(Math.random()-.5)*e,this.glitchY=(Math.random()-.5)*(e*.67),this.glitchRot=(Math.random()-.5)*e,this.lastUpdate=n),{...t,x:this.glitchX,y:this.glitchY,rotation:this.glitchRot}}}class g{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||15,l=o*.2,r=-((n*8*e+l*4)%s-s/2);return{...t,y:r}}}function w(c,t){const{x:o,y:n,rotation:i,scale:e,opacity:s}=t;c.style.transform=`translate(${o}px, ${n}px) rotate(${i}deg) scale(${e})`,c.style.opacity=s.toString()}function x(c,t,o,n,i,e){if(!e.enabled)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const s=e.radius||80,l=e.strength||1,h=e.behaviors||["fall-away","split-apart","explode"],r=o-c,m=n-t,C=Math.sqrt(r*r+m*m);if(C>=s)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const a=(1-C/s)*l,T=Math.atan2(m,r),b=h[i%h.length];let p;switch(b){case"fall-away":const F=Math.cos(T)*a*20,S=Math.sin(T)*a*40+a*30;p={x:F,y:S,rotation:a*15,scale:1,opacity:1-a*.6};break;case"split-apart":const A=i%2===0?1:-1;p={x:A*a*50,y:(Math.random()-.5)*a*10,rotation:a*10*A,scale:1,opacity:1-a*.6};break;case"explode":const M=T+(Math.random()-.5)*.5;p={x:Math.cos(M)*a*40,y:Math.sin(M)*a*40,rotation:a*30,scale:1+a*.4,opacity:1-a*.6};break;default:p={x:0,y:0,rotation:0,scale:1,opacity:1}}return{state:p,applied:!0}}class v{constructor(t){this.letters=[],this.animationFrame=null,this.mouseX=0,this.mouseY=0,this.mouseMoveHandler=null,this.startTime=Date.now(),this.isDestroyed=!1,this.container=t.container,this.animationTypes=t.animations||["falling","splitting","glitching","floating"],this.cycle=t.cycle!==!1,this.speed=t.speed||1,this.amplitude=t.amplitude||1,this.disintegration=t.disintegration||{enabled:!1},this.style=t.style||{},this.fadeOut=t.fadeOut||0,this.textContainer=document.createElement("div"),this.textContainer.style.position="absolute",this.textContainer.style.pointerEvents="none",this.textContainer.style.zIndex="1",t.position&&(t.position.x!==void 0&&(this.textContainer.style.left=`${t.position.x}px`),t.position.y!==void 0&&(this.textContainer.style.top=`${t.position.y}px`)),this.createLetters(t.text),this.setupMouseTracking(),this.startAnimation(),this.fadeOut>0&&setTimeout(()=>this.destroy(),this.fadeOut)}createLetters(t){t.toUpperCase().split("").forEach((n,i)=>{if(n===" "){const l=document.createTextNode(" ");this.textContainer.appendChild(l);return}const e=document.createElement("span");e.className="animated-letter",e.textContent=n,e.dataset.index=i.toString(),e.dataset.char=n,this.applyStyle(e),e.style.display="inline-block",e.style.position="relative",e.style.transition="transform 0.1s ease-out",this.textContainer.appendChild(e);const s=e.getBoundingClientRect();this.letters.push({element:e,index:i,char:n,baseX:s.left,baseY:s.top})}),this.container.appendChild(this.textContainer)}applyStyle(t){this.style.fontFamily&&(t.style.fontFamily=this.style.fontFamily),this.style.fontSize&&(t.style.fontSize=`${this.style.fontSize}px`),this.style.color&&(t.style.color=this.style.color),this.style.fontWeight&&(t.style.fontWeight=this.style.fontWeight)}setupMouseTracking(){this.disintegration.enabled&&(this.mouseMoveHandler=t=>{this.mouseX=t.clientX,this.mouseY=t.clientY},document.addEventListener("mousemove",this.mouseMoveHandler))}startAnimation(){const t=()=>{if(this.isDestroyed)return;const o=(Date.now()-this.startTime)*.001;this.letters.forEach((n,i)=>{const e=n.element.getBoundingClientRect(),s=e.left+e.width/2,l=e.top+e.height/2,h=x(s,l,this.mouseX,this.mouseY,i,this.disintegration);let r;if(h.applied)r=h.state;else{const m=this.getAnimationType(i);r=this.getAnimation(m).update({x:0,y:0,rotation:0,scale:1,opacity:1},i,o,{speed:this.speed,amplitude:this.amplitude*(m==="falling"||m==="floating"?20:4)})}w(n.element,r)}),this.animationFrame=requestAnimationFrame(t)};this.animationFrame=requestAnimationFrame(t)}getAnimationType(t){return this.cycle?this.animationTypes[t%this.animationTypes.length]:this.animationTypes[0]}getAnimation(t){switch(t){case"falling":return new u;case"splitting":return new y;case"glitching":return new f;case"floating":return new g;default:return new u}}destroy(){this.isDestroyed||(this.isDestroyed=!0,this.animationFrame!==null&&cancelAnimationFrame(this.animationFrame),this.mouseMoveHandler&&document.removeEventListener("mousemove",this.mouseMoveHandler),this.textContainer.style.transition="opacity 3s ease",this.textContainer.style.opacity="0",setTimeout(()=>{this.textContainer.parentNode&&this.textContainer.parentNode.removeChild(this.textContainer)},3e3))}getElement(){return this.textContainer}}return typeof window<"u"&&(window.TypographyToolkit={AnimatedText:v,FallingAnimation:u,SplittingAnimation:y,GlitchingAnimation:f,FloatingAnimation:g,calculateDisintegration:x}),d.AnimatedText=v,d.FallingAnimation=u,d.FloatingAnimation=g,d.GlitchingAnimation=f,d.SplittingAnimation=y,d.calculateDisintegration=x,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({});
+var TypographyToolkit=function(g){"use strict";class f{update(e,o,n,t={}){const i=t.speed||1,l=t.amplitude||20,r=o*.2,c=(n*10*i+r*5)%l-l/2;return{...e,y:c}}}class F{update(e,o,n,t={}){const i=t.speed||1,l=t.amplitude||4,r=o*.2,a=Math.sin(n*.5*i+r)*l;return{...e,x:a}}}class v{constructor(){this.lastUpdate=0,this.glitchX=0,this.glitchY=0,this.glitchRot=0}update(e,o,n,t={}){const i=t.amplitude||3;return n-this.lastUpdate>.1&&(this.glitchX=(Math.random()-.5)*i,this.glitchY=(Math.random()-.5)*(i*.67),this.glitchRot=(Math.random()-.5)*i,this.lastUpdate=n),{...e,x:this.glitchX,y:this.glitchY,rotation:this.glitchRot}}}class C{update(e,o,n,t={}){const i=t.speed||1,l=t.amplitude||15,r=o*.2,c=-((n*8*i+r*4)%l-l/2);return{...e,y:c}}}function G(s,e){const{x:o,y:n,rotation:t,scale:i,opacity:l}=e;s.style.transform=`translate(${o}px, ${n}px) rotate(${t}deg) scale(${i})`,s.style.opacity=l.toString()}function S(s,e,o,n,t,i){if(!i.enabled)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const l=i.radius||80,r=i.strength||1,a=i.behaviors||["fall-away","split-apart","explode"],c=o-s,h=n-e,d=Math.sqrt(c*c+h*h);if(d>=l)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const u=(1-d/l)*r,m=Math.atan2(h,c),B=a[t%a.length];let p;switch(B){case"fall-away":const Y=Math.cos(m)*u*20,$=Math.sin(m)*u*40+u*30;p={x:Y,y:$,rotation:u*15,scale:1,opacity:1-u*.6};break;case"split-apart":const L=t%2===0?1:-1;p={x:L*u*50,y:(Math.random()-.5)*u*10,rotation:u*10*L,scale:1,opacity:1-u*.6};break;case"explode":const O=m+(Math.random()-.5)*.5;p={x:Math.cos(O)*u*40,y:Math.sin(O)*u*40,rotation:u*30,scale:1+u*.4,opacity:1-u*.6};break;default:p={x:0,y:0,rotation:0,scale:1,opacity:1}}return{state:p,applied:!0}}class b{constructor(e){var o;if(this.letters=[],this.animationFrame=null,this.mouseX=0,this.mouseY=0,this.mouseMoveHandler=null,this.startTime=Date.now(),this.isDestroyed=!1,this.container=e.container,this.animationTypes=e.animations||["falling","splitting","glitching","floating"],this.cycle=e.cycle!==!1,this.speed=e.speed||1,this.amplitude=e.amplitude||1,this.disintegration=e.disintegration||{enabled:!1},this.style=e.style||{},this.fadeOut=e.fadeOut||0,this.callbacks=e.callbacks,this.textContainer=document.createElement("div"),this.textContainer.style.position="absolute",this.textContainer.style.pointerEvents="none",this.textContainer.style.zIndex="1",e.containerClass&&(this.textContainer.className=e.containerClass),e.containerStyle&&Object.entries(e.containerStyle).forEach(([n,t])=>{this.textContainer.style.setProperty(n,t)}),e.position){let n=e.position.x,t=e.position.y;if(e.position.constrainToViewport){this.container.getBoundingClientRect();const i=window.innerWidth,l=window.innerHeight,r=e.text.length*20;n!==void 0&&(n=Math.max(0,Math.min(n,i-r))),t!==void 0&&(t=Math.max(0,Math.min(t,l-50)))}n!==void 0&&(this.textContainer.style.left=`${n}px`),t!==void 0&&(this.textContainer.style.top=`${t}px`)}this.createLetters(e.text),this.setupMouseTracking(),this.startAnimation(),(o=this.callbacks)!=null&&o.onCreate&&this.callbacks.onCreate(this.textContainer),this.fadeOut>0&&setTimeout(()=>this.destroy(),this.fadeOut)}createLetters(e){e.toUpperCase().split("").forEach((n,t)=>{if(n===" "){const r=document.createTextNode(" ");this.textContainer.appendChild(r);return}const i=document.createElement("span");i.className="animated-letter",i.textContent=n,i.dataset.index=t.toString(),i.dataset.char=n,this.applyStyle(i),i.style.display="inline-block",i.style.position="relative",i.style.transition="transform 0.1s ease-out",this.textContainer.appendChild(i);const l=i.getBoundingClientRect();this.letters.push({element:i,index:t,char:n,baseX:l.left,baseY:l.top})}),this.container.appendChild(this.textContainer)}applyStyle(e){this.style.fontFamily&&(e.style.fontFamily=this.style.fontFamily),this.style.fontSize&&(e.style.fontSize=`${this.style.fontSize}px`),this.style.color&&(e.style.color=this.style.color),this.style.fontWeight&&(e.style.fontWeight=this.style.fontWeight),this.style.textShadow&&(e.style.textShadow=this.style.textShadow),this.style.letterSpacing&&(e.style.letterSpacing=this.style.letterSpacing),this.style.textTransform&&(e.style.textTransform=this.style.textTransform)}setupMouseTracking(){this.disintegration.enabled&&(this.mouseMoveHandler=e=>{this.mouseX=e.clientX,this.mouseY=e.clientY},document.addEventListener("mousemove",this.mouseMoveHandler))}startAnimation(){const e=()=>{if(this.isDestroyed)return;const o=(Date.now()-this.startTime)*.001;this.letters.forEach((n,t)=>{var h;const i=n.element.getBoundingClientRect(),l=i.left+i.width/2,r=i.top+i.height/2,a=S(l,r,this.mouseX,this.mouseY,t,this.disintegration);let c;if(a.applied)c=a.state,(h=this.callbacks)!=null&&h.onDisintegrate&&this.callbacks.onDisintegrate(t);else{const d=this.getAnimationType(t);c=this.getAnimation(d).update({x:0,y:0,rotation:0,scale:1,opacity:1},t,o,{speed:this.speed,amplitude:this.amplitude*(d==="falling"||d==="floating"?20:4)})}G(n.element,c)}),this.animationFrame=requestAnimationFrame(e)};this.animationFrame=requestAnimationFrame(e)}getAnimationType(e){return this.cycle?this.animationTypes[e%this.animationTypes.length]:this.animationTypes[0]}getAnimation(e){switch(e){case"falling":return new f;case"splitting":return new F;case"glitching":return new v;case"floating":return new C;default:return new f}}destroy(){var e;this.isDestroyed||(this.isDestroyed=!0,this.animationFrame!==null&&cancelAnimationFrame(this.animationFrame),this.mouseMoveHandler&&document.removeEventListener("mousemove",this.mouseMoveHandler),(e=this.callbacks)!=null&&e.onDestroy&&this.callbacks.onDestroy(),this.textContainer.style.transition="opacity 3s ease",this.textContainer.style.opacity="0",setTimeout(()=>{this.textContainer.parentNode&&this.textContainer.parentNode.removeChild(this.textContainer)},3e3))}getElement(){return this.textContainer}}const x=["unsettling","eerie","decayed","weathered","organic","imperfect","uneven","scratchy"],M=["subtle","moderate","intense"],k=[{name:"Hand-drawn Casual",googleFontsName:"Caveat",categories:["hand-drawn","handwriting","casual","sketchy","informal"],description:"Casual handwritten style, friendly and approachable",artistic:!1},{name:"Hand-drawn Playful",googleFontsName:"Finger Paint",categories:["hand-drawn","playful","childlike","casual","sketchy"],description:"Bold hand-drawn style, playful and energetic",artistic:!0},{name:"Hand-drawn Script",googleFontsName:"Dancing Script",categories:["hand-drawn","script","elegant","flowing","cursive"],description:"Elegant flowing script, graceful and organic",artistic:!1},{name:"Gothic Blackletter",googleFontsName:"UnifrakturMaguntia",categories:["gothic","medieval","blackletter","ornate","historical"],description:"Medieval blackletter style, ornate and historical",artistic:!0},{name:"Gothic Horror",googleFontsName:"Creepster",categories:["gothic","horror","creepy","dripping","display","striking","intense"],description:"Horror-style font with dripping effects, very striking",artistic:!0},{name:"Gothic Bold",googleFontsName:"Eater",categories:["gothic","bold","aggressive","display","striking"],description:"Bold aggressive display font, powerful impact",artistic:!0},{name:"Futuristic Digital",googleFontsName:"Orbitron",categories:["futuristic","sci-fi","digital","tech","modern","geometric"],description:"Futuristic geometric font, tech-forward and modern",artistic:!0},{name:"Futuristic Display",googleFontsName:"Bungee",categories:["futuristic","display","bold","condensed","striking"],description:"Bold condensed display font, high impact",artistic:!0},{name:"Futuristic Outline",googleFontsName:"Bungee Shade",categories:["futuristic","outline","display","bold","striking"],description:"Outlined version of Bungee, bold and striking",artistic:!0},{name:"Retro Terminal",googleFontsName:"VT323",categories:["retro","terminal","monospace","pixel","80s","tech"],description:"Retro terminal font, pixelated and nostalgic",artistic:!0},{name:"Retro Pixel",googleFontsName:"Press Start 2P",categories:["retro","pixel","8-bit","arcade","nostalgic","display"],description:"8-bit pixel font, classic arcade style",artistic:!0},{name:"Retro Display",googleFontsName:"Frijole",categories:["retro","playful","rounded","display","casual"],description:"Playful rounded retro font, fun and casual",artistic:!0},{name:"Decorative Ornate",googleFontsName:"Fascinate",categories:["decorative","ornate","display","striking","elaborate"],description:"Highly decorative display font, ornate and elaborate",artistic:!0},{name:"Decorative Outline",googleFontsName:"Fascinate Inline",categories:["decorative","outline","display","ornate","striking"],description:"Outlined decorative font, ornate and striking",artistic:!0},{name:"Decorative Script",googleFontsName:"Fredericka the Great",categories:["decorative","script","ornate","elegant","display"],description:"Elegant decorative script, ornate and sophisticated",artistic:!0},{name:"Horror Dripping",googleFontsName:"Nosifer",categories:["horror","creepy","dripping","blood","striking","display","intense"],description:"Creepy font with blood-dripping effects, very striking",artistic:!0},{name:"Tech Monospace",googleFontsName:"Share Tech Mono",categories:["tech","monospace","terminal","code","modern"],description:"Clean tech monospace font, modern and readable",artistic:!1},{name:"Tech Display",googleFontsName:"Rajdhani",categories:["tech","modern","geometric","sans-serif","futuristic"],description:"Modern geometric tech font, clean and futuristic",artistic:!1},{name:"Organic Flowing",googleFontsName:"Dancing Script",categories:["organic","flowing","natural","script","elegant"],description:"Flowing organic script, natural and elegant",artistic:!1},{name:"Modern Sans",googleFontsName:"Roboto",categories:["modern","clean","sans-serif","readable","professional"],description:"Clean modern sans-serif, professional and readable",artistic:!1},{name:"Modern Serif",googleFontsName:"Playfair Display",categories:["modern","serif","elegant","sophisticated","readable"],description:"Elegant modern serif, sophisticated and readable",artistic:!1},{name:"Bold Condensed",googleFontsName:"Bungee",categories:["bold","condensed","display","striking","impact"],description:"Bold condensed display font, high impact",artistic:!0},{name:"Bold Aggressive",googleFontsName:"Eater",categories:["bold","aggressive","display","striking","powerful"],description:"Bold aggressive display font, powerful and striking",artistic:!0},{name:"Handwritten Thin",googleFontsName:"Amatic SC",categories:["hand-drawn","uneven","organic","unsettling","subtle","scratchy"],description:"Thin hand-drawn letters with subtle irregularity, organic feel",artistic:!0},{name:"Rough Handwriting",googleFontsName:"Rock Salt",categories:["hand-drawn","scratchy","weathered","rough","unsettling","moderate"],description:"Rough, weathered handwriting with natural imperfection",artistic:!0},{name:"Typewriter Degraded",googleFontsName:"Special Elite",categories:["typewriter","decayed","weathered","imperfect","unsettling","moderate"],description:"Degraded typewriter font, vintage with imperfection",artistic:!0},{name:"Casual Handwriting",googleFontsName:"Handlee",categories:["hand-drawn","casual","imperfect","organic","subtle"],description:"Casual handwriting with subtle imperfection",artistic:!1},{name:"Childlike Organic",googleFontsName:"Indie Flower",categories:["hand-drawn","childlike","organic","imperfect","eerie","subtle"],description:"Childlike handwriting, can feel innocent or eerie depending on context",artistic:!1},{name:"Scratchy Personal",googleFontsName:"Shadows Into Light",categories:["hand-drawn","scratchy","personal","unsettling","uneven","moderate"],description:"Scratchy personal handwriting with unsettling quality",artistic:!0},{name:"Hurried Scratchy",googleFontsName:"Reenie Beanie",categories:["hand-drawn","scratchy","hurried","uneven","unsettling","moderate"],description:"Hurried scratchy handwriting with nervous energy",artistic:!0},{name:"Architectural Irregular",googleFontsName:"Architects Daughter",categories:["hand-drawn","imperfect","uneven","organic","subtle"],description:"Hand-drawn with architectural irregularity",artistic:!1},{name:"Informal Unsettling",googleFontsName:"Coming Soon",categories:["hand-drawn","informal","imperfect","unsettling","subtle"],description:"Informal handwriting that feels slightly off",artistic:!1},{name:"Manic Handwriting",googleFontsName:"Gloria Hallelujah",categories:["hand-drawn","playful","manic","uneven","unsettling","moderate"],description:"Playful handwriting that can feel manic or unsettled",artistic:!0},{name:"Quick Imperfect",googleFontsName:"Just Another Hand",categories:["hand-drawn","scratchy","quick","imperfect","uneven","subtle"],description:"Quick scratchy handwriting with natural imperfection",artistic:!1},{name:"Organic Handwriting",googleFontsName:"Kalam",categories:["hand-drawn","organic","natural","flowing","subtle"],description:"Organic natural handwriting with flowing quality",artistic:!1},{name:"Flowing Tension",googleFontsName:"Satisfy",categories:["script","flowing","tension","elegant","unsettling","subtle"],description:"Flowing script with underlying tension",artistic:!0},{name:"Unsettling Elegance",googleFontsName:"Yellowtail",categories:["script","elegant","stylized","unsettling","uneven","moderate"],description:"Stylized elegance with unsettling undertones",artistic:!0},{name:"Typewriter Imperfect",googleFontsName:"Cutive Mono",categories:["typewriter","monospace","imperfect","decayed","vintage","subtle"],description:"Imperfect vintage typewriter with character",artistic:!0}];function I(s){const e=s.toLowerCase().split(/\s+/).filter(t=>t.length>0),o=[],n=[];for(const t of e)t.startsWith("-")&&t.length>1?n.push(t.slice(1)):o.push(t);return{positive:o,negative:n}}function P(s,e){const o=new Set,n=new Map,t=2,i=[];for(const l of s){if(i.length>=e)break;if(o.has(l.font.googleFontsName))continue;const r=l.font.categories[0],a=n.get(r)||0;a>=t||(o.add(l.font.googleFontsName),n.set(r,a+1),i.push(l.font))}return i}function y(s,e){const{positive:o,negative:n}=I(s),t=(e==null?void 0:e.limit)??10,l=k.map(r=>{let a=0;for(const c of o){for(const h of r.categories)(h.includes(c)||c.includes(h))&&(a+=10);r.name.toLowerCase().includes(c)&&(a+=15),r.description.toLowerCase().includes(c)&&(a+=8)}for(const c of n){for(const h of r.categories)(h.includes(c)||c.includes(h))&&(a-=20);r.name.toLowerCase().includes(c)&&(a-=15),r.description.toLowerCase().includes(c)&&(a-=10)}return r.artistic&&(a+=1),{font:r,score:a}}).filter(r=>r.score>0).sort((r,a)=>a.score-r.score);return P(l,t)}function A(s){return y(s)[0]}const w=new Set;function N(s){return new Promise((e,o)=>{const n=s.replace(/\s+/g,"+");if(w.has(n)){e();return}if(document.querySelector(`link[href*="fonts.googleapis.com"][href*="${n}"]`)){w.add(n),e();return}const i=document.createElement("link");i.rel="stylesheet",i.href=`https://fonts.googleapis.com/css2?family=${n}:wght@400&display=swap`,i.onload=()=>{w.add(n),e()},i.onerror=()=>{console.warn(`Failed to load Google Font: ${s}`),o(new Error(`Failed to load Google Font: ${s}`))},document.head.appendChild(i)})}function D(s){return Promise.all(s.map(e=>N(e)))}function E(s){const e=s.replace(/\s+/g,"+");return w.has(e)}function H(s,e="sans-serif"){const o=["Caveat","Dancing Script","Finger Paint","Fredericka the Great","Amatic SC","Handlee","Indie Flower","Shadows Into Light","Rock Salt","Reenie Beanie","Architects Daughter","Coming Soon","Gloria Hallelujah","Just Another Hand","Kalam","Satisfy","Yellowtail"],n=["VT323","Press Start 2P","Share Tech Mono","Special Elite","Cutive Mono"];let t=e;return o.includes(s)?t="cursive":n.includes(s)&&(t="monospace"),`'${s}', ${t}`}function T(s,e){const o=s.toLowerCase(),n=e.rejectedFont.toLowerCase(),t=e.negativeAspects.map(a=>a.toLowerCase()),i=e.positiveAspects.map(a=>a.toLowerCase());return y(s).filter(a=>a.googleFontsName.toLowerCase()!==n&&a.name.toLowerCase()!==n).map(a=>{let c=0;for(const d of a.categories)o.includes(d)&&(c+=5);for(const d of i)(a.categories.some(m=>m.includes(d)||d.includes(m))||a.name.toLowerCase().includes(d)||a.description.toLowerCase().includes(d))&&(c+=15);for(const d of t)(a.categories.some(m=>m.includes(d)||d.includes(m))||a.name.toLowerCase().includes(d)||a.description.toLowerCase().includes(d))&&(c-=20);const h=i.some(d=>d.includes("striking")||d.includes("artistic")||d.includes("unique"));return h&&a.artistic&&(c+=10),h&&!a.artistic&&(c-=5),{font:a,score:c}}).filter(a=>a.score>0).sort((a,c)=>c.score-a.score).map(a=>a.font)}function R(s,e){return T(s,e)[0]}if(typeof window<"u"){const s={AnimatedText:b,FallingAnimation:f,SplittingAnimation:F,GlitchingAnimation:v,FloatingAnimation:C,calculateDisintegration:S,fontSuggestions:k,suggestFonts:y,suggestFont:A,loadGoogleFont:N,loadGoogleFonts:D,isFontLoaded:E,getFontFamily:H,refineSuggestion:T,refineFont:R,MOOD_CATEGORIES:x,INTENSITY_CATEGORIES:M};window.TypographyToolkit=s,window.AnimatedText=b}return g.AnimatedText=b,g.FallingAnimation=f,g.FloatingAnimation=C,g.GlitchingAnimation=v,g.INTENSITY_CATEGORIES=M,g.MOOD_CATEGORIES=x,g.SplittingAnimation=F,g.calculateDisintegration=S,g.fontSuggestions=k,g.getFontFamily=H,g.isFontLoaded=E,g.loadGoogleFont=N,g.loadGoogleFonts=D,g.refineFont=R,g.refineSuggestion=T,g.suggestFont=A,g.suggestFonts=y,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"}),g}({});

package/dist/typography-toolkit.umd.js

@@ -1 +1 @@
-(function(l,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(l=typeof globalThis<"u"?globalThis:l||self,p(l.TypographyToolkit={}))})(this,function(l){"use strict";class p{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||20,r=o*.2,c=(n*10*e+r*5)%s-s/2;return{...t,y:c}}}class y{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||4,r=o*.2,d=Math.sin(n*.5*e+r)*s;return{...t,x:d}}}class f{constructor(){this.lastUpdate=0,this.glitchX=0,this.glitchY=0,this.glitchRot=0}update(t,o,n,i={}){const e=i.amplitude||3;return n-this.lastUpdate>.1&&(this.glitchX=(Math.random()-.5)*e,this.glitchY=(Math.random()-.5)*(e*.67),this.glitchRot=(Math.random()-.5)*e,this.lastUpdate=n),{...t,x:this.glitchX,y:this.glitchY,rotation:this.glitchRot}}}class g{update(t,o,n,i={}){const e=i.speed||1,s=i.amplitude||15,r=o*.2,c=-((n*8*e+r*4)%s-s/2);return{...t,y:c}}}function b(h,t){const{x:o,y:n,rotation:i,scale:e,opacity:s}=t;h.style.transform=`translate(${o}px, ${n}px) rotate(${i}deg) scale(${e})`,h.style.opacity=s.toString()}function x(h,t,o,n,i,e){if(!e.enabled)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const s=e.radius||80,r=e.strength||1,d=e.behaviors||["fall-away","split-apart","explode"],c=o-h,u=n-t,T=Math.sqrt(c*c+u*u);if(T>=s)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const a=(1-T/s)*r,C=Math.atan2(u,c),w=d[i%d.length];let m;switch(w){case"fall-away":const F=Math.cos(C)*a*20,S=Math.sin(C)*a*40+a*30;m={x:F,y:S,rotation:a*15,scale:1,opacity:1-a*.6};break;case"split-apart":const v=i%2===0?1:-1;m={x:v*a*50,y:(Math.random()-.5)*a*10,rotation:a*10*v,scale:1,opacity:1-a*.6};break;case"explode":const M=C+(Math.random()-.5)*.5;m={x:Math.cos(M)*a*40,y:Math.sin(M)*a*40,rotation:a*30,scale:1+a*.4,opacity:1-a*.6};break;default:m={x:0,y:0,rotation:0,scale:1,opacity:1}}return{state:m,applied:!0}}class A{constructor(t){this.letters=[],this.animationFrame=null,this.mouseX=0,this.mouseY=0,this.mouseMoveHandler=null,this.startTime=Date.now(),this.isDestroyed=!1,this.container=t.container,this.animationTypes=t.animations||["falling","splitting","glitching","floating"],this.cycle=t.cycle!==!1,this.speed=t.speed||1,this.amplitude=t.amplitude||1,this.disintegration=t.disintegration||{enabled:!1},this.style=t.style||{},this.fadeOut=t.fadeOut||0,this.textContainer=document.createElement("div"),this.textContainer.style.position="absolute",this.textContainer.style.pointerEvents="none",this.textContainer.style.zIndex="1",t.position&&(t.position.x!==void 0&&(this.textContainer.style.left=`${t.position.x}px`),t.position.y!==void 0&&(this.textContainer.style.top=`${t.position.y}px`)),this.createLetters(t.text),this.setupMouseTracking(),this.startAnimation(),this.fadeOut>0&&setTimeout(()=>this.destroy(),this.fadeOut)}createLetters(t){t.toUpperCase().split("").forEach((n,i)=>{if(n===" "){const r=document.createTextNode(" ");this.textContainer.appendChild(r);return}const e=document.createElement("span");e.className="animated-letter",e.textContent=n,e.dataset.index=i.toString(),e.dataset.char=n,this.applyStyle(e),e.style.display="inline-block",e.style.position="relative",e.style.transition="transform 0.1s ease-out",this.textContainer.appendChild(e);const s=e.getBoundingClientRect();this.letters.push({element:e,index:i,char:n,baseX:s.left,baseY:s.top})}),this.container.appendChild(this.textContainer)}applyStyle(t){this.style.fontFamily&&(t.style.fontFamily=this.style.fontFamily),this.style.fontSize&&(t.style.fontSize=`${this.style.fontSize}px`),this.style.color&&(t.style.color=this.style.color),this.style.fontWeight&&(t.style.fontWeight=this.style.fontWeight)}setupMouseTracking(){this.disintegration.enabled&&(this.mouseMoveHandler=t=>{this.mouseX=t.clientX,this.mouseY=t.clientY},document.addEventListener("mousemove",this.mouseMoveHandler))}startAnimation(){const t=()=>{if(this.isDestroyed)return;const o=(Date.now()-this.startTime)*.001;this.letters.forEach((n,i)=>{const e=n.element.getBoundingClientRect(),s=e.left+e.width/2,r=e.top+e.height/2,d=x(s,r,this.mouseX,this.mouseY,i,this.disintegration);let c;if(d.applied)c=d.state;else{const u=this.getAnimationType(i);c=this.getAnimation(u).update({x:0,y:0,rotation:0,scale:1,opacity:1},i,o,{speed:this.speed,amplitude:this.amplitude*(u==="falling"||u==="floating"?20:4)})}b(n.element,c)}),this.animationFrame=requestAnimationFrame(t)};this.animationFrame=requestAnimationFrame(t)}getAnimationType(t){return this.cycle?this.animationTypes[t%this.animationTypes.length]:this.animationTypes[0]}getAnimation(t){switch(t){case"falling":return new p;case"splitting":return new y;case"glitching":return new f;case"floating":return new g;default:return new p}}destroy(){this.isDestroyed||(this.isDestroyed=!0,this.animationFrame!==null&&cancelAnimationFrame(this.animationFrame),this.mouseMoveHandler&&document.removeEventListener("mousemove",this.mouseMoveHandler),this.textContainer.style.transition="opacity 3s ease",this.textContainer.style.opacity="0",setTimeout(()=>{this.textContainer.parentNode&&this.textContainer.parentNode.removeChild(this.textContainer)},3e3))}getElement(){return this.textContainer}}typeof window<"u"&&(window.TypographyToolkit={AnimatedText:A,FallingAnimation:p,SplittingAnimation:y,GlitchingAnimation:f,FloatingAnimation:g,calculateDisintegration:x}),l.AnimatedText=A,l.FallingAnimation=p,l.FloatingAnimation=g,l.GlitchingAnimation=f,l.SplittingAnimation=y,l.calculateDisintegration=x,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(d,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(d=typeof globalThis<"u"?globalThis:d||self,p(d.TypographyToolkit={}))})(this,function(d){"use strict";class p{update(e,o,n,t={}){const i=t.speed||1,l=t.amplitude||20,r=o*.2,c=(n*10*i+r*5)%l-l/2;return{...e,y:c}}}class F{update(e,o,n,t={}){const i=t.speed||1,l=t.amplitude||4,r=o*.2,a=Math.sin(n*.5*i+r)*l;return{...e,x:a}}}class v{constructor(){this.lastUpdate=0,this.glitchX=0,this.glitchY=0,this.glitchRot=0}update(e,o,n,t={}){const i=t.amplitude||3;return n-this.lastUpdate>.1&&(this.glitchX=(Math.random()-.5)*i,this.glitchY=(Math.random()-.5)*(i*.67),this.glitchRot=(Math.random()-.5)*i,this.lastUpdate=n),{...e,x:this.glitchX,y:this.glitchY,rotation:this.glitchRot}}}class C{update(e,o,n,t={}){const i=t.speed||1,l=t.amplitude||15,r=o*.2,c=-((n*8*i+r*4)%l-l/2);return{...e,y:c}}}function G(s,e){const{x:o,y:n,rotation:t,scale:i,opacity:l}=e;s.style.transform=`translate(${o}px, ${n}px) rotate(${t}deg) scale(${i})`,s.style.opacity=l.toString()}function S(s,e,o,n,t,i){if(!i.enabled)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const l=i.radius||80,r=i.strength||1,a=i.behaviors||["fall-away","split-apart","explode"],c=o-s,h=n-e,g=Math.sqrt(c*c+h*h);if(g>=l)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const u=(1-g/l)*r,m=Math.atan2(h,c),B=a[t%a.length];let f;switch(B){case"fall-away":const Y=Math.cos(m)*u*20,$=Math.sin(m)*u*40+u*30;f={x:Y,y:$,rotation:u*15,scale:1,opacity:1-u*.6};break;case"split-apart":const L=t%2===0?1:-1;f={x:L*u*50,y:(Math.random()-.5)*u*10,rotation:u*10*L,scale:1,opacity:1-u*.6};break;case"explode":const O=m+(Math.random()-.5)*.5;f={x:Math.cos(O)*u*40,y:Math.sin(O)*u*40,rotation:u*30,scale:1+u*.4,opacity:1-u*.6};break;default:f={x:0,y:0,rotation:0,scale:1,opacity:1}}return{state:f,applied:!0}}class b{constructor(e){var o;if(this.letters=[],this.animationFrame=null,this.mouseX=0,this.mouseY=0,this.mouseMoveHandler=null,this.startTime=Date.now(),this.isDestroyed=!1,this.container=e.container,this.animationTypes=e.animations||["falling","splitting","glitching","floating"],this.cycle=e.cycle!==!1,this.speed=e.speed||1,this.amplitude=e.amplitude||1,this.disintegration=e.disintegration||{enabled:!1},this.style=e.style||{},this.fadeOut=e.fadeOut||0,this.callbacks=e.callbacks,this.textContainer=document.createElement("div"),this.textContainer.style.position="absolute",this.textContainer.style.pointerEvents="none",this.textContainer.style.zIndex="1",e.containerClass&&(this.textContainer.className=e.containerClass),e.containerStyle&&Object.entries(e.containerStyle).forEach(([n,t])=>{this.textContainer.style.setProperty(n,t)}),e.position){let n=e.position.x,t=e.position.y;if(e.position.constrainToViewport){this.container.getBoundingClientRect();const i=window.innerWidth,l=window.innerHeight,r=e.text.length*20;n!==void 0&&(n=Math.max(0,Math.min(n,i-r))),t!==void 0&&(t=Math.max(0,Math.min(t,l-50)))}n!==void 0&&(this.textContainer.style.left=`${n}px`),t!==void 0&&(this.textContainer.style.top=`${t}px`)}this.createLetters(e.text),this.setupMouseTracking(),this.startAnimation(),(o=this.callbacks)!=null&&o.onCreate&&this.callbacks.onCreate(this.textContainer),this.fadeOut>0&&setTimeout(()=>this.destroy(),this.fadeOut)}createLetters(e){e.toUpperCase().split("").forEach((n,t)=>{if(n===" "){const r=document.createTextNode(" ");this.textContainer.appendChild(r);return}const i=document.createElement("span");i.className="animated-letter",i.textContent=n,i.dataset.index=t.toString(),i.dataset.char=n,this.applyStyle(i),i.style.display="inline-block",i.style.position="relative",i.style.transition="transform 0.1s ease-out",this.textContainer.appendChild(i);const l=i.getBoundingClientRect();this.letters.push({element:i,index:t,char:n,baseX:l.left,baseY:l.top})}),this.container.appendChild(this.textContainer)}applyStyle(e){this.style.fontFamily&&(e.style.fontFamily=this.style.fontFamily),this.style.fontSize&&(e.style.fontSize=`${this.style.fontSize}px`),this.style.color&&(e.style.color=this.style.color),this.style.fontWeight&&(e.style.fontWeight=this.style.fontWeight),this.style.textShadow&&(e.style.textShadow=this.style.textShadow),this.style.letterSpacing&&(e.style.letterSpacing=this.style.letterSpacing),this.style.textTransform&&(e.style.textTransform=this.style.textTransform)}setupMouseTracking(){this.disintegration.enabled&&(this.mouseMoveHandler=e=>{this.mouseX=e.clientX,this.mouseY=e.clientY},document.addEventListener("mousemove",this.mouseMoveHandler))}startAnimation(){const e=()=>{if(this.isDestroyed)return;const o=(Date.now()-this.startTime)*.001;this.letters.forEach((n,t)=>{var h;const i=n.element.getBoundingClientRect(),l=i.left+i.width/2,r=i.top+i.height/2,a=S(l,r,this.mouseX,this.mouseY,t,this.disintegration);let c;if(a.applied)c=a.state,(h=this.callbacks)!=null&&h.onDisintegrate&&this.callbacks.onDisintegrate(t);else{const g=this.getAnimationType(t);c=this.getAnimation(g).update({x:0,y:0,rotation:0,scale:1,opacity:1},t,o,{speed:this.speed,amplitude:this.amplitude*(g==="falling"||g==="floating"?20:4)})}G(n.element,c)}),this.animationFrame=requestAnimationFrame(e)};this.animationFrame=requestAnimationFrame(e)}getAnimationType(e){return this.cycle?this.animationTypes[e%this.animationTypes.length]:this.animationTypes[0]}getAnimation(e){switch(e){case"falling":return new p;case"splitting":return new F;case"glitching":return new v;case"floating":return new C;default:return new p}}destroy(){var e;this.isDestroyed||(this.isDestroyed=!0,this.animationFrame!==null&&cancelAnimationFrame(this.animationFrame),this.mouseMoveHandler&&document.removeEventListener("mousemove",this.mouseMoveHandler),(e=this.callbacks)!=null&&e.onDestroy&&this.callbacks.onDestroy(),this.textContainer.style.transition="opacity 3s ease",this.textContainer.style.opacity="0",setTimeout(()=>{this.textContainer.parentNode&&this.textContainer.parentNode.removeChild(this.textContainer)},3e3))}getElement(){return this.textContainer}}const x=["unsettling","eerie","decayed","weathered","organic","imperfect","uneven","scratchy"],M=["subtle","moderate","intense"],k=[{name:"Hand-drawn Casual",googleFontsName:"Caveat",categories:["hand-drawn","handwriting","casual","sketchy","informal"],description:"Casual handwritten style, friendly and approachable",artistic:!1},{name:"Hand-drawn Playful",googleFontsName:"Finger Paint",categories:["hand-drawn","playful","childlike","casual","sketchy"],description:"Bold hand-drawn style, playful and energetic",artistic:!0},{name:"Hand-drawn Script",googleFontsName:"Dancing Script",categories:["hand-drawn","script","elegant","flowing","cursive"],description:"Elegant flowing script, graceful and organic",artistic:!1},{name:"Gothic Blackletter",googleFontsName:"UnifrakturMaguntia",categories:["gothic","medieval","blackletter","ornate","historical"],description:"Medieval blackletter style, ornate and historical",artistic:!0},{name:"Gothic Horror",googleFontsName:"Creepster",categories:["gothic","horror","creepy","dripping","display","striking","intense"],description:"Horror-style font with dripping effects, very striking",artistic:!0},{name:"Gothic Bold",googleFontsName:"Eater",categories:["gothic","bold","aggressive","display","striking"],description:"Bold aggressive display font, powerful impact",artistic:!0},{name:"Futuristic Digital",googleFontsName:"Orbitron",categories:["futuristic","sci-fi","digital","tech","modern","geometric"],description:"Futuristic geometric font, tech-forward and modern",artistic:!0},{name:"Futuristic Display",googleFontsName:"Bungee",categories:["futuristic","display","bold","condensed","striking"],description:"Bold condensed display font, high impact",artistic:!0},{name:"Futuristic Outline",googleFontsName:"Bungee Shade",categories:["futuristic","outline","display","bold","striking"],description:"Outlined version of Bungee, bold and striking",artistic:!0},{name:"Retro Terminal",googleFontsName:"VT323",categories:["retro","terminal","monospace","pixel","80s","tech"],description:"Retro terminal font, pixelated and nostalgic",artistic:!0},{name:"Retro Pixel",googleFontsName:"Press Start 2P",categories:["retro","pixel","8-bit","arcade","nostalgic","display"],description:"8-bit pixel font, classic arcade style",artistic:!0},{name:"Retro Display",googleFontsName:"Frijole",categories:["retro","playful","rounded","display","casual"],description:"Playful rounded retro font, fun and casual",artistic:!0},{name:"Decorative Ornate",googleFontsName:"Fascinate",categories:["decorative","ornate","display","striking","elaborate"],description:"Highly decorative display font, ornate and elaborate",artistic:!0},{name:"Decorative Outline",googleFontsName:"Fascinate Inline",categories:["decorative","outline","display","ornate","striking"],description:"Outlined decorative font, ornate and striking",artistic:!0},{name:"Decorative Script",googleFontsName:"Fredericka the Great",categories:["decorative","script","ornate","elegant","display"],description:"Elegant decorative script, ornate and sophisticated",artistic:!0},{name:"Horror Dripping",googleFontsName:"Nosifer",categories:["horror","creepy","dripping","blood","striking","display","intense"],description:"Creepy font with blood-dripping effects, very striking",artistic:!0},{name:"Tech Monospace",googleFontsName:"Share Tech Mono",categories:["tech","monospace","terminal","code","modern"],description:"Clean tech monospace font, modern and readable",artistic:!1},{name:"Tech Display",googleFontsName:"Rajdhani",categories:["tech","modern","geometric","sans-serif","futuristic"],description:"Modern geometric tech font, clean and futuristic",artistic:!1},{name:"Organic Flowing",googleFontsName:"Dancing Script",categories:["organic","flowing","natural","script","elegant"],description:"Flowing organic script, natural and elegant",artistic:!1},{name:"Modern Sans",googleFontsName:"Roboto",categories:["modern","clean","sans-serif","readable","professional"],description:"Clean modern sans-serif, professional and readable",artistic:!1},{name:"Modern Serif",googleFontsName:"Playfair Display",categories:["modern","serif","elegant","sophisticated","readable"],description:"Elegant modern serif, sophisticated and readable",artistic:!1},{name:"Bold Condensed",googleFontsName:"Bungee",categories:["bold","condensed","display","striking","impact"],description:"Bold condensed display font, high impact",artistic:!0},{name:"Bold Aggressive",googleFontsName:"Eater",categories:["bold","aggressive","display","striking","powerful"],description:"Bold aggressive display font, powerful and striking",artistic:!0},{name:"Handwritten Thin",googleFontsName:"Amatic SC",categories:["hand-drawn","uneven","organic","unsettling","subtle","scratchy"],description:"Thin hand-drawn letters with subtle irregularity, organic feel",artistic:!0},{name:"Rough Handwriting",googleFontsName:"Rock Salt",categories:["hand-drawn","scratchy","weathered","rough","unsettling","moderate"],description:"Rough, weathered handwriting with natural imperfection",artistic:!0},{name:"Typewriter Degraded",googleFontsName:"Special Elite",categories:["typewriter","decayed","weathered","imperfect","unsettling","moderate"],description:"Degraded typewriter font, vintage with imperfection",artistic:!0},{name:"Casual Handwriting",googleFontsName:"Handlee",categories:["hand-drawn","casual","imperfect","organic","subtle"],description:"Casual handwriting with subtle imperfection",artistic:!1},{name:"Childlike Organic",googleFontsName:"Indie Flower",categories:["hand-drawn","childlike","organic","imperfect","eerie","subtle"],description:"Childlike handwriting, can feel innocent or eerie depending on context",artistic:!1},{name:"Scratchy Personal",googleFontsName:"Shadows Into Light",categories:["hand-drawn","scratchy","personal","unsettling","uneven","moderate"],description:"Scratchy personal handwriting with unsettling quality",artistic:!0},{name:"Hurried Scratchy",googleFontsName:"Reenie Beanie",categories:["hand-drawn","scratchy","hurried","uneven","unsettling","moderate"],description:"Hurried scratchy handwriting with nervous energy",artistic:!0},{name:"Architectural Irregular",googleFontsName:"Architects Daughter",categories:["hand-drawn","imperfect","uneven","organic","subtle"],description:"Hand-drawn with architectural irregularity",artistic:!1},{name:"Informal Unsettling",googleFontsName:"Coming Soon",categories:["hand-drawn","informal","imperfect","unsettling","subtle"],description:"Informal handwriting that feels slightly off",artistic:!1},{name:"Manic Handwriting",googleFontsName:"Gloria Hallelujah",categories:["hand-drawn","playful","manic","uneven","unsettling","moderate"],description:"Playful handwriting that can feel manic or unsettled",artistic:!0},{name:"Quick Imperfect",googleFontsName:"Just Another Hand",categories:["hand-drawn","scratchy","quick","imperfect","uneven","subtle"],description:"Quick scratchy handwriting with natural imperfection",artistic:!1},{name:"Organic Handwriting",googleFontsName:"Kalam",categories:["hand-drawn","organic","natural","flowing","subtle"],description:"Organic natural handwriting with flowing quality",artistic:!1},{name:"Flowing Tension",googleFontsName:"Satisfy",categories:["script","flowing","tension","elegant","unsettling","subtle"],description:"Flowing script with underlying tension",artistic:!0},{name:"Unsettling Elegance",googleFontsName:"Yellowtail",categories:["script","elegant","stylized","unsettling","uneven","moderate"],description:"Stylized elegance with unsettling undertones",artistic:!0},{name:"Typewriter Imperfect",googleFontsName:"Cutive Mono",categories:["typewriter","monospace","imperfect","decayed","vintage","subtle"],description:"Imperfect vintage typewriter with character",artistic:!0}];function I(s){const e=s.toLowerCase().split(/\s+/).filter(t=>t.length>0),o=[],n=[];for(const t of e)t.startsWith("-")&&t.length>1?n.push(t.slice(1)):o.push(t);return{positive:o,negative:n}}function P(s,e){const o=new Set,n=new Map,t=2,i=[];for(const l of s){if(i.length>=e)break;if(o.has(l.font.googleFontsName))continue;const r=l.font.categories[0],a=n.get(r)||0;a>=t||(o.add(l.font.googleFontsName),n.set(r,a+1),i.push(l.font))}return i}function y(s,e){const{positive:o,negative:n}=I(s),t=(e==null?void 0:e.limit)??10,l=k.map(r=>{let a=0;for(const c of o){for(const h of r.categories)(h.includes(c)||c.includes(h))&&(a+=10);r.name.toLowerCase().includes(c)&&(a+=15),r.description.toLowerCase().includes(c)&&(a+=8)}for(const c of n){for(const h of r.categories)(h.includes(c)||c.includes(h))&&(a-=20);r.name.toLowerCase().includes(c)&&(a-=15),r.description.toLowerCase().includes(c)&&(a-=10)}return r.artistic&&(a+=1),{font:r,score:a}}).filter(r=>r.score>0).sort((r,a)=>a.score-r.score);return P(l,t)}function A(s){return y(s)[0]}const w=new Set;function N(s){return new Promise((e,o)=>{const n=s.replace(/\s+/g,"+");if(w.has(n)){e();return}if(document.querySelector(`link[href*="fonts.googleapis.com"][href*="${n}"]`)){w.add(n),e();return}const i=document.createElement("link");i.rel="stylesheet",i.href=`https://fonts.googleapis.com/css2?family=${n}:wght@400&display=swap`,i.onload=()=>{w.add(n),e()},i.onerror=()=>{console.warn(`Failed to load Google Font: ${s}`),o(new Error(`Failed to load Google Font: ${s}`))},document.head.appendChild(i)})}function D(s){return Promise.all(s.map(e=>N(e)))}function E(s){const e=s.replace(/\s+/g,"+");return w.has(e)}function H(s,e="sans-serif"){const o=["Caveat","Dancing Script","Finger Paint","Fredericka the Great","Amatic SC","Handlee","Indie Flower","Shadows Into Light","Rock Salt","Reenie Beanie","Architects Daughter","Coming Soon","Gloria Hallelujah","Just Another Hand","Kalam","Satisfy","Yellowtail"],n=["VT323","Press Start 2P","Share Tech Mono","Special Elite","Cutive Mono"];let t=e;return o.includes(s)?t="cursive":n.includes(s)&&(t="monospace"),`'${s}', ${t}`}function T(s,e){const o=s.toLowerCase(),n=e.rejectedFont.toLowerCase(),t=e.negativeAspects.map(a=>a.toLowerCase()),i=e.positiveAspects.map(a=>a.toLowerCase());return y(s).filter(a=>a.googleFontsName.toLowerCase()!==n&&a.name.toLowerCase()!==n).map(a=>{let c=0;for(const g of a.categories)o.includes(g)&&(c+=5);for(const g of i)(a.categories.some(m=>m.includes(g)||g.includes(m))||a.name.toLowerCase().includes(g)||a.description.toLowerCase().includes(g))&&(c+=15);for(const g of t)(a.categories.some(m=>m.includes(g)||g.includes(m))||a.name.toLowerCase().includes(g)||a.description.toLowerCase().includes(g))&&(c-=20);const h=i.some(g=>g.includes("striking")||g.includes("artistic")||g.includes("unique"));return h&&a.artistic&&(c+=10),h&&!a.artistic&&(c-=5),{font:a,score:c}}).filter(a=>a.score>0).sort((a,c)=>c.score-a.score).map(a=>a.font)}function R(s,e){return T(s,e)[0]}if(typeof window<"u"){const s={AnimatedText:b,FallingAnimation:p,SplittingAnimation:F,GlitchingAnimation:v,FloatingAnimation:C,calculateDisintegration:S,fontSuggestions:k,suggestFonts:y,suggestFont:A,loadGoogleFont:N,loadGoogleFonts:D,isFontLoaded:E,getFontFamily:H,refineSuggestion:T,refineFont:R,MOOD_CATEGORIES:x,INTENSITY_CATEGORIES:M};window.TypographyToolkit=s,window.AnimatedText=b}d.AnimatedText=b,d.FallingAnimation=p,d.FloatingAnimation=C,d.GlitchingAnimation=v,d.INTENSITY_CATEGORIES=M,d.MOOD_CATEGORIES=x,d.SplittingAnimation=F,d.calculateDisintegration=S,d.fontSuggestions=k,d.getFontFamily=H,d.isFontLoaded=E,d.loadGoogleFont=N,d.loadGoogleFonts=D,d.refineFont=R,d.refineSuggestion=T,d.suggestFont=A,d.suggestFonts=y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "typography-toolkit",
-  "version": "1.0.0",
-  "description": "Letter-by-letter text animations with proximity-based disintegration effects",
+  "version": "1.2.1",
+  "description": "Letter-by-letter text animations with proximity-based disintegration effects and Google Fonts selection",
   "main": "dist/typography-toolkit.umd.js",
   "module": "dist/typography-toolkit.esm.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,10 @@
     "letters",
     "disintegration",
     "interactive",
-    "dom"
+    "dom",
+    "fonts",
+    "google-fonts",
+    "font-selection"
   ],
   "author": "",
   "license": "MIT",