@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/dist/{chunk-FS2HJVVY.js → chunk-XAKC2QY7.js}

@@ -1,4 +1,5 @@
 import {
+  CustomEase,
   EASE,
   ELASTIC,
   Flip,
@@ -16,20 +17,20 @@ import {
   revealFrom,
   splitGraphemes,
   takeMovement
-} from "./chunk-34XYOXHG.js";
+} from "./chunk-TFNRIZHU.js";
 import {
   clamp,
   damp,
   mapRange,
   wrap
-} from "./chunk-KLY5BRRI.js";
+} from "./chunk-34EZ7DF4.js";
 import {
   TIMING,
   createScope,
   entrances,
   reduced,
   whileVisible
-} from "./chunk-RFDIZYFX.js";
+} from "./chunk-DOOMULVV.js";
 import {
   inert,
   warnOnce
@@ -3271,6 +3272,1193 @@ function createDockPill(root, options = {}) {
   }, destroy: () => scope.dispose() };
 }
 
+// src/recipes/joined-cta/create-joined-cta.ts
+function createJoinedCta(root, options = {}) {
+  if (!root) return inert({ expand() {
+  }, collapse() {
+  }, expanded: false });
+  const scope = createScope();
+  let expanded = false;
+  let pointer2 = false;
+  scope.attr(root, "style", root.getAttribute("style"));
+  scope.attr(root, "data-mk-ready", "");
+  if (Number.isFinite(options.duration)) root.style.setProperty("--mk-joined-duration", `${Math.max(0, options.duration)}s`);
+  const set = (value) => {
+    if (!scope.disposed) {
+      expanded = value;
+      scope.attr(root, "data-mk-expanded", value ? "" : null);
+    }
+  };
+  scope.on(root, "pointerenter", () => {
+    pointer2 = true;
+    set(true);
+  });
+  scope.on(root, "pointerleave", () => {
+    pointer2 = false;
+    if (!root.contains(document.activeElement)) set(false);
+  });
+  scope.on(root, "focusin", () => set(true));
+  scope.on(root, "focusout", (event) => {
+    if (!pointer2 && !root.contains(event.relatedTarget)) set(false);
+  });
+  return { expand: () => set(true), collapse: () => set(false), get expanded() {
+    return expanded;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/recipes/image-zoom/create-image-zoom.ts
+function createImageZoom(root, options = {}) {
+  if (!root) return inert({ open() {
+  }, active: false });
+  const scope = createScope();
+  let active = false;
+  let pointer2 = false;
+  scope.attr(root, "style", root.getAttribute("style"));
+  scope.attr(root, "data-mk-ready", "");
+  const setVariable = (name, value, suffix = "") => {
+    if (Number.isFinite(value)) root.style.setProperty(name, `${Math.max(0, value)}${suffix}`);
+  };
+  setVariable("--mk-zoom-duration", options.duration, "s");
+  setVariable("--mk-zoom-frame-scale", options.frameScale);
+  setVariable("--mk-zoom-image-scale", options.imageScale);
+  const set = (on) => {
+    if (!scope.disposed) {
+      active = on;
+      scope.attr(root, "data-mk-active", on ? "" : null);
+    }
+  };
+  scope.on(root, "pointerenter", () => {
+    pointer2 = true;
+    set(true);
+  });
+  scope.on(root, "pointerleave", () => {
+    pointer2 = false;
+    if (!root.contains(document.activeElement)) set(false);
+  });
+  scope.on(root, "focusin", () => set(true));
+  scope.on(root, "focusout", (event) => {
+    if (!pointer2 && !root.contains(event.relatedTarget)) set(false);
+  });
+  return { open: set, get active() {
+    return active;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/recipes/font-cycle/create-font-cycle.ts
+function applyFace(element, face2) {
+  if (face2.family) element.style.fontFamily = face2.family;
+  if (face2.weight !== void 0) element.style.fontWeight = String(face2.weight);
+  if (face2.style) element.style.fontStyle = face2.style;
+  const axes = Object.entries(face2.axes ?? {}).filter(([tag, value]) => /^[\w ]{4}$/.test(tag) && Number.isFinite(value));
+  if (axes.length) element.style.fontVariationSettings = axes.map(([tag, value]) => `"${tag}" ${value}`).join(", ");
+}
+function createFontCycle(root, options = {}) {
+  if (!root || typeof document === "undefined") return inert({ play() {
+  }, reset() {
+  }, active: false });
+  registerMotion();
+  const scope = createScope();
+  const original = [...root.childNodes];
+  const text = options.text ?? root.textContent ?? "";
+  const faces = options.faces ?? [
+    { weight: 500, axes: { wght: 500, wdth: 75 } },
+    { family: root.dataset.mkFontAlternate, weight: 900, axes: { wght: 900, wdth: 125 } }
+  ];
+  const duration = Math.max(0, options.duration ?? 0.6);
+  const stagger = Math.max(0, options.stagger ?? 0.035);
+  const tracks = [];
+  let animation;
+  let active = false;
+  let hovered = false;
+  let focused = false;
+  const copy = document.createElement("span");
+  copy.className = "mk-font-cycle__accessible";
+  copy.textContent = text;
+  const visual = document.createElement("span");
+  visual.className = "mk-font-cycle__visual";
+  visual.setAttribute("aria-hidden", "true");
+  for (const [index, letter] of splitGraphemes(text, Number.MAX_SAFE_INTEGER).entries()) {
+    const character = document.createElement("span");
+    character.className = "mk-font-cycle__char";
+    const track = document.createElement("span");
+    track.className = "mk-font-cycle__track";
+    for (let side = 0; side < 2; side++) {
+      const face2 = document.createElement("span");
+      face2.className = "mk-font-cycle__face";
+      face2.textContent = letter === " " ? "\xA0" : letter;
+      applyFace(face2, faces[(index + side) % 2]);
+      const sizer = face2.cloneNode(true);
+      sizer.className = "mk-font-cycle__sizer";
+      character.append(sizer);
+      track.append(face2);
+    }
+    character.append(track);
+    visual.append(character);
+    tracks.push(track);
+  }
+  root.replaceChildren(copy, visual);
+  const overlaySrc = options.overlaySrc ?? root.dataset.mkFontOverlay;
+  if (overlaySrc) {
+    const overlay = document.createElement("img");
+    overlay.className = "mk-font-cycle__overlay";
+    overlay.alt = "";
+    overlay.setAttribute("aria-hidden", "true");
+    scope.attr(root, "data-mk-font-overlay-ready", null);
+    const loaded = () => {
+      if (!scope.disposed) scope.attr(root, "data-mk-font-overlay-ready", overlay.naturalWidth > 0 ? "" : null);
+    };
+    scope.on(overlay, "load", loaded);
+    scope.on(overlay, "error", () => {
+      if (!scope.disposed) scope.attr(root, "data-mk-font-overlay-ready", null);
+    });
+    overlay.src = overlaySrc;
+    root.append(overlay);
+    if (overlay.complete) loaded();
+  }
+  scope.add(() => root.replaceChildren(...original));
+  scope.attr(root, "class", `${root.className} mk-font-cycle`.trim());
+  scope.attr(root, "data-mk-ready", "");
+  const setActive = (next) => {
+    if (scope.disposed || next === active) return;
+    active = next;
+    scope.attr(root, "data-mk-active", next ? "" : null);
+    animation?.kill();
+    if (reduced() || duration === 0) gsap.set(tracks, { yPercent: next ? -50 : 0 });
+    else animation = gsap.to(tracks, { yPercent: next ? -50 : 0, duration, stagger, ease: "power3.out", overwrite: true });
+  };
+  scope.on(root, "mouseenter", () => {
+    hovered = true;
+    setActive(true);
+  });
+  scope.on(root, "mouseleave", () => {
+    hovered = false;
+    setActive(focused);
+  });
+  scope.on(root, "focusin", () => {
+    focused = true;
+    setActive(true);
+  });
+  scope.on(root, "focusout", (event) => {
+    if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;
+    focused = false;
+    setActive(hovered);
+  });
+  scope.add(() => animation?.kill());
+  return { play: () => setActive(true), reset: () => setActive(false), get active() {
+    return active;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/recipes/thumbnail-nav/create-thumbnail-nav.ts
+var panelSequence = 0;
+function createThumbnailNav(root, options = {}) {
+  const items = root ? [...root.querySelectorAll("[data-mk-thumbnail-item]")] : [];
+  if (!root || !items.length || typeof document === "undefined") return inert({ open() {
+  }, close() {
+  }, toggle() {
+  }, select() {
+  }, index: 0, expanded: false });
+  registerMotion();
+  const scope = createScope();
+  const original = [...root.childNodes];
+  const duration = Math.max(0, options.duration ?? 0.5);
+  const disabled = (item) => item.matches(':disabled, [aria-disabled="true"]');
+  const name = (item) => item.dataset.mkLabel ?? item.textContent?.trim() ?? "";
+  let index = 0;
+  let expanded = false;
+  let animation;
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "mk-thumbnail-nav__toggle";
+  button.setAttribute("aria-expanded", "false");
+  const preview = document.createElement("span");
+  preview.className = "mk-thumbnail-nav__preview";
+  preview.setAttribute("aria-hidden", "true");
+  const copy = document.createElement("span");
+  copy.className = "mk-thumbnail-nav__copy";
+  const kicker = document.createElement("span");
+  kicker.className = "mk-thumbnail-nav__kicker";
+  kicker.textContent = options.label ?? root.dataset.mkLabel ?? "Categor\xEDa";
+  const label = document.createElement("span");
+  label.className = "mk-thumbnail-nav__label";
+  copy.append(kicker, label);
+  const arrow = document.createElement("span");
+  arrow.className = "mk-thumbnail-nav__chevron";
+  arrow.setAttribute("aria-hidden", "true");
+  arrow.textContent = "\u2304";
+  button.append(preview, copy, arrow);
+  const panel = document.createElement("div");
+  panel.className = "mk-thumbnail-nav__panel";
+  panel.id = `mk-thumbnail-panel-${++panelSequence}`;
+  while (document.getElementById(panel.id)) panel.id = `mk-thumbnail-panel-${++panelSequence}`;
+  panel.hidden = true;
+  panel.inert = true;
+  button.setAttribute("aria-controls", panel.id);
+  panel.append(...original);
+  root.replaceChildren(button, panel);
+  scope.add(() => root.replaceChildren(...original));
+  scope.attr(root, "class", `${root.className} mk-thumbnail-nav`.trim());
+  scope.attr(root, "style", root.getAttribute("style"));
+  root.style.setProperty("--mk-thumbnail-nav-duration", `${duration}s`);
+  scope.attr(root, "data-mk-ready", "");
+  const updatePreview = () => {
+    label.textContent = name(items[index]);
+    button.setAttribute("aria-label", `${kicker.textContent}: ${label.textContent}`);
+    preview.replaceChildren();
+    for (let offset = 0; offset < Math.min(3, items.length); offset++) {
+      const item = items[wrap(index + offset, items.length)];
+      const thumb = document.createElement("span");
+      thumb.className = "mk-thumbnail-nav__thumb";
+      thumb.style.setProperty("--mk-thumbnail-order", String(offset));
+      const source = item.querySelector("img");
+      if (source) {
+        const image = source.cloneNode(false);
+        image.removeAttribute("id");
+        image.alt = "";
+        thumb.append(image);
+      } else thumb.textContent = name(item).slice(0, 1);
+      preview.append(thumb);
+    }
+  };
+  const focusItem = (candidate, direction = 1) => {
+    for (let attempt = 0; attempt < items.length; attempt++) {
+      const current = items[wrap(candidate, items.length)];
+      if (!disabled(current)) {
+        current.focus();
+        return;
+      }
+      candidate += direction;
+    }
+  };
+  const close = (restoreFocus = panel.contains(document.activeElement)) => {
+    if (scope.disposed || !expanded) return;
+    expanded = false;
+    button.setAttribute("aria-expanded", "false");
+    scope.attr(root, "data-mk-expanded", null);
+    panel.inert = true;
+    animation?.kill();
+    if (restoreFocus) button.focus();
+    if (reduced() || duration === 0) panel.hidden = true;
+    else animation = gsap.to(panel, { autoAlpha: 0, y: 10, scale: 0.98, duration: duration * 0.6, ease: "power3.out", overwrite: true, onComplete: () => {
+      panel.hidden = true;
+    } });
+  };
+  const open = () => {
+    if (scope.disposed || expanded) return;
+    expanded = true;
+    panel.hidden = false;
+    panel.inert = false;
+    button.setAttribute("aria-expanded", "true");
+    scope.attr(root, "data-mk-expanded", "");
+    animation?.kill();
+    if (reduced() || duration === 0) gsap.set(panel, { autoAlpha: 1, y: 0, scale: 1 });
+    else animation = gsap.fromTo(panel, { autoAlpha: 0, y: 12, scale: 0.96 }, { autoAlpha: 1, y: 0, scale: 1, duration, ease: "power3.out", overwrite: true });
+  };
+  const select = (next, notify = true) => {
+    if (scope.disposed || !Number.isFinite(next)) return false;
+    const candidate = wrap(Math.round(next), items.length);
+    const item = items[candidate];
+    if (disabled(item)) return false;
+    if (notify && !root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, cancelable: true, detail: { index: candidate, item } }))) return false;
+    index = candidate;
+    items.forEach((entry, position) => scope.attr(entry, "aria-current", position === index ? "page" : null));
+    updatePreview();
+    if (notify) options.onSelect?.(index, item);
+    return true;
+  };
+  scope.on(button, "click", () => {
+    if (expanded) close();
+    else open();
+  });
+  scope.on(root, "click", (event) => {
+    const item = event.target.closest("[data-mk-thumbnail-item]");
+    if (!item || !items.includes(item)) return;
+    if (!select(items.indexOf(item))) {
+      event.preventDefault();
+      return;
+    }
+    close(true);
+  });
+  scope.on(root, "keydown", (event) => {
+    if (event.key === "Escape" && expanded) {
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+      return;
+    }
+    const current = items.indexOf(document.activeElement);
+    const onTrigger = document.activeElement === button;
+    const direction = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" || event.key === "ArrowLeft" ? -1 : 0;
+    if (!direction && event.key !== "Home" && event.key !== "End" || !onTrigger && current < 0) return;
+    event.preventDefault();
+    open();
+    const candidate = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : onTrigger ? index : current + direction;
+    focusItem(candidate, event.key === "End" ? -1 : direction || 1);
+  });
+  scope.on(root, "focusout", (event) => {
+    if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;
+    scope.timeout(() => {
+      if (!scope.disposed && !root.contains(document.activeElement)) close(false);
+    }, 0);
+  });
+  scope.on(document, "pointerdown", (event) => {
+    if (event.target instanceof Node && !root.contains(event.target)) close(false);
+  });
+  scope.add(() => animation?.kill());
+  const initial = options.index ?? Math.max(0, items.findIndex((item) => item.getAttribute("aria-current") === "page"));
+  const enabled = items.findIndex((item) => !disabled(item));
+  if (!select(initial, false)) {
+    if (enabled >= 0) select(enabled, false);
+    else {
+      updatePreview();
+      button.disabled = true;
+    }
+  }
+  return { open, close: () => close(), toggle: () => {
+    if (expanded) close();
+    else open();
+  }, select: (next) => {
+    select(next);
+  }, get index() {
+    return index;
+  }, get expanded() {
+    return expanded;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/recipes/action-button/create-action-button.ts
+function createActionButton(root, options = {}) {
+  if (!root) return inert({ setPressed() {
+  }, pressed: false });
+  const scope = createScope();
+  const variant = options.variant ?? root.getAttribute("data-mk-action-variant") ?? "primary";
+  scope.attr(root, "data-mk-action-variant", variant);
+  scope.attr(root, "data-mk-action-ready", "");
+  const label = root.querySelector("[data-mk-action-label]");
+  if (label && variant === "film") {
+    const nodes = [...label.childNodes];
+    const line = document.createElement("span");
+    line.className = "mk-action-button__line";
+    line.append(...nodes);
+    const copy = document.createElement("span");
+    copy.className = "mk-action-button__copy";
+    copy.setAttribute("aria-hidden", "true");
+    copy.textContent = line.textContent;
+    label.append(line, copy);
+    scope.add(() => {
+      label.replaceChildren(...nodes);
+    });
+  }
+  let pressed = options.pressed ?? root.getAttribute("aria-pressed") === "true";
+  if (options.toggle || options.pressed !== void 0) scope.attr(root, "aria-pressed", String(pressed));
+  const setPressed = (next) => {
+    if (scope.disposed || next === pressed) return;
+    pressed = next;
+    scope.attr(root, "aria-pressed", String(pressed));
+    options.onPressedChange?.(pressed);
+    root.dispatchEvent(new CustomEvent("mk:action-change", { bubbles: true, detail: { pressed } }));
+  };
+  scope.on(root, "click", (event) => {
+    if (event.defaultPrevented) return;
+    if (root.hasAttribute("disabled") || root.getAttribute("aria-disabled") === "true") {
+      event.preventDefault();
+      return;
+    }
+    if (options.toggle) setPressed(!pressed);
+  });
+  return { setPressed, get pressed() {
+    return pressed;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/recipes/film-hero/create-film-hero.ts
+function createFilmHero(root, options = {}) {
+  if (!root) return inert({ replay() {
+  }, refresh() {
+  } });
+  const scope = createScope();
+  scope.attr(root, "data-mk-film-ready", "");
+  scope.attr(root, "data-mk-film-edge", options.edge ?? "organic");
+  scope.attr(root, "style", root.getAttribute("style"));
+  const still = reduced();
+  const lines = [...root.querySelectorAll("[data-mk-film-line]")];
+  const rules = [...root.querySelectorAll("[data-mk-film-rule]")];
+  [...lines, ...rules].forEach((element) => scope.attr(element, "style", element.getAttribute("style")));
+  let timeline = null;
+  const context = gsap.context(() => {
+  }, root);
+  const replay = () => {
+    if (scope.disposed || !entrances()) return;
+    registerMotion();
+    context.add(() => {
+      timeline?.kill();
+      timeline = gsap.timeline();
+      if (lines.length) timeline.fromTo(lines, { yPercent: 120 }, { yPercent: 0, duration: options.duration ?? 0.7, stagger: options.stagger ?? 0.08, ease: "power3.out" }, 0);
+      if (rules.length) timeline.fromTo(rules, { scaleX: 0, transformOrigin: "left center" }, { scaleX: 1, duration: 0.9, stagger: 0.06, ease: "power3.out" }, 0.08);
+    });
+  };
+  replay();
+  const scroller = options.scroller ?? root.closest("[data-mk-scroll-root]") ?? window;
+  let frame = 0;
+  const refresh = () => {
+    if (scope.disposed || still) return;
+    const rect = root.getBoundingClientRect();
+    const view = scroller instanceof HTMLElement ? scroller.getBoundingClientRect() : { top: 0, height: window.innerHeight };
+    const progress = Math.max(0, Math.min(1, (view.top - rect.top) / Math.max(1, rect.height)));
+    root.style.setProperty("--mk-film-shift", `${(progress * rect.height * (options.parallax ?? 0.12)).toFixed(2)}px`);
+    root.style.setProperty("--mk-film-scale", String((options.scale ?? 1.08) - progress * Math.max(0, (options.scale ?? 1.08) - 1)));
+  };
+  if (!still) {
+    const schedule = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        refresh();
+      });
+    };
+    scope.on(scroller, "scroll", schedule, { passive: true });
+    scope.on(window, "resize", schedule, { passive: true });
+    if (typeof ResizeObserver === "function") scope.observe(new ResizeObserver(schedule)).observe(root);
+    scope.add(() => cancelAnimationFrame(frame));
+    refresh();
+  }
+  scope.add(() => {
+    timeline?.kill();
+    context.revert();
+  });
+  return { replay, refresh, destroy: () => scope.dispose() };
+}
+
+// src/recipes/editorial-reveal/create-editorial-reveal.ts
+var nextScope = 0;
+function createEditorialReveal(root, options = {}) {
+  if (!root) return inert({ play() {
+  }, reset() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  const context = gsap.context(() => {
+  }, root);
+  const trigger = options.trigger ?? "scroll";
+  const duration = options.duration ?? 1.2;
+  const stagger = options.stagger ?? 0.03;
+  const hoverDuration = options.hoverDuration ?? 0.5;
+  const ease = options.ease ?? "mk-editorial-reference";
+  CustomEase.create("mk-editorial-reference", "M0,0 C0.6,0 0,1 1,1");
+  const preserve = (el) => ["style", "data-mk-ready", "aria-label"].forEach((name) => scope.attr(el, name, el.getAttribute(name)));
+  preserve(root);
+  root.querySelectorAll("[data-mk-editorial-title],[data-mk-editorial-group],[data-mk-cascade],[data-mk-editorial-image],[data-mk-parallax-target],[data-mk-editorial-header],[data-mk-editorial-card-image],[data-mk-editorial-button-content]").forEach(preserve);
+  const titles = [...root.querySelectorAll("[data-mk-editorial-title]")].map((el) => createMaskText(el, { by: "lines", trigger, once: true, y: options.y ?? 110, duration, stagger, ease, delay: 0 }));
+  const groups = [...root.querySelectorAll("[data-mk-editorial-group]")].map((el) => createCascade(el, { trigger, duration, step: stagger, once: true }));
+  const images = options.parallax === false ? [] : [...root.querySelectorAll("[data-mk-editorial-image]")].map((el) => createParallax(el, { amount: 0.25 }));
+  const header = root.querySelector("[data-mk-editorial-header]");
+  const sections = [...root.querySelectorAll("[data-mk-tone]")];
+  const scopeId = String(++nextScope);
+  sections.forEach((el) => scope.attr(el, "data-mk-editorial-scope", scopeId));
+  const contrast = header ? createContrast(header, { sections: `[data-mk-editorial-scope="${scopeId}"]` }) : null;
+  scope.add(() => {
+    titles.forEach((instance) => instance.destroy());
+    groups.forEach((instance) => instance.destroy());
+    images.forEach((instance) => instance.destroy());
+    contrast?.destroy();
+    context.revert();
+  });
+  root.querySelectorAll("[data-mk-editorial-button]").forEach((button) => {
+    const content = button.querySelector("[data-mk-editorial-button-content]");
+    if (!content) return;
+    let pointerInside = false;
+    const render = () => {
+      const active = pointerInside || button.contains(root.ownerDocument.activeElement);
+      context.add(() => gsap.to(content, { x: active && !reduced() ? `${options.buttonShift ?? 2.25}em` : "0em", duration: reduced() ? 0 : hoverDuration, ease, overwrite: true }));
+    };
+    scope.on(button, "pointerenter", () => {
+      pointerInside = true;
+      render();
+    });
+    scope.on(button, "pointerleave", () => {
+      pointerInside = false;
+      render();
+    });
+    scope.on(button, "focusin", render);
+    scope.on(button, "focusout", () => {
+      scope.timeout(render, 0);
+    });
+  });
+  const cursor = root.querySelector("[data-mk-editorial-cursor]");
+  if (cursor) {
+    preserve(cursor);
+    scope.attr(cursor, "aria-hidden", "true");
+    scope.attr(cursor, "hidden", "");
+  }
+  root.querySelectorAll("[data-mk-editorial-card]").forEach((card) => {
+    const image = card.querySelector("[data-mk-editorial-card-image]");
+    let pointerInside = false;
+    const render = () => {
+      const active = pointerInside || card.contains(root.ownerDocument.activeElement);
+      scope.attr(card, "data-mk-editorial-active", active ? "" : null);
+      if (image) context.add(() => gsap.to(image, { scale: active && !reduced() ? options.imageScale ?? 1.04 : 1, duration: reduced() ? 0 : hoverDuration, ease, overwrite: true }));
+    };
+    scope.on(card, "pointerenter", (event) => {
+      pointerInside = true;
+      render();
+      if (cursor && !reduced() && event.pointerType !== "touch") scope.attr(cursor, "hidden", null);
+    });
+    scope.on(card, "pointerleave", () => {
+      pointerInside = false;
+      render();
+      if (cursor) scope.attr(cursor, "hidden", "");
+    });
+    scope.on(card, "pointermove", (event) => {
+      if (!cursor || reduced() || event.pointerType === "touch") return;
+      const rect = root.getBoundingClientRect();
+      cursor.style.transform = `translate(${event.clientX - rect.left + 16}px, ${event.clientY - rect.top + 16}px)`;
+    });
+    scope.on(card, "focusin", render);
+    scope.on(card, "focusout", () => {
+      scope.timeout(render, 0);
+    });
+  });
+  scope.attr(root, "data-mk-ready", "");
+  return {
+    play() {
+      if (!scope.disposed) {
+        titles.forEach((instance) => instance.play());
+        groups.forEach((instance) => instance.play());
+      }
+    },
+    reset() {
+      if (!scope.disposed) {
+        titles.forEach((instance) => instance.hide());
+        groups.forEach((instance) => instance.reset());
+      }
+    },
+    destroy() {
+      scope.dispose();
+    }
+  };
+}
+
+// src/recipes/weight-hover/create-weight-hover.ts
+var FAR = -1e5;
+function createWeightHover(root, options = {}) {
+  if (!root) return inert({ pointAt() {
+  } });
+  const scope = createScope();
+  scope.attr(root, "data-mk-ready", "");
+  if (reduced()) return { pointAt() {
+  }, destroy: () => scope.dispose() };
+  const num = (value, fallback) => Number.isFinite(value) ? value : fallback;
+  const rest = num(options.rest, 900);
+  const near = num(options.near, 200);
+  const radius = Math.max(1, num(options.radius, 400));
+  const lerp = Math.min(1, Math.max(0.01, num(options.lerp, 0.1)));
+  const axis = /^[A-Za-z]{4}$/.test(options.axis ?? "") ? options.axis : "wght";
+  const setting = (value) => `"${axis}" ${value.toFixed(1)}`;
+  const original = [...root.childNodes];
+  const copy = document.createElement("span");
+  copy.className = "mk-sr-only";
+  const spoken = root.cloneNode(true);
+  spoken.querySelectorAll("br").forEach((br) => br.replaceWith(" "));
+  copy.textContent = spoken.textContent?.replace(/\s+/g, " ").trim() ?? "";
+  const visual = document.createElement("span");
+  visual.className = "mk-weight-hover__visual";
+  visual.setAttribute("aria-hidden", "true");
+  visual.append(...original.map((node) => node.cloneNode(true)));
+  const letters2 = [];
+  const walker = document.createTreeWalker(visual, NodeFilter.SHOW_TEXT);
+  const texts = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) texts.push(node);
+  for (const text of texts) {
+    const fragment = document.createDocumentFragment();
+    for (const char of text.data) {
+      if (/\s/.test(char)) {
+        fragment.append(char);
+        continue;
+      }
+      const span = document.createElement("span");
+      span.dataset.mkWeightChar = "";
+      span.textContent = char;
+      span.style.fontVariationSettings = setting(rest);
+      fragment.append(span);
+      letters2.push({ span, value: rest, x: 0, y: 0 });
+    }
+    text.replaceWith(fragment);
+  }
+  root.replaceChildren(copy, visual);
+  scope.add(() => root.replaceChildren(...original));
+  const measure = () => {
+    const box = root.getBoundingClientRect();
+    for (const letter of letters2) {
+      const r = letter.span.getBoundingClientRect();
+      letter.x = r.left + r.width / 2 - box.left;
+      letter.y = r.top + r.height / 2 - box.top;
+    }
+  };
+  measure();
+  if (typeof ResizeObserver === "function") scope.observe(new ResizeObserver(measure)).observe(root);
+  document.fonts?.ready.then(() => {
+    if (!scope.disposed) measure();
+  });
+  const pointer2 = { x: FAR, y: FAR };
+  let frame = 0;
+  const tick = () => {
+    frame = 0;
+    if (scope.disposed) return;
+    const box = root.getBoundingClientRect();
+    let moving = false;
+    for (const letter of letters2) {
+      const distance = Math.hypot(pointer2.x - (box.left + letter.x), pointer2.y - (box.top + letter.y));
+      const d = Math.max(0, 1 - distance / radius);
+      const target = rest + (near - rest) * d * d * (3 - 2 * d);
+      letter.value += (target - letter.value) * lerp;
+      if (Math.abs(target - letter.value) > 0.5) moving = true;
+      else letter.value = target;
+      letter.span.style.fontVariationSettings = setting(letter.value);
+    }
+    if (moving) frame = requestAnimationFrame(tick);
+  };
+  const wake = () => {
+    if (!frame && !scope.disposed) frame = requestAnimationFrame(tick);
+  };
+  scope.add(() => cancelAnimationFrame(frame));
+  scope.on(window, "pointermove", (event) => {
+    const e = event;
+    if (!options.anyPointer && e.pointerType && e.pointerType !== "mouse") return;
+    pointer2.x = e.clientX;
+    pointer2.y = e.clientY;
+    wake();
+  }, { passive: true });
+  scope.on(document, "pointerleave", () => {
+    pointer2.x = pointer2.y = FAR;
+    wake();
+  });
+  return {
+    pointAt(point) {
+      if (scope.disposed) return;
+      pointer2.x = point ? point.x : FAR;
+      pointer2.y = point ? point.y : FAR;
+      wake();
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/recipes/sticker/create-sticker.ts
+var easeOutCubic = (t) => 1 - (1 - t) ** 3;
+var clamp2 = (v, min, max) => Math.min(max, Math.max(min, v));
+function clipHalfPlane(poly, m, n) {
+  const side = (p) => (p.x - m.x) * n.x + (p.y - m.y) * n.y;
+  const out = [];
+  for (let i = 0; i < poly.length; i++) {
+    const a = poly[i];
+    const b = poly[(i + 1) % poly.length];
+    const sa = side(a);
+    const sb = side(b);
+    if (sa >= 0) out.push(a);
+    if (sa >= 0 !== sb >= 0) {
+      const t = sa / (sa - sb);
+      out.push({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t });
+    }
+  }
+  return out;
+}
+var area = (poly) => {
+  let sum = 0;
+  for (let i = 0; i < poly.length; i++) {
+    const a = poly[i];
+    const b = poly[(i + 1) % poly.length];
+    sum += a.x * b.y - b.x * a.y;
+  }
+  return Math.abs(sum) / 2;
+};
+var polygon = (poly) => poly.length < 3 ? "polygon(0 0, 0 0, 0 0)" : `polygon(${poly.map((p) => `${p.x.toFixed(2)}px ${p.y.toFixed(2)}px`).join(", ")})`;
+function createSticker(root, options = {}) {
+  if (!root) return inert({ state: "idle" });
+  const scope = createScope();
+  const still = reduced();
+  const detachAt = clamp2(Number.isFinite(options.detachAt) ? options.detachAt : 0.3, 0.05, 1);
+  const returnDelay = Math.max(0, Number.isFinite(options.returnDelay) ? options.returnDelay : 2500);
+  let state = "idle";
+  const frames = /* @__PURE__ */ new Set();
+  const raf = (fn) => {
+    const id = requestAnimationFrame((time) => {
+      frames.delete(id);
+      fn(time);
+    });
+    frames.add(id);
+  };
+  scope.add(() => {
+    frames.forEach(cancelAnimationFrame);
+    frames.clear();
+  });
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "style", root.getAttribute("style"));
+  if (options.holo !== false) scope.attr(root, "data-mk-holo", "");
+  const original = [...root.childNodes];
+  const peelBox = document.createElement("div");
+  peelBox.className = "mk-sticker__peel";
+  const top = document.createElement("div");
+  top.className = "mk-sticker__top";
+  top.append(...original);
+  peelBox.append(top);
+  root.append(peelBox);
+  scope.add(() => root.replaceChildren(...original));
+  let back = null;
+  if (options.holo !== false) {
+    const holo = { x: 0.5, y: 0.5 };
+    let mouse = null;
+    let visible = typeof IntersectionObserver !== "function";
+    const hoverless = typeof matchMedia === "function" && matchMedia("(hover: none)").matches;
+    root.style.setProperty("--mk-sticker-x", "0.5");
+    root.style.setProperty("--mk-sticker-y", "0.5");
+    if (!still) {
+      scope.on(window, "pointermove", (event) => {
+        const e = event;
+        if (e.pointerType === "mouse") mouse = { x: e.clientX, y: e.clientY };
+      }, { passive: true });
+      scope.on(document, "pointerleave", () => {
+        mouse = null;
+      });
+      if (typeof IntersectionObserver === "function") {
+        scope.observe(new IntersectionObserver(([entry]) => {
+          const was = visible;
+          visible = entry.isIntersecting;
+          if (visible && !was) raf(loop);
+        })).observe(root);
+      }
+      const loop = (time) => {
+        if (scope.disposed || !visible) return;
+        const box = top.getBoundingClientRect();
+        let x;
+        let y;
+        if (mouse && !hoverless && box.width && box.height) {
+          x = clamp2((mouse.x - box.left) / box.width, -0.5, 1.5);
+          y = clamp2((mouse.y - box.top) / box.height, -0.5, 1.5);
+        } else {
+          x = 0.5 + Math.sin(time / 1600 + box.left / 200) * 0.6;
+          y = 0.5 + Math.cos(time / 2100 + box.top / 200) * 0.6;
+        }
+        holo.x += (x - holo.x) * 0.08;
+        holo.y += (y - holo.y) * 0.08;
+        root.style.setProperty("--mk-sticker-x", holo.x.toFixed(4));
+        root.style.setProperty("--mk-sticker-y", holo.y.toFixed(4));
+        raf(loop);
+      };
+      if (visible) raf(loop);
+    }
+  }
+  if (options.peel === false) return { get state() {
+    return state;
+  }, destroy: () => scope.dispose() };
+  let w = 0;
+  let h = 0;
+  let corner = { x: 0, y: 0 };
+  let current = { x: 0, y: 0 };
+  let grabbed = { x: 0, y: 0 };
+  let lifted = 0;
+  let anchor = { x: 0, y: 0 };
+  let reach = 0;
+  let outward = { x: 1, y: 0 };
+  let detachDistance = 80;
+  let pose = { angle: 0, scale: 1, prop: 1 };
+  let frozen = null;
+  const readPose = () => {
+    const style = getComputedStyle(root);
+    const prop = parseFloat(style.scale) || 1;
+    const matrix = /^matrix\(([^)]+)\)$/.exec(style.transform || "");
+    if (matrix) {
+      const [a, b] = matrix[1].split(",").map(Number);
+      return { angle: Math.atan2(b, a), scale: Math.hypot(a, b) || 1, prop, transform: style.transform };
+    }
+    const angle = (parseFloat(style.getPropertyValue("--mk-sticker-rot")) || 0) * (Math.PI / 180);
+    return { angle, scale: 1, prop, transform: `rotate(${angle}rad)` };
+  };
+  const freeze = () => {
+    const now = readPose();
+    pose = now;
+    if (!frozen) frozen = { transform: root.style.transform, transition: root.style.transition };
+    root.style.transition = "none";
+    root.style.transform = now.transform;
+  };
+  const unfreeze = () => {
+    if (!frozen) return;
+    root.style.transform = frozen.transform;
+    root.style.transition = frozen.transition;
+    frozen = null;
+  };
+  scope.add(unfreeze);
+  const toLocal = (clientX, clientY) => {
+    const box = peelBox.getBoundingClientRect();
+    const a = -pose.angle;
+    const s = pose.scale * pose.prop;
+    const dx = (clientX - (box.left + box.width / 2)) / s;
+    const dy = (clientY - (box.top + box.height / 2)) / s;
+    return { x: dx * Math.cos(a) - dy * Math.sin(a) + w / 2, y: dx * Math.sin(a) + dy * Math.cos(a) + h / 2 };
+  };
+  const CORNERS = () => [{ x: 0, y: 0 }, { x: w, y: 0 }, { x: w, y: h }, { x: 0, y: h }];
+  const nearBorder = (p) => Math.min(p.x, w - p.x, p.y, h - p.y) < Math.min(w, h) * 0.35;
+  const closestCorner = (p) => CORNERS().reduce((a, b) => Math.hypot(b.x - p.x, b.y - p.y) < Math.hypot(a.x - p.x, a.y - p.y) ? b : a);
+  const cornerAgainst = (d) => CORNERS().reduce((a, b) => (b.x - w / 2) * -d.x + (b.y - h / 2) * -d.y > (a.x - w / 2) * -d.x + (a.y - h / 2) * -d.y + 1e-6 ? b : a);
+  let choosing = false;
+  const useCorner = (c) => {
+    choosing = false;
+    corner = c;
+    anchor = { x: w - c.x, y: h - c.y };
+    reach = Math.hypot(c.x - anchor.x, c.y - anchor.y);
+    const ox = c.x - w / 2;
+    const oy = c.y - h / 2;
+    outward = { x: ox / (Math.hypot(ox, oy) || 1), y: oy / (Math.hypot(ox, oy) || 1) };
+    current = { ...c };
+  };
+  const ensureBack = () => {
+    if (back) return back;
+    back = document.createElement("div");
+    back.className = "mk-sticker__back";
+    back.setAttribute("aria-hidden", "true");
+    const face2 = document.createElement("div");
+    face2.className = "mk-sticker__back-face";
+    const copy = top.cloneNode(true);
+    copy.querySelectorAll("[id]").forEach((el) => el.removeAttribute("id"));
+    face2.append(...copy.childNodes);
+    back.append(face2);
+    peelBox.append(back);
+    return back;
+  };
+  const flat = () => {
+    top.style.clipPath = "";
+    if (back) back.style.visibility = "hidden";
+    root.removeAttribute("data-mk-peeling");
+    lifted = 0;
+    unfreeze();
+  };
+  scope.add(() => {
+    top.style.clipPath = "";
+    back?.remove();
+    back = null;
+  });
+  const fold = (p) => {
+    current = p;
+    const dx = p.x - corner.x;
+    const dy = p.y - corner.y;
+    const length = Math.hypot(dx, dy);
+    if (length < 0.5) {
+      top.style.clipPath = "";
+      if (back) back.style.visibility = "hidden";
+      lifted = 0;
+      return;
+    }
+    const n = { x: dx / length, y: dy / length };
+    const m = { x: (corner.x + p.x) / 2, y: (corner.y + p.y) / 2 };
+    const rect = [{ x: 0, y: 0 }, { x: w, y: 0 }, { x: w, y: h }, { x: 0, y: h }];
+    const stuck = clipHalfPlane(rect, m, n);
+    const flap = clipHalfPlane(rect, m, { x: -n.x, y: -n.y });
+    lifted = area(flap) / (w * h || 1);
+    top.style.clipPath = polygon(stuck);
+    const b = ensureBack();
+    const d = m.x * n.x + m.y * n.y;
+    b.style.transform = `matrix(${1 - 2 * n.x * n.x}, ${-2 * n.x * n.y}, ${-2 * n.x * n.y}, ${1 - 2 * n.y * n.y}, ${2 * d * n.x}, ${2 * d * n.y})`;
+    b.firstElementChild.style.clipPath = polygon(flap);
+    b.style.setProperty("--mk-sticker-fold", `${Math.atan2(-n.x, n.y) * 180 / Math.PI}deg`);
+    b.style.visibility = flap.length >= 3 ? "visible" : "hidden";
+  };
+  const NUDGE = 8;
+  const pull = (at) => {
+    const dx = at.x - grabbed.x;
+    const dy = at.y - grabbed.y;
+    const depth = Math.hypot(dx, dy);
+    const perp = { x: -outward.y, y: outward.x };
+    const side = clamp2(dx * perp.x + dy * perp.y, -depth * 0.7, depth * 0.7) * 0.6;
+    let p = {
+      x: corner.x - outward.x * (NUDGE + depth) + perp.x * side,
+      y: corner.y - outward.y * (NUDGE + depth) + perp.y * side
+    };
+    const ax = p.x - anchor.x;
+    const ay = p.y - anchor.y;
+    const length = Math.hypot(ax, ay);
+    if (length > reach) p = { x: anchor.x + ax * reach / length, y: anchor.y + ay * reach / length };
+    return p;
+  };
+  let generation = 0;
+  const settle = (from, duration, done) => {
+    const start = performance.now();
+    const mine = generation;
+    const step = () => {
+      if (scope.disposed || mine !== generation) return;
+      const t = Math.min(1, (performance.now() - start) / duration);
+      const e = easeOutCubic(t);
+      fold({ x: from.x + (corner.x - from.x) * e, y: from.y + (corner.y - from.y) * e });
+      if (t < 1) raf(step);
+      else {
+        flat();
+        done?.();
+      }
+    };
+    raf(step);
+  };
+  const velocity = { x: 0, y: 0 };
+  let last = { x: 0, y: 0, t: 0 };
+  const track = (e) => {
+    const now = performance.now();
+    const frames60 = Math.max(1, (now - last.t) / 16);
+    velocity.x = velocity.x * 0.5 + (e.clientX - last.x) / frames60 * 0.5;
+    velocity.y = velocity.y * 0.5 + (e.clientY - last.y) / frames60 * 0.5;
+    last = { x: e.clientX, y: e.clientY, t: now };
+  };
+  let home = null;
+  const carry = { x: 0, y: 0, tx: 0, ty: 0, offX: 0, offY: 0, lift: 0, tilt: 0, base: 0, from: 1, to: 1.08 };
+  const carryScale = () => carry.from + (carry.to - carry.from) * carry.lift;
+  const paint = () => {
+    root.style.left = `${carry.x}px`;
+    root.style.top = `${carry.y}px`;
+    root.style.transform = `rotate(${carry.base + carry.tilt}deg) scale(${carryScale()})`;
+    root.style.filter = `drop-shadow(0 ${8 + 14 * carry.lift}px ${14 + 12 * carry.lift}px rgb(0 0 0 / ${0.16 + 0.14 * carry.lift}))`;
+  };
+  const follow = () => {
+    if (state !== "carried" || scope.disposed) return;
+    carry.x += (carry.tx - carry.x) * 0.22;
+    carry.y += (carry.ty - carry.y) * 0.22;
+    carry.lift += (1 - carry.lift) * 0.15;
+    carry.tilt += (clamp2(velocity.x * 1.2, -16, 16) - carry.tilt) * 0.15;
+    paint();
+    raf(follow);
+  };
+  const detach = (e) => {
+    state = "carried";
+    root.removeAttribute("data-mk-peeling");
+    root.setAttribute("data-mk-carried", "");
+    settle({ ...current }, 160);
+    const box = root.getBoundingClientRect();
+    unfreeze();
+    carry.base = pose.angle * (180 / Math.PI);
+    carry.from = pose.scale;
+    carry.to = Math.max(1, pose.scale) + 0.08;
+    home = { parent: root.parentNode, next: root.nextSibling, style: root.getAttribute("style") };
+    const width = root.offsetWidth;
+    const height = root.offsetHeight;
+    document.body.append(root);
+    Object.assign(root.style, { position: "fixed", right: "auto", bottom: "auto", margin: "0", translate: "none", scale: String(pose.prop), zIndex: "999", animation: "none", transition: "none" });
+    carry.x = box.left + box.width / 2 - width / 2;
+    carry.y = box.top + box.height / 2 - height / 2;
+    carry.offX = e.clientX - carry.x;
+    carry.offY = e.clientY - carry.y;
+    carry.tx = carry.x;
+    carry.ty = carry.y;
+    carry.lift = 0;
+    carry.tilt = 0;
+    paint();
+    options.onPeel?.();
+    raf(follow);
+  };
+  const goHome = () => {
+    if (!home) return;
+    const { parent, next, style } = home;
+    home = null;
+    parent.insertBefore(root, next && next.parentNode === parent ? next : null);
+    if (style === null) root.removeAttribute("style");
+    else root.setAttribute("style", style);
+    root.style.animationDelay = "0s";
+    root.removeAttribute("data-mk-carried");
+    root.removeAttribute("data-mk-away");
+    state = "idle";
+    options.onReturn?.();
+  };
+  scope.add(goHome);
+  const away = () => {
+    state = "away";
+    root.setAttribute("data-mk-away", "");
+    scope.timeout(goHome, returnDelay);
+  };
+  const fall = () => {
+    state = "falling";
+    root.style.pointerEvents = "none";
+    if (still) {
+      away();
+      return;
+    }
+    let x = 0;
+    let y = 0;
+    let angle = carry.base + carry.tilt;
+    let vx = clamp2(velocity.x * 40, -900, 900);
+    let vy = clamp2(velocity.y * 40, -500, 600) - 120;
+    const spin = vx * 0.35 + (Math.random() - 0.5) * 120;
+    const startY = carry.y;
+    let then = performance.now();
+    const step = () => {
+      if (scope.disposed || state !== "falling") return;
+      const time = performance.now();
+      const dt = Math.min(0.05, Math.max(0, time - then) / 1e3);
+      then = time;
+      vy += 1600 * dt;
+      x += vx * dt;
+      y += vy * dt;
+      vx *= 1 - 0.6 * dt;
+      angle += spin * dt;
+      root.style.transform = `translate(${x}px, ${y}px) rotate(${angle}deg) scale(${carryScale()})`;
+      if (startY + y < innerHeight + 40) raf(step);
+      else away();
+    };
+    raf(step);
+  };
+  let pointerId = null;
+  scope.on(root, "pointerdown", (event) => {
+    const e = event;
+    if (state !== "idle" || e.button !== 0) return;
+    e.preventDefault();
+    generation++;
+    freeze();
+    state = "peeling";
+    root.setAttribute("data-mk-peeling", "");
+    pointerId = e.pointerId;
+    root.setPointerCapture?.(e.pointerId);
+    w = top.offsetWidth;
+    h = top.offsetHeight;
+    peelBox.style.width = `${w}px`;
+    peelBox.style.height = `${h}px`;
+    const at = toLocal(e.clientX, e.clientY);
+    grabbed = at;
+    detachDistance = Number.isFinite(options.detachDistance) ? Math.max(1, options.detachDistance) : Math.max(80, Math.max(w, h) / 2);
+    last = { x: e.clientX, y: e.clientY, t: performance.now() };
+    velocity.x = velocity.y = 0;
+    if (nearBorder(at)) {
+      useCorner(closestCorner(at));
+      fold(pull(at));
+    } else {
+      choosing = true;
+      corner = current = { ...at };
+    }
+  });
+  scope.on(root, "pointermove", (event) => {
+    const e = event;
+    if (state !== "peeling" || e.pointerId !== pointerId) return;
+    track(e);
+    const at = toLocal(e.clientX, e.clientY);
+    if (choosing) {
+      const dx = at.x - grabbed.x;
+      const dy = at.y - grabbed.y;
+      const moved = Math.hypot(dx, dy);
+      if (moved < 4) return;
+      useCorner(cornerAgainst({ x: dx / moved, y: dy / moved }));
+    }
+    fold(pull(at));
+    if (lifted > detachAt || Math.hypot(at.x - grabbed.x, at.y - grabbed.y) > detachDistance) detach(e);
+  });
+  scope.on(document, "pointermove", (event) => {
+    const e = event;
+    if (state !== "carried" || e.pointerId !== pointerId) return;
+    track(e);
+    carry.tx = e.clientX - carry.offX;
+    carry.ty = e.clientY - carry.offY;
+  });
+  const release = (event) => {
+    const e = event;
+    if (e.pointerId !== pointerId) return;
+    if (state === "peeling") {
+      state = "idle";
+      settle({ ...current }, 380);
+    } else if (state === "carried") fall();
+  };
+  scope.on(document, "pointerup", release);
+  scope.on(document, "pointercancel", release);
+  scope.add(() => {
+    peelBox.style.width = "";
+    peelBox.style.height = "";
+  });
+  return {
+    get state() {
+      return state;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/recipes/scroll-dock/create-scroll-dock.ts
+function createScrollDock(root, options = {}) {
+  if (!root) return inert({ visible: false, update() {
+  } });
+  const scope = createScope();
+  const threshold = Number.isFinite(options.threshold) ? Math.max(0, options.threshold) : 0.6;
+  const hideOffset = Number.isFinite(options.hideOffset) ? options.hideOffset : 40;
+  const scroller = typeof options.scroller === "string" ? root.closest(options.scroller) ?? document.querySelector(options.scroller) : options.scroller ?? null;
+  const hideTarget = () => typeof options.hideWhen === "string" ? document.querySelector(options.hideWhen) : options.hideWhen ?? null;
+  let visible = false;
+  let queued = false;
+  scope.attr(root, "data-mk-ready", "");
+  const update = () => {
+    queued = false;
+    if (scope.disposed) return;
+    const offset = scroller ? scroller.scrollTop : window.scrollY;
+    const viewport = scroller ? scroller.clientHeight : window.innerHeight;
+    const bottom = scroller ? scroller.getBoundingClientRect().bottom : window.innerHeight;
+    const end = hideTarget();
+    const reachedEnd = end ? end.getBoundingClientRect().top < bottom - hideOffset : false;
+    const next = offset > viewport * threshold && !reachedEnd;
+    if (next === visible) return;
+    visible = next;
+    scope.attr(root, "data-mk-visible", next ? "" : null);
+    options.onChange?.(next);
+    root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { visible: next } }));
+  };
+  const queue = () => {
+    if (queued) return;
+    queued = true;
+    requestAnimationFrame(update);
+  };
+  scope.on(scroller ?? window, "scroll", queue, { passive: true });
+  scope.on(window, "resize", queue, { passive: true });
+  update();
+  return {
+    get visible() {
+      return visible;
+    },
+    update,
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/recipes/local-clock/create-local-clock.ts
+function createLocalClock(root, options = {}) {
+  if (!root) return inert({ text: "" });
+  const scope = createScope();
+  const original = [...root.childNodes];
+  scope.add(() => root.replaceChildren(...original));
+  scope.attr(root, "data-mk-ready", "");
+  let formatter;
+  try {
+    formatter = new Intl.DateTimeFormat(options.locale ?? "es", options.format ?? {
+      hour: "2-digit",
+      minute: "2-digit",
+      ...options.seconds ? { second: "2-digit" } : {},
+      hour12: options.hour12 ?? false,
+      timeZone: options.timeZone
+    });
+  } catch {
+    formatter = new Intl.DateTimeFormat(void 0, { hour: "2-digit", minute: "2-digit", hour12: options.hour12 ?? false });
+  }
+  let text = "";
+  const isTime = root instanceof HTMLTimeElement;
+  const render = () => {
+    const now = /* @__PURE__ */ new Date();
+    text = formatter.format(now);
+    if (root.textContent !== text) root.textContent = text;
+    if (isTime) scope.attr(root, "datetime", now.toISOString());
+  };
+  const step = options.seconds || options.format?.second ? 1e3 : 6e4;
+  const schedule = () => {
+    const wait = step - Date.now() % step + 20;
+    scope.timeout(() => {
+      if (!scope.disposed) {
+        render();
+        schedule();
+      }
+    }, wait);
+  };
+  render();
+  schedule();
+  return { get text() {
+    return text;
+  }, destroy: () => scope.dispose() };
+}
+
 export {
   trackScroll,
   toggleDetails,
@@ -3315,6 +4503,17 @@ export {
   createRepelBento,
   createRotator,
   createDragRuler,
-  createDockPill
+  createDockPill,
+  createJoinedCta,
+  createImageZoom,
+  createFontCycle,
+  createThumbnailNav,
+  createActionButton,
+  createFilmHero,
+  createEditorialReveal,
+  createWeightHover,
+  createSticker,
+  createScrollDock,
+  createLocalClock
 };
-//# sourceMappingURL=chunk-FS2HJVVY.js.map
+//# sourceMappingURL=chunk-XAKC2QY7.js.map