typography-toolkit 1.0.0 → 1.2.0

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,28 +1,28 @@
-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(t, o, e, i = {}) {
+    const s = i.speed || 1, c = i.amplitude || 20, g = o * 0.2, l = (e * 10 * s + g * 5) % c - c / 2;
     return {
       ...t,
-      y: r
+      y: l
     };
   }
 }
-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(t, o, e, i = {}) {
+    const s = i.speed || 1, c = i.amplitude || 4, g = o * 0.2, a = Math.sin(e * 0.5 * s + g) * c;
     return {
       ...t,
-      x: h
+      x: a
     };
   }
 }
-class C {
+class v {
   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), {
+  update(t, o, e, i = {}) {
+    const s = i.amplitude || 3;
+    return e - this.lastUpdate > 0.1 && (this.glitchX = (Math.random() - 0.5) * s, this.glitchY = (Math.random() - 0.5) * (s * 0.67), this.glitchRot = (Math.random() - 0.5) * s, this.lastUpdate = e), {
       ...t,
       x: this.glitchX,
       y: this.glitchY,
@@ -30,97 +30,109 @@ class C {
     };
   }
 }
-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 k {
+  update(t, o, e, i = {}) {
+    const s = i.speed || 1, c = i.amplitude || 15, g = o * 0.2, l = -((e * 8 * s + g * 4) % c - c / 2);
     return {
       ...t,
-      y: r
+      y: l
     };
   }
 }
-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 A(n, t) {
+  const { x: o, y: e, rotation: i, scale: s, opacity: c } = t;
+  n.style.transform = `translate(${o}px, ${e}px) rotate(${i}deg) scale(${s})`, n.style.opacity = c.toString();
 }
-function v(c, t, o, s, i, e) {
-  if (!e.enabled)
+function b(n, t, o, e, i, s) {
+  if (!s.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 c = s.radius || 80, g = s.strength || 1, a = s.behaviors || ["fall-away", "split-apart", "explode"], l = o - n, h = e - t, r = Math.sqrt(l * l + h * h);
+  if (r >= c)
     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;
-  switch (M) {
+  const d = (1 - r / c) * g, p = Math.atan2(h, l), N = a[i % a.length];
+  let u;
+  switch (N) {
     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 D = Math.cos(p) * d * 20, L = Math.sin(p) * d * 40 + d * 30;
+      u = {
+        x: D,
+        y: L,
+        rotation: d * 15,
         scale: 1,
-        opacity: 1 - n * 0.6
+        opacity: 1 - d * 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 = i % 2 === 0 ? 1 : -1;
+      u = {
+        x: w * d * 50,
+        y: (Math.random() - 0.5) * d * 10,
+        rotation: d * 10 * w,
         scale: 1,
-        opacity: 1 - n * 0.6
+        opacity: 1 - d * 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 = p + (Math.random() - 0.5) * 0.5;
+      u = {
+        x: Math.cos(F) * d * 40,
+        y: Math.sin(F) * d * 40,
+        rotation: d * 30,
+        scale: 1 + d * 0.4,
+        opacity: 1 - d * 0.6
       };
       break;
     default:
-      p = { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 };
+      u = { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 };
   }
   return {
-    state: p,
+    state: u,
     applied: !0
   };
 }
-class F {
+class x {
   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);
+    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 = 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.callbacks = t.callbacks, this.textContainer = document.createElement("div"), this.textContainer.style.position = "absolute", this.textContainer.style.pointerEvents = "none", this.textContainer.style.zIndex = "1", t.containerClass && (this.textContainer.className = t.containerClass), t.containerStyle && Object.entries(t.containerStyle).forEach(([e, i]) => {
+      this.textContainer.style.setProperty(e, i);
+    }), t.position) {
+      let e = t.position.x, i = t.position.y;
+      if (t.position.constrainToViewport) {
+        this.container.getBoundingClientRect();
+        const s = window.innerWidth, c = window.innerHeight, g = t.text.length * 20;
+        e !== void 0 && (e = Math.max(0, Math.min(e, s - g))), i !== void 0 && (i = Math.max(0, Math.min(i, c - 50)));
+      }
+      e !== void 0 && (this.textContainer.style.left = `${e}px`), i !== void 0 && (this.textContainer.style.top = `${i}px`);
+    }
+    this.createLetters(t.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);
+    t.toUpperCase().split("").forEach((e, i) => {
+      if (e === " ") {
+        const g = document.createTextNode(" ");
+        this.textContainer.appendChild(g);
         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 s = document.createElement("span");
+      s.className = "animated-letter", s.textContent = e, s.dataset.index = i.toString(), s.dataset.char = e, this.applyStyle(s), s.style.display = "inline-block", s.style.position = "relative", s.style.transition = "transform 0.1s ease-out", this.textContainer.appendChild(s);
+      const c = s.getBoundingClientRect();
       this.letters.push({
-        element: e,
+        element: s,
         index: i,
-        char: s,
-        baseX: a.left,
-        baseY: a.top
+        char: e,
+        baseX: c.left,
+        baseY: c.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);
+    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), this.style.textShadow && (t.style.textShadow = this.style.textShadow), this.style.letterSpacing && (t.style.letterSpacing = this.style.letterSpacing), this.style.textTransform && (t.style.textTransform = this.style.textTransform);
   }
   setupMouseTracking() {
     this.disintegration.enabled && (this.mouseMoveHandler = (t) => {
@@ -131,31 +143,32 @@ class F {
     const t = () => {
       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,
-          l,
+      this.letters.forEach((e, i) => {
+        var h;
+        const s = e.element.getBoundingClientRect(), c = s.left + s.width / 2, g = s.top + s.height / 2, a = b(
+          c,
+          g,
           this.mouseX,
           this.mouseY,
           i,
           this.disintegration
         );
-        let r;
-        if (h.applied)
-          r = h.state;
+        let l;
+        if (a.applied)
+          l = a.state, (h = this.callbacks) != null && h.onDisintegrate && this.callbacks.onDisintegrate(i);
         else {
-          const d = this.getAnimationType(i);
-          r = this.getAnimation(d).update(
+          const r = this.getAnimationType(i);
+          l = this.getAnimation(r).update(
             { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 },
             i,
             o,
             {
               speed: this.speed,
-              amplitude: this.amplitude * (d === "falling" || d === "floating" ? 20 : 4)
+              amplitude: this.amplitude * (r === "falling" || r === "floating" ? 20 : 4)
             }
           );
         }
-        b(s.element, r);
+        A(e.element, l);
       }), this.animationFrame = requestAnimationFrame(t);
     };
     this.animationFrame = requestAnimationFrame(t);
@@ -166,22 +179,23 @@ class F {
   getAnimation(t) {
     switch (t) {
       case "falling":
-        return new y();
+        return new f();
       case "splitting":
-        return new x();
-      case "glitching":
         return new C();
+      case "glitching":
+        return new v();
       case "floating":
-        return new T();
+        return new k();
       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 t;
+    this.isDestroyed || (this.isDestroyed = !0, this.animationFrame !== null && cancelAnimationFrame(this.animationFrame), this.mouseMoveHandler && document.removeEventListener("mousemove", this.mouseMoveHandler), (t = this.callbacks) != null && t.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,281 @@ class F {
     return this.textContainer;
   }
 }
-typeof window < "u" && (window.TypographyToolkit = {
-  AnimatedText: F,
-  FallingAnimation: y,
-  SplittingAnimation: x,
-  GlitchingAnimation: C,
-  FloatingAnimation: T,
-  calculateDisintegration: v
-});
+const S = [
+  // 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"],
+    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"],
+    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
+  }
+];
+function y(n) {
+  const t = n.toLowerCase();
+  return S.map((e) => {
+    let i = 0;
+    for (const s of e.categories)
+      t.includes(s) && (i += 10);
+    return (e.name.toLowerCase().includes(t) || t.includes(e.name.toLowerCase())) && (i += 15), (e.description.toLowerCase().includes(t) || t.includes(e.description.toLowerCase())) && (i += 8), e.artistic && (i += 1), { font: e, score: i };
+  }).filter((e) => e.score > 0).sort((e, i) => i.score - e.score).map((e) => e.font);
+}
+function E(n) {
+  return y(n)[0];
+}
+const m = /* @__PURE__ */ new Set();
+function T(n) {
+  return new Promise((t, o) => {
+    const e = n.replace(/\s+/g, "+");
+    if (m.has(e)) {
+      t();
+      return;
+    }
+    if (document.querySelector(
+      `link[href*="fonts.googleapis.com"][href*="${e}"]`
+    )) {
+      m.add(e), t();
+      return;
+    }
+    const s = document.createElement("link");
+    s.rel = "stylesheet", s.href = `https://fonts.googleapis.com/css2?family=${e}:wght@400&display=swap`, s.onload = () => {
+      m.add(e), t();
+    }, s.onerror = () => {
+      console.warn(`Failed to load Google Font: ${n}`), o(new Error(`Failed to load Google Font: ${n}`));
+    }, document.head.appendChild(s);
+  });
+}
+function B(n) {
+  return Promise.all(n.map((t) => T(t)));
+}
+function P(n) {
+  const t = n.replace(/\s+/g, "+");
+  return m.has(t);
+}
+function R(n, t = "sans-serif") {
+  const o = ["Caveat", "Dancing Script", "Finger Paint", "Fredericka the Great"], e = ["VT323", "Press Start 2P", "Share Tech Mono"];
+  let i = t;
+  return o.includes(n) ? i = "cursive" : e.includes(n) && (i = "monospace"), `'${n}', ${i}`;
+}
+function M(n, t) {
+  const o = n.toLowerCase(), e = t.rejectedFont.toLowerCase(), i = t.negativeAspects.map((a) => a.toLowerCase()), s = t.positiveAspects.map((a) => a.toLowerCase());
+  return y(n).filter(
+    (a) => a.googleFontsName.toLowerCase() !== e && a.name.toLowerCase() !== e
+  ).map((a) => {
+    let l = 0;
+    for (const r of a.categories)
+      o.includes(r) && (l += 5);
+    for (const r of s)
+      (a.categories.some((p) => p.includes(r) || r.includes(p)) || a.name.toLowerCase().includes(r) || a.description.toLowerCase().includes(r)) && (l += 15);
+    for (const r of i)
+      (a.categories.some((p) => p.includes(r) || r.includes(p)) || a.name.toLowerCase().includes(r) || a.description.toLowerCase().includes(r)) && (l -= 20);
+    const h = s.some(
+      (r) => r.includes("striking") || r.includes("artistic") || r.includes("unique")
+    );
+    return h && a.artistic && (l += 10), h && !a.artistic && (l -= 5), { font: a, score: l };
+  }).filter((a) => a.score > 0).sort((a, l) => l.score - a.score).map((a) => a.font);
+}
+function H(n, t) {
+  return M(n, t)[0];
+}
+if (typeof window < "u") {
+  const n = {
+    AnimatedText: x,
+    FallingAnimation: f,
+    SplittingAnimation: C,
+    GlitchingAnimation: v,
+    FloatingAnimation: k,
+    calculateDisintegration: b,
+    // Font utilities
+    fontSuggestions: S,
+    suggestFonts: y,
+    suggestFont: E,
+    loadGoogleFont: T,
+    loadGoogleFonts: B,
+    isFontLoaded: P,
+    getFontFamily: R,
+    refineSuggestion: M,
+    refineFont: H
+  };
+  window.TypographyToolkit = n, window.AnimatedText = x;
+}
 export {
-  F as AnimatedText,
-  y as FallingAnimation,
-  T as FloatingAnimation,
-  C as GlitchingAnimation,
-  x as SplittingAnimation,
-  v as calculateDisintegration
+  x as AnimatedText,
+  f as FallingAnimation,
+  k as FloatingAnimation,
+  v as GlitchingAnimation,
+  C as SplittingAnimation,
+  b as calculateDisintegration,
+  S as fontSuggestions,
+  R as getFontFamily,
+  P as isFontLoaded,
+  T as loadGoogleFont,
+  B as loadGoogleFonts,
+  H as refineFont,
+  M as refineSuggestion,
+  E 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(d){"use strict";class f{update(t,o,e,i={}){const s=i.speed||1,l=i.amplitude||20,h=o*.2,c=(e*10*s+h*5)%l-l/2;return{...t,y:c}}}class w{update(t,o,e,i={}){const s=i.speed||1,l=i.amplitude||4,h=o*.2,a=Math.sin(e*.5*s+h)*l;return{...t,x:a}}}class C{constructor(){this.lastUpdate=0,this.glitchX=0,this.glitchY=0,this.glitchRot=0}update(t,o,e,i={}){const s=i.amplitude||3;return e-this.lastUpdate>.1&&(this.glitchX=(Math.random()-.5)*s,this.glitchY=(Math.random()-.5)*(s*.67),this.glitchRot=(Math.random()-.5)*s,this.lastUpdate=e),{...t,x:this.glitchX,y:this.glitchY,rotation:this.glitchRot}}}class v{update(t,o,e,i={}){const s=i.speed||1,l=i.amplitude||15,h=o*.2,c=-((e*8*s+h*4)%l-l/2);return{...t,y:c}}}function B(n,t){const{x:o,y:e,rotation:i,scale:s,opacity:l}=t;n.style.transform=`translate(${o}px, ${e}px) rotate(${i}deg) scale(${s})`,n.style.opacity=l.toString()}function k(n,t,o,e,i,s){if(!s.enabled)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const l=s.radius||80,h=s.strength||1,a=s.behaviors||["fall-away","split-apart","explode"],c=o-n,u=e-t,r=Math.sqrt(c*c+u*u);if(r>=l)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const g=(1-r/l)*h,m=Math.atan2(u,c),R=a[i%a.length];let p;switch(R){case"fall-away":const H=Math.cos(m)*g*20,G=Math.sin(m)*g*40+g*30;p={x:H,y:G,rotation:g*15,scale:1,opacity:1-g*.6};break;case"split-apart":const E=i%2===0?1:-1;p={x:E*g*50,y:(Math.random()-.5)*g*10,rotation:g*10*E,scale:1,opacity:1-g*.6};break;case"explode":const P=m+(Math.random()-.5)*.5;p={x:Math.cos(P)*g*40,y:Math.sin(P)*g*40,rotation:g*30,scale:1+g*.4,opacity:1-g*.6};break;default:p={x:0,y:0,rotation:0,scale:1,opacity:1}}return{state:p,applied:!0}}class b{constructor(t){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=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.callbacks=t.callbacks,this.textContainer=document.createElement("div"),this.textContainer.style.position="absolute",this.textContainer.style.pointerEvents="none",this.textContainer.style.zIndex="1",t.containerClass&&(this.textContainer.className=t.containerClass),t.containerStyle&&Object.entries(t.containerStyle).forEach(([e,i])=>{this.textContainer.style.setProperty(e,i)}),t.position){let e=t.position.x,i=t.position.y;if(t.position.constrainToViewport){this.container.getBoundingClientRect();const s=window.innerWidth,l=window.innerHeight,h=t.text.length*20;e!==void 0&&(e=Math.max(0,Math.min(e,s-h))),i!==void 0&&(i=Math.max(0,Math.min(i,l-50)))}e!==void 0&&(this.textContainer.style.left=`${e}px`),i!==void 0&&(this.textContainer.style.top=`${i}px`)}this.createLetters(t.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((e,i)=>{if(e===" "){const h=document.createTextNode(" ");this.textContainer.appendChild(h);return}const s=document.createElement("span");s.className="animated-letter",s.textContent=e,s.dataset.index=i.toString(),s.dataset.char=e,this.applyStyle(s),s.style.display="inline-block",s.style.position="relative",s.style.transition="transform 0.1s ease-out",this.textContainer.appendChild(s);const l=s.getBoundingClientRect();this.letters.push({element:s,index:i,char:e,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),this.style.textShadow&&(t.style.textShadow=this.style.textShadow),this.style.letterSpacing&&(t.style.letterSpacing=this.style.letterSpacing),this.style.textTransform&&(t.style.textTransform=this.style.textTransform)}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((e,i)=>{var u;const s=e.element.getBoundingClientRect(),l=s.left+s.width/2,h=s.top+s.height/2,a=k(l,h,this.mouseX,this.mouseY,i,this.disintegration);let c;if(a.applied)c=a.state,(u=this.callbacks)!=null&&u.onDisintegrate&&this.callbacks.onDisintegrate(i);else{const r=this.getAnimationType(i);c=this.getAnimation(r).update({x:0,y:0,rotation:0,scale:1,opacity:1},i,o,{speed:this.speed,amplitude:this.amplitude*(r==="falling"||r==="floating"?20:4)})}B(e.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 f;case"splitting":return new w;case"glitching":return new C;case"floating":return new v;default:return new f}}destroy(){var t;this.isDestroyed||(this.isDestroyed=!0,this.animationFrame!==null&&cancelAnimationFrame(this.animationFrame),this.mouseMoveHandler&&document.removeEventListener("mousemove",this.mouseMoveHandler),(t=this.callbacks)!=null&&t.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=[{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"],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"],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}];function y(n){const t=n.toLowerCase();return x.map(e=>{let i=0;for(const s of e.categories)t.includes(s)&&(i+=10);return(e.name.toLowerCase().includes(t)||t.includes(e.name.toLowerCase()))&&(i+=15),(e.description.toLowerCase().includes(t)||t.includes(e.description.toLowerCase()))&&(i+=8),e.artistic&&(i+=1),{font:e,score:i}}).filter(e=>e.score>0).sort((e,i)=>i.score-e.score).map(e=>e.font)}function M(n){return y(n)[0]}const F=new Set;function S(n){return new Promise((t,o)=>{const e=n.replace(/\s+/g,"+");if(F.has(e)){t();return}if(document.querySelector(`link[href*="fonts.googleapis.com"][href*="${e}"]`)){F.add(e),t();return}const s=document.createElement("link");s.rel="stylesheet",s.href=`https://fonts.googleapis.com/css2?family=${e}:wght@400&display=swap`,s.onload=()=>{F.add(e),t()},s.onerror=()=>{console.warn(`Failed to load Google Font: ${n}`),o(new Error(`Failed to load Google Font: ${n}`))},document.head.appendChild(s)})}function N(n){return Promise.all(n.map(t=>S(t)))}function D(n){const t=n.replace(/\s+/g,"+");return F.has(t)}function A(n,t="sans-serif"){const o=["Caveat","Dancing Script","Finger Paint","Fredericka the Great"],e=["VT323","Press Start 2P","Share Tech Mono"];let i=t;return o.includes(n)?i="cursive":e.includes(n)&&(i="monospace"),`'${n}', ${i}`}function T(n,t){const o=n.toLowerCase(),e=t.rejectedFont.toLowerCase(),i=t.negativeAspects.map(a=>a.toLowerCase()),s=t.positiveAspects.map(a=>a.toLowerCase());return y(n).filter(a=>a.googleFontsName.toLowerCase()!==e&&a.name.toLowerCase()!==e).map(a=>{let c=0;for(const r of a.categories)o.includes(r)&&(c+=5);for(const r of s)(a.categories.some(m=>m.includes(r)||r.includes(m))||a.name.toLowerCase().includes(r)||a.description.toLowerCase().includes(r))&&(c+=15);for(const r of i)(a.categories.some(m=>m.includes(r)||r.includes(m))||a.name.toLowerCase().includes(r)||a.description.toLowerCase().includes(r))&&(c-=20);const u=s.some(r=>r.includes("striking")||r.includes("artistic")||r.includes("unique"));return u&&a.artistic&&(c+=10),u&&!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 L(n,t){return T(n,t)[0]}if(typeof window<"u"){const n={AnimatedText:b,FallingAnimation:f,SplittingAnimation:w,GlitchingAnimation:C,FloatingAnimation:v,calculateDisintegration:k,fontSuggestions:x,suggestFonts:y,suggestFont:M,loadGoogleFont:S,loadGoogleFonts:N,isFontLoaded:D,getFontFamily:A,refineSuggestion:T,refineFont:L};window.TypographyToolkit=n,window.AnimatedText=b}return d.AnimatedText=b,d.FallingAnimation=f,d.FloatingAnimation=v,d.GlitchingAnimation=C,d.SplittingAnimation=w,d.calculateDisintegration=k,d.fontSuggestions=x,d.getFontFamily=A,d.isFontLoaded=D,d.loadGoogleFont=S,d.loadGoogleFonts=N,d.refineFont=L,d.refineSuggestion=T,d.suggestFont=M,d.suggestFonts=y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({});

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(l,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(l=typeof globalThis<"u"?globalThis:l||self,m(l.TypographyToolkit={}))})(this,function(l){"use strict";class m{update(t,o,e,i={}){const s=i.speed||1,c=i.amplitude||20,h=o*.2,d=(e*10*s+h*5)%c-c/2;return{...t,y:d}}}class w{update(t,o,e,i={}){const s=i.speed||1,c=i.amplitude||4,h=o*.2,n=Math.sin(e*.5*s+h)*c;return{...t,x:n}}}class C{constructor(){this.lastUpdate=0,this.glitchX=0,this.glitchY=0,this.glitchRot=0}update(t,o,e,i={}){const s=i.amplitude||3;return e-this.lastUpdate>.1&&(this.glitchX=(Math.random()-.5)*s,this.glitchY=(Math.random()-.5)*(s*.67),this.glitchRot=(Math.random()-.5)*s,this.lastUpdate=e),{...t,x:this.glitchX,y:this.glitchY,rotation:this.glitchRot}}}class v{update(t,o,e,i={}){const s=i.speed||1,c=i.amplitude||15,h=o*.2,d=-((e*8*s+h*4)%c-c/2);return{...t,y:d}}}function B(a,t){const{x:o,y:e,rotation:i,scale:s,opacity:c}=t;a.style.transform=`translate(${o}px, ${e}px) rotate(${i}deg) scale(${s})`,a.style.opacity=c.toString()}function x(a,t,o,e,i,s){if(!s.enabled)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const c=s.radius||80,h=s.strength||1,n=s.behaviors||["fall-away","split-apart","explode"],d=o-a,u=e-t,r=Math.sqrt(d*d+u*u);if(r>=c)return{state:{x:0,y:0,rotation:0,scale:1,opacity:1},applied:!1};const g=(1-r/c)*h,p=Math.atan2(u,d),R=n[i%n.length];let f;switch(R){case"fall-away":const H=Math.cos(p)*g*20,G=Math.sin(p)*g*40+g*30;f={x:H,y:G,rotation:g*15,scale:1,opacity:1-g*.6};break;case"split-apart":const E=i%2===0?1:-1;f={x:E*g*50,y:(Math.random()-.5)*g*10,rotation:g*10*E,scale:1,opacity:1-g*.6};break;case"explode":const P=p+(Math.random()-.5)*.5;f={x:Math.cos(P)*g*40,y:Math.sin(P)*g*40,rotation:g*30,scale:1+g*.4,opacity:1-g*.6};break;default:f={x:0,y:0,rotation:0,scale:1,opacity:1}}return{state:f,applied:!0}}class b{constructor(t){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=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.callbacks=t.callbacks,this.textContainer=document.createElement("div"),this.textContainer.style.position="absolute",this.textContainer.style.pointerEvents="none",this.textContainer.style.zIndex="1",t.containerClass&&(this.textContainer.className=t.containerClass),t.containerStyle&&Object.entries(t.containerStyle).forEach(([e,i])=>{this.textContainer.style.setProperty(e,i)}),t.position){let e=t.position.x,i=t.position.y;if(t.position.constrainToViewport){this.container.getBoundingClientRect();const s=window.innerWidth,c=window.innerHeight,h=t.text.length*20;e!==void 0&&(e=Math.max(0,Math.min(e,s-h))),i!==void 0&&(i=Math.max(0,Math.min(i,c-50)))}e!==void 0&&(this.textContainer.style.left=`${e}px`),i!==void 0&&(this.textContainer.style.top=`${i}px`)}this.createLetters(t.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((e,i)=>{if(e===" "){const h=document.createTextNode(" ");this.textContainer.appendChild(h);return}const s=document.createElement("span");s.className="animated-letter",s.textContent=e,s.dataset.index=i.toString(),s.dataset.char=e,this.applyStyle(s),s.style.display="inline-block",s.style.position="relative",s.style.transition="transform 0.1s ease-out",this.textContainer.appendChild(s);const c=s.getBoundingClientRect();this.letters.push({element:s,index:i,char:e,baseX:c.left,baseY:c.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),this.style.textShadow&&(t.style.textShadow=this.style.textShadow),this.style.letterSpacing&&(t.style.letterSpacing=this.style.letterSpacing),this.style.textTransform&&(t.style.textTransform=this.style.textTransform)}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((e,i)=>{var u;const s=e.element.getBoundingClientRect(),c=s.left+s.width/2,h=s.top+s.height/2,n=x(c,h,this.mouseX,this.mouseY,i,this.disintegration);let d;if(n.applied)d=n.state,(u=this.callbacks)!=null&&u.onDisintegrate&&this.callbacks.onDisintegrate(i);else{const r=this.getAnimationType(i);d=this.getAnimation(r).update({x:0,y:0,rotation:0,scale:1,opacity:1},i,o,{speed:this.speed,amplitude:this.amplitude*(r==="falling"||r==="floating"?20:4)})}B(e.element,d)}),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 m;case"splitting":return new w;case"glitching":return new C;case"floating":return new v;default:return new m}}destroy(){var t;this.isDestroyed||(this.isDestroyed=!0,this.animationFrame!==null&&cancelAnimationFrame(this.animationFrame),this.mouseMoveHandler&&document.removeEventListener("mousemove",this.mouseMoveHandler),(t=this.callbacks)!=null&&t.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 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"],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"],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}];function y(a){const t=a.toLowerCase();return k.map(e=>{let i=0;for(const s of e.categories)t.includes(s)&&(i+=10);return(e.name.toLowerCase().includes(t)||t.includes(e.name.toLowerCase()))&&(i+=15),(e.description.toLowerCase().includes(t)||t.includes(e.description.toLowerCase()))&&(i+=8),e.artistic&&(i+=1),{font:e,score:i}}).filter(e=>e.score>0).sort((e,i)=>i.score-e.score).map(e=>e.font)}function M(a){return y(a)[0]}const F=new Set;function S(a){return new Promise((t,o)=>{const e=a.replace(/\s+/g,"+");if(F.has(e)){t();return}if(document.querySelector(`link[href*="fonts.googleapis.com"][href*="${e}"]`)){F.add(e),t();return}const s=document.createElement("link");s.rel="stylesheet",s.href=`https://fonts.googleapis.com/css2?family=${e}:wght@400&display=swap`,s.onload=()=>{F.add(e),t()},s.onerror=()=>{console.warn(`Failed to load Google Font: ${a}`),o(new Error(`Failed to load Google Font: ${a}`))},document.head.appendChild(s)})}function N(a){return Promise.all(a.map(t=>S(t)))}function D(a){const t=a.replace(/\s+/g,"+");return F.has(t)}function A(a,t="sans-serif"){const o=["Caveat","Dancing Script","Finger Paint","Fredericka the Great"],e=["VT323","Press Start 2P","Share Tech Mono"];let i=t;return o.includes(a)?i="cursive":e.includes(a)&&(i="monospace"),`'${a}', ${i}`}function T(a,t){const o=a.toLowerCase(),e=t.rejectedFont.toLowerCase(),i=t.negativeAspects.map(n=>n.toLowerCase()),s=t.positiveAspects.map(n=>n.toLowerCase());return y(a).filter(n=>n.googleFontsName.toLowerCase()!==e&&n.name.toLowerCase()!==e).map(n=>{let d=0;for(const r of n.categories)o.includes(r)&&(d+=5);for(const r of s)(n.categories.some(p=>p.includes(r)||r.includes(p))||n.name.toLowerCase().includes(r)||n.description.toLowerCase().includes(r))&&(d+=15);for(const r of i)(n.categories.some(p=>p.includes(r)||r.includes(p))||n.name.toLowerCase().includes(r)||n.description.toLowerCase().includes(r))&&(d-=20);const u=s.some(r=>r.includes("striking")||r.includes("artistic")||r.includes("unique"));return u&&n.artistic&&(d+=10),u&&!n.artistic&&(d-=5),{font:n,score:d}}).filter(n=>n.score>0).sort((n,d)=>d.score-n.score).map(n=>n.font)}function L(a,t){return T(a,t)[0]}if(typeof window<"u"){const a={AnimatedText:b,FallingAnimation:m,SplittingAnimation:w,GlitchingAnimation:C,FloatingAnimation:v,calculateDisintegration:x,fontSuggestions:k,suggestFonts:y,suggestFont:M,loadGoogleFont:S,loadGoogleFonts:N,isFontLoaded:D,getFontFamily:A,refineSuggestion:T,refineFont:L};window.TypographyToolkit=a,window.AnimatedText=b}l.AnimatedText=b,l.FallingAnimation=m,l.FloatingAnimation=v,l.GlitchingAnimation=C,l.SplittingAnimation=w,l.calculateDisintegration=x,l.fontSuggestions=k,l.getFontFamily=A,l.isFontLoaded=D,l.loadGoogleFont=S,l.loadGoogleFonts=N,l.refineFont=L,l.refineSuggestion=T,l.suggestFont=M,l.suggestFonts=y,Object.defineProperty(l,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.0",
+  "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",