@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/chunk-FS2HJVVY.js

@@ -0,0 +1,3320 @@
+import {
+  EASE,
+  ELASTIC,
+  Flip,
+  ScrollTrigger,
+  SplitText,
+  bindPointer,
+  clearStyles,
+  countTo,
+  createMenu,
+  flowIn,
+  gsap,
+  motionSpring,
+  pointer,
+  registerMotion,
+  revealFrom,
+  splitGraphemes,
+  takeMovement
+} from "./chunk-34XYOXHG.js";
+import {
+  clamp,
+  damp,
+  mapRange,
+  wrap
+} from "./chunk-KLY5BRRI.js";
+import {
+  TIMING,
+  createScope,
+  entrances,
+  reduced,
+  whileVisible
+} from "./chunk-RFDIZYFX.js";
+import {
+  inert,
+  warnOnce
+} from "./chunk-TGV27ZWM.js";
+
+// src/core/scroll-track.ts
+var clamp01 = (value) => Math.min(1, Math.max(0, value));
+function edgeOf(box, edge) {
+  if (edge === "top") return box.top;
+  if (edge === "bottom") return box.bottom;
+  if (edge === "center") return box.top + box.height / 2;
+  if (edge.endsWith("%")) return box.top + box.height * parseFloat(edge) / 100;
+  return box.top + (parseFloat(edge) || 0);
+}
+function lineOf(height, line) {
+  if (line === "top") return 0;
+  if (line === "bottom") return height;
+  if (line === "center") return height / 2;
+  if (line.endsWith("%")) return height * parseFloat(line) / 100;
+  return parseFloat(line) || 0;
+}
+function trackScroll(el, { start = "top bottom", end = "bottom top", lerp = 1, onUpdate } = {}) {
+  const [startEdge = "top", startLine = "bottom"] = start.trim().split(/\s+/);
+  const [endEdge = "bottom", endLine = "top"] = end.trim().split(/\s+/);
+  let destroyed = false;
+  const measure = () => {
+    const box = el.getBoundingClientRect();
+    const height = window.innerHeight;
+    const fromStart = lineOf(height, startLine) - edgeOf(box, startEdge);
+    const fromEnd = lineOf(height, endLine) - edgeOf(box, endEdge);
+    const distance = fromStart - fromEnd;
+    if (distance <= 0) return fromStart >= 0 ? 1 : 0;
+    return clamp01(fromStart / distance);
+  };
+  let target = measure();
+  let value = target;
+  onUpdate?.(value);
+  const update = (dt = 1) => {
+    if (destroyed) return;
+    target = measure();
+    const step = lerp >= 1 ? 1 : 1 - Math.pow(1 - Math.max(lerp, 0), dt);
+    value += (target - value) * step;
+    if (Math.abs(target - value) < 1e-4) value = target;
+    onUpdate?.(value);
+  };
+  const stop = whileVisible(el, update, "200px");
+  return {
+    get value() {
+      return value;
+    },
+    get target() {
+      return target;
+    },
+    measure,
+    update,
+    set(next) {
+      if (destroyed) return;
+      value = target = clamp01(next);
+      onUpdate?.(value);
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      stop();
+    }
+  };
+}
+
+// src/motion/details.ts
+var running = /* @__PURE__ */ new WeakMap();
+function toggleDetails(details, open, { duration = TIMING.details } = {}) {
+  registerMotion();
+  const summary = details.querySelector(":scope > summary");
+  const chevron = summary?.querySelector("[data-mk-chevron]");
+  running.get(details)?.kill();
+  if (!summary || reduced()) {
+    details.open = open;
+    if (chevron) gsap.set(chevron, { rotation: open ? 180 : 0 });
+    return null;
+  }
+  const from = details.offsetHeight;
+  const content = [...details.children].filter((child) => child !== summary && child instanceof HTMLElement);
+  details.style.height = "";
+  details.open = false;
+  const closed = details.offsetHeight;
+  details.open = true;
+  const to = open ? details.offsetHeight : closed;
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      if (!open) details.open = false;
+      gsap.set(details, { clearProps: "height,overflow,boxSizing" });
+      gsap.set(content, { clearProps: "opacity" });
+      running.delete(details);
+    }
+  });
+  if (from !== to) {
+    timeline.fromTo(details, { height: from, overflow: "hidden", boxSizing: "border-box" }, { height: to, duration, ease: EASE.signature }, 0);
+  }
+  timeline.fromTo(content, { opacity: open ? 0 : 1 }, { opacity: open ? 1 : 0, duration, ease: EASE.signature }, 0);
+  if (chevron) timeline.to(chevron, { rotation: open ? 180 : 0, duration: TIMING.chevron, ease: EASE.signature }, 0);
+  running.set(details, timeline);
+  return timeline;
+}
+function installDetailsMotion(root = document) {
+  const onClick = (event) => {
+    const mouse = event;
+    if (mouse.defaultPrevented || mouse.button !== 0) return;
+    const target = mouse.target instanceof Element ? mouse.target : null;
+    const summary = target?.closest("summary");
+    const details = summary?.parentElement;
+    if (!summary || !(details instanceof HTMLDetailsElement)) return;
+    if (details.querySelector(":scope > summary") !== summary) return;
+    if (details.dataset.mkMotion === "none") return;
+    const control = target?.closest("a, button, input, select, textarea");
+    if (control && control !== summary && summary.contains(control)) return;
+    mouse.preventDefault();
+    toggleDetails(details, !details.open);
+  };
+  root.addEventListener("click", onClick);
+  return () => root.removeEventListener("click", onClick);
+}
+
+// src/motion/indicator.ts
+function slideIndicator(indicator, target, options = {}) {
+  registerMotion();
+  const { immediate = false, duration = TIMING.indicator, scroller, orientation = "horizontal" } = options;
+  gsap.killTweensOf(indicator);
+  if (!target) {
+    gsap.set(indicator, { opacity: 0 });
+    return null;
+  }
+  const box = { x: target.offsetLeft, y: target.offsetTop, width: target.offsetWidth, height: target.offsetHeight, opacity: 1 };
+  if (scroller) {
+    const horizontal = orientation === "horizontal";
+    const overflow = horizontal ? scroller.scrollWidth > scroller.clientWidth : scroller.scrollHeight > scroller.clientHeight;
+    if (overflow && typeof scroller.scrollTo === "function") {
+      const offset = horizontal ? box.x - (scroller.clientWidth - box.width) / 2 : box.y - (scroller.clientHeight - box.height) / 2;
+      scroller.scrollTo({ [horizontal ? "left" : "top"]: offset, behavior: immediate || reduced() ? "auto" : "smooth" });
+    }
+  }
+  if (immediate || reduced()) {
+    gsap.set(indicator, box);
+    return null;
+  }
+  return gsap.to(indicator, { ...box, duration, ease: EASE.signature });
+}
+
+// src/motion/layout.ts
+function captureLayout(root, selector) {
+  registerMotion();
+  const items = [...root.querySelectorAll(selector)];
+  return { state: Flip.getState(items), ids: new Set(items.map((item) => item.dataset.flipId)) };
+}
+function reflowLayout(root, selector, captured, { duration = TIMING.layoutTravel } = {}) {
+  registerMotion();
+  if (reduced()) return null;
+  const targets = [...root.querySelectorAll(selector)];
+  return Flip.from(captured.state, {
+    targets,
+    duration,
+    ease: EASE.layoutReflow,
+    zIndex: 3,
+    onEnter: (elements) => gsap.fromTo(
+      elements,
+      { opacity: 0, scale: 0.94 },
+      { opacity: 1, scale: 1, duration: duration * TIMING.layoutEnterFactor, ease: EASE.layoutReflow, clearProps: "opacity,transform" }
+    )
+  });
+}
+
+// src/core/spring.ts
+function createSpring(stiffness = 0.05, friction = 0.8) {
+  const current = { x: 0, y: 0 };
+  const target = { x: 0, y: 0 };
+  const velocity = { x: 0, y: 0 };
+  function update(dt = 1) {
+    const decay = Math.pow(friction, dt);
+    for (const axis of ["x", "y"]) {
+      velocity[axis] = velocity[axis] * decay + (target[axis] - current[axis]) * stiffness * dt;
+      current[axis] = Math.round((current[axis] + velocity[axis] * dt) * 100) / 100;
+    }
+  }
+  return { current, target, velocity, update };
+}
+
+// src/recipes/spring-cards/create-spring-cards.ts
+var VARS = ["--mk-x", "--mk-y", "--mk-velocity"];
+var rand = (min, max) => Math.random() * (max - min) + min;
+function createSpringCards(root, options = {}) {
+  const o = {
+    selector: "[data-mk-card]",
+    initialOffset: 100,
+    releaseAfter: 100,
+    push: 0.4,
+    falloff: 6,
+    damping: 0.9,
+    stiffness: 0.05,
+    friction: 0.8,
+    entrance: true,
+    stagger: 0.08,
+    delay: 0.4,
+    ...options
+  };
+  const elements = root ? [...root.querySelectorAll(o.selector)] : [];
+  if (!root || !elements.length) {
+    warnOnce(`spring-cards: no "${o.selector}" inside the root`);
+    return inert();
+  }
+  registerMotion();
+  const scope = createScope();
+  const ctx = gsap.context(() => {
+  });
+  scope.add(() => ctx.revert());
+  if (o.entrance && entrances()) {
+    ctx.add(() => gsap.fromTo(elements, { scale: 0 }, { scale: 1, duration: 1, ease: ELASTIC, stagger: o.stagger, delay: o.delay }));
+  }
+  root.dataset.mkReady = "";
+  scope.add(() => {
+    delete root.dataset.mkReady;
+    elements.forEach((el) => VARS.forEach((name) => el.style.removeProperty(name)));
+  });
+  if (reduced()) return { destroy: () => scope.dispose() };
+  scope.add(bindPointer());
+  const cards = elements.map((el) => {
+    const spring = createSpring(o.stiffness, o.friction);
+    spring.current.x = spring.target.x = rand(-o.initialOffset, o.initialOffset);
+    spring.current.y = spring.target.y = rand(-o.initialOffset, o.initialOffset);
+    return { el, spring, push: { x: 0, y: 0 }, cx: 0, cy: 0 };
+  });
+  scope.timeout(() => cards.forEach(({ spring }) => spring.target.x = spring.target.y = 0), o.releaseAfter);
+  const measure = () => cards.forEach((card) => {
+    const rect = card.el.getBoundingClientRect();
+    card.cx = rect.left + scrollX + rect.width / 2;
+    card.cy = rect.top + scrollY + rect.height / 2;
+  });
+  measure();
+  scope.observe(new ResizeObserver(measure)).observe(root);
+  scope.add(
+    whileVisible(root, (dt) => {
+      const movement = takeMovement();
+      const mx = clamp(movement.mx, -80, 80);
+      const my = clamp(movement.my, -80, 80);
+      const decay = Math.pow(o.damping, dt);
+      for (const card of cards) {
+        const { spring, push } = card;
+        push.x *= decay;
+        push.y *= decay;
+        spring.current.x += push.x * dt;
+        spring.current.y += push.y * dt;
+        spring.update(dt);
+        if (pointer.active) {
+          const dx = (pointer.x + scrollX - card.cx) / innerWidth * 2;
+          const dy = (pointer.y + scrollY - card.cy) / innerHeight * 2;
+          const k = Math.pow(Math.max(0, 1 - Math.hypot(dx, dy)), o.falloff) * o.push;
+          push.x += mx * k;
+          push.y += my * k;
+        }
+        const style = card.el.style;
+        style.setProperty("--mk-x", spring.current.x.toFixed(2));
+        style.setProperty("--mk-y", spring.current.y.toFixed(2));
+        style.setProperty("--mk-velocity", (spring.velocity.x - spring.velocity.y).toFixed(3));
+      }
+    })
+  );
+  return { destroy: () => scope.dispose() };
+}
+
+// src/core/visible.ts
+function thresholds(threshold) {
+  const steps = Array.from({ length: 11 }, (_, i) => i / 10);
+  return [.../* @__PURE__ */ new Set([...steps, threshold])].sort((a, b) => a - b);
+}
+function shows(entry, threshold) {
+  if (!entry.isIntersecting) return false;
+  if (entry.intersectionRatio >= threshold) return true;
+  return entry.rootBounds ? entry.intersectionRect.height >= entry.rootBounds.height * threshold : false;
+}
+
+// src/recipes/curved-carousel/carousel-math.ts
+var FRICTION = 0.85;
+function slideX(k, offset, step, length) {
+  return wrap(k * step - offset + step, length) - step;
+}
+var restingOffset = (offset, v, f = FRICTION) => offset - v * f / (1 - f);
+function snapOffset(offset, v, step, center, f = FRICTION, dir = 0) {
+  const base = dir === 0 ? restingOffset(offset, v, f) : offset;
+  return (Math.round((base + center) / step) + dir) * step - center;
+}
+
+// src/recipes/curved-carousel/create-curved-carousel.ts
+function createCurvedCarousel(root, options = {}) {
+  const o = {
+    slideSelector: "[data-mk-slide]",
+    friction: FRICTION,
+    throwBoost: 2,
+    wheel: 0.2,
+    tapDistance: 6,
+    startIndex: 0,
+    ...options
+  };
+  o.friction = Math.min(0.99, Math.max(0.5, o.friction));
+  const slides = root ? [...root.querySelectorAll(o.slideSelector)] : [];
+  const count = slides.length;
+  if (!root || !count) {
+    warnOnce(`curved-carousel: no "${o.slideSelector}" inside the root`);
+    return inert({ next() {
+    }, prev() {
+    }, goTo() {
+    }, index: 0 });
+  }
+  registerMotion();
+  const scope = createScope();
+  root.dataset.mkCarousel = "";
+  slides.forEach((slide, k) => slide.style.setProperty("--mk-k", String(k)));
+  scope.add(() => {
+    delete root.dataset.mkCarousel;
+    delete root.dataset.mkReady;
+    delete root.dataset.mkInview;
+    slides.forEach((slide) => ["--mk-k", "--mk-x", "--mk-t"].forEach((name) => slide.style.removeProperty(name)));
+  });
+  let rootW = 0;
+  let slideW = 0;
+  let step = 1;
+  let length = count;
+  let center = 0;
+  let offset = 0;
+  let v = 0;
+  let target = null;
+  let measured = false;
+  let down = false;
+  let dragDelta = 0;
+  let lastX = 0;
+  let travelled = 0;
+  let suppressClick = false;
+  let wheelTimer;
+  scope.add(() => clearTimeout(wheelTimer));
+  const render = () => {
+    for (let k = 0; k < count; k++) {
+      const x = slideX(k, offset, step, length);
+      const style = slides[k].style;
+      style.setProperty("--mk-x", x.toFixed(2));
+      style.setProperty("--mk-t", (x + slideW / 2 - rootW / 2).toFixed(2));
+    }
+  };
+  const centred = (k) => {
+    const base = k * step - center;
+    return base + Math.round((offset - base) / length) * length;
+  };
+  const settleTo = (next) => {
+    target = next;
+    if (!reduced()) return;
+    offset = next;
+    target = null;
+    v = 0;
+    render();
+  };
+  const measure = () => {
+    const previousCenter = center;
+    rootW = root.clientWidth;
+    slideW = slides[0].offsetWidth;
+    const gap = parseFloat(getComputedStyle(root).columnGap) || 16;
+    const index = measured ? (offset + previousCenter) / step : o.startIndex;
+    step = slideW + gap || 1;
+    length = count * step;
+    center = (rootW - slideW) / 2;
+    offset = index * step - center;
+    if (target !== null) target = Math.round((target + previousCenter) / step) * step - center;
+    measured = true;
+    render();
+  };
+  const tick = (dt) => {
+    if (down) {
+      v = dragDelta;
+      dragDelta = 0;
+      offset -= v;
+    } else if (target !== null) {
+      const next = offset + (target - offset) * (1 - Math.pow(o.friction, dt));
+      v = offset - next;
+      offset = next;
+      if (Math.abs(target - offset) < 0.1) {
+        offset = target;
+        target = null;
+        v = 0;
+      }
+    } else if (Math.abs(v) > 0.01) {
+      v *= Math.pow(o.friction, dt);
+      offset -= v * dt;
+    } else {
+      return;
+    }
+    render();
+  };
+  scope.on(root, "pointerdown", (e) => {
+    if (e.button !== 0) return;
+    if (e.pointerType === "mouse") e.preventDefault();
+    down = true;
+    target = null;
+    dragDelta = 0;
+    travelled = 0;
+    lastX = e.clientX;
+  });
+  scope.on(
+    window,
+    "pointermove",
+    (e) => {
+      if (!down) return;
+      const dx = e.clientX - lastX;
+      lastX = e.clientX;
+      dragDelta += dx;
+      travelled += Math.abs(dx);
+    },
+    { passive: true }
+  );
+  const release = (cancelled) => {
+    if (!down) return;
+    down = false;
+    suppressClick = travelled > o.tapDistance;
+    const throwV = cancelled || reduced() ? 0 : v * o.throwBoost;
+    settleTo(snapOffset(offset, throwV, step, center, o.friction));
+  };
+  scope.on(window, "pointerup", () => release(false));
+  scope.on(window, "pointercancel", () => release(true));
+  scope.on(
+    root,
+    "click",
+    (e) => {
+      if (!suppressClick) return;
+      suppressClick = false;
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    true
+  );
+  scope.on(root, "click", (e) => {
+    const slide = e.target.closest(o.slideSelector);
+    if (slide && root.contains(slide)) o.onSelect?.(slides.indexOf(slide), slide);
+  });
+  scope.on(
+    root,
+    "wheel",
+    (e) => {
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+      e.preventDefault();
+      target = null;
+      if (reduced()) {
+        offset += e.deltaX;
+        render();
+      } else {
+        v -= e.deltaX * o.wheel;
+      }
+      clearTimeout(wheelTimer);
+      wheelTimer = setTimeout(() => settleTo(snapOffset(offset, v, step, center, o.friction)), 150);
+    },
+    { passive: false }
+  );
+  const stepBy = (dir) => settleTo(snapOffset(target ?? offset, 0, step, center, o.friction, dir));
+  scope.on(root, "keydown", (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    e.preventDefault();
+    stepBy(e.key === "ArrowLeft" ? -1 : 1);
+  });
+  scope.on(root, "focusin", (e) => {
+    const slide = e.target.closest(o.slideSelector);
+    if (!slide || down) return;
+    settleTo(centred(slides.indexOf(slide)));
+  });
+  scope.observe(new ResizeObserver(measure)).observe(root);
+  scope.observe(
+    new IntersectionObserver(
+      ([entry]) => {
+        if (entry && shows(entry, 0.2)) root.dataset.mkInview = "";
+      },
+      { threshold: thresholds(0.2) }
+    )
+  ).observe(root);
+  scope.add(whileVisible(root, tick));
+  measure();
+  root.dataset.mkReady = "";
+  return {
+    destroy: () => scope.dispose(),
+    next: () => stepBy(1),
+    prev: () => stepBy(-1),
+    goTo: (index) => settleTo(centred(wrap(Math.round(index), count))),
+    get index() {
+      return wrap(Math.round(((target ?? offset) + center) / step), count);
+    }
+  };
+}
+
+// src/recipes/pile/pile-math.ts
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function pileLayers(count, seed) {
+  const rand2 = mulberry32(seed + 1);
+  const range = (min, max) => rand2() * (max - min) + min;
+  return Array.from({ length: count }, (_, i) => ({
+    rotation: range(2, 5) * (i % 2 * 2 - 1),
+    offsetX: range(4, 10) * (rand2() < 0.5 ? -1 : 1),
+    offsetY: (count - i) * 5
+  }));
+}
+
+// src/recipes/pile/create-pile.ts
+var pileStyle = (layer) => `--mk-rot:${layer.rotation.toFixed(2)};--mk-px:${layer.offsetX.toFixed(2)};--mk-py:${layer.offsetY}`;
+function createPile(root, options = {}) {
+  if (!root) {
+    warnOnce("pile: missing root");
+    return inert();
+  }
+  const scope = createScope();
+  const threshold = Math.min(1, Math.max(0, options.threshold ?? 0.25));
+  const io = scope.observe(
+    new IntersectionObserver(
+      ([entry]) => {
+        if (!entry || !shows(entry, threshold)) return;
+        root.dataset.mkInview = "";
+        io.disconnect();
+      },
+      { threshold: thresholds(threshold) }
+    )
+  );
+  io.observe(root);
+  root.dataset.mkReady = "";
+  scope.add(() => {
+    delete root.dataset.mkInview;
+    delete root.dataset.mkReady;
+  });
+  return { destroy: () => scope.dispose() };
+}
+
+// src/recipes/words/create-words.ts
+var HIDDEN = { scaleY: 0, yPercent: 25 };
+function createWords(el, options = {}) {
+  if (!el) {
+    warnOnce("words: missing element");
+    return inert({ reveal() {
+    }, replace(mutate) {
+      mutate();
+    } });
+  }
+  const letters2 = options.by === "chars";
+  const o = {
+    trigger: "scroll",
+    start: "top 88%",
+    duration: 0.8,
+    stagger: letters2 ? 0.06 : 0.1,
+    delay: 0,
+    ...options
+  };
+  registerMotion();
+  let split = null;
+  let scroll = null;
+  let destroyed = false;
+  const units = () => split ? letters2 ? split.chars : split.words : [];
+  const rendered = () => el.getClientRects().length > 0;
+  const prepare = () => {
+    split = SplitText.create(el, {
+      type: letters2 ? "chars" : "words",
+      charsClass: "mk-w",
+      wordsClass: "mk-w",
+      // Headings get an aria-label; inline elements stay readable as they are.
+      aria: /^H[1-6]$/.test(el.tagName) ? "auto" : "none",
+      smartWrap: letters2
+    });
+    const list = units();
+    if (list.length) gsap.set(list, { transformOrigin: "50% 100%", ...HIDDEN });
+  };
+  const release = () => {
+    if (!split) return;
+    gsap.killTweensOf(units());
+    split.revert();
+    split = null;
+  };
+  function reveal(delay = o.delay) {
+    if (destroyed) return;
+    scroll?.kill();
+    scroll = null;
+    if (!entrances()) return;
+    if (!split) prepare();
+    const list = units();
+    if (!list.length) return;
+    gsap.killTweensOf(list);
+    gsap.fromTo(list, HIDDEN, { scaleY: 1, yPercent: 0, duration: o.duration, ease: ELASTIC, stagger: o.stagger, delay });
+  }
+  function replace(mutate) {
+    release();
+    mutate();
+    if (entrances() && rendered()) {
+      prepare();
+      reveal(0);
+    }
+  }
+  if (entrances() && rendered()) prepare();
+  el.dataset.mkReady = "";
+  if (o.trigger === "load") reveal(o.delay || 0.2);
+  else if (o.trigger === "scroll" && entrances()) {
+    scroll = ScrollTrigger.create({ trigger: el, start: o.start, end: "max", once: true, onEnter: () => reveal() });
+  }
+  return {
+    reveal,
+    replace,
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      scroll?.kill();
+      release();
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/flow/create-flow.ts
+function createFlow(container, options = {}) {
+  if (!container) {
+    warnOnce("flow: missing container");
+    return inert({ play() {
+    } });
+  }
+  registerMotion();
+  const children = [...container.children];
+  const animate = entrances() && children.length > 0;
+  const ctx = gsap.context(() => {
+  });
+  let played = !animate;
+  const play = () => {
+    if (played) return;
+    played = true;
+    ctx.add(() => flowIn(children, options));
+  };
+  if (animate) {
+    ctx.add(() => {
+      gsap.set(children, { autoAlpha: 0 });
+      if (options.trigger === "load") play();
+      else if (options.trigger !== "manual") {
+        ScrollTrigger.create({ trigger: container, start: options.start ?? "top 88%", end: "max", once: true, onEnter: play });
+      }
+    });
+  }
+  container.dataset.mkReady = "";
+  return {
+    play,
+    destroy() {
+      ctx.revert();
+      delete container.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/pop/create-pop.ts
+function createPop(el, options = {}) {
+  if (!el) {
+    warnOnce("pop: missing element");
+    return inert({ play() {
+    } });
+  }
+  registerMotion();
+  const { scale = 0.7, duration = 1.1, delay = 0, trigger = "scroll", start = "top 85%" } = options;
+  const animate = entrances();
+  const ctx = gsap.context(() => {
+  });
+  let played = !animate;
+  const play = () => {
+    if (played) return;
+    played = true;
+    ctx.add(() => gsap.to(el, { scale: 1, autoAlpha: 1, duration, delay, ease: ELASTIC }));
+  };
+  if (animate) {
+    ctx.add(() => {
+      gsap.set(el, { scale, autoAlpha: 0 });
+      if (trigger === "load") play();
+      else if (trigger !== "manual") ScrollTrigger.create({ trigger: el, start, end: "max", once: true, onEnter: play });
+    });
+  }
+  el.dataset.mkReady = "";
+  return {
+    play,
+    destroy() {
+      ctx.revert();
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/fit-text/create-fit-text.ts
+function createFitText(el, options = {}) {
+  const parent = el?.parentElement;
+  if (!el || !parent) {
+    warnOnce("fit-text: element needs a parent");
+    return inert({ refit() {
+    } });
+  }
+  const safety = Math.min(1, Math.max(0.5, options.safety ?? 0.995));
+  const scope = createScope();
+  const previousSize = el.style.fontSize;
+  const refit = () => {
+    const style = getComputedStyle(parent);
+    const available = parent.clientWidth - parseFloat(style.paddingLeft || "0") - parseFloat(style.paddingRight || "0");
+    el.style.fontSize = "100px";
+    const width = el.getBoundingClientRect().width;
+    if (width > 0 && available > 0) el.style.fontSize = `${100 * available * safety / width}px`;
+    else el.style.fontSize = previousSize;
+  };
+  let lastWidth = -1;
+  scope.observe(
+    new ResizeObserver(([entry]) => {
+      const width = entry?.contentRect.width ?? 0;
+      if (width === lastWidth) return;
+      lastWidth = width;
+      refit();
+    })
+  ).observe(parent);
+  refit();
+  el.dataset.mkReady = "";
+  scope.add(() => {
+    el.style.fontSize = previousSize;
+    if (!el.getAttribute("style")) el.removeAttribute("style");
+    delete el.dataset.mkReady;
+  });
+  return { refit, destroy: () => scope.dispose() };
+}
+
+// src/recipes/stretch-footer/create-stretch-footer.ts
+function createStretchFooter(footer, options = {}) {
+  const phantom = options.phantom ?? document.querySelector("[data-mk-phantom]");
+  const title = options.title ?? footer?.querySelector("[data-mk-footer-title]") ?? null;
+  if (!footer || !phantom || !title) {
+    warnOnce("stretch-footer: needs the footer, a [data-mk-phantom] spacer and a [data-mk-footer-title]");
+    return inert();
+  }
+  registerMotion();
+  const scope = createScope();
+  footer.dataset.mkReady = "";
+  scope.add(() => {
+    delete footer.dataset.mkReady;
+    footer.style.removeProperty("--mk-footer-scale");
+    footer.style.removeProperty("--mk-footer-offset");
+    if (!footer.getAttribute("style")) footer.removeAttribute("style");
+  });
+  if (reduced()) return { destroy: () => scope.dispose() };
+  const lambda = options.lambda ?? 0.9;
+  let phantomTop = 0;
+  let titleBottom = 0;
+  let viewport = innerHeight;
+  let g = scrollY;
+  const measure = () => {
+    phantomTop = phantom.offsetTop;
+    titleBottom = title.offsetTop + title.offsetHeight;
+    viewport = innerHeight;
+  };
+  measure();
+  scope.observe(new ResizeObserver(measure)).observe(document.body);
+  scope.on(window, "resize", measure);
+  const update = (dt) => {
+    g = damp(g, scrollY, lambda, dt);
+    const start = phantomTop - viewport;
+    footer.style.setProperty("--mk-footer-scale", mapRange(g, start, phantomTop, 0, 1, true).toFixed(4));
+    footer.style.setProperty("--mk-footer-offset", mapRange(g, start, phantomTop, viewport - titleBottom, 0, true).toFixed(2));
+  };
+  update(100);
+  scope.add(whileVisible(phantom, update, "0px"));
+  return { destroy: () => scope.dispose() };
+}
+
+// src/recipes/radial-menu/create-radial-menu.ts
+var noop = { open() {
+}, close() {
+}, toggle() {
+}, isOpen: false };
+function createRadialMenu(root, options = {}) {
+  const toggleEl = root?.querySelector("[data-mk-toggle]");
+  const items = root ? [...root.querySelectorAll("[data-mk-item]")] : [];
+  if (!root || !toggleEl || !items.length) {
+    warnOnce("radial-menu: needs a [data-mk-toggle] and at least one [data-mk-item]");
+    return inert(noop);
+  }
+  const scope = createScope();
+  const expandedBefore = toggleEl.getAttribute("aria-expanded");
+  const inertBefore = items.map((item) => item.hasAttribute("inert"));
+  const vars = [
+    ["--mk-radius", options.radius],
+    ["--mk-start", options.startAngle?.toString()],
+    ["--mk-spacing", options.spacing?.toString()]
+  ];
+  vars.forEach(([name, value]) => value !== void 0 && root.style.setProperty(name, value));
+  items.forEach((item, i) => item.style.setProperty("--mk-i", String(i)));
+  let open = false;
+  const set = (next) => {
+    open = next;
+    root.toggleAttribute("data-mk-open", open);
+    toggleEl.setAttribute("aria-expanded", String(open));
+    items.forEach((item) => item.inert = !open);
+    options.onToggle?.(open);
+  };
+  set(false);
+  scope.on(toggleEl, "click", () => set(!open));
+  scope.on(root, "keydown", (e) => {
+    if (e.key !== "Escape" || !open) return;
+    set(false);
+    toggleEl.focus();
+  });
+  if (options.closeOnOutside ?? true) {
+    scope.on(document, "pointerdown", (e) => {
+      if (open && !root.contains(e.target)) set(false);
+    });
+  }
+  root.dataset.mkReady = "";
+  scope.add(() => {
+    root.removeAttribute("data-mk-open");
+    delete root.dataset.mkReady;
+    if (expandedBefore === null) toggleEl.removeAttribute("aria-expanded");
+    else toggleEl.setAttribute("aria-expanded", expandedBefore);
+    items.forEach((item, i) => {
+      item.inert = inertBefore[i];
+      item.style.removeProperty("--mk-i");
+      if (!item.getAttribute("style")) item.removeAttribute("style");
+    });
+    vars.forEach(([name]) => root.style.removeProperty(name));
+    if (!root.getAttribute("style")) root.removeAttribute("style");
+  });
+  return {
+    open: () => set(true),
+    close: () => set(false),
+    toggle: () => set(!open),
+    get isOpen() {
+      return open;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/recipes/tabs/create-tabs.ts
+function createTabs(root, options = {}) {
+  const tabs = root ? [...root.querySelectorAll("[data-mk-tab]")] : [];
+  if (!root || !tabs.length) {
+    warnOnce("tabs: needs at least one [data-mk-tab]");
+    return inert({ select() {
+    }, index: 0 });
+  }
+  registerMotion();
+  const { orientation = "horizontal", duration = TIMING.indicator } = options;
+  const indicator = root.querySelector("[data-mk-indicator]");
+  const scope = createScope();
+  const ctx = gsap.context(() => {
+  });
+  let index = Math.max(0, tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true"));
+  scope.attr(root, "role", "tablist");
+  if (orientation === "vertical") scope.attr(root, "aria-orientation", "vertical");
+  const render = (immediate) => {
+    tabs.forEach((tab, i) => {
+      scope.attr(tab, "role", "tab");
+      scope.attr(tab, "aria-selected", String(i === index));
+      scope.attr(tab, "tabindex", i === index ? "0" : "-1");
+    });
+    if (indicator) ctx.add(() => slideIndicator(indicator, tabs[index], { immediate, duration, scroller: root, orientation }));
+  };
+  const select = (next, focus = false) => {
+    const target = Math.min(tabs.length - 1, Math.max(0, next));
+    if (focus) tabs[target].focus();
+    if (target === index) return;
+    index = target;
+    render(false);
+    root.dispatchEvent(new CustomEvent("mk:tab", { detail: { index, tab: tabs[index] }, bubbles: true }));
+    options.onSelect?.(index, tabs[index]);
+  };
+  scope.on(root, "click", (event) => {
+    const tab = event.target?.closest("[data-mk-tab]");
+    const at = tab ? tabs.indexOf(tab) : -1;
+    if (at >= 0) select(at);
+  });
+  scope.on(root, "keydown", (event) => {
+    const key = event.key;
+    const back = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+    const forward = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+    const moves = { [back]: index - 1, [forward]: index + 1, Home: 0, End: tabs.length - 1 };
+    if (!(key in moves)) return;
+    event.preventDefault();
+    select(moves[key], true);
+  });
+  if (typeof ResizeObserver === "function") {
+    scope.observe(new ResizeObserver(() => render(true))).observe(root);
+  }
+  render(true);
+  root.dataset.mkReady = "";
+  return {
+    select: (next) => select(next),
+    get index() {
+      return index;
+    },
+    destroy() {
+      scope.dispose();
+      ctx.revert();
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/counter/create-counter.ts
+function createCounter(el, options = {}) {
+  if (!el) {
+    warnOnce("counter: missing element");
+    return inert({ play() {
+    }, set() {
+    } });
+  }
+  registerMotion();
+  const original = el.textContent ?? "";
+  const parsed = Number(original.replace(/[^\d.-]/g, ""));
+  const {
+    to = Number.isFinite(parsed) ? parsed : 0,
+    from = 0,
+    duration = TIMING.number,
+    decimals = 0,
+    locale,
+    prefix = "",
+    suffix = "",
+    trigger = "scroll",
+    start = "top 90%"
+  } = options;
+  const format = (value) => prefix + value.toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) + suffix;
+  const ctx = gsap.context(() => {
+  });
+  let played = false;
+  const play = () => {
+    if (played) return;
+    played = true;
+    ctx.add(() => countTo(el, to, { from, duration, format }));
+  };
+  if (entrances()) {
+    el.textContent = format(from);
+    ctx.add(() => {
+      if (trigger === "load") play();
+      else if (trigger !== "manual") ScrollTrigger.create({ trigger: el, start, end: "max", once: true, onEnter: play });
+    });
+  } else {
+    played = true;
+    el.textContent = format(to);
+  }
+  el.dataset.mkReady = "";
+  return {
+    play,
+    set(value) {
+      played = true;
+      ctx.add(() => countTo(el, value, { duration, format }));
+    },
+    destroy() {
+      ctx.revert();
+      el.textContent = original;
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/details/create-details.ts
+function createDetails(root) {
+  if (!root) {
+    warnOnce("details: missing root");
+    return inert();
+  }
+  const uninstall = installDetailsMotion(root);
+  root.dataset.mkReady = "";
+  let destroyed = false;
+  return {
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      uninstall();
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/reveal/create-reveal.ts
+function createReveal(el, options = {}) {
+  if (!el) {
+    warnOnce("reveal: missing element");
+    return inert({ play() {
+    } });
+  }
+  const { speed = "normal", delay = 0, trigger = "manual" } = options;
+  let handle = null;
+  const play = (origin2) => {
+    handle?.cancel();
+    const from = origin2 ?? (options.origin ? document.querySelector(options.origin) : void 0);
+    handle = revealFrom(el, { speed, delay, origin: from });
+  };
+  if (trigger === "load" && entrances()) play();
+  el.dataset.mkReady = "";
+  return {
+    play,
+    destroy() {
+      handle?.cancel();
+      handle = null;
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/reflow/create-reflow.ts
+function createReflow(root, options = {}) {
+  if (!root) {
+    warnOnce("reflow: missing root");
+    return inert({ capture() {
+    }, play() {
+    } });
+  }
+  registerMotion();
+  const { selector = "[data-mk-item]", duration = TIMING.layoutTravel } = options;
+  const ctx = gsap.context(() => {
+  });
+  let captured = null;
+  root.dataset.mkReady = "";
+  return {
+    capture() {
+      captured = captureLayout(root, selector);
+    },
+    play() {
+      if (!captured) return;
+      const state = captured;
+      captured = null;
+      ctx.add(() => reflowLayout(root, selector, state, { duration }));
+    },
+    destroy() {
+      ctx.revert();
+      captured = null;
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/slot-text/create-slot-text.ts
+var EASING = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+var RESIZE_EASING = "cubic-bezier(0.2, 0, 0, 1)";
+var BOUNCE = 0.6;
+var VARIATION = { index: 12.9898, channel: 78.233, seed: 43758.5453, duration: 1, stagger: 2, tilt: 3 };
+var GLYPH = { tailDuration: 0.75, durationStrength: 0.45, tailStaggerStart: 0.5, tailStaggerStep: 0.25, staggerStrength: 0.25 };
+var WIDTH = { tailCollapseDelay: 0.55, tailCollapseDuration: 0.6, newSlotExpansion: 0.45, minimumChange: 0.5 };
+var COMPLETION_BUFFER = 80;
+var NBSP = "\xA0";
+var glyph = (letter) => letter === " " ? NBSP : letter;
+var letters = (text) => splitGraphemes(text, Number.MAX_SAFE_INTEGER);
+var noise = (index, channel) => {
+  const value = Math.sin((index + 1) * VARIATION.index + channel * VARIATION.channel) * VARIATION.seed;
+  return (value - Math.floor(value)) * 2 - 1;
+};
+var face = (letter) => {
+  const element = document.createElement("span");
+  element.className = "mk-slot__face";
+  element.textContent = glyph(letter);
+  return element;
+};
+var slot = (letter) => {
+  const element = document.createElement("span");
+  element.className = "mk-slot__char";
+  element.dataset.char = letter;
+  const sizer = document.createElement("span");
+  sizer.className = "mk-slot__sizer";
+  sizer.textContent = glyph(letter);
+  element.append(sizer, face(letter));
+  return element;
+};
+function build(target, text) {
+  const nodes = [];
+  let word = null;
+  for (const letter of letters(text)) {
+    if (letter === " ") {
+      if (word) word.append(slot(letter));
+      else nodes.push(slot(letter));
+      word = null;
+      continue;
+    }
+    if (!word) {
+      word = document.createElement("span");
+      word.className = "mk-slot__word";
+      nodes.push(word);
+    }
+    word.append(slot(letter));
+  }
+  target.replaceChildren(...nodes);
+}
+function createSlotText(el, options = {}) {
+  if (!el) {
+    warnOnce("slot-text: missing element");
+    return inert({ set() {
+    }, text: "" });
+  }
+  const {
+    direction = "down",
+    duration: baseDuration = TIMING.slot.durationMs,
+    stagger = TIMING.slot.staggerMs,
+    exitOffset = TIMING.slot.exitOffsetMs,
+    colorFade = TIMING.slot.colorFadeMs,
+    maxTilt = TIMING.slot.maxTilt
+  } = options;
+  const original = [...el.childNodes];
+  const originalText = el.textContent ?? "";
+  let text = options.text ?? originalText;
+  let timers = [];
+  let destroyed = false;
+  const copy = document.createElement("span");
+  copy.className = "mk-sr-only";
+  copy.textContent = text;
+  const track = document.createElement("span");
+  track.className = "mk-slot";
+  track.setAttribute("aria-hidden", "true");
+  build(track, text);
+  if (options.accessibleCopy === false) {
+    track.removeAttribute("aria-hidden");
+    el.replaceChildren(track);
+  } else el.replaceChildren(copy, track);
+  el.dataset.mkReady = "";
+  const stop = () => {
+    for (const timer of timers) clearTimeout(timer);
+    timers = [];
+  };
+  const roll = (next) => {
+    const interrupted = timers.length > 0;
+    stop();
+    if (interrupted) build(track, text);
+    let slots = [...track.querySelectorAll(".mk-slot__char")];
+    if (!slots.length || reduced()) {
+      build(track, next);
+      return;
+    }
+    const current = slots.map((entry) => entry.dataset.char ?? "");
+    const target = letters(next);
+    for (let index = slots.length; index < Math.max(current.length, target.length); index += 1) {
+      const extra = slot("");
+      track.append(extra);
+      slots = [...slots, extra];
+    }
+    const firstFilled = slots.find((entry) => (entry.dataset.char ?? "") !== "") ?? slots[0];
+    const height = Math.ceil(firstFilled?.getBoundingClientRect().height ?? 0) || 18;
+    const changes = slots.map((entry, index) => ({
+      index,
+      slot: entry,
+      sizer: entry.querySelector(".mk-slot__sizer"),
+      previous: entry.querySelector(".mk-slot__face"),
+      from: current[index] ?? "",
+      to: target[index] ?? "",
+      width: entry.getBoundingClientRect().width
+    })).filter(({ from, to }) => from !== to);
+    if (!changes.length) {
+      build(track, next);
+      return;
+    }
+    for (const change of changes) if (change.sizer) change.sizer.textContent = glyph(change.to);
+    const measured = changes.map((change) => {
+      const width = change.sizer?.getBoundingClientRect().width ?? change.width;
+      return { ...change, targetWidth: width, resize: Math.abs(width - change.width) > WIDTH.minimumChange };
+    });
+    const later = (run, ms) => timers.push(window.setTimeout(run, ms));
+    const enterFrom = direction === "down" ? -height : height;
+    const exitTo = -enterFrom;
+    let completion = 0;
+    const planned = measured.map((change) => {
+      const tail = change.to === "";
+      const vary = (strength, channel) => 1 + BOUNCE * strength * noise(change.index, channel);
+      const duration = Math.round(baseDuration * (tail ? GLYPH.tailDuration : 1) * vary(GLYPH.durationStrength, VARIATION.duration));
+      const order = tail ? target.length * GLYPH.tailStaggerStart + (change.index - target.length) * GLYPH.tailStaggerStep : change.index;
+      const delay = Math.round(order * stagger * vary(GLYPH.staggerStrength, VARIATION.stagger));
+      const tilt = Number((BOUNCE * maxTilt * noise(change.index, VARIATION.tilt)).toFixed(2));
+      const minimum = (factor) => Math.max(TIMING.slot.minResizeMs, Math.round(duration * factor));
+      const widthTiming = change.to === "" ? { delay: delay + Math.round(duration * WIDTH.tailCollapseDelay), duration: minimum(WIDTH.tailCollapseDuration) } : change.from === "" ? { delay, duration: minimum(WIDTH.newSlotExpansion) } : { delay, duration };
+      if (change.resize) change.slot.style.width = `${change.width}px`;
+      if (change.from === "" || change.to === "") change.slot.classList.add("is-resizing");
+      const incoming = face(change.to);
+      incoming.style.transform = `translateY(${enterFrom}px) rotate(${tilt}deg)`;
+      incoming.style.opacity = "0";
+      change.slot.append(incoming);
+      completion = Math.max(completion, change.resize ? widthTiming.delay + widthTiming.duration : 0, delay + exitOffset + duration);
+      return { change, duration, delay, tilt, widthTiming, incoming };
+    });
+    void track.offsetWidth;
+    for (const { change, duration, delay, tilt, widthTiming, incoming } of planned) {
+      const transition = `transform ${duration}ms ${EASING}, opacity ${colorFade}ms linear`;
+      if (change.resize) {
+        later(() => {
+          change.slot.style.transition = `width ${widthTiming.duration}ms ${RESIZE_EASING}`;
+          change.slot.style.width = `${change.targetWidth}px`;
+        }, widthTiming.delay);
+      }
+      if (change.previous) {
+        const previous = change.previous;
+        later(() => {
+          previous.style.transition = transition;
+          previous.style.transform = `translateY(${exitTo}px) rotate(${-tilt}deg)`;
+          previous.style.opacity = "0";
+        }, delay);
+      }
+      later(() => {
+        incoming.style.transition = transition;
+        incoming.style.transform = "translateY(0) rotate(0deg)";
+        incoming.style.opacity = "1";
+      }, delay + exitOffset);
+    }
+    later(() => {
+      timers = [];
+      build(track, next);
+    }, completion + COMPLETION_BUFFER);
+  };
+  return {
+    set(next) {
+      if (destroyed || next === text) return;
+      roll(next);
+      text = next;
+      copy.textContent = next;
+    },
+    get text() {
+      return text;
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      stop();
+      if (text === originalText) el.replaceChildren(...original);
+      else el.textContent = text;
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/sortable/create-sortable.ts
+var GROUP = "[data-mk-sortable-group]";
+var ITEM = "[data-mk-item]";
+var HANDLE = "[data-mk-sort-handle]";
+var INTERACTIVE = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  '[contenteditable="true"]',
+  '[role="button"]',
+  '[role="slider"]',
+  '[data-clickable="true"]'
+].join(",");
+var THRESHOLD = 6;
+var TILT = { max: 14, vel: 2e-3, accel: 45e-5, stiffness: 170, damping: 13, hang: 0.4, refArea: 24e3 };
+var EDGE = 56;
+var MAX_SCROLL = 16;
+var TRANSFORMS = ["transform", "translate", "rotate", "scale"];
+var LABELS = {
+  lifted: (position, total) => `Elemento levantado, posici\xF3n ${position} de ${total}. Flechas para mover, Espacio para soltar, Escape para cancelar.`,
+  moved: (position, total, group) => group ? `${group}, posici\xF3n ${position} de ${total}.` : `Posici\xF3n ${position} de ${total}.`,
+  dropped: (position, total) => `Elemento soltado en la posici\xF3n ${position} de ${total}.`,
+  cancelled: "Movimiento cancelado."
+};
+function createSortable(root, options = {}) {
+  if (!root) {
+    warnOnce("sortable: missing root");
+    return inert({ cancel() {
+    }, dragging: false });
+  }
+  registerMotion();
+  const scope = createScope();
+  const { mutate = true, autoScroll = true } = options;
+  const follow = { stiffness: 1100, damping: 38, ...options.follow };
+  const labels = { ...LABELS, ...options.labels };
+  const groups = () => {
+    const list = [...root.querySelectorAll(GROUP)];
+    if (root.matches(GROUP)) list.unshift(root);
+    else if (!list.length) list.push(root);
+    return list;
+  };
+  const ownerOf = (item) => {
+    const group = item.parentElement?.closest(GROUP);
+    return group && root.contains(group) ? group : root;
+  };
+  const itemsOf = (group) => [...group.querySelectorAll(ITEM)].filter((item) => ownerOf(item) === group);
+  const keyOf = (group) => group.dataset.mkSortableGroup ?? "";
+  const isLocked = (group) => group.hasAttribute("data-mk-sortable-locked") && group.dataset.mkSortableLocked !== "false";
+  const idOf = (item) => {
+    if (item.dataset.mkId !== void 0) return item.dataset.mkId;
+    warnOnce("sortable: give each [data-mk-item] a data-mk-id");
+    return String(itemsOf(ownerOf(item)).indexOf(item));
+  };
+  const findItem = (id) => [...root.querySelectorAll(ITEM)].find((item) => item.dataset.mkId === id) ?? null;
+  const touched = /* @__PURE__ */ new Set();
+  const transformY = (el) => {
+    touched.add(el);
+    return Number(gsap.getProperty(el, "y")) || 0;
+  };
+  const transformX = (el) => {
+    touched.add(el);
+    return Number(gsap.getProperty(el, "x")) || 0;
+  };
+  const untouch = () => {
+    const idle = [...touched].filter((el) => !gsap.isTweening(el));
+    for (const el of idle) touched.delete(el);
+    clearStyles(idle, TRANSFORMS);
+  };
+  const makeDetail = (item, from, to) => {
+    const others = itemsOf(to.group).filter((el) => el !== item);
+    const after = others[to.index - 1];
+    const before = others[to.index];
+    const detail = {
+      id: idOf(item),
+      item,
+      fromGroup: keyOf(from.group),
+      toGroup: keyOf(to.group),
+      fromIndex: from.index,
+      toIndex: to.index,
+      groupChanged: from.group !== to.group,
+      afterId: after ? idOf(after) : null,
+      beforeId: after ? null : before ? idOf(before) : null
+    };
+    return detail;
+  };
+  const moveDom = (item, group, index) => {
+    const focused = item.contains(document.activeElement) ? document.activeElement : null;
+    const others = itemsOf(group).filter((el) => el !== item);
+    const before = others[index];
+    if (before) before.before(item);
+    else if (others.length) others[others.length - 1].after(item);
+    else group.append(item);
+    focused?.focus({ preventScroll: true });
+  };
+  const waiting = /* @__PURE__ */ new Set();
+  scope.add(() => {
+    for (const stop of [...waiting]) stop();
+  });
+  const domChange = (ms = 400) => new Promise((resolve) => {
+    let done = false;
+    const finish2 = (changed) => {
+      if (done) return;
+      done = true;
+      waiting.delete(stop);
+      observer.disconnect();
+      clearTimeout(timer);
+      resolve(changed);
+    };
+    const stop = () => finish2(false);
+    waiting.add(stop);
+    const observer = new MutationObserver((records) => {
+      if (records.some(
+        (record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof HTMLElement && node.matches(ITEM))
+      ))
+        finish2(true);
+    });
+    observer.observe(root, { childList: true, subtree: true });
+    const timer = setTimeout(stop, ms);
+  });
+  let live = null;
+  const announce = (text) => {
+    if (!live) {
+      live = document.createElement("div");
+      live.setAttribute("aria-live", "assertive");
+      live.setAttribute("role", "status");
+      Object.assign(live.style, {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap"
+      });
+      document.body.append(live);
+      const created = live;
+      scope.add(() => created.remove());
+    }
+    live.textContent = text;
+  };
+  const pointer2 = { x: 0, y: 0 };
+  let press = null;
+  let dragging = false;
+  let floating = { x: 0, y: 0, width: 0, tilt: 0, lift: 0, fade: 0 };
+  let layers = [];
+  let lifting = null;
+  let landing = null;
+  let layout = null;
+  const shifted = /* @__PURE__ */ new Map();
+  let placement = null;
+  let physics = null;
+  let scrollers = [];
+  let draggedEls = /* @__PURE__ */ new Set();
+  const render = () => {
+    const { x, y, width, tilt, lift, fade } = floating;
+    layers.forEach((layer, i) => {
+      const style = layer.el.style;
+      style.transform = `translate3d(${x - layer.ox}px, ${y - layer.oy}px, 0) rotate(${tilt}deg) scale(${1 + lift * 0.03})`;
+      style.width = `${width}px`;
+      style.setProperty("--mk-lift", lift.toFixed(3));
+      if (layers.length > 1) style.opacity = String(i === 0 ? 1 - fade : fade);
+    });
+  };
+  const makeLayer = (source, parent, grabX, grabY) => {
+    const el = source.cloneNode(true);
+    for (const name of ["data-mk-item", "data-mk-id", "data-mk-dragging", "data-mk-sort-grabbed", "data-flip-id", "id", "tabindex"])
+      el.removeAttribute(name);
+    for (const child of el.querySelectorAll("[id]")) child.removeAttribute("id");
+    el.dataset.mkSortableClone = "";
+    el.setAttribute("aria-hidden", "true");
+    el.inert = true;
+    Object.assign(el.style, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      margin: "0",
+      boxSizing: "border-box",
+      zIndex: "9999",
+      pointerEvents: "none",
+      willChange: "transform",
+      transform: "none",
+      transformOrigin: `${grabX}px ${grabY}px`,
+      translate: "none",
+      rotate: "none",
+      scale: "none",
+      visibility: "visible"
+    });
+    parent.append(el);
+    const box = el.getBoundingClientRect();
+    return { el, ox: box.left, oy: box.top };
+  };
+  const measure = () => {
+    if (!press) return;
+    const item = press.item;
+    const measured = groups().map((group) => ({
+      el: group,
+      rect: group.getBoundingClientRect(),
+      locked: isLocked(group),
+      items: itemsOf(group).map((el) => {
+        const box = el.getBoundingClientRect();
+        return { el, top: box.top - transformY(el), height: box.height };
+      })
+    }));
+    const source = measured.find((group) => group.el === press.group) ?? measured[0];
+    const index = source.items.findIndex((entry) => entry.el === item);
+    const dragged = source.items[index];
+    if (!dragged) return;
+    const next = source.items[index + 1];
+    const previous = source.items[index - 1];
+    const spacing = next ? next.top - (dragged.top + dragged.height) : previous ? dragged.top - (previous.top + previous.height) : parseFloat(getComputedStyle(source.el).rowGap) || 0;
+    layout = { groups: measured, source, dragTop: dragged.top, shift: dragged.height + Math.max(0, spacing) };
+  };
+  const applyShift = (target, index) => {
+    if (!layout || !press) return;
+    const item = press.item;
+    const next = /* @__PURE__ */ new Map();
+    for (const entry of layout.source.items) if (entry.top > layout.dragTop) next.set(entry.el, -layout.shift);
+    target.items.filter((entry) => entry.el !== item).forEach((entry, i) => {
+      if (i >= index) next.set(entry.el, (next.get(entry.el) ?? 0) + layout.shift);
+    });
+    for (const el of shifted.keys()) if (!next.has(el)) next.set(el, 0);
+    for (const [el, y] of next) {
+      if ((shifted.get(el) ?? 0) === y) continue;
+      shifted.set(el, y);
+      touched.add(el);
+      gsap.to(el, { y, duration: reduced() ? 0 : TIMING.sortable.shift, ease: EASE.layoutReflow, overwrite: "auto" });
+    }
+  };
+  const unshift = (animated) => {
+    const els = [...shifted.keys()];
+    shifted.clear();
+    if (!els.length) return;
+    if (animated && !reduced()) {
+      gsap.to(els, {
+        y: 0,
+        duration: TIMING.sortable.shift,
+        ease: EASE.layoutReflow,
+        overwrite: "auto",
+        onComplete: () => {
+          clearStyles(els, TRANSFORMS);
+          for (const el of els) touched.delete(el);
+        }
+      });
+    } else {
+      gsap.killTweensOf(els);
+      clearStyles(els, TRANSFORMS);
+    }
+  };
+  const place = () => {
+    if (!layout || !press) return;
+    const all = layout.groups;
+    const inside = (rect) => pointer2.x >= rect.left && pointer2.x <= rect.right;
+    const target = all.length <= 1 ? all[0] : all.find(({ rect }) => inside(rect) && pointer2.y >= rect.top && pointer2.y <= rect.bottom) ?? all.find(({ rect }) => inside(rect));
+    if (!target || target.locked) return;
+    const others = target.items.filter((entry) => entry.el !== press.item);
+    let index = 0;
+    for (const entry of others) {
+      if (pointer2.y < entry.top + entry.height / 2) break;
+      index++;
+    }
+    applyShift(target, index);
+    placement = { group: target.el, index };
+  };
+  const tick = () => {
+    if (!physics || !press) return;
+    const target = { x: pointer2.x - press.grabX, y: pointer2.y - press.grabY };
+    if (reduced()) {
+      floating.x = target.x;
+      floating.y = target.y;
+      render();
+      return;
+    }
+    const P = physics;
+    const now = performance.now();
+    const dt = Math.min((now - P.t) / 1e3, 1 / 30);
+    if (dt <= 0) return;
+    P.t = now;
+    const k = 1 - Math.exp(-dt / 0.05);
+    const ax = ((pointer2.x - P.x) / dt - P.vx) * k;
+    const ay = ((pointer2.y - P.y) / dt - P.vy) * k;
+    P.vx += ax;
+    P.vy += ay;
+    P.x = pointer2.x;
+    P.y = pointer2.y;
+    const torque = (P.vx * TILT.vel + ax / dt * TILT.accel) * P.armY - (P.vy * TILT.vel + ay / dt * TILT.accel) * P.armX;
+    const tilt = TILT.max * Math.tanh(torque / TILT.max);
+    P.tiltV += ((tilt - floating.tilt) * TILT.stiffness - P.tiltV * TILT.damping) * dt / P.mass;
+    floating.tilt += P.tiltV * dt;
+    P.fvx += ((target.x - floating.x) * follow.stiffness - P.fvx * follow.damping) * dt / P.mass;
+    P.fvy += ((target.y - floating.y) * follow.stiffness - P.fvy * follow.damping) * dt / P.mass;
+    floating.x += P.fvx * dt;
+    floating.y += P.fvy * dt;
+    render();
+  };
+  const scrollStep = (distance) => Math.ceil(MAX_SCROLL * Math.min(1, distance / EDGE));
+  const scrollTick = () => {
+    for (const scroller of scrollers) {
+      const el = scroller.el;
+      const box = el ? el.getBoundingClientRect() : { top: 0, left: 0, bottom: innerHeight, right: innerWidth };
+      const top = el ? el.scrollTop : scrollY;
+      const left = el ? el.scrollLeft : scrollX;
+      const height = el ? el.clientHeight : innerHeight;
+      const width = el ? el.clientWidth : innerWidth;
+      const fullHeight = el ? el.scrollHeight : document.documentElement.scrollHeight;
+      const fullWidth = el ? el.scrollWidth : document.documentElement.scrollWidth;
+      let dy = 0;
+      let dx = 0;
+      if (scroller.y) {
+        if (pointer2.y < box.top + EDGE && top > 0) dy = -scrollStep(box.top + EDGE - pointer2.y);
+        else if (pointer2.y > box.bottom - EDGE && top + height < fullHeight - 1) dy = scrollStep(pointer2.y - (box.bottom - EDGE));
+      }
+      if (scroller.x) {
+        if (pointer2.x < box.left + EDGE && left > 0) dx = -scrollStep(box.left + EDGE - pointer2.x);
+        else if (pointer2.x > box.right - EDGE && left + width < fullWidth - 1) dx = scrollStep(pointer2.x - (box.right - EDGE));
+      }
+      if (dx || dy) {
+        if (el) el.scrollBy(dx, dy);
+        else window.scrollBy(dx, dy);
+        measure();
+        place();
+        return;
+      }
+    }
+  };
+  const startScroll = () => {
+    scrollers = [];
+    for (let el = root; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+      const style = getComputedStyle(el);
+      const y = /(auto|scroll)/.test(style.overflowY) && el.scrollHeight > el.clientHeight + 1;
+      const x = /(auto|scroll)/.test(style.overflowX) && el.scrollWidth > el.clientWidth + 1;
+      if (x || y) scrollers.push({ el, x, y });
+    }
+    const page = document.documentElement;
+    scrollers.push({ el: null, y: page.scrollHeight > innerHeight + 1, x: page.scrollWidth > innerWidth + 1 });
+    gsap.ticker.add(scrollTick);
+  };
+  const start = () => {
+    if (!press) return;
+    const { item, group, startX, startY, grabX, grabY, width, height } = press;
+    dragging = true;
+    floating = { x: startX - grabX, y: startY - grabY, width, tilt: 0, lift: reduced() ? 1 : 0, fade: 0 };
+    layers = [makeLayer(item, group, grabX, grabY)];
+    draggedEls = /* @__PURE__ */ new Set([item]);
+    item.setAttribute("data-mk-dragging", "");
+    root.setAttribute("data-mk-sorting", "");
+    if (!reduced()) lifting = gsap.to(floating, { lift: 1, duration: TIMING.sortable.lift, ease: "power2.out", onUpdate: render });
+    const halfW = width / 2 || 1;
+    const halfH = height / 2 || 1;
+    physics = {
+      vx: 0,
+      vy: 0,
+      tiltV: 0,
+      fvx: 0,
+      fvy: 0,
+      armX: (halfW - grabX) / halfW,
+      armY: Math.max((halfH - grabY) / halfH, TILT.hang),
+      mass: Math.min(2.5, Math.max(1, Math.sqrt(width * height / TILT.refArea))),
+      x: pointer2.x,
+      y: pointer2.y,
+      t: performance.now()
+    };
+    gsap.ticker.add(tick);
+    measure();
+    if (autoScroll) startScroll();
+    placement = { group, index: press.index };
+    render();
+  };
+  const finish = () => {
+    landing = null;
+    lifting?.kill();
+    lifting = null;
+    for (const layer of layers) layer.el.remove();
+    layers = [];
+    for (const el of draggedEls) el.removeAttribute("data-mk-dragging");
+    draggedEls.clear();
+    root.removeAttribute("data-mk-sorting");
+    dragging = false;
+    untouch();
+  };
+  const land = (target) => {
+    lifting?.kill();
+    lifting = null;
+    const item = target && target.isConnected ? target : null;
+    if (!item || reduced()) {
+      finish();
+      return;
+    }
+    if (!draggedEls.has(item)) {
+      item.setAttribute("data-mk-dragging", "");
+      draggedEls.add(item);
+    }
+    const box = item.getBoundingClientRect();
+    if (layers.length === 1 && ownerOf(item) !== layers[0].el.parentElement) {
+      const origin2 = layers[0].el.style.transformOrigin.split(" ").map(parseFloat);
+      layers.push(makeLayer(item, ownerOf(item), origin2[0] ?? 0, origin2[1] ?? 0));
+      render();
+    }
+    landing = gsap.timeline({ onComplete: finish });
+    landing.to(
+      floating,
+      {
+        x: box.left - transformX(item),
+        y: box.top - transformY(item),
+        width: box.width,
+        tilt: 0,
+        lift: 0,
+        duration: TIMING.sortable.land,
+        ease: EASE.sortableLand,
+        onUpdate: render
+      },
+      0
+    );
+    landing.to(floating, { fade: 1, duration: TIMING.sortable.landFade, ease: "power1.inOut", onUpdate: render }, 0);
+  };
+  const stopTracking = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onCancel);
+    window.removeEventListener("keydown", onEscape);
+    gsap.ticker.remove(tick);
+    gsap.ticker.remove(scrollTick);
+    physics = null;
+    scrollers = [];
+  };
+  const swallowClick = () => {
+    const swallow = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    window.addEventListener("click", swallow, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
+  };
+  const drop = async () => {
+    const current = press;
+    const target = placement;
+    const started = dragging;
+    stopTracking();
+    press = null;
+    placement = null;
+    layout = null;
+    if (!current || !started) return;
+    swallowClick();
+    const { item } = current;
+    const origin2 = { group: current.group, index: current.index };
+    if (!target || target.group === origin2.group && target.index === origin2.index) {
+      unshift(true);
+      land(item);
+      return;
+    }
+    const detail = makeDetail(item, origin2, target);
+    if (!root.dispatchEvent(new CustomEvent("mk:reorder", { bubbles: true, cancelable: true, detail }))) {
+      unshift(true);
+      land(item);
+      return;
+    }
+    if (mutate) {
+      moveDom(item, target.group, target.index);
+      unshift(false);
+      options.onReorder?.(detail);
+      land(item);
+      return;
+    }
+    const changed = domChange();
+    options.onReorder?.(detail);
+    const answered = await changed;
+    if (scope.disposed) return;
+    if (!answered) {
+      unshift(true);
+      land(item.isConnected ? item : findItem(detail.id));
+      return;
+    }
+    unshift(false);
+    land(findItem(detail.id) ?? item);
+  };
+  const cancel = () => {
+    const current = press;
+    const started = dragging;
+    stopTracking();
+    press = null;
+    placement = null;
+    layout = null;
+    if (!current || !started) return;
+    unshift(true);
+    land(current.item);
+  };
+  function onMove(event) {
+    if (!press) return;
+    pointer2.x = event.clientX;
+    pointer2.y = event.clientY;
+    if (!dragging) {
+      const dx = event.clientX - press.startX;
+      const dy = event.clientY - press.startY;
+      if (dx * dx + dy * dy < THRESHOLD * THRESHOLD) return;
+      start();
+    }
+    event.preventDefault();
+    place();
+  }
+  function onUp() {
+    void drop();
+  }
+  function onCancel() {
+    cancel();
+  }
+  function onEscape(event) {
+    if (event.key === "Escape") cancel();
+  }
+  scope.on(root, "pointerdown", (event) => {
+    const down = event;
+    const target = down.target;
+    if (down.button > 0 || press || keyboard || !target) return;
+    const item = target.closest(ITEM);
+    if (!item || !root.contains(item)) return;
+    const onHandle = Boolean(target.closest(HANDLE));
+    const coarse = window.matchMedia?.("(pointer: coarse)").matches === true;
+    if ((options.handle || coarse) && !onHandle) return;
+    const control = target.closest(INTERACTIVE);
+    if (!onHandle && control && control !== item && item.contains(control)) return;
+    landing?.progress(1);
+    const group = ownerOf(item);
+    const box = item.getBoundingClientRect();
+    press = {
+      item,
+      group,
+      index: itemsOf(group).indexOf(item),
+      startX: down.clientX,
+      startY: down.clientY,
+      grabX: down.clientX - box.left,
+      grabY: down.clientY - box.top,
+      width: box.width,
+      height: box.height
+    };
+    pointer2.x = down.clientX;
+    pointer2.y = down.clientY;
+    down.preventDefault();
+    window.addEventListener("pointermove", onMove, { passive: false });
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    window.addEventListener("keydown", onEscape);
+  });
+  scope.on(root, "dragstart", (event) => {
+    if (event.target?.closest?.(ITEM)) event.preventDefault();
+  });
+  let keyboard = null;
+  let moving = false;
+  let flipping = null;
+  const positionOf = (item) => {
+    const list = itemsOf(ownerOf(item));
+    return { position: list.indexOf(item) + 1, total: list.length };
+  };
+  const groupName = (group) => group.getAttribute("aria-label") ?? (groups().length > 1 ? keyOf(group) : "");
+  const commit = async (item, group, index) => {
+    const from = { group: ownerOf(item), index: itemsOf(ownerOf(item)).indexOf(item) };
+    if (from.group === group && from.index === index) return item;
+    const detail = makeDetail(item, from, { group, index });
+    if (!root.dispatchEvent(new CustomEvent("mk:reorder", { bubbles: true, cancelable: true, detail }))) return item;
+    moving = true;
+    const focused = item.contains(document.activeElement) ? document.activeElement : item;
+    const captured = captureLayout(root, ITEM);
+    let current = item;
+    if (mutate) {
+      moveDom(item, group, index);
+      options.onReorder?.(detail);
+    } else {
+      const changed = domChange();
+      options.onReorder?.(detail);
+      await changed;
+      current = findItem(detail.id) ?? item;
+    }
+    const target = current === item ? focused : current;
+    if (target.isConnected && document.activeElement !== target) target.focus({ preventScroll: true });
+    moving = false;
+    if (scope.disposed) return current;
+    const untag = () => {
+      for (const el of root.querySelectorAll('[data-flip-id^="auto-"]')) {
+        el.removeAttribute("data-flip-id");
+        touched.add(el);
+      }
+      untouch();
+    };
+    flipping?.progress(1);
+    flipping = reflowLayout(root, ITEM, captured);
+    if (flipping) flipping.eventCallback("onComplete", untag);
+    else untag();
+    return current;
+  };
+  const release = (announcement) => {
+    if (!keyboard) return;
+    keyboard.item.removeAttribute("data-mk-sort-grabbed");
+    keyboard = null;
+    if (announcement) announce(announcement);
+  };
+  scope.on(root, "keydown", (event) => {
+    const key = event;
+    const target = key.target;
+    const item = target?.closest(ITEM);
+    if (!item || !root.contains(item) || dragging) return;
+    const handle = target.closest(HANDLE);
+    if (target !== item && !(handle && item.contains(handle))) return;
+    const lift = key.key === " " || key.key === "Enter";
+    if (keyboard && keyboard.item !== item) release();
+    if (!keyboard) {
+      if (!lift) return;
+      key.preventDefault();
+      keyboard = { item, startGroup: ownerOf(item), startIndex: itemsOf(ownerOf(item)).indexOf(item) };
+      item.setAttribute("data-mk-sort-grabbed", "");
+      const { position, total } = positionOf(item);
+      announce(labels.lifted(position, total));
+      return;
+    }
+    const grabbed = keyboard;
+    const group = ownerOf(item);
+    const list = itemsOf(group);
+    const index = list.indexOf(item);
+    let to = null;
+    if (key.key === "ArrowUp" || key.key === "ArrowDown") {
+      const next = Math.min(list.length - 1, Math.max(0, index + (key.key === "ArrowUp" ? -1 : 1)));
+      to = { group, index: next };
+    } else if (key.key === "ArrowLeft" || key.key === "ArrowRight") {
+      const open = groups().filter((candidate) => candidate === group || !isLocked(candidate));
+      const next = open[open.indexOf(group) + (key.key === "ArrowLeft" ? -1 : 1)];
+      if (next) to = { group: next, index: Math.min(index, itemsOf(next).length) };
+    } else if (lift) {
+      key.preventDefault();
+      const { position, total } = positionOf(item);
+      release(labels.dropped(position, total));
+      return;
+    } else if (key.key === "Escape") {
+      key.preventDefault();
+      void commit(item, grabbed.startGroup, grabbed.startIndex).then(() => release(labels.cancelled));
+      return;
+    } else return;
+    key.preventDefault();
+    if (!to) return;
+    void commit(item, to.group, to.index).then((moved) => {
+      if (!keyboard) return;
+      if (moved !== keyboard.item) {
+        keyboard.item.removeAttribute("data-mk-sort-grabbed");
+        keyboard.item = moved;
+        moved.setAttribute("data-mk-sort-grabbed", "");
+      }
+      const { position, total } = positionOf(moved);
+      announce(labels.moved(position, total, groupName(ownerOf(moved))));
+    });
+  });
+  scope.on(root, "keyup", (event) => {
+    if (event.key === " " && event.target?.closest(HANDLE)) event.preventDefault();
+  });
+  scope.on(root, "focusout", (event) => {
+    if (!keyboard || moving) return;
+    const next = event.relatedTarget;
+    if (next && keyboard.item.contains(next)) return;
+    release();
+  });
+  const focusable = (item) => {
+    if (item.querySelector(HANDLE) || item.hasAttribute("tabindex") || item.matches(INTERACTIVE)) return;
+    scope.attr(item, "tabindex", "0");
+  };
+  for (const item of root.querySelectorAll(ITEM)) focusable(item);
+  scope.observe(
+    new MutationObserver(() => {
+      for (const item of root.querySelectorAll(`${ITEM}:not([tabindex])`)) focusable(item);
+    })
+  ).observe(root, { childList: true, subtree: true });
+  root.dataset.mkReady = "";
+  return {
+    cancel,
+    get dragging() {
+      return dragging;
+    },
+    destroy() {
+      stopTracking();
+      press = null;
+      landing?.kill();
+      flipping?.progress(1);
+      unshift(false);
+      finish();
+      release();
+      scope.dispose();
+      delete root.dataset.mkReady;
+    }
+  };
+}
+function moveItem(list, from, to) {
+  const next = list.slice();
+  const [entry] = next.splice(from, 1);
+  if (entry !== void 0) next.splice(Math.min(Math.max(to, 0), next.length), 0, entry);
+  return next;
+}
+
+// src/recipes/mask-text/create-mask-text.ts
+var CLASSES = { lines: "mk-mask-line", words: "mk-mask-word", chars: "mk-mask-char" };
+var TYPES = { lines: "lines", words: "words", chars: "words,chars" };
+function createMaskText(el, options = {}) {
+  if (!el) {
+    warnOnce("mask-text: missing element");
+    return inert({ play() {
+    }, hide() {
+    }, split: null });
+  }
+  const t = TIMING.maskText;
+  const {
+    by = "lines",
+    y = t.y,
+    duration = t.duration,
+    ease = "expo.out",
+    delay = t.delay,
+    stagger = t.stagger,
+    trigger = "scroll",
+    once = false
+  } = options;
+  if (!entrances()) {
+    el.dataset.mkReady = "";
+    return {
+      play() {
+      },
+      hide() {
+      },
+      split: null,
+      destroy() {
+        delete el.dataset.mkReady;
+      }
+    };
+  }
+  registerMotion();
+  let shown = false;
+  let tween = null;
+  let observer = null;
+  const split = SplitText.create(el, {
+    type: TYPES[by],
+    mask: by,
+    autoSplit: true,
+    aria: "auto",
+    linesClass: CLASSES.lines,
+    wordsClass: CLASSES.words,
+    charsClass: CLASSES.chars,
+    // A new split (resize, fonts) keeps the state the text was in.
+    onSplit: (self) => {
+      tween?.kill();
+      gsap.set(self[by], { yPercent: shown ? 0 : y });
+    }
+  });
+  const pieces = () => split[by];
+  gsap.set(pieces(), { yPercent: y });
+  const play = () => {
+    shown = true;
+    tween?.kill();
+    tween = gsap.to(pieces(), { yPercent: 0, duration, ease, delay, stagger: { each: stagger, from: "start" }, overwrite: true });
+  };
+  const hide = () => {
+    shown = false;
+    tween?.kill();
+    tween = gsap.to(pieces(), { yPercent: y, duration, ease, stagger: { each: t.exitStagger }, overwrite: true });
+  };
+  const reset = () => {
+    shown = false;
+    tween?.kill();
+    gsap.set(pieces(), { yPercent: y });
+  };
+  if (trigger === "load") play();
+  else if (trigger === "scroll" && typeof IntersectionObserver === "function") {
+    observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (shows(entry, t.threshold)) {
+            if (!shown) play();
+            if (once) observer?.disconnect();
+          } else if (!entry.isIntersecting && shown && !once) reset();
+        }
+      },
+      { threshold: thresholds(t.threshold), rootMargin: "10px" }
+    );
+    observer.observe(el);
+  }
+  el.dataset.mkReady = "";
+  return {
+    play,
+    hide,
+    split,
+    destroy() {
+      observer?.disconnect();
+      tween?.kill();
+      gsap.killTweensOf(pieces());
+      split.revert();
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/cascade/create-cascade.ts
+var STYLES = ["transform", "translate", "rotate", "scale", "transform-origin", "opacity", "visibility"];
+function createCascade(root, options = {}) {
+  if (!root) {
+    warnOnce("cascade: missing element");
+    return inert({ play() {
+    }, reset() {
+    } });
+  }
+  const t = TIMING.cascade;
+  const { duration = t.duration, step = t.step, once = false, trigger = "scroll" } = options;
+  const delay = options.delay ?? (Number(root.dataset.mkDelay) || 0);
+  const items = [...root.querySelectorAll("[data-mk-cascade]")].map((el, index) => ({
+    el,
+    index,
+    kind: el.dataset.mkCascade || "fade"
+  }));
+  if (!entrances() || !items.length) {
+    root.dataset.mkReady = "";
+    return {
+      play() {
+      },
+      reset() {
+      },
+      destroy() {
+        delete root.dataset.mkReady;
+      }
+    };
+  }
+  registerMotion();
+  let observer = null;
+  const setOut = ({ el, index, kind }) => {
+    gsap.killTweensOf(el);
+    if (kind === "rule") gsap.set(el, { scaleX: 0, transformOrigin: index % 2 === 0 ? "left center" : "right center" });
+    else if (kind === "rise") gsap.set(el, { yPercent: t.rise });
+    else gsap.set(el, { autoAlpha: 0 });
+  };
+  items.forEach(setOut);
+  let shown = false;
+  const play = () => {
+    shown = true;
+    for (const { el, index, kind } of items) {
+      const to = kind === "rule" ? { scaleX: 1 } : kind === "rise" ? { yPercent: 0 } : { autoAlpha: 1 };
+      gsap.to(el, { ...to, duration, ease: "expo.out", delay: delay + index * step, overwrite: "auto" });
+    }
+  };
+  const reset = () => {
+    shown = false;
+    items.forEach(setOut);
+  };
+  if (trigger === "load") play();
+  else if (trigger === "scroll" && typeof IntersectionObserver === "function") {
+    observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (shows(entry, t.threshold)) {
+            if (!shown) play();
+            if (once) observer?.disconnect();
+          } else if (!entry.isIntersecting && shown && !once) reset();
+        }
+      },
+      { threshold: thresholds(t.threshold) }
+    );
+    observer.observe(root);
+  }
+  root.dataset.mkReady = "";
+  return {
+    play,
+    reset,
+    destroy() {
+      observer?.disconnect();
+      const elements = items.map((item) => item.el);
+      gsap.killTweensOf(elements);
+      clearStyles(elements, STYLES);
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/text-roll/create-text-roll.ts
+function createTextRoll(el, options = {}) {
+  if (!el) {
+    warnOnce("text-roll: missing element");
+    return inert({ play() {
+    }, timelines: [] });
+  }
+  const t = TIMING.textRoll;
+  const { duration = t.duration, stagger = t.stagger, turns = t.turns, trigger = "load", delay = 0, interval = 0 } = options;
+  if (!entrances()) {
+    el.dataset.mkReady = "";
+    return {
+      play() {
+      },
+      timelines: [],
+      destroy() {
+        delete el.dataset.mkReady;
+      }
+    };
+  }
+  registerMotion();
+  const split = SplitText.create(el, { type: "words,chars", wordsClass: "mk-roll-word", charsClass: "mk-roll-char", aria: "auto" });
+  const timelines = split.chars.map((char) => {
+    const letter = char.textContent ?? "";
+    const face2 = document.createElement("span");
+    face2.className = "mk-roll-face";
+    face2.textContent = letter;
+    const copy = face2.cloneNode(true);
+    char.replaceChildren(face2, copy);
+    const timeline = gsap.timeline({ paused: true });
+    timeline.to([face2, copy], { yPercent: "-=100", repeat: gsap.utils.random(turns[0], turns[1], 1), ease: "none", duration: 1 });
+    return timeline;
+  });
+  let envelope = null;
+  const play = () => {
+    envelope?.kill();
+    envelope = gsap.to(timelines, {
+      progress: 1,
+      duration,
+      ease: "expo.out",
+      stagger: { each: stagger, ease: "none", from: "random" },
+      onComplete: () => {
+        gsap.set(timelines, { progress: 0 });
+      }
+    });
+  };
+  const cleanups = [];
+  let visible = true;
+  let scrolling = false;
+  if (interval > 0 || trigger === "scroll") {
+    if (typeof IntersectionObserver === "function") {
+      visible = false;
+      let played = false;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          visible = Boolean(entry?.isIntersecting);
+          if (entry && shows(entry, 0.5) && trigger === "scroll" && !played) {
+            played = true;
+            play();
+          }
+        },
+        { threshold: thresholds(0.5) }
+      );
+      observer.observe(el);
+      cleanups.push(() => observer.disconnect());
+    }
+  }
+  if (interval > 0) {
+    let quiet;
+    const onScroll = () => {
+      scrolling = true;
+      clearTimeout(quiet);
+      quiet = setTimeout(() => scrolling = false, t.quietMs);
+    };
+    addEventListener("scroll", onScroll, { passive: true });
+    const timer = setInterval(() => {
+      if (visible && !scrolling) play();
+    }, interval);
+    cleanups.push(() => {
+      removeEventListener("scroll", onScroll);
+      clearInterval(timer);
+      clearTimeout(quiet);
+    });
+  }
+  if (trigger === "hover") {
+    el.addEventListener("pointerenter", play);
+    cleanups.push(() => el.removeEventListener("pointerenter", play));
+  }
+  if (trigger === "load") {
+    const call = gsap.delayedCall(delay, play);
+    cleanups.push(() => call.kill());
+  }
+  el.dataset.mkReady = "";
+  return {
+    play,
+    timelines,
+    destroy() {
+      for (const cleanup of cleanups.splice(0)) cleanup();
+      envelope?.kill();
+      timelines.forEach((timeline) => timeline.kill());
+      split.revert();
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/letters/create-letters.ts
+var PASTELS = ["#FFD6FF", "#E7C6FF", "#C8B6FF", "#B8C0FF", "#BBD0FF"];
+var ORDER = [0, 2, 1, 4, 3, 0, 2, 1, 4];
+function createLetters(el, options = {}) {
+  if (!el) {
+    warnOnce("letters: missing element");
+    return inert({ play() {
+    } });
+  }
+  const t = TIMING.letters;
+  const { effect = "scale", colors = PASTELS, autoplay = true } = options;
+  if (!entrances()) {
+    el.dataset.mkReady = "";
+    return {
+      play() {
+      },
+      destroy() {
+        delete el.dataset.mkReady;
+      }
+    };
+  }
+  registerMotion();
+  const split = SplitText.create(el, { type: "words,chars", wordsClass: "mk-letters-word", charsClass: "mk-letter", aria: "auto" });
+  const chars = split.chars;
+  const cleanups = [];
+  const spring = motionSpring(...TIMING.springs.letters);
+  const lift = (up) => {
+    chars.forEach(
+      (char, index) => gsap.to(char, {
+        scale: up ? t.scale : 1,
+        y: up ? t.y : 0,
+        duration: spring.duration,
+        ease: spring.ease,
+        delay: index * t.step,
+        overwrite: true
+      })
+    );
+  };
+  const blink = () => {
+    chars.forEach((char, index) => {
+      gsap.killTweensOf(char, "color");
+      clearStyles([char], ["color"]);
+      const own = getComputedStyle(char).color;
+      const pastel = colors[ORDER[index % ORDER.length] % colors.length];
+      gsap.to(char, {
+        keyframes: [
+          { color: pastel, duration: t.blink / 2, ease: EASE.inOut },
+          { color: own, duration: t.blink / 2, ease: EASE.inOut }
+        ],
+        delay: t.blinkDelays[index % t.blinkDelays.length],
+        repeat: 1,
+        repeatDelay: t.blinkRepeatDelay,
+        onComplete: () => clearStyles([char], ["color"])
+      });
+    });
+  };
+  if (effect === "scale") {
+    const enter = () => lift(true);
+    const leave = () => lift(false);
+    el.addEventListener("pointerenter", enter);
+    el.addEventListener("pointerleave", leave);
+    cleanups.push(() => {
+      el.removeEventListener("pointerenter", enter);
+      el.removeEventListener("pointerleave", leave);
+    });
+  } else {
+    el.addEventListener("pointerenter", blink);
+    cleanups.push(() => el.removeEventListener("pointerenter", blink));
+    if (autoplay) {
+      const call = gsap.delayedCall(t.blinkStart, blink);
+      cleanups.push(() => call.kill());
+    }
+  }
+  el.dataset.mkReady = "";
+  return {
+    play: effect === "blink" ? blink : () => lift(true),
+    destroy() {
+      for (const cleanup of cleanups.splice(0)) cleanup();
+      gsap.killTweensOf(chars);
+      split.revert();
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/parallax/create-parallax.ts
+function createParallax(root, options = {}) {
+  const target = root?.querySelector("[data-mk-parallax-target]") ?? root?.querySelector(":scope > img, :scope > video, :scope > picture") ?? root?.firstElementChild ?? null;
+  if (!root || !target) {
+    warnOnce("parallax: needs an element with a picture inside");
+    return inert({ seek() {
+    } });
+  }
+  const t = TIMING.parallax;
+  const { amount = 1, lerp = t.lerp, scroll = true } = options;
+  const phone = typeof matchMedia === "function" && matchMedia("(max-width: 767px)").matches;
+  const scale = amount !== 1 && !phone ? t.strongScale : t.scale;
+  registerMotion();
+  const moving = !reduced();
+  const originalTransform = target.style.transform;
+  const originalOverflow = root.style.overflow;
+  root.style.overflow = "clip";
+  const render = (progress) => {
+    const p = moving ? progress : 0.5;
+    const y = Number((-t.travel * amount + p * 2 * t.travel * amount).toFixed(3));
+    target.style.transform = `translateY(${y}%) scale(${scale})`;
+  };
+  let track = null;
+  if (moving && scroll) {
+    const top = root.getBoundingClientRect().top + (window.scrollY || 0);
+    track = trackScroll(root, { start: top < 20 ? "top top" : "top bottom", lerp, onUpdate: render });
+  } else render(0.5);
+  root.dataset.mkReady = "";
+  return {
+    seek(progress) {
+      if (track) track.set(progress);
+      else render(progress);
+    },
+    destroy() {
+      track?.destroy();
+      target.style.transform = originalTransform;
+      root.style.overflow = originalOverflow;
+      for (const el of [target, root]) if (el.getAttribute("style") === "") el.removeAttribute("style");
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/depth-grid/create-depth-grid.ts
+var STYLES2 = ["transform", "translate", "rotate", "scale", "opacity", "visibility"];
+function origin(child, box) {
+  const t = TIMING.depthGrid;
+  const own = child.getBoundingClientRect();
+  const centre = { x: box.width / 2, y: box.height / 2 };
+  const point = { x: own.left - box.left + own.width / 2, y: own.top - box.top + own.height / 2 };
+  const angle = Math.atan2(Math.abs(centre.y - point.y), Math.abs(centre.x - point.x));
+  const cos = Math.abs(Math.cos(angle));
+  const sin = Math.abs(Math.sin(angle));
+  const reach = Math.hypot(centre.x, centre.y) || 1;
+  const h = Math.hypot(centre.x - point.x, centre.y - point.y) / reach;
+  const left = point.x < centre.x;
+  const above = point.y < centre.y;
+  return {
+    x: (left ? -1 : 1) * cos * t.distance,
+    y: (above ? -1 : 1) * sin * t.distance,
+    z: t.depth * h,
+    rotateX: (above ? -1 : 1) * sin * t.rotate * h,
+    rotateY: (left ? 1 : -1) * cos * t.rotate * h
+  };
+}
+function createDepthGrid(root, options = {}) {
+  const items = root ? [...root.children] : [];
+  if (!root || !items.length) {
+    warnOnce("depth-grid: needs a grid with children");
+    return inert({ seek() {
+    } });
+  }
+  const t = TIMING.depthGrid;
+  const { start = "top center", end = "bottom bottom", lerp = t.lerp, scroll = true } = options;
+  if (!entrances()) {
+    root.dataset.mkReady = "";
+    return {
+      seek() {
+      },
+      destroy() {
+        delete root.dataset.mkReady;
+      }
+    };
+  }
+  registerMotion();
+  const perspective = root.style.perspective;
+  root.style.perspective = `${t.perspective}px`;
+  const box = root.getBoundingClientRect();
+  const starts = items.map((item) => origin(item, box));
+  const timeline = gsap.timeline({ paused: true, defaults: { ease: "none" } });
+  timeline.fromTo(
+    items,
+    {
+      x: (i) => starts[i].x,
+      y: (i) => starts[i].y,
+      z: (i) => starts[i].z,
+      rotateX: (i) => starts[i].rotateX,
+      rotateY: (i) => starts[i].rotateY,
+      autoAlpha: t.opacity,
+      scale: t.scale
+    },
+    {
+      x: 0,
+      y: 0,
+      z: 0,
+      rotateX: 0,
+      rotateY: 0,
+      autoAlpha: 1,
+      scale: 1,
+      duration: 1,
+      stagger: { amount: t.stagger, from: "center", grid: "auto" }
+    }
+  );
+  const render = (progress) => timeline.progress(progress);
+  let track = null;
+  if (scroll) track = trackScroll(root, { start, end, lerp, onUpdate: render });
+  else render(0);
+  root.dataset.mkReady = "";
+  return {
+    seek(progress) {
+      if (track) track.set(progress);
+      else render(progress);
+    },
+    destroy() {
+      track?.destroy();
+      timeline.kill();
+      clearStyles(items, STYLES2);
+      root.style.perspective = perspective;
+      if (root.getAttribute("style") === "") root.removeAttribute("style");
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/frame-zoom/create-frame-zoom.ts
+function createFrameZoom(root, options = {}) {
+  const inner = root?.firstElementChild ?? null;
+  if (!root || !inner) {
+    warnOnce("frame-zoom: needs a frame with a picture inside");
+    return inert({ seek() {
+    }, open() {
+    }, state: { progress: 0, open: 0 } });
+  }
+  const t = TIMING.frameZoom;
+  const { start = "top bottom", end = "bottom top", lerp = t.lerp, scroll = true } = options;
+  registerMotion();
+  const phone = typeof matchMedia === "function" && matchMedia("(max-width: 767px)").matches;
+  const [outerBase, outerRange] = phone ? t.phoneOuter : t.outer;
+  const [innerBase, innerRange] = phone ? t.phoneInner : t.inner;
+  const moving = !reduced();
+  const state = { progress: 0, open: 0 };
+  const originals = [root.style.transform, inner.style.transform, root.style.overflow];
+  root.style.overflow = "clip";
+  const render = () => {
+    const e = moving ? (1 - state.progress) * (1 - state.open) + state.open : 1;
+    root.style.transform = `scale(${Number(((outerBase + outerRange * e) / 100).toFixed(4))})`;
+    inner.style.transform = `scale(${Number(((innerBase - innerRange * e) / 100).toFixed(4))})`;
+  };
+  let track = null;
+  if (moving && scroll)
+    track = trackScroll(root, {
+      start,
+      end,
+      lerp,
+      onUpdate: (value) => {
+        state.progress = value;
+        render();
+      }
+    });
+  else render();
+  root.dataset.mkReady = "";
+  return {
+    state,
+    seek(progress) {
+      if (track) track.set(progress);
+      else {
+        state.progress = Math.min(1, Math.max(0, progress));
+        render();
+      }
+    },
+    open(on) {
+      gsap.killTweensOf(state);
+      if (!moving) return;
+      gsap.to(state, { open: on ? 1 : 0, duration: t.open, ease: "expo.out", onUpdate: render });
+    },
+    destroy() {
+      track?.destroy();
+      gsap.killTweensOf(state);
+      root.style.transform = originals[0];
+      inner.style.transform = originals[1];
+      root.style.overflow = originals[2];
+      for (const el of [root, inner]) if (el.getAttribute("style") === "") el.removeAttribute("style");
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/contrast/create-contrast.ts
+function createContrast(target, options = {}) {
+  if (!target) {
+    warnOnce("contrast: missing element");
+    return inert({ tone: null });
+  }
+  const { sections = "[data-mk-tone]", attribute = "data-mk-on" } = options;
+  const scope = createScope();
+  const watched = [...document.querySelectorAll(sections)];
+  const under = /* @__PURE__ */ new Set();
+  let tone = target.getAttribute(attribute);
+  const apply = () => {
+    const current = [...under].at(-1);
+    if (!current) return;
+    tone = current.dataset.mkTone ?? null;
+    scope.attr(target, attribute, tone);
+  };
+  if (typeof IntersectionObserver === "function" && watched.length) {
+    const observer = scope.observe(
+      new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            const section = entry.target;
+            under.delete(section);
+            if (entry.isIntersecting) under.add(section);
+          }
+          apply();
+        },
+        { rootMargin: "0% 0% -90% 0%", threshold: 0 }
+      )
+    );
+    for (const section of watched) observer.observe(section);
+  }
+  target.dataset.mkReady = "";
+  return {
+    get tone() {
+      return tone;
+    },
+    destroy() {
+      scope.dispose();
+      delete target.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/marquee/create-marquee.ts
+function createMarquee(root, options = {}) {
+  const group = root?.firstElementChild ?? null;
+  if (!root || !group) {
+    warnOnce("marquee: needs a group inside");
+    return inert({ refresh() {
+    } });
+  }
+  const t = TIMING.marquee;
+  const { axis = "x", speed = t.perItem, reverse = false } = options;
+  const scope = createScope();
+  const classes = ["mk-marquee", `mk-marquee--${axis}`, reverse && "mk-marquee--reverse"].filter(Boolean).join(" ");
+  scope.attr(root, "class", [root.getAttribute("class"), classes].filter(Boolean).join(" "));
+  const items = Math.min(group.children.length || 1, t.maxItems);
+  root.style.setProperty("--mk-marquee-duration", `${items * speed}s`);
+  scope.add(() => {
+    root.style.removeProperty("--mk-marquee-duration");
+    if (root.getAttribute("style") === "") root.removeAttribute("style");
+  });
+  let copies = [];
+  const refresh = () => {
+    for (const copy of copies.splice(0)) copy.remove();
+    if (!entrances()) return;
+    const size = axis === "x" ? group.offsetWidth : group.offsetHeight;
+    const room = axis === "x" ? root.clientWidth : root.clientHeight;
+    const count = size > 0 ? Math.max(1, Math.ceil(room / size)) + 1 : 5;
+    for (let i = 0; i < count; i++) {
+      const copy = group.cloneNode(true);
+      copy.setAttribute("aria-hidden", "true");
+      copy.inert = true;
+      for (const el of copy.querySelectorAll("[id]")) el.removeAttribute("id");
+      root.append(copy);
+      copies.push(copy);
+    }
+  };
+  refresh();
+  scope.add(() => {
+    for (const copy of copies.splice(0)) copy.remove();
+  });
+  root.dataset.mkReady = "";
+  return {
+    refresh,
+    destroy() {
+      scope.dispose();
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/card-dock/create-card-dock.ts
+var TABLET_TOUCH = "(min-width: 768px) and (max-width: 1024px) and (hover: none)";
+function createCardDock(root, options = {}) {
+  if (!root) {
+    warnOnce("card-dock: missing element");
+    return inert({ expand() {
+    }, collapse() {
+    }, expanded: false });
+  }
+  const t = TIMING.cardDock;
+  const intro = Math.max(0, options.intro ?? t.intro);
+  const scope = createScope();
+  let expanded = false;
+  let resizeTimer;
+  const set = (name, on) => scope.attr(root, name, on ? "" : null);
+  const expand = () => {
+    if (scope.disposed) return;
+    expanded = true;
+    set("data-mk-expanded", true);
+  };
+  const collapse = () => {
+    if (scope.disposed) return;
+    expanded = false;
+    set("data-mk-expanded", false);
+  };
+  const settle = () => {
+    set("data-mk-spread", false);
+    set("data-mk-settled", true);
+  };
+  const tablet = () => typeof matchMedia === "function" && matchMedia(TABLET_TOUCH).matches;
+  if (intro > 0 && !reduced()) {
+    set("data-mk-spread", true);
+    scope.timeout(settle, intro);
+  } else settle();
+  scope.on(
+    root,
+    "click",
+    (event) => {
+      if (expanded || !tablet()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      expand();
+    },
+    true
+  );
+  scope.on(document, "click", (event) => {
+    if (expanded && !root.contains(event.target)) collapse();
+  });
+  scope.on(document, "keydown", (event) => {
+    if (expanded && event.key === "Escape") collapse();
+  });
+  scope.on(window, "resize", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      if (!tablet()) collapse();
+    }, t.resizeDebounce);
+  });
+  scope.add(() => clearTimeout(resizeTimer));
+  scope.attr(root, "data-mk-ready", "");
+  return {
+    expand,
+    collapse,
+    get expanded() {
+      return expanded;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/recipes/snap-strip/create-snap-strip.ts
+function createSnapStrip(root, options = {}) {
+  if (!root || root.children.length < 2) {
+    warnOnce("snap-strip: needs a strip with at least two cards");
+    return inert({ next() {
+    }, previous() {
+    }, index: 0 });
+  }
+  const t = TIMING.snapStrip;
+  const { autoplay = true, interval = t.interval, resume = t.resume, delay = t.delay } = options;
+  const scope = createScope();
+  const items = () => [...root.children];
+  const startScroll = root.scrollLeft;
+  let timer;
+  let waiting;
+  let visible = typeof IntersectionObserver !== "function";
+  let touching = false;
+  const offsetOf = (item) => item.getBoundingClientRect().left - root.getBoundingClientRect().left;
+  const nearest = () => {
+    let best = 0;
+    items().forEach((item, i, all) => {
+      if (Math.abs(offsetOf(item)) < Math.abs(offsetOf(all[best]))) best = i;
+    });
+    return best;
+  };
+  const move = (step) => {
+    if (scope.disposed) return;
+    const all = items();
+    const target = all[(nearest() + step + all.length) % all.length];
+    root.scrollTo({ left: offsetOf(target) + root.scrollLeft, behavior: reduced() ? "instant" : "smooth" });
+  };
+  const stop = () => {
+    clearInterval(timer);
+    timer = void 0;
+  };
+  const start = () => {
+    if (scope.disposed || !autoplay || reduced() || !visible || touching || document.hidden || timer) return;
+    timer = setInterval(() => move(1), interval);
+  };
+  const later = (fn, ms) => {
+    clearTimeout(waiting);
+    waiting = setTimeout(fn, ms);
+  };
+  scope.add(() => {
+    stop();
+    clearTimeout(waiting);
+  });
+  const hold = () => {
+    touching = true;
+    stop();
+  };
+  const release = () => {
+    if (!touching) return;
+    later(() => {
+      touching = false;
+      start();
+    }, resume);
+  };
+  scope.on(root, "pointerdown", hold, { passive: true });
+  scope.on(root, "touchstart", hold, { passive: true });
+  scope.on(window, "pointerup", release, { passive: true });
+  scope.on(window, "pointercancel", release, { passive: true });
+  scope.on(window, "touchend", release, { passive: true });
+  scope.on(
+    root,
+    "wheel",
+    () => {
+      hold();
+      release();
+    },
+    { passive: true }
+  );
+  scope.on(document, "visibilitychange", () => {
+    stop();
+    start();
+  });
+  if (typeof IntersectionObserver === "function") {
+    const observer = scope.observe(
+      new IntersectionObserver(([entry]) => {
+        visible = Boolean(entry?.isIntersecting);
+        stop();
+        if (visible) later(start, delay);
+        else clearTimeout(waiting);
+      })
+    );
+    observer.observe(root);
+  } else later(start, delay);
+  scope.add(() => {
+    root.scrollLeft = startScroll;
+  });
+  scope.attr(root, "data-mk-ready", "");
+  return {
+    next: () => move(1),
+    previous: () => move(-1),
+    get index() {
+      return nearest();
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/recipes/fill-text/create-fill-text.ts
+function createFillText(el, options = {}) {
+  if (!el) {
+    warnOnce("fill-text: missing element");
+    return inert({ seek() {
+    }, progress: 1 });
+  }
+  const t = TIMING.fillText;
+  const { from = t.from, start = t.start, end = t.end, scroll = true } = options;
+  registerMotion();
+  if (reduced()) {
+    el.dataset.mkReady = "";
+    return {
+      seek() {
+      },
+      progress: 1,
+      destroy() {
+        delete el.dataset.mkReady;
+      }
+    };
+  }
+  let timeline = null;
+  let progress = 0;
+  const build2 = (chars) => {
+    timeline?.kill();
+    timeline = gsap.timeline({ paused: true }).fromTo(chars, { opacity: from }, { opacity: 1, ease: "none", duration: t.duration, stagger: t.stagger });
+    timeline.progress(progress);
+  };
+  const split = SplitText.create(el, {
+    type: "words,chars",
+    aria: "auto",
+    autoSplit: true,
+    wordsClass: "mk-fill-word",
+    charsClass: "mk-fill-char",
+    // A new split (resize, fonts) keeps the place it was at.
+    onSplit: (self) => build2(self.chars)
+  });
+  if (!timeline) build2(split.chars);
+  const render = (value) => {
+    progress = value;
+    timeline?.progress(value);
+  };
+  let track = scroll ? trackScroll(el, { start, end, onUpdate: render }) : null;
+  if (!track) render(0);
+  el.dataset.mkReady = "";
+  return {
+    seek(value) {
+      if (track) track.set(value);
+      else render(Math.min(1, Math.max(0, value)));
+    },
+    get progress() {
+      return progress;
+    },
+    destroy() {
+      track?.destroy();
+      track = null;
+      timeline?.kill();
+      split.revert();
+      delete el.dataset.mkReady;
+    }
+  };
+}
+
+// src/recipes/ticket-menu/create-ticket-menu.ts
+var createTicketMenu = (root, options = {}) => createMenu(root, { ...options, ticket: true });
+
+// src/recipes/infinite-reel/create-infinite-reel.ts
+function createInfiniteReel(root, options = {}) {
+  const track = root?.querySelector("[data-mk-reel-track]");
+  if (!root || !track) return inert({ moveBy() {
+  }, pause() {
+  }, resume() {
+  }, position: 0 });
+  const scope = createScope();
+  const still = reduced();
+  const vertical = options.axis === "y";
+  scope.attr(root, "data-mk-axis", vertical ? "y" : "x");
+  scope.attr(root, "tabindex", root.getAttribute("tabindex") ?? "0");
+  scope.attr(track, "style", track.getAttribute("style"));
+  const copies = [];
+  let length = 0;
+  let position = 0;
+  let velocity = 0;
+  let paused = false;
+  let focused = false;
+  let drag = null;
+  let suppressClick = false;
+  const coordinate = (event) => vertical ? event.clientY : event.clientX;
+  const draw = () => {
+    if (still) {
+      if (vertical) root.scrollTop = position;
+      else root.scrollLeft = position;
+      return;
+    }
+    [track, ...copies].forEach((group, index) => {
+      const offset = index * length - position;
+      group.style.transform = vertical ? `translateY(${offset}px)` : `translateX(${offset}px)`;
+    });
+  };
+  const measure = () => {
+    copies.splice(0).forEach((copy) => copy.remove());
+    const rect = track.getBoundingClientRect();
+    length = vertical ? track.scrollHeight || rect.height : track.scrollWidth || rect.width;
+    if (!still && length > 0) {
+      const viewport = root.getBoundingClientRect();
+      const count = Math.min(30, Math.ceil((vertical ? viewport.height : viewport.width) / length) + 1);
+      for (let index = 0; index < count; index++) {
+        const copy = track.cloneNode(true);
+        copy.removeAttribute("id");
+        copy.removeAttribute("data-mk-reel-track");
+        copy.removeAttribute("data-mk");
+        copy.setAttribute("data-mk-reel-copy", "");
+        copy.setAttribute("aria-hidden", "true");
+        copy.setAttribute("inert", "");
+        copy.querySelectorAll("[id]").forEach((child) => child.removeAttribute("id"));
+        copy.querySelectorAll("[data-mk]").forEach((child) => child.removeAttribute("data-mk"));
+        root.append(copy);
+        copies.push(copy);
+      }
+    }
+    position = length > 0 ? wrap(position, length) : 0;
+    draw();
+  };
+  const moveBy = (pixels) => {
+    if (scope.disposed || !Number.isFinite(pixels) || length <= 0) return;
+    position = wrap(position + pixels, length);
+    draw();
+  };
+  scope.on(root, "wheel", (event) => {
+    if (still || !length) return;
+    event.preventDefault();
+    const units = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? vertical ? root.clientHeight : root.clientWidth : 1;
+    velocity += (vertical ? event.deltaY : event.deltaX || event.deltaY) * units * TIMING.infiniteReel.wheel;
+  }, { passive: false });
+  scope.on(root, "pointerdown", (event) => {
+    if (event.button !== 0 || drag || still) return;
+    velocity = 0;
+    suppressClick = false;
+    drag = { point: coordinate(event), id: event.pointerId, moved: 0 };
+  });
+  scope.on(window, "pointermove", (event) => {
+    if (!drag || event.pointerId !== drag.id) return;
+    const delta = drag.point - coordinate(event);
+    drag.moved += Math.abs(delta);
+    drag.point = coordinate(event);
+    if (drag.moved > TIMING.infiniteReel.dragThreshold) {
+      suppressClick = true;
+      root.setPointerCapture?.(event.pointerId);
+      moveBy(delta);
+      velocity = delta;
+    }
+  });
+  const release = (event) => {
+    if (!drag || drag.id !== event.pointerId) return;
+    drag = null;
+    if (root.hasPointerCapture?.(event.pointerId)) root.releasePointerCapture(event.pointerId);
+  };
+  scope.on(window, "pointerup", release);
+  scope.on(window, "pointercancel", (event) => {
+    velocity = 0;
+    release(event);
+  });
+  scope.on(root, "lostpointercapture", release);
+  scope.on(root, "click", (event) => {
+    if (suppressClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      suppressClick = false;
+    }
+  }, true);
+  scope.on(root, "focusin", () => {
+    focused = true;
+  });
+  scope.on(root, "focusout", (event) => {
+    focused = root.contains(event.relatedTarget);
+  });
+  scope.on(root, "keydown", (event) => {
+    if (event.target !== root) return;
+    const next = vertical ? "ArrowDown" : "ArrowRight";
+    const previous = vertical ? "ArrowUp" : "ArrowLeft";
+    if (![next, previous, " "].includes(event.key)) return;
+    event.preventDefault();
+    moveBy((event.key === previous ? -1 : 1) * length / Math.max(1, track.children.length));
+  });
+  if (typeof ResizeObserver === "function") {
+    const observer = scope.observe(new ResizeObserver(measure));
+    observer.observe(root);
+    observer.observe(track);
+  }
+  scope.on(window, "resize", measure);
+  scope.on(track, "load", measure, true);
+  const scroll = { left: root.scrollLeft, top: root.scrollTop };
+  scope.add(() => {
+    copies.forEach((copy) => copy.remove());
+    if (drag && root.hasPointerCapture?.(drag.id)) root.releasePointerCapture(drag.id);
+    root.scrollLeft = scroll.left;
+    root.scrollTop = scroll.top;
+  });
+  measure();
+  if (!still) scope.add(whileVisible(root, (dt) => {
+    if (paused || focused || drag || document.hidden) return;
+    moveBy(((options.speed ?? 0) + velocity) * dt);
+    velocity *= Math.pow(Math.max(0, Math.min(0.999, options.friction ?? TIMING.infiniteReel.friction)), dt);
+  }));
+  return { moveBy, pause() {
+    paused = true;
+  }, resume() {
+    paused = false;
+  }, get position() {
+    return position;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/recipes/repel-bento/create-repel-bento.ts
+function createRepelBento(root, options = {}) {
+  if (!root || reduced()) return inert({ play() {
+  }, reset() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  const items = [...root.children];
+  const animations = /* @__PURE__ */ new Map();
+  const defaults = TIMING.repelBento;
+  const enabled = () => innerWidth >= (options.breakpoint ?? defaults.breakpoint) && !matchMedia("(pointer: coarse)").matches;
+  items.forEach((item) => scope.attr(item, "style", item.getAttribute("style")));
+  const animate = (item, vars) => {
+    animations.get(item)?.kill();
+    animations.set(item, gsap.to(item, { ...vars, overwrite: true }));
+  };
+  const reset = () => {
+    if (scope.disposed) return;
+    items.forEach((item) => animate(item, { x: 0, y: 0, scale: 1, opacity: 1, ...motionSpring(...TIMING.springs.bentoRepel) }));
+  };
+  const play = () => {
+    if (scope.disposed || !enabled()) return;
+    items.forEach((item, index) => {
+      const rect = item.getBoundingClientRect();
+      gsap.set(item, { x: (rect.left + rect.width / 2 - innerWidth / 2) * defaults.offset, y: (rect.top + rect.height / 2 - innerHeight / 2) * defaults.offset, opacity: 0 });
+      animate(item, { x: 0, y: 0, opacity: 1, delay: index * defaults.stagger, ...motionSpring(...TIMING.springs.bentoEnter) });
+    });
+  };
+  items.forEach((hovered) => scope.on(hovered, "pointerenter", () => {
+    if (!enabled()) return;
+    const origin2 = hovered.getBoundingClientRect();
+    items.forEach((item) => {
+      if (item === hovered) {
+        animate(item, { x: 0, y: 0, scale: 1.02, opacity: 1, ...motionSpring(...TIMING.springs.bentoRepel) });
+        return;
+      }
+      const rect = item.getBoundingClientRect();
+      const deltaX = rect.left + rect.width / 2 - origin2.left - origin2.width / 2;
+      const deltaY = rect.top + rect.height / 2 - origin2.top - origin2.height / 2;
+      const distance = Math.hypot(deltaX, deltaY);
+      const magnitude = distance > 0 ? Math.min(defaults.strength / distance, options.distance ?? defaults.distance) : 0;
+      animate(item, { x: distance ? deltaX / distance * magnitude : 0, y: distance ? deltaY / distance * magnitude : 0, scale: 1, opacity: 1, ...motionSpring(...TIMING.springs.bentoRepel) });
+    });
+  }));
+  scope.on(root, "pointerleave", reset);
+  scope.on(window, "resize", reset);
+  scope.add(() => {
+    animations.forEach((animation) => animation.kill());
+    clearStyles(items, ["transform", "translate", "rotate", "scale", "opacity"]);
+  });
+  if (typeof IntersectionObserver === "function") {
+    const observer = scope.observe(new IntersectionObserver(([entry]) => {
+      if (!entry?.isIntersecting) return;
+      play();
+      observer.disconnect();
+    }, { threshold: 0.15 }));
+    observer.observe(root);
+  } else play();
+  return { play, reset, destroy: () => scope.dispose() };
+}
+
+// src/recipes/rotator/create-rotator.ts
+function createRotator(root, options = {}) {
+  const items = root ? [...root.children] : [];
+  if (!root || !items.length) return inert({ select() {
+  }, next() {
+  }, previous() {
+  }, index: 0 });
+  registerMotion();
+  const scope = createScope();
+  const still = reduced();
+  let index = 0;
+  let hovered = false;
+  let focused = false;
+  let timer;
+  let animation;
+  for (const item of items) scope.attr(item, "style", item.getAttribute("style"));
+  const select = (next, notify = true) => {
+    if (scope.disposed || !Number.isFinite(next)) return;
+    index = wrap(Math.round(next), items.length);
+    animation?.kill();
+    for (const [position, item] of items.entries()) {
+      scope.attr(item, "hidden", position === index ? null : "");
+      scope.attr(item, "inert", position === index ? null : "");
+    }
+    if (!still) animation = gsap.fromTo(items[index], { opacity: 0, y: TIMING.rotator.y }, { opacity: 1, y: 0, duration: TIMING.rotator.duration, overwrite: true });
+    if (notify) {
+      options.onChange?.(index);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { index } }));
+    }
+  };
+  const restart = () => {
+    clearInterval(timer);
+    if (scope.disposed || still || options.autoplay === false || hovered || focused || document.hidden || items.length < 2) return;
+    timer = setInterval(() => select(index + 1), Math.max(100, options.interval ?? TIMING.rotator.interval));
+  };
+  const move = (next) => {
+    select(next);
+    restart();
+  };
+  scope.on(root, "pointerenter", () => {
+    hovered = true;
+    restart();
+  });
+  scope.on(root, "pointerleave", () => {
+    hovered = false;
+    restart();
+  });
+  scope.on(root, "focusin", () => {
+    focused = true;
+    restart();
+  });
+  scope.on(root, "focusout", (event) => {
+    focused = root.contains(event.relatedTarget);
+    restart();
+  });
+  scope.on(document, "visibilitychange", restart);
+  scope.add(() => {
+    clearInterval(timer);
+    animation?.kill();
+    clearStyles(items, ["transform", "translate", "rotate", "scale", "opacity"]);
+  });
+  select(options.index ?? 0, false);
+  restart();
+  return { select: move, next: () => move(index + 1), previous: () => move(index - 1), get index() {
+    return index;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/recipes/drag-ruler/create-drag-ruler.ts
+function createDragRuler(root, options = {}) {
+  if (!root) return inert({ set() {
+  }, value: 0 });
+  const scope = createScope();
+  const defaults = TIMING.dragRuler;
+  const min = Number.isFinite(options.min) ? options.min : defaults.min;
+  const max = Math.max(min, Number.isFinite(options.max) ? options.max : defaults.max);
+  const step = Number.isFinite(options.step) && options.step > 0 ? options.step : defaults.step;
+  const pixels = Number.isFinite(options.pixelsPerUnit) && options.pixelsPerUnit > 0 ? options.pixelsPerUnit : defaults.pixelsPerUnit;
+  let value = min;
+  let drag = null;
+  const track = document.createElement("span");
+  track.className = "mk-drag-ruler__track";
+  track.setAttribute("aria-hidden", "true");
+  const count = Math.min(500, Math.ceil((max - min) / step));
+  for (let index = 0; index <= count; index++) {
+    const tick = document.createElement("span");
+    const tickValue = min + index * ((max - min) / Math.max(1, count));
+    tick.className = "mk-drag-ruler__tick";
+    tick.style.left = `${(tickValue - min) * pixels}px`;
+    if (index % 10 === 0) tick.textContent = String(Number(tickValue.toFixed(2)));
+    track.append(tick);
+  }
+  root.append(track);
+  scope.add(() => track.remove());
+  scope.attr(root, "role", "slider");
+  scope.attr(root, "tabindex", root.getAttribute("tabindex") ?? "0");
+  scope.attr(root, "aria-orientation", "horizontal");
+  scope.attr(root, "aria-valuemin", String(min));
+  scope.attr(root, "aria-valuemax", String(max));
+  const set = (next, notify = true) => {
+    if (scope.disposed || !Number.isFinite(next)) return;
+    const snapped = clamp(Number((min + Math.round((next - min) / step) * step).toFixed(8)), min, max);
+    const changed = snapped !== value;
+    value = snapped;
+    scope.attr(root, "aria-valuenow", String(value));
+    track.style.transform = `translateX(${-(value - min) * pixels - 3}px)`;
+    if (changed && notify) {
+      options.onChange?.(value);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value } }));
+    }
+  };
+  scope.on(root, "keydown", (event) => {
+    const keys = {
+      ArrowLeft: value - step,
+      ArrowDown: value - step,
+      ArrowRight: value + step,
+      ArrowUp: value + step,
+      PageDown: value - step * 10,
+      PageUp: value + step * 10,
+      Home: min,
+      End: max
+    };
+    if (!(event.key in keys)) return;
+    event.preventDefault();
+    set(keys[event.key]);
+  });
+  scope.on(root, "pointerdown", (event) => {
+    if (event.button !== 0 || drag) return;
+    drag = { x: event.clientX, value, id: event.pointerId };
+    root.setPointerCapture?.(event.pointerId);
+    scope.attr(root, "data-mk-dragging", "");
+    root.focus({ preventScroll: true });
+  });
+  scope.on(window, "pointermove", (event) => {
+    if (!drag || event.pointerId !== drag.id) return;
+    set(drag.value - (event.clientX - drag.x) / pixels);
+  });
+  const release = (event) => {
+    if (!drag || event.pointerId !== drag.id) return;
+    if (root.hasPointerCapture?.(drag.id)) root.releasePointerCapture(drag.id);
+    drag = null;
+    scope.attr(root, "data-mk-dragging", null);
+  };
+  scope.on(window, "pointerup", release);
+  scope.on(window, "pointercancel", release);
+  scope.on(root, "lostpointercapture", release);
+  scope.add(() => {
+    if (drag && root.hasPointerCapture?.(drag.id)) root.releasePointerCapture(drag.id);
+  });
+  set(options.value ?? max, false);
+  return { set, get value() {
+    return value;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/recipes/dock-pill/create-dock-pill.ts
+function createDockPill(root, options = {}) {
+  const items = root ? [...root.querySelectorAll("[data-mk-dock-item]")] : [];
+  if (!root || !items.length) return inert({ select() {
+  }, index: 0 });
+  registerMotion();
+  const scope = createScope();
+  const indicator = document.createElement("span");
+  indicator.className = "mk-dock-pill__indicator";
+  indicator.setAttribute("aria-hidden", "true");
+  root.prepend(indicator);
+  scope.add(() => indicator.remove());
+  let index = Math.max(0, items.findIndex((item) => item.getAttribute("aria-current") === "page"));
+  let animation;
+  const measure = (animate = true) => {
+    if (scope.disposed) return;
+    const item = items[index];
+    const target = { x: item.offsetLeft, y: item.offsetTop, width: item.offsetWidth, height: item.offsetHeight };
+    animation?.kill();
+    if (animate && !reduced()) animation = gsap.to(indicator, { ...target, ...motionSpring(...TIMING.springs.dockPill), overwrite: true });
+    else gsap.set(indicator, target);
+  };
+  const select = (next, notify = true) => {
+    if (scope.disposed || !Number.isFinite(next)) return;
+    const candidate = wrap(Math.round(next), items.length);
+    if (items[candidate].matches(':disabled, [aria-disabled="true"]')) return;
+    index = candidate;
+    items.forEach((item, position) => scope.attr(item, "aria-current", position === index ? "page" : null));
+    measure(notify);
+    if (notify) {
+      options.onSelect?.(index, items[index]);
+      root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { index, item: items[index] } }));
+    }
+  };
+  scope.on(root, "click", (event) => {
+    const item = event.target.closest("[data-mk-dock-item]");
+    if (item && items.includes(item)) select(items.indexOf(item));
+  });
+  scope.on(root, "keydown", (event) => {
+    const current = items.indexOf(document.activeElement);
+    if (current < 0) return;
+    const direction = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    if (!direction && event.key !== "Home" && event.key !== "End") return;
+    event.preventDefault();
+    let next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : wrap(current + direction, items.length);
+    for (let tries = 0; tries < items.length && items[next].matches(':disabled, [aria-disabled="true"]'); tries++) next = wrap(next + (direction || 1), items.length);
+    select(next);
+    items[index].focus();
+  });
+  if (typeof ResizeObserver === "function") {
+    const observer = scope.observe(new ResizeObserver(() => measure(false)));
+    observer.observe(root);
+    items.forEach((item) => observer.observe(item));
+  }
+  scope.on(window, "resize", () => measure(false));
+  scope.add(() => animation?.kill());
+  select(options.index ?? index, false);
+  return { select, get index() {
+    return index;
+  }, destroy: () => scope.dispose() };
+}
+
+export {
+  trackScroll,
+  toggleDetails,
+  installDetailsMotion,
+  slideIndicator,
+  captureLayout,
+  reflowLayout,
+  createSpring,
+  createSpringCards,
+  createCurvedCarousel,
+  pileLayers,
+  pileStyle,
+  createPile,
+  createWords,
+  createFlow,
+  createPop,
+  createFitText,
+  createStretchFooter,
+  createRadialMenu,
+  createTabs,
+  createCounter,
+  createDetails,
+  createReveal,
+  createReflow,
+  createSlotText,
+  createSortable,
+  moveItem,
+  createMaskText,
+  createCascade,
+  createTextRoll,
+  createLetters,
+  createParallax,
+  createDepthGrid,
+  createFrameZoom,
+  createContrast,
+  createMarquee,
+  createCardDock,
+  createSnapStrip,
+  createFillText,
+  createTicketMenu,
+  createInfiniteReel,
+  createRepelBento,
+  createRotator,
+  createDragRuler,
+  createDockPill
+};
+//# sourceMappingURL=chunk-FS2HJVVY.js.map