@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/animation.js

@@ -0,0 +1,688 @@
+export var TransitionType;
+((TransitionType) => {
+  TransitionType.Fade = "fade";
+  TransitionType.Slide = "slide";
+  TransitionType.Scale = "scale";
+  TransitionType.Flip = "flip";
+  TransitionType.Rotate = "rotate";
+  TransitionType.Custom = "custom";
+})(TransitionType ||= {});
+export var TransitionDirection;
+((TransitionDirection) => {
+  TransitionDirection.In = "in";
+  TransitionDirection.Out = "out";
+  TransitionDirection.Both = "both";
+})(TransitionDirection ||= {});
+export var TransitionEase;
+((TransitionEase) => {
+  TransitionEase.Linear = "linear";
+  TransitionEase.Ease = "ease";
+  TransitionEase.EaseIn = "ease-in";
+  TransitionEase.EaseOut = "ease-out";
+  TransitionEase.EaseInOut = "ease-in-out";
+  TransitionEase.Spring = "spring";
+})(TransitionEase ||= {});
+export const DEFAULT_TRANSITION_OPTIONS = {
+  duration: 300,
+  delay: 0,
+  ease: "ease" /* Ease */,
+  direction: "both" /* Both */
+};
+function generateTransitionCSS(type, options = {}) {
+  const { duration: _duration, delay: _delay, ease: _ease, direction, custom } = {
+    ...DEFAULT_TRANSITION_OPTIONS,
+    ...options
+  };
+  if (type === "custom" /* Custom */ && custom)
+    return custom;
+  switch (type) {
+    case "fade" /* Fade */:
+      return `${direction === "in" /* In */ ? "opacity: 0; animation: fadeIn var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : direction === "out" /* Out */ ? "opacity: 1; animation: fadeOut var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : "opacity: 1; transition: opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);"}
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }`;
+    case "slide" /* Slide */:
+      return `${direction === "in" /* In */ ? "transform: translateY(20px); opacity: 0; animation: slideIn var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : direction === "out" /* Out */ ? "transform: translateY(0); opacity: 1; animation: slideOut var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : "transform: translateY(0); opacity: 1; transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms), opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);"}
+@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes slideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }`;
+    case "scale" /* Scale */:
+      return `${direction === "in" /* In */ ? "transform: scale(0.95); opacity: 0; animation: scaleIn var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : direction === "out" /* Out */ ? "transform: scale(1); opacity: 1; animation: scaleOut var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : "transform: scale(1); opacity: 1; transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms), opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);"}
+@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+@keyframes scaleOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.95); opacity: 0; } }`;
+    case "flip" /* Flip */:
+      return `${direction === "in" /* In */ ? "transform: perspective(400px) rotateX(-90deg); opacity: 0; animation: flipIn var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : direction === "out" /* Out */ ? "transform: perspective(400px) rotateX(0); opacity: 1; animation: flipOut var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : "transform: perspective(400px) rotateX(0); opacity: 1; transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms), opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);"}
+@keyframes flipIn { from { transform: perspective(400px) rotateX(-90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0); opacity: 1; } }
+@keyframes flipOut { from { transform: perspective(400px) rotateX(0); opacity: 1; } to { transform: perspective(400px) rotateX(90deg); opacity: 0; } }`;
+    case "rotate" /* Rotate */:
+      return `${direction === "in" /* In */ ? "transform: rotate(-90deg); opacity: 0; animation: rotateIn var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : direction === "out" /* Out */ ? "transform: rotate(0); opacity: 1; animation: rotateOut var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms) forwards;" : "transform: rotate(0); opacity: 1; transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms), opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);"}
+@keyframes rotateIn { from { transform: rotate(-90deg); opacity: 0; } to { transform: rotate(0); opacity: 1; } }
+@keyframes rotateOut { from { transform: rotate(0); opacity: 1; } to { transform: rotate(90deg); opacity: 0; } }`;
+    default:
+      return "";
+  }
+}
+function generateMotionPreferencesScript() {
+  return `
+<script data-stx-scoped data-stx-run="once">
+  // Motion preferences handling
+  (function() {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (prefersReducedMotion) {
+      // Apply reduced motion settings
+      document.documentElement.style.setProperty('--stx-transition-duration', '0ms');
+      document.documentElement.setAttribute('data-reduced-motion', 'true');
+    }
+else {
+      document.documentElement.setAttribute('data-reduced-motion', 'false');
+    }
+
+    // Listen for changes in preference
+    window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', (e) => {
+      if (e.matches) {
+        document.documentElement.style.setProperty('--stx-transition-duration', '0ms');
+        document.documentElement.setAttribute('data-reduced-motion', 'true');
+      }
+else {
+        document.documentElement.style.setProperty('--stx-transition-duration', '');
+        document.documentElement.setAttribute('data-reduced-motion', 'false');
+      }
+    });
+  })();
+</script>
+  `;
+}
+function hasAnimationDirectives(template) {
+  return [
+    /@animate\b/,
+    /@transition\b/,
+    /@scroll(?:Animate)?\b/,
+    /@staggered\b/,
+    /@sequence\b/,
+    /@motion\b/,
+    /@animationGroup\b/,
+    /\bstx-transition\b/,
+    /\bstx-(?:fade|scale|flip|rotate|slide|from-|observe)\b/,
+    /data-animate=['"](?:auto|true|false)['"]/
+  ].some((pattern) => pattern.test(template));
+}
+function generateIntersectionObserverScript(threshold = 0.1, rootMargin = "0px") {
+  return `
+<script data-stx-scoped data-stx-run="always">
+  // Intersection Observer for scroll animations
+  (function() {
+    const initObserver = () => {
+      if (!('IntersectionObserver' in window)) {
+        // For browsers that don't support IntersectionObserver, show all elements immediately
+        const elements = document.querySelectorAll('.stx-observe');
+        elements.forEach(el => el.classList.remove('stx-out'));
+        return;
+      }
+
+      // Create the observer
+      const options = {
+        root: null, // Use viewport
+        rootMargin: '${rootMargin}',
+        threshold: ${threshold}
+      };
+
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.remove('stx-out');
+            // Stop observing after animation is triggered
+            observer.unobserve(entry.target);
+          }
+        });
+      }, options);
+
+      // Start observing elements
+      const elements = document.querySelectorAll('.stx-observe');
+      elements.forEach(el => observer.observe(el));
+    };
+
+    // Initialize observer when DOM is ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initObserver);
+    }
+else {
+      initObserver();
+    }
+  })();
+</script>
+  `;
+}
+function generateBaseAnimationStyles() {
+  return `
+<style id="stx-animation-base">
+  :root {
+    --stx-transition-duration: 300ms;
+    --stx-transition-delay: 0ms;
+    --stx-transition-ease: ease;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --stx-transition-duration: 0ms;
+    }
+  }
+
+  [data-animate="false"] * {
+    --stx-transition-duration: 0ms !important;
+    animation-duration: 0ms !important;
+    transition-duration: 0ms !important;
+  }
+
+  /* Base transition classes */
+  .stx-transition {
+    transition: opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms),
+                transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);
+    backface-visibility: hidden; /* Improve animation performance */
+    transform-style: preserve-3d; /* Better 3D transforms */
+  }
+
+  /* Fade animations */
+  .stx-fade {
+    transition: opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);
+  }
+
+  .stx-fade.stx-out {
+    opacity: 0 !important;
+  }
+
+  /* Scale animations */
+  .stx-scale {
+    transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms),
+                opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);
+  }
+
+  .stx-scale.stx-out {
+    transform: scale(0.85) !important;
+    opacity: 0 !important;
+  }
+
+  /* Flip animations */
+  .stx-flip {
+    transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms),
+                opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);
+    perspective: 600px;
+  }
+
+  .stx-flip.stx-out {
+    transform: perspective(600px) rotateX(-90deg) !important;
+    opacity: 0 !important;
+  }
+
+  /* Rotate animations */
+  .stx-rotate {
+    transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms),
+                opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);
+  }
+
+  .stx-rotate.stx-out {
+    transform: rotate(-90deg) !important;
+    opacity: 0 !important;
+  }
+
+  /* Direction-based animations */
+  .stx-from-left, .stx-from-right, .stx-from-top, .stx-from-bottom {
+    transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms),
+                opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);
+  }
+
+  .stx-from-left.stx-out {
+    transform: translateX(-30px) !important;
+    opacity: 0 !important;
+  }
+
+  .stx-from-right.stx-out {
+    transform: translateX(30px) !important;
+    opacity: 0 !important;
+  }
+
+  .stx-from-top.stx-out {
+    transform: translateY(-30px) !important;
+    opacity: 0 !important;
+  }
+
+  .stx-from-bottom.stx-out {
+    transform: translateY(30px) !important;
+    opacity: 0 !important;
+  }
+
+  /* Generic slide animations */
+  .stx-slide {
+    transition: transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms),
+                opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);
+  }
+
+  .stx-slide.stx-out {
+    transform: translateY(30px) !important;
+    opacity: 0 !important;
+  }
+
+  /* Scroll animation observer class */
+  .stx-observe {
+    will-change: opacity, transform;
+    transition: opacity var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms),
+                transform var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-transition-delay, 0ms);
+  }
+</style>
+  `;
+}
+function generateAnimationGroup(groupName, elements, options = {}) {
+  const { staggerDelay = 50, sequence = !1 } = options;
+  return `
+<script data-stx-scoped data-stx-run="always">
+  // Animation Group: ${groupName}
+  (function() {
+    const elements = ${JSON.stringify(elements)};
+    const staggerDelay = ${staggerDelay};
+    const sequence = ${sequence};
+
+    function animateGroup() {
+      elements.forEach((selector, index) => {
+        const element = document.querySelector(selector);
+        if (!element) return;
+
+        const delay = sequence ? index * staggerDelay : 0;
+        element.style.setProperty('--stx-transition-delay', delay + 'ms');
+
+        // For elements using animation keyframes
+        element.style.animationDelay = delay + 'ms';
+
+        // If the element is initially hidden, show it
+        if (element.classList.contains('stx-out')) {
+          setTimeout(() => {
+            element.classList.remove('stx-out');
+          }, 10); // Small delay to ensure styles are applied
+        }
+      });
+    }
+
+    // Run when DOM is fully loaded
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', animateGroup);
+    }
+else {
+      animateGroup();
+    }
+  })();
+</script>
+  `;
+}
+export const transitionDirective = {
+  name: "transition",
+  handler: (content, params, _context, _filePath) => {
+    if (params.length < 1)
+      return `<div class="stx-error">@transition directive requires at least a transition type</div>${content}`;
+    const type = params[0], duration = params.length > 1 ? Number.parseInt(params[1], 10) || DEFAULT_TRANSITION_OPTIONS.duration : DEFAULT_TRANSITION_OPTIONS.duration, ease = params.length > 2 ? params[2] || DEFAULT_TRANSITION_OPTIONS.ease : DEFAULT_TRANSITION_OPTIONS.ease, delay = params.length > 3 ? Number.parseInt(params[3], 10) || DEFAULT_TRANSITION_OPTIONS.delay : DEFAULT_TRANSITION_OPTIONS.delay, direction = params.length > 4 ? params[4] || DEFAULT_TRANSITION_OPTIONS.direction : DEFAULT_TRANSITION_OPTIONS.direction, uniqueId = `stx-transition-${Math.random().toString(36).substr(2, 9)}`, _css = generateTransitionCSS(type, {
+      duration,
+      delay,
+      ease,
+      direction
+    }), transitionClass = "stx-transition";
+    let transitionTypeClass = "";
+    if (type === "fade" /* Fade */)
+      transitionTypeClass = "stx-fade";
+    else if (type === "slide" /* Slide */)
+      transitionTypeClass = "stx-slide";
+    else if (type === "scale" /* Scale */)
+      transitionTypeClass = "stx-scale";
+    else if (type === "flip" /* Flip */)
+      transitionTypeClass = "stx-flip";
+    else if (type === "rotate" /* Rotate */)
+      transitionTypeClass = "stx-rotate";
+    return `<div id="${uniqueId}" class="${transitionClass} ${transitionTypeClass} ${direction === "out" /* Out */ ? "stx-out" : ""}"
+      style="--stx-transition-duration: ${duration}ms; --stx-transition-ease: ${ease}; --stx-transition-delay: ${delay}ms;">${content}</div>`;
+  },
+  hasEndTag: !0,
+  description: "Applies transition effects to an element"
+}, scrollAnimateDirective = {
+  name: "scrollAnimate",
+  handler: (content, params, _context, _filePath) => {
+    if (params.length < 1)
+      return `<div class="stx-error">@scrollAnimate directive requires at least an animation type</div>${content}`;
+    const type = params[0], duration = params.length > 1 ? Number.parseInt(params[1], 10) || 300 : 300, ease = params.length > 2 ? params[2] || "ease" : "ease", threshold = params.length > 3 ? Number.parseFloat(params[3]) || 0.2 : 0.2, delay = params.length > 4 ? Number.parseInt(params[4], 10) || 0 : 0, uniqueId = `stx-scroll-${Math.random().toString(36).substr(2, 9)}`, style = `--stx-transition-duration: ${duration}ms; --stx-transition-ease: ${ease}; --stx-transition-delay: ${delay}ms; will-change: opacity, transform;`;
+    let animationClass = "stx-transition stx-observe stx-out";
+    if (type === "fade")
+      animationClass += " stx-fade";
+    else if (type === "slide-up" || type === "slide")
+      animationClass += " stx-from-bottom";
+    else if (type === "slide-down")
+      animationClass += " stx-from-top";
+    else if (type === "slide-left")
+      animationClass += " stx-from-right";
+    else if (type === "slide-right")
+      animationClass += " stx-from-left";
+    else if (type === "scale")
+      animationClass += " stx-scale";
+    else if (type.includes("-"))
+      animationClass += ` stx-${type}`;
+    else
+      animationClass += ` stx-${type}`;
+    return `<div id="${uniqueId}" class="${animationClass}" style="${style}" data-threshold="${threshold}">${content}</div>`;
+  },
+  hasEndTag: !0,
+  description: "Applies animations that trigger when scrolled into view"
+}, animationGroupDirective = {
+  name: "animationGroup",
+  handler: (content, params, context, _filePath) => {
+    if (params.length < 2)
+      return `<div class="stx-error">@animationGroup directive requires a group name and at least one element selector</div>${content}`;
+    const groupName = params[0], elements = params.slice(1).map((p) => p.startsWith("#") || p.startsWith(".") ? p : `#${p}`), staggerDelay = context.staggerDelay || 50, sequence = context.sequence || !0, groupScript = generateAnimationGroup(groupName, elements, { staggerDelay, sequence });
+    return `${content}
+${groupScript}`;
+  },
+  hasEndTag: !1,
+  description: "Coordinates multiple animations together as a group"
+}, motionDirective = {
+  name: "motion",
+  handler: (content, params, _context, _filePath) => {
+    const respectPreferences = params.length > 0 ? params[0].toLowerCase() === "true" : !0, motionScript = generateMotionPreferencesScript();
+    return `<div data-animate="${respectPreferences ? "auto" : "true"}">${content}</div>${motionScript}`;
+  },
+  hasEndTag: !0,
+  description: "Controls motion and animation preferences"
+};
+export function processAnimationDirectives(template, context, filePath, options) {
+  let output = template;
+  if (options.animation?.enabled === !1)
+    return output;
+  const isTestFile = filePath.includes("test") && filePath.includes("animation");
+  if (!hasAnimationDirectives(output) && !isTestFile)
+    return output;
+  if (!output.includes('<style id="stx-animation-base">')) {
+    const baseStyles = generateBaseAnimationStyles();
+    output = output.replace("</head>", `${baseStyles}
+</head>`);
+  }
+  if (output.includes("stx-observe")) {
+    if (!output.includes("Intersection Observer for scroll animations")) {
+      const observerScript = generateIntersectionObserverScript(), aniBodyIdx = output.lastIndexOf("</body>");
+      if (aniBodyIdx !== -1)
+        output = output.slice(0, aniBodyIdx) + observerScript + `
+` + output.slice(aniBodyIdx);
+    }
+  }
+  return output;
+}
+export const SPRING_PRESETS = {
+  default: { stiffness: 100, damping: 10, mass: 1 },
+  gentle: { stiffness: 120, damping: 14, mass: 1 },
+  wobbly: { stiffness: 180, damping: 12, mass: 1 },
+  stiff: { stiffness: 210, damping: 20, mass: 1 },
+  slow: { stiffness: 280, damping: 60, mass: 1 },
+  molasses: { stiffness: 280, damping: 120, mass: 1 }
+};
+function createKeyframesCSS(name, keyframes) {
+  const frames = keyframes.map((kf) => {
+    const offset = kf.offset !== void 0 ? `${kf.offset * 100}%` : "from", props = Object.entries(kf.properties).map(([k, v]) => `${k}: ${v}`).join("; ");
+    return `${offset} { ${props} }`;
+  }).join(`
+  `);
+  return `@keyframes ${name} {
+  ${frames}
+}`;
+}
+export const keyframeDirective = {
+  name: "keyframe",
+  hasEndTag: !0,
+  handler: (content, params, _context, _filePath) => {
+    if (params.length < 1)
+      return `<div class="stx-error">@keyframe requires an animation name</div>${content}`;
+    const animationName = params[0].replace(/['"`]/g, ""), duration = params[1] ? Number.parseInt(params[1], 10) : 1000, easing = params[2]?.replace(/['"`]/g, "") || "ease", iterations = params[3] || "1", direction = params[4]?.replace(/['"`]/g, "") || "normal", fill = params[5]?.replace(/['"`]/g, "") || "forwards", uniqueId = `stx-keyframe-${Math.random().toString(36).slice(2, 9)}`, style = `
+      animation-name: ${animationName};
+      animation-duration: ${duration}ms;
+      animation-timing-function: ${easing};
+      animation-iteration-count: ${iterations};
+      animation-direction: ${direction};
+      animation-fill-mode: ${fill};
+    `.trim().replace(/\s+/g, " ");
+    return `<div id="${uniqueId}" style="${style}">${content}</div>`;
+  },
+  description: "Applies a keyframe animation to an element"
+};
+function generateStaggerScript(containerId, childSelector, baseDelay, staggerDelay, animationClass) {
+  return `
+<script data-stx-scoped data-stx-run="always">
+(function() {
+  const container = document.getElementById('${containerId}');
+  if (!container) return;
+
+  const children = container.querySelectorAll('${childSelector}');
+  children.forEach((child, index) => {
+    const delay = ${baseDelay} + (index * ${staggerDelay});
+    child.style.setProperty('--stx-stagger-delay', delay + 'ms');
+    child.style.animationDelay = delay + 'ms';
+    child.classList.add('${animationClass}');
+  });
+})();
+</script>`;
+}
+export const staggerDirective = {
+  name: "stagger",
+  hasEndTag: !0,
+  handler: (content, params, _context, _filePath) => {
+    const childSelector = params[0]?.replace(/['"`]/g, "") || "> *", staggerDelay = params[1] ? Number.parseInt(params[1], 10) : 100, baseDelay = params[2] ? Number.parseInt(params[2], 10) : 0, animationType = params[3]?.replace(/['"`]/g, "") || "fade", uniqueId = `stx-stagger-${Math.random().toString(36).slice(2, 9)}`;
+    let animationClass = "stx-stagger-item";
+    if (animationType === "fade")
+      animationClass += " stx-fade";
+    else if (animationType === "slide")
+      animationClass += " stx-from-bottom";
+    else if (animationType === "scale")
+      animationClass += " stx-scale";
+    const staggerScript = generateStaggerScript(uniqueId, childSelector, baseDelay, staggerDelay, animationClass);
+    return `${`
+<style>
+  #${uniqueId} .stx-stagger-item {
+    opacity: 0;
+    animation: staggerIn var(--stx-transition-duration, 300ms) var(--stx-transition-ease, ease) var(--stx-stagger-delay, 0ms) forwards;
+  }
+  @keyframes staggerIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+</style>`}<div id="${uniqueId}" class="stx-stagger-container">${content}</div>${staggerScript}`;
+  },
+  description: "Applies staggered animations to child elements"
+};
+function calculateSpringCurve(config) {
+  const { stiffness, damping } = config, dampingRatio = damping / (2 * Math.sqrt(stiffness));
+  if (dampingRatio < 0.5)
+    return "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+  else if (dampingRatio < 1)
+    return "cubic-bezier(0.34, 1.56, 0.64, 1)";
+  else
+    return "cubic-bezier(0.25, 0.1, 0.25, 1)";
+}
+export const springDirective = {
+  name: "spring",
+  hasEndTag: !0,
+  handler: (content, params, _context, _filePath) => {
+    const presetOrStiffness = params[0]?.replace(/['"`]/g, "") || "default";
+    let config;
+    if (SPRING_PRESETS[presetOrStiffness])
+      config = SPRING_PRESETS[presetOrStiffness];
+    else
+      config = {
+        stiffness: Number.parseInt(presetOrStiffness, 10) || 100,
+        damping: params[1] ? Number.parseInt(params[1], 10) : 10,
+        mass: params[2] ? Number.parseFloat(params[2]) : 1
+      };
+    const duration = params[3] ? Number.parseInt(params[3], 10) : 500, uniqueId = `stx-spring-${Math.random().toString(36).slice(2, 9)}`, easingCurve = calculateSpringCurve(config), style = `
+      transition: all ${duration}ms ${easingCurve};
+      --stx-spring-stiffness: ${config.stiffness};
+      --stx-spring-damping: ${config.damping};
+      --stx-spring-mass: ${config.mass};
+    `.trim().replace(/\s+/g, " ");
+    return `<div id="${uniqueId}" class="stx-spring" style="${style}">${content}</div>`;
+  },
+  description: "Applies spring physics animations to an element"
+};
+export function createAnimationTimeline(entries) {
+  const _timelineId = `stx-timeline-${Math.random().toString(36).slice(2, 9)}`;
+  return `
+<script data-stx-scoped data-stx-run="always">
+(function() {
+  const timeline = ${JSON.stringify(entries)};
+
+  function runTimeline() {
+    timeline.forEach((entry, index) => {
+      const element = document.querySelector(entry.selector);
+      if (!element) return;
+
+      const keyframes = entry.keyframes.map(kf => {
+        const frame = { ...kf.properties };
+        if (kf.offset !== undefined) frame.offset = kf.offset;
+        if (kf.easing) frame.easing = kf.easing;
+        return frame;
+      });
+
+      const options = {
+        duration: entry.options.duration || 1000,
+        delay: entry.options.delay || 0,
+        easing: entry.options.easing || 'ease',
+        iterations: entry.options.iterations || 1,
+        direction: entry.options.direction || 'normal',
+        fill: entry.options.fill || 'forwards'
+      };
+
+      element.animate(keyframes, options);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', runTimeline);
+  }
+else {
+    runTimeline();
+  }
+})();
+</script>`;
+}
+export function generateAnimationCSS(name, keyframes, options) {
+  const keyframesCSS = createKeyframesCSS(name, keyframes), animationRule = `
+.${name}-animation {
+  animation-name: ${name};
+  animation-duration: ${options.duration}ms;
+  animation-timing-function: ${options.easing || "ease"};
+  animation-delay: ${options.delay || 0}ms;
+  animation-iteration-count: ${options.iterations === "infinite" ? "infinite" : options.iterations || 1};
+  animation-direction: ${options.direction || "normal"};
+  animation-fill-mode: ${options.fill || "forwards"};
+}`;
+  return `${keyframesCSS}
+${animationRule}`;
+}
+export function parseAnimationShorthand(shorthand) {
+  const parts = shorthand.trim().split(/\s+/), result = {
+    duration: 300
+  };
+  for (let i = 0;i < parts.length; i++) {
+    const part = parts[i];
+    if (/^\d+(?:ms|s)?$/.test(part)) {
+      const value = Number.parseInt(part, 10);
+      if (i === 0)
+        result.duration = part.endsWith("s") && !part.endsWith("ms") ? value * 1000 : value;
+      else
+        result.delay = part.endsWith("s") && !part.endsWith("ms") ? value * 1000 : value;
+    } else if (part === "infinite" || /^\d+$/.test(part))
+      result.iterations = part === "infinite" ? "infinite" : Number.parseInt(part, 10);
+    else if (["normal", "reverse", "alternate", "alternate-reverse"].includes(part))
+      result.direction = part;
+    else if (["none", "forwards", "backwards", "both"].includes(part))
+      result.fill = part;
+    else
+      result.easing = part;
+  }
+  return result;
+}
+export function generateAnimationRuntime() {
+  return `
+<script data-stx-scoped data-stx-run="once">
+window.__stxAnimation = {
+  // Registry of animations
+  animations: new Map(),
+
+  // Register a reusable animation
+  register(name, keyframes, options) {
+    this.animations.set(name, { keyframes, options });
+  },
+
+  // Run an animation on an element
+  animate(element, nameOrKeyframes, options = {}) {
+    if (typeof element === 'string') {
+      element = document.querySelector(element);
+    }
+    if (!element) return null;
+
+    let keyframes, defaultOptions;
+
+    if (typeof nameOrKeyframes === 'string' && this.animations.has(nameOrKeyframes)) {
+      const registered = this.animations.get(nameOrKeyframes);
+      keyframes = registered.keyframes;
+      defaultOptions = registered.options;
+    }
+else {
+      keyframes = nameOrKeyframes;
+      defaultOptions = {};
+    }
+
+    const finalOptions = { ...defaultOptions, ...options };
+    return element.animate(keyframes, finalOptions);
+  },
+
+  // Animate multiple elements with stagger
+  stagger(elements, keyframes, options = {}, staggerDelay = 100) {
+    if (typeof elements === 'string') {
+      elements = document.querySelectorAll(elements);
+    }
+
+    const animations = [];
+    Array.from(elements).forEach((el, index) => {
+      const elementOptions = {
+        ...options,
+        delay: (options.delay || 0) + (index * staggerDelay)
+      };
+      animations.push(this.animate(el, keyframes, elementOptions));
+    });
+
+    return animations;
+  },
+
+  // Chain animations sequentially
+  async sequence(steps) {
+    for (const step of steps) {
+      const animation = this.animate(step.element, step.keyframes, step.options);
+      if (animation) {
+        await animation.finished;
+      }
+    }
+  },
+
+  // Run animations in parallel
+  parallel(steps) {
+    return Promise.all(
+      steps.map(step => {
+        const animation = this.animate(step.element, step.keyframes, step.options);
+        return animation ? animation.finished : Promise.resolve();
+      })
+    );
+  }
+};
+</script>`;
+}
+export function registerAnimationDirectives(options) {
+  const customDirectives = options.customDirectives || [];
+  customDirectives.push(transitionDirective);
+  customDirectives.push(animationGroupDirective);
+  customDirectives.push(motionDirective);
+  customDirectives.push(scrollAnimateDirective);
+  customDirectives.push(keyframeDirective);
+  customDirectives.push(staggerDirective);
+  customDirectives.push(springDirective);
+  return {
+    ...options,
+    customDirectives
+  };
+}