@mhmo91/schmancy 0.7.7 → 0.8.3

package/dist/ai/lightbox.md

@@ -0,0 +1,381 @@
+# Lightbox Directive
+
+A Lit directive that adds lightbox functionality to images, allowing them to be viewed in a full-screen overlay with optional gallery navigation.
+
+## Import
+
+```typescript
+import { lightbox } from '@mhmo91/schmancy/directives'
+```
+
+## Basic Usage
+
+### Single Image Lightbox
+
+The simplest use case - click an image to view it full-screen:
+
+```typescript
+import { html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { lightbox } from '@mhmo91/schmancy/directives'
+
+@customElement('my-component')
+export class MyComponent extends LitElement {
+  render() {
+    return html`
+      <img
+        src="https://example.com/image.jpg"
+        alt="Product photo"
+        ${lightbox()}
+      />
+    `
+  }
+}
+```
+
+### Image Gallery
+
+Show multiple images with navigation controls:
+
+```typescript
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { lightbox } from '@mhmo91/schmancy/directives'
+
+@customElement('gallery-component')
+export class GalleryComponent extends LitElement {
+  @property({ type: Array })
+  images = [
+    'https://example.com/photo1.jpg',
+    'https://example.com/photo2.jpg',
+    'https://example.com/photo3.jpg',
+    'https://example.com/photo4.jpg'
+  ]
+
+  render() {
+    return html`
+      <div class="gallery">
+        ${this.images.map((image, index) => html`
+          <img
+            src=${image}
+            alt="Gallery image ${index + 1}"
+            ${lightbox({ images: this.images, index })}
+            class="thumbnail"
+          />
+        `)}
+      </div>
+    `
+  }
+}
+```
+
+## Options
+
+The directive accepts an optional `LightboxOptions` object:
+
+```typescript
+interface LightboxOptions {
+  images?: string[]       // Array of image URLs for gallery mode
+  index?: number          // Starting index when opening the gallery
+  overlay?: TemplateResult // Optional Lit template to render over the image
+}
+```
+
+### Options Examples
+
+**Single image (no options needed):**
+```typescript
+${lightbox()}
+```
+
+**Gallery with specific starting image:**
+```typescript
+${lightbox({
+  images: this.allImages,
+  index: 2  // Opens at the 3rd image
+})}
+```
+
+**Image with overlay (name/price):**
+```typescript
+${lightbox({
+  overlay: html`
+    <div class="absolute inset-x-0 bottom-0 pt-10 pb-3 px-4 bg-linear-to-t from-black/80 via-black/40 to-transparent rounded-b-lg">
+      <div class="flex items-end justify-between gap-2">
+        <schmancy-typography type="title" token="lg" class="text-white">
+          ${this.item.name}
+        </schmancy-typography>
+        <schmancy-typography type="title" token="lg" class="text-white font-semibold">
+          ${formatCurrency(this.item.price, this.cart.currency)}
+        </schmancy-typography>
+      </div>
+    </div>
+  `,
+})}
+```
+
+## Features
+
+### Keyboard Navigation
+
+When the lightbox is open:
+- **Escape** - Close the lightbox
+- **Arrow Left** - Previous image (gallery mode only)
+- **Arrow Right** - Next image (gallery mode only)
+
+### Click Behavior
+
+- **Overlay background** - Click to close
+- **Single image** - Click the image itself to close
+- **Gallery** - Click navigation buttons to move between images
+- **Close button** - Always available in top-right corner
+
+### Automatic Enhancements
+
+The directive automatically:
+- Adds `cursor: pointer` style to images
+- Adds hover effects (`hover:opacity-80` and `transition-opacity` classes)
+- Creates full-screen overlay with backdrop blur
+- Handles focus management and cleanup
+- Supports smooth animations
+
+## Real-World Examples
+
+### Product Images
+
+```typescript
+@customElement('product-card')
+export class ProductCard extends LitElement {
+  @property({ type: Object })
+  product!: {
+    thumbnail: string
+    images: string[]
+  }
+
+  render() {
+    return html`
+      <div class="product-card">
+        <img
+          src=${this.product.thumbnail}
+          alt=${this.product.name}
+          ${lightbox({
+            images: this.product.images,
+            index: 0
+          })}
+          class="product-thumbnail"
+        />
+      </div>
+    `
+  }
+}
+```
+
+### Document Viewer
+
+```typescript
+@customElement('invoice-viewer')
+export class InvoiceViewer extends LitElement {
+  @property({ type: Array })
+  pageImages: string[] = []
+
+  render() {
+    return html`
+      <div class="invoice-pages">
+        ${this.pageImages.map((page, i) => html`
+          <div class="page-preview">
+            <img
+              src=${page}
+              alt="Invoice page ${i + 1}"
+              ${lightbox({ images: this.pageImages, index: i })}
+            />
+            <p>Page ${i + 1}</p>
+          </div>
+        `)}
+      </div>
+    `
+  }
+}
+```
+
+### Avatar with Enlargement
+
+```typescript
+@customElement('user-profile')
+export class UserProfile extends LitElement {
+  @property({ type: String })
+  avatarUrl!: string
+
+  render() {
+    return html`
+      <div class="profile-header">
+        <img
+          src=${this.avatarUrl}
+          alt="User avatar"
+          ${lightbox()}
+          class="avatar"
+        />
+        <div class="user-info">
+          <h2>John Doe</h2>
+          <p>Click avatar to enlarge</p>
+        </div>
+      </div>
+    `
+  }
+}
+```
+
+## Styling Tips
+
+The directive works with any image styling. Common patterns:
+
+```css
+/* Thumbnail grid */
+.thumbnail {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+/* Product image */
+.product-thumbnail {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  border-radius: 12px;
+}
+
+/* Avatar */
+.avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+```
+
+## Blackbird Animation
+
+The lightbox uses a **Blackbird two-stage arc animation** inspired by bird flight patterns. When opening, the image follows a curved trajectory like a bird taking flight.
+
+### How It Works
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                                                             │
+│    (2) Takeoff Arc Peak                                     │
+│         ↗     ↘                                             │
+│       ↗         ↘                                           │
+│  (1) Source      (3) Click Position                         │
+│  [Thumbnail]          ↘                                     │
+│                         ↘  (4) Landing Arc                  │
+│                           ↘                                 │
+│                             ↘                               │
+│                          (5) Final [Large Image]            │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 5 Keyframes (like bird flight)
+
+| Offset | Stage | Movement |
+|--------|-------|----------|
+| 0% | Start | At thumbnail (source element) |
+| 25% | Takeoff Arc | Arcs **UP** (bird lifts off) |
+| 50% | Waypoint | At click position (transition) |
+| 75% | Landing Arc | Arcs **DOWN** (bird descends) |
+| 100% | Final | At destination position |
+
+### Key Features
+
+- **Arc UP** during takeoff (like a bird gaining altitude)
+- **Arc DOWN** during landing (like a bird descending)
+- **Scale progression**: small → medium → large
+- **Organic easing**: `cubic-bezier(0.34, 1.2, 0.64, 1)` with slight overshoot
+- **Duration**: 600ms total for the full flight path
+- **Respects `prefers-reduced-motion`** for accessibility
+
+### Animation Sources
+
+The animation is based on research from:
+- [Animator Notebook - Bird Flight](https://www.animatornotebook.com/learn/bird-flight) - Three stages of flight (lift-off, flying, landing)
+- [Moving along curved paths in CSS](https://tobiasahlin.com/blog/curved-path-animations-in-css/) - Layered animation technique
+- [Spring Physics Animation](https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics/) - Organic easing functions
+
+---
+
+## Flip Directive
+
+The lightbox includes a reusable `flip` directive for FLIP (First, Last, Invert, Play) animations.
+
+### Import
+
+```typescript
+import { flip } from '@mhmo91/schmancy/lightbox'
+```
+
+### Options
+
+```typescript
+interface FlipOptions {
+  sourceElement?: HTMLElement  // Source element to animate from
+  position?: { x: number; y: number } | MouseEvent | TouchEvent  // Click position
+  duration?: number            // Animation duration in ms (default: 600)
+  easing?: string              // CSS easing function
+  scale?: boolean              // Whether to animate scale (default: true)
+  blackbird?: boolean          // Enable two-stage arc animation (default: true)
+}
+```
+
+### Usage
+
+```typescript
+// Basic usage - animate from source element
+<div ${flip({ sourceElement: thumbnailElement })}>
+  Expanding content
+</div>
+
+// With click position for blackbird animation
+<img
+  src=${imageSrc}
+  ${flip({
+    sourceElement: this.thumbnailElement,
+    position: this.clickPosition,
+    duration: 600,
+    scale: true,
+    blackbird: true,
+  })}
+/>
+
+// Simple animation without blackbird arcs
+<div ${flip({ position: { x: 100, y: 200 }, blackbird: false })}>
+  Content
+</div>
+```
+
+---
+
+## Positioning
+
+The lightbox uses [Floating UI](https://floating-ui.com/) for smart positioning:
+
+### Desktop Behavior
+- Positions near the click point (quadrant-based)
+- Expands away from the click to maximize visibility
+- Automatically flips/shifts to stay in viewport
+
+### Mobile Behavior (< 768px)
+- **Centered horizontally** for better mobile UX
+- Vertical placement based on click position (top/bottom half)
+- Full-width image display
+
+---
+
+## Notes
+
+- The lightbox automatically handles cleanup when the component disconnects
+- Images are displayed at their natural resolution in the lightbox
+- The overlay uses Tailwind classes for styling (dark background, backdrop blur)
+- Gallery counter shows current position (e.g., "2 / 5")
+- Works seamlessly with lazy-loaded images
+- Mobile-friendly with touch-friendly controls

package/dist/ai/typography.md

@@ -62,10 +62,12 @@ import '@schmancy/index'  // For all Schmancy components
   Section Header
 </schmancy-typography>
 
-// 8. Clickable text
-<schmancy-typography type="body" token="md" class="cursor-pointer hover:text-primary" @click="${handleClick}">
-  Click me for more information
-</schmancy-typography>
+// 8. Clickable text (wrap in surface or use native link)
+<schmancy-surface type="primaryContainer" class="inline-block px-2 py-1 rounded cursor-pointer" @click="${handleClick}">
+  <schmancy-typography type="body" token="md">
+    Click me for more information
+  </schmancy-typography>
+</schmancy-surface>
 
 // 9. Truncated text with ellipsis
 <schmancy-typography type="body" token="md" maxLines="2">
@@ -80,9 +82,11 @@ import '@schmancy/index'  // For all Schmancy components
   <schmancy-typography type="body" token="md" class="block mb-4">
     This is a description that provides more context about the card content.
   </schmancy-typography>
-  <schmancy-typography type="label" token="lg" class="text-primary">
-    View Details →
-  </schmancy-typography>
+  <schmancy-surface type="primaryContainer" class="inline-block px-2 py-1 rounded">
+    <schmancy-typography type="label" token="lg">
+      View Details →
+    </schmancy-typography>
+  </schmancy-surface>
 </schmancy-card>
 ```
 
@@ -172,61 +176,81 @@ Typography automatically inherits colors from the theme:
 
 ### Color Inheritance
 
-**CRITICAL: Typography components automatically inherit the correct color from their parent surface.**
+## 🚨 ABSOLUTE RULE: NEVER PUT COLOR CLASSES ON SCHMANCY-TYPOGRAPHY
+
+**Typography MUST inherit its color from the parent surface. NO EXCEPTIONS.**
+
+### Why This Rule Exists
+- `schmancy-typography` automatically gets the correct contrast color from its parent surface
+- Adding `text-*` classes breaks the design system's color inheritance
+- It causes visual inconsistency when themes change
+- It violates Material Design 3's surface/on-color relationship
 
-#### ✅ CORRECT - Let Surface Handle Colors
+### ❌ FORBIDDEN - Color Classes on Typography
 ```html
-<!-- Typography inherits the correct on-color from the surface -->
-<schmancy-surface type="containerLow" class="p-4">
-  <schmancy-typography type="headline" token="md">
-    This text automatically uses the correct contrast color
+<!-- ALL OF THESE ARE WRONG - NEVER DO THIS -->
+<schmancy-typography type="headline" token="md" class="text-error">Wrong</schmancy-typography>
+<schmancy-typography type="body" token="sm" class="text-success">Wrong</schmancy-typography>
+<schmancy-typography type="title" token="lg" class="text-primary">Wrong</schmancy-typography>
+<schmancy-typography type="label" token="md" class="text-warning">Wrong</schmancy-typography>
+<schmancy-typography class="text-surface-onVariant">Wrong</schmancy-typography>
+```
+
+### ✅ CORRECT - Use Surfaces to Control Color
+```html
+<!-- Need error text? Use error surface -->
+<schmancy-surface type="error" class="px-2 py-1 rounded">
+  <schmancy-typography type="body" token="sm">
+    Error message here (automatically gets on-error color)
   </schmancy-typography>
 </schmancy-surface>
 
-<!-- Different surface types provide different text colors automatically -->
-<schmancy-surface type="primary" class="p-4">
-  <schmancy-typography type="body" token="md">
-    White text on primary background (automatic)
+<!-- Need primary-colored text? Use primary surface -->
+<schmancy-surface type="primary" class="px-2 py-1 rounded">
+  <schmancy-typography type="label" token="md">
+    Primary text (automatically gets on-primary color)
   </schmancy-typography>
 </schmancy-surface>
-```
 
-#### ❌ WRONG - Explicit Color Classes Inside Surfaces
-```html
-<!-- BAD: Overriding the surface's automatic color selection -->
-<schmancy-surface type="containerLow" class="p-4">
-  <schmancy-typography type="headline" token="md" class="text-surface-onVariant">
-    Don't add color classes - the surface already provides the right color!
+<!-- Normal text inside container -->
+<schmancy-surface type="container" class="p-4">
+  <schmancy-typography type="headline" token="md">
+    This text automatically uses the correct contrast color
   </schmancy-typography>
 </schmancy-surface>
 ```
 
-#### When to Use Color Classes
-
-**ONLY add explicit color classes when:**
-1. Typography is used standalone (not inside a surface)
-2. You need a specific semantic color (e.g., `text-error` for errors)
-3. Creating interactive elements that change color on hover
-
+### ❌ ALSO FORBIDDEN - Spans with Colors Inside Typography
 ```html
-<!-- Standalone typography (not in a surface) - color class is appropriate -->
-<div class="p-4">
-  <schmancy-typography type="label" token="md" class="text-error">
-    Error: Invalid input
-  </schmancy-typography>
-</div>
-
-<!-- Interactive element with hover state -->
-<schmancy-typography type="body" token="md" class="cursor-pointer hover:text-primary">
-  Click for more info
+<!-- WRONG - No color classes inside typography either! -->
+<schmancy-typography type="body" token="md">
+  Total: <span class="text-error">-€338.89</span>  <!-- WRONG -->
 </schmancy-typography>
 ```
 
-**Key Rules:**
-- NEVER add `text-surface-onVariant` or similar classes inside surfaces
-- Surfaces automatically provide the correct contrast color
-- Each surface type (primary, secondary, tertiary, containerLow, etc.) knows its appropriate text color
-- Trust the component system - it handles accessibility and contrast automatically
+### ✅ CORRECT - Always Wrap with Surface
+```html
+<!-- For colored values, wrap the typography in a surface -->
+<schmancy-surface type="errorContainer" class="px-2 py-0.5 rounded inline-block">
+  <schmancy-typography type="body" token="md">-€338.89</schmancy-typography>
+</schmancy-surface>
+```
+
+### Available Surface Types for Colored Text
+| Need This Color | Use This Surface |
+|-----------------|------------------|
+| Error/Red text | `type="error"` or `type="errorContainer"` |
+| Success/Green text | `type="success"` or `type="successContainer"` |
+| Warning/Amber text | `type="warning"` or `type="warningContainer"` |
+| Primary accent | `type="primary"` or `type="primaryContainer"` |
+| Secondary accent | `type="secondary"` or `type="secondaryContainer"` |
+| Tertiary accent | `type="tertiary"` or `type="tertiaryContainer"` |
+
+### The Principle
+**Surfaces define the background AND automatically provide the correct text color.**
+- `schmancy-surface type="error"` → red background, white text (automatic)
+- `schmancy-surface type="errorContainer"` → light red background, dark red text (automatic)
+- Trust the design system - don't override it with color classes
 
 ### Implementation Details
 - Uses Shadow DOM with encapsulated styles
@@ -257,9 +281,11 @@ Typography automatically inherits colors from the theme:
 
 3. **Data Display**
    ```html
-   <schmancy-typography type="headline" token="md" class="block text-primary">
-     $1,234.56
-   </schmancy-typography>
+   <schmancy-surface type="primaryContainer" class="inline-block px-3 py-2 rounded">
+     <schmancy-typography type="headline" token="md" class="block">
+       $1,234.56
+     </schmancy-typography>
+   </schmancy-surface>
    <schmancy-typography type="label" token="sm">
      Total Revenue
    </schmancy-typography>

package/dist/{animated-text-Be290e6l.cjs → animated-text-Bc3qyXjp.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("rxjs");require("rxjs/operators"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const r=require("lit/decorators.js");require("./tailwind.mixin-JFXu3GSo.cjs");const h=require("./litElement.mixin-B1WTI3WY.cjs"),c=require("lit");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,a,p,n)=>{for(var l,o=n>1?void 0:n?u(a,p):a,y=i.length-1;y>=0;y--)(l=i[y])&&(o=(n?l(a,p,o):l(o))||o);return n&&o&&d(a,p,o),o};let t=class extends h.$LitElement(c.css`
+"use strict";const e=require("rxjs");require("rxjs/operators"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const r=require("lit/decorators.js");require("./tailwind.mixin-UijsBrYW.cjs");const h=require("./litElement.mixin-BVBdv0GP.cjs"),c=require("lit");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(i,a,p,n)=>{for(var l,o=n>1?void 0:n?u(a,p):a,y=i.length-1;y>=0;y--)(l=i[y])&&(o=(n?l(a,p,o):l(o))||o);return n&&o&&d(a,p,o),o};let t=class extends h.$LitElement(c.css`
 	:host {
 		font-family: inherit;
 		display: block;
@@ -34,4 +34,4 @@
 				</span>
 			</span>
 		`}};s([r.property({type:String})],t.prototype,"ease",2),s([r.property({type:Number})],t.prototype,"delay",2),s([r.property({type:Number})],t.prototype,"stagger",2),s([r.property({type:Number})],t.prototype,"duration",2),s([r.property({type:Array})],t.prototype,"scale",2),s([r.property({type:Array})],t.prototype,"opacity",2),s([r.property({type:Array})],t.prototype,"translateX",2),s([r.property({type:Array})],t.prototype,"translateY",2),s([r.property({type:Array})],t.prototype,"translateZ",2),s([r.property({type:Array})],t.prototype,"rotateZ",2),s([r.property({type:Boolean})],t.prototype,"resetOnScroll",2),s([r.queryAssignedNodes()],t.prototype,"defaultSlot",2),s([r.query(".letters")],t.prototype,"letters",2),s([r.query(".ml7")],t.prototype,"ml7",2),t=s([r.customElement("schmancy-animated-text")],t);
-//# sourceMappingURL=animated-text-Be290e6l.cjs.map
+//# sourceMappingURL=animated-text-Bc3qyXjp.cjs.map

package/dist/{animated-text-Be290e6l.cjs.map → animated-text-Bc3qyXjp.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"animated-text-Be290e6l.cjs","sources":["../src/animated-text/animated-text.ts"],"sourcesContent":["// Removed: import { createTimeline, stagger } from '@packages/anime-beta-master'\nimport { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedNodes } from 'lit/decorators.js'\nimport {\n\tconcat,\n\tdistinctUntilChanged,\n\tfilter,\n\tfromEvent,\n\tinterval,\n\tmap,\n\tstartWith,\n\ttake,\n\ttap,\n\tthrottleTime,\n} from 'rxjs'\n\n/**\n * @element schmancy-animated-text\n * Inspired by https://tobiasahlin.com/moving-letters/#1\n */\n@customElement('schmancy-animated-text')\nexport default class SchmancyAnimatedText extends $LitElement(css`\n\t:host {\n\t\tfont-family: inherit;\n\t\tdisplay: block;\n\t}\n\t.ml7 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n\t.ml7 .text-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\toverflow: hidden;\n\t}\n\t.ml7 .letter {\n\t\ttransform-origin: 0 100%;\n\t\tdisplay: inline-block;\n\t\topacity: 0;\n\t}\n`) {\n\t@property({ type: String }) ease = 'outExpo' // not a built-in string for Web Animations\n\t@property({ type: Number }) delay = 0\n\t@property({ type: Number }) stagger = 50\n\t@property({ type: Number }) duration = 750\n\t@property({ type: Array }) scale = [0, 1]\n\t@property({ type: Array }) opacity = [0, 1]\n\t@property({ type: Array }) translateX = ['0.55em', '0em']\n\t@property({ type: Array }) translateY = ['1.1em', '0em']\n\t@property({ type: Array }) translateZ = [0, 0]\n\t@property({ type: Array }) rotateZ = [180, 0]\n\t@property({ type: Boolean }) resetOnScroll = true\n\n\t@queryAssignedNodes() defaultSlot!: HTMLElement[]\n\t@query('.letters') letters!: HTMLElement\n\t@query('.ml7') ml7!: HTMLElement\n\n\t// Function to check if an element is in the viewport\n\tisInViewport(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect()\n\t\treturn (\n\t\t\trect.top >= 0 &&\n\t\t\trect.left >= 0 &&\n\t\t\trect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n\t\t\trect.right <= (window.innerWidth || document.documentElement.clientWidth)\n\t\t)\n\t}\n\n\tasync firstUpdated() {\n\t\t// Split the text into <span class=\"letter\"> ... </span> elements\n\t\tthis.letters.innerHTML = this.defaultSlot[0].textContent!.replace(/\\S/g, `<span class=\"letter\">$&</span>`)\n\n\t\t// Observe viewport + initial readiness\n\t\tconcat(\n\t\t\t// 1) Wait until the element is rendered (width/height > 0)\n\t\t\tinterval(10).pipe(\n\t\t\t\tstartWith(true),\n\t\t\t\tfilter(() => {\n\t\t\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\t\t\treturn rect.width > 0 && rect.height > 0\n\t\t\t\t}),\n\t\t\t\ttake(1),\n\t\t\t),\n\t\t\t// 2) Then handle scroll events, throttled\n\t\t\tfromEvent(window, 'scroll').pipe(\n\t\t\t\tthrottleTime(0, undefined, {\n\t\t\t\t\tleading: true,\n\t\t\t\t\ttrailing: true,\n\t\t\t\t}),\n\t\t\t\tstartWith(true),\n\t\t\t\tmap(() => this.isInViewport(this)),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(inViewport => {\n\t\t\t\t\t// If leaving viewport and `resetOnScroll` is true, reset letters to opacity 0\n\t\t\t\t\tif (!inViewport && this.resetOnScroll) {\n\t\t\t\t\t\tArray.from(this.letters.children).forEach((letter: HTMLElement) => {\n\t\t\t\t\t\t\tletter.style.opacity = '0'\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tfilter(isInViewport => isInViewport),\n\t\t\t\t// If resetOnScroll = false, animate only the first time inView. If true, repeat.\n\t\t\t\tthis.resetOnScroll ? tap() : take(1),\n\t\t\t\ttap({\n\t\t\t\t\tnext: () => {\n\t\t\t\t\t\t// Animate letters with the native Web Animations API\n\t\t\t\t\t\tconst letters = this.shadowRoot!.querySelectorAll<HTMLElement>('.ml7 .letter')\n\n\t\t\t\t\t\tletters.forEach((letter, i) => {\n\t\t\t\t\t\t\t// Combine all transforms into one CSS transform string\n\t\t\t\t\t\t\t// From\n\t\t\t\t\t\t\tconst fromTransform = `\n                translate3d(${this.translateX[0]}, ${this.translateY[0]}, ${this.translateZ[0]}px)\n                rotateZ(${this.rotateZ[0]}deg)\n                scale(${this.scale[0]})\n              `\n\t\t\t\t\t\t\t// To\n\t\t\t\t\t\t\tconst toTransform = `\n                translate3d(${this.translateX[1]}, ${this.translateY[1]}, ${this.translateZ[1]}px)\n                rotateZ(${this.rotateZ[1]}deg)\n                scale(${this.scale[1]})\n              `\n\t\t\t\t\t\t\t// Approximate `outExpo` or pick a standard easing (like 'ease-out'):\n\t\t\t\t\t\t\t// outExpo often approximated by cubic-bezier(0.19, 1, 0.22, 1)\n\t\t\t\t\t\t\tconst easingMap: Record<string, string> = {\n\t\t\t\t\t\t\t\toutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n\t\t\t\t\t\t\t\t// add more if you want\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst keyframes: Keyframe[] = [\n\t\t\t\t\t\t\t\t{ transform: fromTransform, opacity: String(this.opacity[0]) },\n\t\t\t\t\t\t\t\t{ transform: toTransform, opacity: String(this.opacity[1]) },\n\t\t\t\t\t\t\t]\n\n\t\t\t\t\t\t\tletter.animate(keyframes, {\n\t\t\t\t\t\t\t\tduration: this.duration,\n\t\t\t\t\t\t\t\teasing: easingMap[this.ease] || 'ease-out',\n\t\t\t\t\t\t\t\tdelay: this.delay + i * this.stagger, // staggered start\n\t\t\t\t\t\t\t\tfill: 'forwards', // so the letters remain visible\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t})\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t),\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<span class=\"ml7\">\n\t\t\t\t<span class=\"text-wrapper\">\n\t\t\t\t\t<span class=\"letters\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-animated-text': SchmancyAnimatedText\n\t}\n}\n"],"names":["SchmancyAnimatedText","$LitElement","css","constructor","super","arguments","this","ease","delay","stagger","duration","scale","opacity","translateX","translateY","translateZ","rotateZ","resetOnScroll","element","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","firstUpdated","letters","innerHTML","defaultSlot","textContent","replace","concat","interval","pipe","startWith","filter","width","height","take","fromEvent","throttleTime","leading","trailing","map","isInViewport","distinctUntilChanged","tap","inViewport","Array","from","children","forEach","letter","style","next","shadowRoot","querySelectorAll","i","fromTransform","toTransform","keyframes","transform","String","animate","easing","outExpo","fill","subscribe","render","html","__decorateClass","property","type","prototype","Number","Boolean","queryAssignedNodes","query","customElement"],"mappings":"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"}
+{"version":3,"file":"animated-text-Bc3qyXjp.cjs","sources":["../src/animated-text/animated-text.ts"],"sourcesContent":["// Removed: import { createTimeline, stagger } from '@packages/anime-beta-master'\nimport { $LitElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAssignedNodes } from 'lit/decorators.js'\nimport {\n\tconcat,\n\tdistinctUntilChanged,\n\tfilter,\n\tfromEvent,\n\tinterval,\n\tmap,\n\tstartWith,\n\ttake,\n\ttap,\n\tthrottleTime,\n} from 'rxjs'\n\n/**\n * @element schmancy-animated-text\n * Inspired by https://tobiasahlin.com/moving-letters/#1\n */\n@customElement('schmancy-animated-text')\nexport default class SchmancyAnimatedText extends $LitElement(css`\n\t:host {\n\t\tfont-family: inherit;\n\t\tdisplay: block;\n\t}\n\t.ml7 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t}\n\t.ml7 .text-wrapper {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\toverflow: hidden;\n\t}\n\t.ml7 .letter {\n\t\ttransform-origin: 0 100%;\n\t\tdisplay: inline-block;\n\t\topacity: 0;\n\t}\n`) {\n\t@property({ type: String }) ease = 'outExpo' // not a built-in string for Web Animations\n\t@property({ type: Number }) delay = 0\n\t@property({ type: Number }) stagger = 50\n\t@property({ type: Number }) duration = 750\n\t@property({ type: Array }) scale = [0, 1]\n\t@property({ type: Array }) opacity = [0, 1]\n\t@property({ type: Array }) translateX = ['0.55em', '0em']\n\t@property({ type: Array }) translateY = ['1.1em', '0em']\n\t@property({ type: Array }) translateZ = [0, 0]\n\t@property({ type: Array }) rotateZ = [180, 0]\n\t@property({ type: Boolean }) resetOnScroll = true\n\n\t@queryAssignedNodes() defaultSlot!: HTMLElement[]\n\t@query('.letters') letters!: HTMLElement\n\t@query('.ml7') ml7!: HTMLElement\n\n\t// Function to check if an element is in the viewport\n\tisInViewport(element: HTMLElement) {\n\t\tconst rect = element.getBoundingClientRect()\n\t\treturn (\n\t\t\trect.top >= 0 &&\n\t\t\trect.left >= 0 &&\n\t\t\trect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n\t\t\trect.right <= (window.innerWidth || document.documentElement.clientWidth)\n\t\t)\n\t}\n\n\tasync firstUpdated() {\n\t\t// Split the text into <span class=\"letter\"> ... </span> elements\n\t\tthis.letters.innerHTML = this.defaultSlot[0].textContent!.replace(/\\S/g, `<span class=\"letter\">$&</span>`)\n\n\t\t// Observe viewport + initial readiness\n\t\tconcat(\n\t\t\t// 1) Wait until the element is rendered (width/height > 0)\n\t\t\tinterval(10).pipe(\n\t\t\t\tstartWith(true),\n\t\t\t\tfilter(() => {\n\t\t\t\t\tconst rect = this.getBoundingClientRect()\n\t\t\t\t\treturn rect.width > 0 && rect.height > 0\n\t\t\t\t}),\n\t\t\t\ttake(1),\n\t\t\t),\n\t\t\t// 2) Then handle scroll events, throttled\n\t\t\tfromEvent(window, 'scroll').pipe(\n\t\t\t\tthrottleTime(0, undefined, {\n\t\t\t\t\tleading: true,\n\t\t\t\t\ttrailing: true,\n\t\t\t\t}),\n\t\t\t\tstartWith(true),\n\t\t\t\tmap(() => this.isInViewport(this)),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(inViewport => {\n\t\t\t\t\t// If leaving viewport and `resetOnScroll` is true, reset letters to opacity 0\n\t\t\t\t\tif (!inViewport && this.resetOnScroll) {\n\t\t\t\t\t\tArray.from(this.letters.children).forEach((letter: HTMLElement) => {\n\t\t\t\t\t\t\tletter.style.opacity = '0'\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\tfilter(isInViewport => isInViewport),\n\t\t\t\t// If resetOnScroll = false, animate only the first time inView. If true, repeat.\n\t\t\t\tthis.resetOnScroll ? tap() : take(1),\n\t\t\t\ttap({\n\t\t\t\t\tnext: () => {\n\t\t\t\t\t\t// Animate letters with the native Web Animations API\n\t\t\t\t\t\tconst letters = this.shadowRoot!.querySelectorAll<HTMLElement>('.ml7 .letter')\n\n\t\t\t\t\t\tletters.forEach((letter, i) => {\n\t\t\t\t\t\t\t// Combine all transforms into one CSS transform string\n\t\t\t\t\t\t\t// From\n\t\t\t\t\t\t\tconst fromTransform = `\n                translate3d(${this.translateX[0]}, ${this.translateY[0]}, ${this.translateZ[0]}px)\n                rotateZ(${this.rotateZ[0]}deg)\n                scale(${this.scale[0]})\n              `\n\t\t\t\t\t\t\t// To\n\t\t\t\t\t\t\tconst toTransform = `\n                translate3d(${this.translateX[1]}, ${this.translateY[1]}, ${this.translateZ[1]}px)\n                rotateZ(${this.rotateZ[1]}deg)\n                scale(${this.scale[1]})\n              `\n\t\t\t\t\t\t\t// Approximate `outExpo` or pick a standard easing (like 'ease-out'):\n\t\t\t\t\t\t\t// outExpo often approximated by cubic-bezier(0.19, 1, 0.22, 1)\n\t\t\t\t\t\t\tconst easingMap: Record<string, string> = {\n\t\t\t\t\t\t\t\toutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n\t\t\t\t\t\t\t\t// add more if you want\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst keyframes: Keyframe[] = [\n\t\t\t\t\t\t\t\t{ transform: fromTransform, opacity: String(this.opacity[0]) },\n\t\t\t\t\t\t\t\t{ transform: toTransform, opacity: String(this.opacity[1]) },\n\t\t\t\t\t\t\t]\n\n\t\t\t\t\t\t\tletter.animate(keyframes, {\n\t\t\t\t\t\t\t\tduration: this.duration,\n\t\t\t\t\t\t\t\teasing: easingMap[this.ease] || 'ease-out',\n\t\t\t\t\t\t\t\tdelay: this.delay + i * this.stagger, // staggered start\n\t\t\t\t\t\t\t\tfill: 'forwards', // so the letters remain visible\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t})\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t),\n\t\t).subscribe()\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<span class=\"ml7\">\n\t\t\t\t<span class=\"text-wrapper\">\n\t\t\t\t\t<span class=\"letters\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-animated-text': SchmancyAnimatedText\n\t}\n}\n"],"names":["SchmancyAnimatedText","$LitElement","css","constructor","super","arguments","this","ease","delay","stagger","duration","scale","opacity","translateX","translateY","translateZ","rotateZ","resetOnScroll","element","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","firstUpdated","letters","innerHTML","defaultSlot","textContent","replace","concat","interval","pipe","startWith","filter","width","height","take","fromEvent","throttleTime","leading","trailing","map","isInViewport","distinctUntilChanged","tap","inViewport","Array","from","children","forEach","letter","style","next","shadowRoot","querySelectorAll","i","fromTransform","toTransform","keyframes","transform","String","animate","easing","outExpo","fill","subscribe","render","html","__decorateClass","property","type","prototype","Number","Boolean","queryAssignedNodes","query","customElement"],"mappings":"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"}

package/dist/{animated-text-DuLrWJ6O.js → animated-text-CNx6Pmlo.js}

@@ -3,8 +3,8 @@ import "rxjs/operators";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
 import { property as a, queryAssignedNodes as x, query as m, customElement as S } from "lit/decorators.js";
-import "./tailwind.mixin-wLaKUxf1.js";
-import { $ as Z } from "./litElement.mixin-CVje6z-M.js";
+import "./tailwind.mixin-Ddt05Frc.js";
+import { $ as Z } from "./litElement.mixin-Wcu4yIIs.js";
 import { css as v, html as A } from "lit";
 var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, e = (r, s, n, i) => {
   for (var l, o = i > 1 ? void 0 : i ? O(s, n) : s, p = r.length - 1; p >= 0; p--) (l = r[p]) && (o = (i ? l(s, n, o) : l(o)) || o);
@@ -73,4 +73,4 @@ let t = class extends Z(v`
   }
 };
 e([a({ type: String })], t.prototype, "ease", 2), e([a({ type: Number })], t.prototype, "delay", 2), e([a({ type: Number })], t.prototype, "stagger", 2), e([a({ type: Number })], t.prototype, "duration", 2), e([a({ type: Array })], t.prototype, "scale", 2), e([a({ type: Array })], t.prototype, "opacity", 2), e([a({ type: Array })], t.prototype, "translateX", 2), e([a({ type: Array })], t.prototype, "translateY", 2), e([a({ type: Array })], t.prototype, "translateZ", 2), e([a({ type: Array })], t.prototype, "rotateZ", 2), e([a({ type: Boolean })], t.prototype, "resetOnScroll", 2), e([x()], t.prototype, "defaultSlot", 2), e([m(".letters")], t.prototype, "letters", 2), e([m(".ml7")], t.prototype, "ml7", 2), t = e([S("schmancy-animated-text")], t);
-//# sourceMappingURL=animated-text-DuLrWJ6O.js.map
+//# sourceMappingURL=animated-text-CNx6Pmlo.js.map