@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/chunk-34XYOXHG.js

@@ -0,0 +1,2374 @@
+import {
+  TIMING,
+  createScope,
+  reduced
+} from "./chunk-RFDIZYFX.js";
+import {
+  inert,
+  warnOnce
+} from "./chunk-TGV27ZWM.js";
+
+// src/core/curves.ts
+var PATHS = {
+  /** The signature: a strong deceleration that is not a plain ease-out. */
+  signature: "M0,0 C0.308,0.19 0.107,0.633 0.288,0.866 0.382,0.987 0.656,1 1,1",
+  /** Lists and steps entering (`flowSoft`, also `numberSoft`). */
+  flow: "M0,0 C0.25,0.1 0.25,1 1,1",
+  /** A conversation scrolling to its newest message. */
+  chatScroll: "M0,0 C0.308,0.19 0.318,0.567 0.5,0.8 0.593,0.921 0.656,1 1,1"
+};
+function springPath(ratio, velocity = 0, steps = 72) {
+  const damping = Math.min(Math.max(ratio, 0.05), 0.999);
+  const stiffness = 5.6;
+  const frequency = stiffness / damping * Math.sqrt(1 - damping * damping);
+  const phase = (velocity - stiffness) / frequency;
+  const at = (time) => 1 + Math.exp(-stiffness * time) * (-Math.cos(frequency * time) + phase * Math.sin(frequency * time));
+  let path = "M0,0";
+  for (let step = 1; step <= steps; step += 1) {
+    const time = step / steps;
+    path += ` L${time.toFixed(4)},${(step === steps ? 1 : at(time)).toFixed(4)}`;
+  }
+  return path;
+}
+var SIGNATURE_LINEAR = "linear(0 0%, .017 2.5%, .037 5%, .061 7.5%, .091 10%, .13 12.5%, .184 15%, .275 17.5%, .562 20%, .733 22.5%, .803 25%, .848 27.5%, .88 30%, .902 32.5%, .942 40%, .97 50%, .985 60%, .993 70%, .998 80%, 1 90%, 1 100%)";
+
+// src/core/gsap.ts
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText } from "gsap/SplitText";
+import { CustomEase } from "gsap/CustomEase";
+import { Flip } from "gsap/Flip";
+var ELASTIC = "elastic.out(1, 0.45)";
+var EASE = {
+  signature: "mk-signature",
+  flow: "mk-flow",
+  /** A closing surface's fade (`.56,.27,0,1`). Kept from v0.1; same curve as `fadeAway`. */
+  close: "mk-close",
+  fadeAway: "mk-fade-away",
+  /** A closing surface's blur (`.37,.35,0,1`). */
+  blurAway: "mk-blur-away",
+  chatScroll: "mk-chat-scroll",
+  /** Items travelling to a new place in a list (spring ratio .52). */
+  layoutReflow: "mk-layout-reflow",
+  /** A dragged item landing in its slot (spring ratio .62). */
+  sortableLand: "mk-sortable-land",
+  slot: "mk-slot",
+  slotResize: "mk-slot-resize",
+  liquidSize: "mk-liquid-size",
+  swatch: "mk-swatch",
+  swatchLight: "mk-swatch-light",
+  sheet: "mk-sheet",
+  inOut: "mk-in-out"
+};
+var CURVES = {
+  signature: PATHS.signature,
+  flow: PATHS.flow,
+  close: ".56,.27,0,1",
+  fadeAway: ".56,.27,0,1",
+  blurAway: ".37,.35,0,1",
+  chatScroll: PATHS.chatScroll,
+  layoutReflow: springPath(0.52),
+  sortableLand: springPath(0.62),
+  slot: ".34,1.56,.64,1",
+  slotResize: ".2,0,0,1",
+  liquidSize: ".8,.3,.5,.8",
+  swatch: ".38,.49,0,1.5",
+  swatchLight: ".11,1,0,1",
+  sheet: ".16,1,.3,1",
+  inOut: ".42,0,.58,1"
+};
+var registered = false;
+function registerMotion() {
+  if (typeof window === "undefined") return;
+  document.documentElement.classList.add("mk-ready");
+  if (registered) return;
+  registered = true;
+  gsap.registerPlugin(ScrollTrigger, SplitText, CustomEase, Flip);
+  for (const key of Object.keys(EASE)) CustomEase.create(EASE[key], CURVES[key]);
+}
+
+// src/core/channels.ts
+import { gsap as gsap2 } from "gsap";
+var easeOut = (t) => 1 - (1 - t) * (1 - t);
+var easeOutCubic = (t) => 1 - (1 - t) ** 3;
+var easeInCubic = (t) => t * t * t;
+function bezier(x1, y1, x2, y2) {
+  const at = (t, a, b) => {
+    const u = 1 - t;
+    return 3 * u * u * t * a + 3 * u * t * t * b + t * t * t;
+  };
+  return (progress) => {
+    if (progress <= 0 || progress >= 1) return Math.min(1, Math.max(0, progress));
+    let low = 0;
+    let high = 1;
+    let t = progress;
+    for (let step = 0; step < 24; step += 1) {
+      const x = at(t, x1, x2);
+      if (Math.abs(x - progress) < 1e-5) break;
+      if (x < progress) low = t;
+      else high = t;
+      t = (low + high) / 2;
+    }
+    return at(t, y1, y2);
+  };
+}
+var spring = (stiffness, damping, extra = {}) => ({
+  type: "spring",
+  stiffness,
+  damping,
+  ...extra
+});
+var eased = (duration, ease) => ({ type: "ease", duration, ease });
+var createChannelState = (value) => ({
+  current: value,
+  origin: value,
+  target: value,
+  velocity: 0,
+  elapsed: 0,
+  active: false,
+  config: null
+});
+function stepChannel(channel, seconds) {
+  const config = channel.config;
+  if (!channel.active || !config) return;
+  if (config.type === "spring") {
+    const time = Math.min(0.064, Math.max(0, seconds));
+    const steps = Math.max(1, Math.ceil(time / (1 / 60) - 1e-9));
+    const step = time / steps;
+    for (let index = 0; index < steps; index += 1) {
+      const force = -config.stiffness * (channel.current - channel.target) - config.damping * channel.velocity;
+      channel.velocity += force / (config.mass ?? 1) * step;
+      channel.current += channel.velocity * step;
+    }
+    if (Math.abs(channel.velocity) <= 0.01 && Math.abs(channel.target - channel.current) <= 0.01) {
+      channel.current = channel.target;
+      channel.velocity = 0;
+      channel.active = false;
+    }
+  } else {
+    channel.elapsed += Math.max(0, seconds);
+    const progress = Math.min(1, channel.elapsed / config.duration);
+    channel.current = progress >= 1 ? channel.target : channel.origin + (channel.target - channel.origin) * config.ease(progress);
+    if (progress >= 1) channel.active = false;
+  }
+}
+function channels(start, onChange) {
+  const names = Object.keys(start);
+  const state = Object.fromEntries(names.map((name) => [name, createChannelState(start[name])]));
+  let last = 0;
+  let resolveDone = null;
+  const tick = () => {
+    const now = performance.now();
+    const elapsed = Math.max(0, (now - last) / 1e3);
+    last = now;
+    let running2 = false;
+    for (const name of names) {
+      const channel = state[name];
+      if (!channel.active) continue;
+      stepChannel(channel, elapsed);
+      onChange(name, channel.current);
+      running2 ||= channel.active;
+    }
+    if (!running2) {
+      gsap2.ticker.remove(tick);
+      resolveDone?.();
+      resolveDone = null;
+    }
+  };
+  return {
+    state,
+    /** Start moving; resolves when every channel has settled (or `stop()` is called). */
+    animate(targets, configs) {
+      for (const name of Object.keys(targets)) {
+        const channel = state[name];
+        const config = configs[name];
+        if (!channel || !config) continue;
+        channel.config = config;
+        channel.origin = channel.current;
+        channel.target = targets[name];
+        channel.elapsed = 0;
+        if (config.type === "spring" && config.velocity) {
+          const sign = config.direction !== void 0 ? Math.sign(config.direction) : Math.sign(channel.target - channel.current);
+          channel.velocity = Math.abs(config.velocity) * sign;
+        }
+        channel.active = channel.target !== channel.current || channel.velocity !== 0;
+      }
+      last = performance.now();
+      gsap2.ticker.remove(tick);
+      gsap2.ticker.add(tick);
+      resolveDone?.();
+      return new Promise((resolve) => {
+        resolveDone = resolve;
+      });
+    },
+    stop() {
+      gsap2.ticker.remove(tick);
+      for (const name of names) state[name].active = false;
+      resolveDone?.();
+      resolveDone = null;
+    }
+  };
+}
+function springEase(ratio, velocity = 0) {
+  const damping = Math.min(Math.max(ratio, 0.05), 0.999);
+  const stiffness = 5.6;
+  const frequency = stiffness / damping * Math.sqrt(1 - damping * damping);
+  const phase = (velocity - stiffness) / frequency;
+  return (progress) => progress >= 1 ? 1 : 1 + Math.exp(-stiffness * progress) * (-Math.cos(frequency * progress) + phase * Math.sin(frequency * progress));
+}
+
+// src/core/split.ts
+function splitWords(el, { exclude = ["table", "pre"], className = "mk-split-word" } = {}) {
+  const parts = [];
+  const replaced = [];
+  const skip = exclude.join(",");
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  const texts = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const parent = node.parentElement;
+    if (skip && parent?.closest(skip) && el.contains(parent.closest(skip))) continue;
+    if (node.data.trim()) texts.push(node);
+  }
+  for (const text of texts) {
+    const pieces = text.data.split(/(\s+)/);
+    const nodes = [];
+    for (const piece of pieces) {
+      if (!piece) continue;
+      if (/^\s+$/.test(piece)) {
+        nodes.push(document.createTextNode(piece));
+        continue;
+      }
+      const span = document.createElement("span");
+      span.className = className;
+      span.style.display = "inline-block";
+      span.textContent = piece;
+      parts.push(span);
+      nodes.push(span);
+    }
+    text.replaceWith(...nodes);
+    replaced.push([text, nodes]);
+  }
+  let reverted = false;
+  return {
+    parts,
+    revert() {
+      if (reverted) return;
+      reverted = true;
+      for (const [text, nodes] of replaced.reverse()) {
+        nodes[0]?.parentNode?.insertBefore(text, nodes[0]);
+        for (const node of nodes) node.parentNode?.removeChild(node);
+      }
+      el.normalize();
+    }
+  };
+}
+function splitGraphemes(text, limit = 64) {
+  const Ctor = Intl.Segmenter;
+  const all = Ctor ? Array.from(new Ctor(void 0, { granularity: "grapheme" }).segment(text), (part2) => part2.segment) : Array.from(text);
+  return all.slice(0, limit);
+}
+
+// src/core/frame.ts
+function requestFrame(fn) {
+  if (typeof requestAnimationFrame === "function") {
+    const id2 = requestAnimationFrame(fn);
+    return () => cancelAnimationFrame(id2);
+  }
+  const id = setTimeout(() => fn(Date.now()), 16);
+  return () => clearTimeout(id);
+}
+var nextFrame = () => new Promise((resolve) => requestFrame(() => resolve()));
+
+// src/core/styles.ts
+function clearStyles(targets, properties) {
+  for (const element of targets) {
+    const style = element.style;
+    if (!style) continue;
+    for (const property of properties) style.removeProperty(property);
+    if (element.getAttribute("style") === "") element.removeAttribute("style");
+    delete element._gsap;
+  }
+}
+var MORPH_STYLES = [
+  "transform",
+  "translate",
+  "rotate",
+  "scale",
+  "transform-origin",
+  "clip-path",
+  "opacity",
+  "visibility",
+  "filter",
+  "will-change"
+];
+
+// src/core/physics-spring.ts
+var REST = 1e-3;
+var STEP = 1 / 240;
+var LIMIT = 10;
+function position(stiffness, damping, mass) {
+  const w0 = Math.sqrt(stiffness / mass);
+  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  if (zeta < 1) {
+    const wd = w0 * Math.sqrt(1 - zeta * zeta);
+    return (t) => 1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + zeta * w0 / wd * Math.sin(wd * t));
+  }
+  if (zeta === 1) return (t) => 1 - Math.exp(-w0 * t) * (1 + w0 * t);
+  const root = Math.sqrt(zeta * zeta - 1);
+  const r1 = -w0 * (zeta - root);
+  const r2 = -w0 * (zeta + root);
+  return (t) => 1 - (r2 * Math.exp(r1 * t) - r1 * Math.exp(r2 * t)) / (r2 - r1);
+}
+var springs = /* @__PURE__ */ new Map();
+function motionSpring(stiffness, damping, mass = 1) {
+  const key = `${stiffness}/${damping}/${mass}`;
+  const known = springs.get(key);
+  if (known) return known;
+  const x = position(Math.max(stiffness, 1e-6), Math.max(damping, 0), Math.max(mass, 1e-6));
+  let settled = 0;
+  for (let i = 0; i * STEP <= LIMIT; i++) if (Math.abs(x(i * STEP) - 1) > REST) settled = (i + 1) * STEP;
+  const duration = Math.round(Math.min(settled, LIMIT) * 1e3) / 1e3;
+  const spring2 = {
+    ease: (progress) => progress <= 0 ? 0 : progress >= 1 ? 1 : x(progress * duration),
+    duration
+  };
+  springs.set(key, spring2);
+  return spring2;
+}
+var springDuration = (stiffness, damping, mass = 1) => motionSpring(stiffness, damping, mass).duration;
+function springLinear(stiffness, damping, mass = 1, points = 40) {
+  const { ease } = motionSpring(stiffness, damping, mass);
+  return `linear(${Array.from({ length: points + 1 }, (_, i) => Number(ease(i / points).toFixed(4))).join(", ")})`;
+}
+
+// src/motion/flow.ts
+var CLEAR = "transform,filter,opacity,visibility";
+function list(targets, target, reverse) {
+  let items;
+  if (target && targets instanceof Element) items = [...targets.querySelectorAll(target)];
+  else items = gsap.utils.toArray(targets);
+  return reverse ? items.reverse() : items;
+}
+function flowIn(targets, options = {}) {
+  registerMotion();
+  const {
+    y = 20,
+    blur = 16,
+    duration = TIMING.flow,
+    stagger = TIMING.flowStagger,
+    delay = 0,
+    style = 1,
+    startScale = 0.9,
+    reverse = false,
+    target,
+    ease = EASE.flow,
+    autoAlpha = true
+  } = options;
+  const items = list(targets, target, reverse);
+  if (!items.length) return null;
+  if (reduced()) {
+    clearStyles(items, ["transform", "translate", "rotate", "scale", "filter", "opacity", "visibility"]);
+    return null;
+  }
+  const from = style === 2 ? { scale: startScale } : { y: -y };
+  const to = style === 2 ? { scale: 1 } : { y: 0 };
+  const alpha = autoAlpha ? "autoAlpha" : "opacity";
+  return gsap.fromTo(
+    items,
+    { ...from, [alpha]: 0, filter: `blur(${blur}px)` },
+    { ...to, [alpha]: 1, filter: "blur(0px)", duration, stagger, delay, ease, clearProps: CLEAR }
+  );
+}
+function flowOut(targets, options = {}) {
+  registerMotion();
+  const { y = 20, blur = 16, duration = TIMING.flow, stagger = TIMING.flowStagger, delay = 0, reverse = false, target } = options;
+  const items = list(targets, target, reverse);
+  if (!items.length) return null;
+  if (reduced()) {
+    gsap.set(items, { autoAlpha: 0 });
+    return null;
+  }
+  return gsap.to(items, { y, autoAlpha: 0, filter: `blur(${blur}px)`, duration, stagger, delay, ease: EASE.flow });
+}
+async function stepChange(container, mutate, { duration = TIMING.stepChange } = {}) {
+  const before = [...container.children];
+  const out = flowOut(before, { duration });
+  if (out) await out;
+  await mutate();
+  await nextFrame();
+  flowIn([...container.children], { duration });
+}
+
+// src/motion/entrances.ts
+var flowInMenu = (targets) => flowIn(targets, { style: 2, startScale: 0.9, blur: 4, reverse: true, autoAlpha: false, ...TIMING.menu });
+var flowInPalette = (targets) => flowIn(targets, { style: 2, startScale: 0.5, blur: 4, autoAlpha: false, ...TIMING.palette });
+var flowInForm = (targets) => flowIn(targets, { style: 2, startScale: 0.9, blur: 8, ...TIMING.form });
+var flowInLanding = (targets) => flowIn(targets, { style: 2, startScale: 0.85, blur: 24, ...TIMING.landing });
+var flowInContent = (root) => flowIn(root, { style: 2, target: "[data-flow], .markdown-content > *", ...TIMING.content });
+
+// src/core/pointer.ts
+import { gsap as gsap3 } from "gsap";
+var pointer = { x: 0, y: 0, active: false };
+var mx = 0;
+var my = 0;
+var lastX = null;
+var lastY = null;
+var users = 0;
+function onMove(e) {
+  if (lastX !== null && lastY !== null) {
+    mx += e.clientX - lastX;
+    my += e.clientY - lastY;
+  }
+  lastX = pointer.x = e.clientX;
+  lastY = pointer.y = e.clientY;
+  pointer.active = true;
+}
+function onOut(e) {
+  if (e.relatedTarget) return;
+  pointer.active = false;
+  lastX = lastY = null;
+}
+function bindPointer() {
+  if (users++ === 0) {
+    addEventListener("pointermove", onMove, { passive: true });
+    document.addEventListener("pointerout", onOut);
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--users > 0) return;
+    removeEventListener("pointermove", onMove);
+    document.removeEventListener("pointerout", onOut);
+    pointer.active = false;
+    lastX = lastY = null;
+    mx = my = 0;
+  };
+}
+var frameMovement = { mx: 0, my: 0 };
+var movementFrame = -1;
+function takeMovement() {
+  const frame = gsap3.ticker.frame;
+  if (frame !== movementFrame) {
+    movementFrame = frame;
+    frameMovement = { mx, my };
+    mx = my = 0;
+  }
+  return frameMovement;
+}
+
+// src/motion/reveal.ts
+var TRANSPARENT = /^(transparent|rgba\(0, 0, 0, 0\))$/;
+function backgroundOf(el) {
+  for (let node = el; node; node = node.parentElement) {
+    const color = getComputedStyle(node).backgroundColor;
+    if (color && !TRANSPARENT.test(color)) return color;
+  }
+  return "var(--mk-bg, #fff)";
+}
+function revealFrom(target, options = {}) {
+  if (reduced() || !target.isConnected) return null;
+  registerMotion();
+  const { speed = "normal", delay = 0, overshoot = 2 } = options;
+  const style = getComputedStyle(target);
+  const fill = options.fill ?? backgroundOf(target);
+  const position2 = target.style.position;
+  if (style.position === "static") target.style.position = "relative";
+  const box = target.getBoundingClientRect();
+  const width = target.clientWidth;
+  const height = target.clientHeight;
+  let point = null;
+  const origin = options.origin;
+  if (origin instanceof Element) {
+    if (origin.isConnected) {
+      const rect = origin.getBoundingClientRect();
+      point = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    }
+  } else if (origin) point = origin;
+  else if (origin === void 0 && pointer.active) point = { x: pointer.x, y: pointer.y };
+  const x = point ? point.x - box.left - target.clientLeft : width / 2;
+  const y = point ? point.y - box.top - target.clientTop : height / 2;
+  const radius = Math.max(Math.hypot(x, y), Math.hypot(width - x, y), Math.hypot(x, height - y), Math.hypot(width - x, height - y)) * overshoot;
+  const veil = document.createElement("div");
+  veil.setAttribute("aria-hidden", "true");
+  veil.dataset.mkVeil = "";
+  Object.assign(veil.style, {
+    position: "absolute",
+    top: `${target.scrollTop}px`,
+    left: `${target.scrollLeft}px`,
+    width: `${width}px`,
+    height: `${height}px`,
+    borderRadius: style.borderRadius,
+    pointerEvents: "none",
+    zIndex: "1000"
+  });
+  const progress = { value: 0 };
+  const paint = () => {
+    veil.style.background = `radial-gradient(${radius}px at ${x}px ${y}px, transparent 0%, ${fill} ${progress.value}%)`;
+  };
+  paint();
+  target.append(veil);
+  let done = false;
+  let resolve;
+  const finished = new Promise((r) => resolve = r);
+  const cleanup = () => {
+    if (done) return;
+    done = true;
+    veil.remove();
+    target.style.position = position2;
+    resolve();
+  };
+  const [duration, fade] = TIMING.reveal[speed];
+  const timeline = gsap.timeline({ delay, onComplete: cleanup, onInterrupt: cleanup }).to(progress, { value: 100, duration, ease: "power2.out", onUpdate: paint }, 0).to(veil, { opacity: 0, duration: fade, ease: "power1.out" }, Math.max(0, duration * Math.min(1, 1 / overshoot) - 0.1));
+  return {
+    timeline,
+    finished,
+    cancel() {
+      timeline.kill();
+      cleanup();
+    }
+  };
+}
+
+// src/motion/count.ts
+var shown = /* @__PURE__ */ new WeakMap();
+var tweens = /* @__PURE__ */ new WeakMap();
+var frames = /* @__PURE__ */ new WeakMap();
+var defaultFormat = (value) => String(Math.round(value));
+function current(el) {
+  const known = shown.get(el);
+  if (known !== void 0) return known;
+  const parsed = Number((el.textContent ?? "").replace(/[^\d.-]/g, ""));
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function tweenNumber(from, to, onUpdate, { duration = TIMING.number } = {}) {
+  registerMotion();
+  if (from === to || reduced()) {
+    onUpdate(to);
+    return null;
+  }
+  const state = { value: from };
+  return gsap.to(state, { value: to, duration, ease: EASE.flow, onUpdate: () => onUpdate(state.value), onComplete: () => onUpdate(to) });
+}
+function countTo(el, to, { from, duration = TIMING.number, format = defaultFormat } = {}) {
+  registerMotion();
+  tweens.get(el)?.kill();
+  const start = from ?? current(el);
+  const write = (value) => {
+    shown.set(el, value);
+    el.textContent = format(value);
+  };
+  if (start === to || reduced()) {
+    write(to);
+    return null;
+  }
+  const state = { value: start };
+  const tween = gsap.to(state, {
+    value: to,
+    duration,
+    ease: EASE.flow,
+    onUpdate: () => write(state.value),
+    onComplete: () => {
+      write(to);
+      tweens.delete(el);
+    }
+  });
+  tweens.set(el, tween);
+  return tween;
+}
+function revealCounter(el, to, { from, duration = TIMING.revealCounter, format = defaultFormat } = {}) {
+  frames.get(el)?.();
+  const start = from ?? current(el);
+  const write = (value) => {
+    shown.set(el, value);
+    el.textContent = format(value);
+  };
+  if (start === to || reduced()) {
+    write(to);
+    return () => {
+    };
+  }
+  let began = null;
+  let cancel = () => {
+  };
+  const step = (time) => {
+    began ??= time;
+    const progress = Math.min(1, (time - began) / (duration * 1e3));
+    write(start + (to - start) * (1 - (1 - progress) ** 3));
+    if (progress < 1) cancel = requestFrame(step);
+    else frames.delete(el);
+  };
+  cancel = requestFrame(step);
+  const stop2 = () => cancel();
+  frames.set(el, stop2);
+  return stop2;
+}
+
+// src/motion/anchor.ts
+var EDGE = 16;
+var GAP = 8;
+var PHONE = 680;
+var PLACED = ["top", "left", "right", "bottom", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left"];
+function anchorSurface(surface, origin, viewport) {
+  const view = viewport ?? { width: innerWidth, height: innerHeight };
+  if (!origin || view.width < PHONE) {
+    for (const side of PLACED) surface.style.removeProperty(side);
+    return;
+  }
+  const box = surface.getBoundingClientRect();
+  const clampLeft = (value) => Math.max(EDGE, Math.min(value, view.width - box.width - EDGE));
+  const below = origin.bottom + GAP;
+  const above = origin.top - GAP - box.height;
+  const lowest = Math.max(EDGE, view.height - box.height - EDGE);
+  const besideRight = origin.right + GAP;
+  const besideLeft = origin.left - GAP - box.width;
+  let top;
+  let left;
+  if (below <= lowest) [top, left] = [below, clampLeft(origin.left)];
+  else if (above >= EDGE) [top, left] = [above, clampLeft(origin.left)];
+  else if (besideRight + box.width <= view.width - EDGE) [top, left] = [Math.min(Math.max(EDGE, origin.top), lowest), besideRight];
+  else if (besideLeft >= EDGE) [top, left] = [Math.min(Math.max(EDGE, origin.top), lowest), besideLeft];
+  else [top, left] = [lowest, clampLeft(origin.left)];
+  Object.assign(surface.style, { margin: "0", top: `${Math.round(top)}px`, left: `${Math.round(left)}px`, right: "auto", bottom: "auto" });
+}
+function clearAnchor(surface) {
+  for (const side of PLACED) surface.style.removeProperty(side);
+}
+
+// src/motion/drag-dismiss.ts
+var START = 6;
+var FOLLOW = 0.5;
+var DISMISS = 100;
+var SHRINK = 400;
+var WHEEL_SPEED = 1.5;
+var WHEEL_MIN = 16;
+var WHEEL_IDLE = 90;
+var WHEEL_COOLDOWN = 250;
+var CONTROLS = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  '[contenteditable="true"]',
+  '[role="button"]',
+  '[role="slider"]',
+  '[role="combobox"]',
+  '[role="option"]',
+  '[role="checkbox"]',
+  '[role="menuitem"]'
+].join(",");
+function scrollerOf(target, surface) {
+  let element = target instanceof Element ? target : null;
+  while (element) {
+    if (element.scrollHeight > element.clientHeight + 1) {
+      const overflow = getComputedStyle(element).overflowY;
+      if (overflow === "auto" || overflow === "scroll") return element;
+    }
+    if (element === surface) break;
+    element = element.parentElement;
+  }
+  return null;
+}
+var draggableFrom = (target, surface) => target instanceof Element && !target.closest("[data-mk-no-drag], [popover]") && !target.closest(CONTROLS) && !(surface.querySelector("[data-mk-drag-handle]") && !target.closest("[data-mk-drag-handle]"));
+function attachDragDismiss(surface, { canDrag = () => true, onDismiss }) {
+  registerMotion();
+  let pointer2 = null;
+  let startX = 0;
+  let startY = 0;
+  let mode = null;
+  let pulled = 0;
+  let base = { x: 0, y: 0, scale: 1 };
+  let target = null;
+  const noSelect = (event) => event.preventDefault();
+  const begin = () => {
+    mode = "drag";
+    gsap.killTweensOf(surface, "x,y,scale");
+    base = {
+      x: Number(gsap.getProperty(surface, "x")) || 0,
+      y: Number(gsap.getProperty(surface, "y")) || 0,
+      scale: Number(gsap.getProperty(surface, "scaleX")) || 1
+    };
+    window.getSelection?.()?.removeAllRanges();
+    document.body.style.userSelect = "none";
+    document.addEventListener("selectstart", noSelect);
+  };
+  const follow = (dx, dy) => {
+    pulled = dy * FOLLOW;
+    gsap.set(surface, { x: base.x + dx * FOLLOW, y: base.y + pulled, scale: Math.max(0.1, base.scale * (1 - pulled / SHRINK)) });
+  };
+  const restore = () => gsap.to(surface, { x: 0, y: 0, scale: 1, duration: TIMING.drag.restore, ease: "elastic.out(0.5,0.5)" });
+  const release = () => {
+    document.removeEventListener("selectstart", noSelect);
+    document.body.style.userSelect = "";
+    const dismiss = pulled > DISMISS;
+    mode = null;
+    pulled = 0;
+    if (dismiss) onDismiss();
+    else restore();
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0 || pointer2 !== null || reduced() || !canDrag()) return;
+    if (!draggableFrom(event.target, surface)) return;
+    pointer2 = event.pointerId;
+    target = event.target;
+    startX = event.clientX;
+    startY = event.clientY;
+    mode = null;
+    pulled = 0;
+  };
+  const onPointerMove = (event) => {
+    if (event.pointerId !== pointer2 || mode === "scroll") return;
+    const dx = event.clientX - startX;
+    const dy = event.clientY - startY;
+    if (mode === null) {
+      if (Math.abs(dx) < START && Math.abs(dy) < START) return;
+      if (event.pointerType !== "mouse") {
+        const scroller = scrollerOf(target, surface);
+        if (scroller && Math.abs(dx) < Math.abs(dy) && !(dy > 0 && scroller.scrollTop <= 0)) {
+          mode = "scroll";
+          return;
+        }
+      }
+      begin();
+    }
+    if (event.cancelable) event.preventDefault();
+    follow(dx, dy);
+  };
+  const onPointerUp = (event) => {
+    if (event.pointerId !== pointer2) return;
+    pointer2 = null;
+    target = null;
+    if (mode !== "drag") {
+      mode = null;
+      return;
+    }
+    const swallow = (click) => {
+      click.stopPropagation();
+      click.preventDefault();
+    };
+    window.addEventListener("click", swallow, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 50);
+    release();
+  };
+  let wheeling = false;
+  let wheelPull = 0;
+  let wheelSpeed = 0;
+  let lastWheel = 0;
+  let idle;
+  let quietUntil = 0;
+  const deltaOf = (event) => event.deltaMode === 1 ? event.deltaY * 16 : event.deltaMode === 2 ? event.deltaY * innerHeight : event.deltaY;
+  function endWheel(dismiss, at) {
+    window.removeEventListener("wheel", onWheelCapture, { capture: true });
+    clearTimeout(idle);
+    wheeling = false;
+    quietUntil = at + WHEEL_COOLDOWN;
+    pulled = 0;
+    wheelPull = 0;
+    wheelSpeed = 0;
+    lastWheel = 0;
+    document.body.style.userSelect = "";
+    if (dismiss) onDismiss();
+    else restore();
+  }
+  function stepWheel(event) {
+    const amount = -deltaOf(event);
+    const elapsed = lastWheel ? Math.max(1, event.timeStamp - lastWheel) : 16;
+    lastWheel = event.timeStamp;
+    wheelSpeed = wheelSpeed * 0.4 + amount / elapsed * 0.6;
+    wheelPull = Math.max(0, wheelPull + amount);
+    follow(0, wheelPull);
+    if (wheelSpeed > WHEEL_SPEED && pulled > WHEEL_MIN || pulled > DISMISS) {
+      endWheel(true, event.timeStamp);
+      return;
+    }
+    clearTimeout(idle);
+    idle = setTimeout(() => wheeling && endWheel(false, performance.now()), WHEEL_IDLE);
+  }
+  function onWheelCapture(event) {
+    if (!wheeling) return;
+    event.preventDefault();
+    event.stopPropagation();
+    stepWheel(event);
+  }
+  const onWheel = (event) => {
+    if (wheeling || reduced() || !canDrag()) return;
+    const up = deltaOf(event) < 0;
+    const scroller = scrollerOf(event.target, surface);
+    const canScroll = scroller ? up ? scroller.scrollTop > 0 : scroller.scrollTop + scroller.clientHeight < scroller.scrollHeight - 1 : false;
+    if (canScroll || !up || event.timeStamp < quietUntil) return;
+    if (event.target instanceof Element && event.target.closest("[data-mk-no-drag], [popover]")) return;
+    event.preventDefault();
+    wheeling = true;
+    wheelPull = 0;
+    wheelSpeed = 0;
+    lastWheel = 0;
+    begin();
+    mode = null;
+    window.addEventListener("wheel", onWheelCapture, { passive: false, capture: true });
+    stepWheel(event);
+  };
+  surface.addEventListener("pointerdown", onPointerDown);
+  window.addEventListener("pointermove", onPointerMove, { passive: false });
+  window.addEventListener("pointerup", onPointerUp);
+  window.addEventListener("pointercancel", onPointerUp);
+  surface.addEventListener("wheel", onWheel, { passive: false });
+  return () => {
+    surface.removeEventListener("pointerdown", onPointerDown);
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+    window.removeEventListener("pointercancel", onPointerUp);
+    surface.removeEventListener("wheel", onWheel);
+    window.removeEventListener("wheel", onWheelCapture, { capture: true });
+    clearTimeout(idle);
+    document.removeEventListener("selectstart", noSelect);
+    document.body.style.userSelect = "";
+  };
+}
+
+// src/motion/floating.ts
+var MIN_WIDTH = 320;
+var MIN_HEIGHT = 240;
+var MARGIN = 8;
+var DESKTOP = 680;
+var LIFT = 4;
+var SPRING = { stiffness: 1100, damping: 38 };
+var MASS_AREA = 24e3;
+var MAX_MASS = 1.5;
+var REST_SPEED = 24;
+var FLING_SPEED = 350;
+var POINTER_SMOOTHING = 0.05;
+var SHRINK_FULL = 0.85;
+var FLOAT_SHADOW = "rgba(0, 0, 0, 0.24) 0px 0px 24px -6px";
+var floatingAvailable = () => typeof innerWidth === "number" && innerWidth >= DESKTOP;
+function clampRect(rect, viewport = { width: innerWidth, height: innerHeight }) {
+  const maxWidth = Math.max(MIN_WIDTH, viewport.width - MARGIN * 2);
+  const maxHeight = Math.max(MIN_HEIGHT, viewport.height - MARGIN * 2);
+  const width = Math.min(maxWidth, Math.max(MIN_WIDTH, rect.width));
+  const height = Math.min(maxHeight, Math.max(MIN_HEIGHT, rect.height));
+  return {
+    top: Math.min(Math.max(MARGIN, viewport.height - height - MARGIN), Math.max(MARGIN, rect.top)),
+    left: Math.min(Math.max(MARGIN, viewport.width - width - MARGIN), Math.max(MARGIN, rect.left)),
+    width,
+    height
+  };
+}
+var rectOf = (element) => {
+  const box = element.getBoundingClientRect();
+  return { top: box.top, left: box.left, width: box.width, height: box.height };
+};
+var place = (element, rect) => Object.assign(element.style, {
+  position: "fixed",
+  inset: "auto",
+  margin: "0",
+  top: `${rect.top}px`,
+  left: `${rect.left}px`,
+  width: `${rect.width}px`,
+  height: `${rect.height}px`,
+  maxWidth: "none",
+  maxHeight: "none"
+});
+var storageKey = (key) => `mk-float.${key}`;
+function savedFloat(key) {
+  try {
+    const value = JSON.parse(localStorage.getItem(storageKey(key)) ?? "null");
+    return value && ["top", "left", "width", "height"].every((name) => Number.isFinite(value[name])) ? clampRect(value) : null;
+  } catch {
+    return null;
+  }
+}
+function saveFloat(key, rect) {
+  try {
+    localStorage.setItem(
+      storageKey(key),
+      JSON.stringify({ top: Math.round(rect.top), left: Math.round(rect.left), width: Math.round(rect.width), height: Math.round(rect.height) })
+    );
+  } catch {
+  }
+}
+function forgetFloat(key) {
+  try {
+    localStorage.removeItem(storageKey(key));
+  } catch {
+  }
+}
+function liftWindow(surface, rect) {
+  registerMotion();
+  place(surface, clampRect(rect));
+  surface.classList.add("is-floating");
+  if (!reduced()) {
+    gsap.fromTo(
+      surface,
+      { boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px" },
+      { boxShadow: FLOAT_SHADOW, duration: TIMING.float.shadow, ease: EASE.signature, clearProps: "boxShadow" }
+    );
+  }
+}
+var PLACED2 = [
+  "position",
+  "inset",
+  "right",
+  "bottom",
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "top",
+  "left",
+  "width",
+  "height",
+  "max-width",
+  "max-height"
+];
+function unplaceWindow(surface) {
+  surface.classList.remove("is-floating");
+  for (const name of PLACED2) surface.style.removeProperty(name);
+}
+function dockWindow(surface, from) {
+  registerMotion();
+  unplaceWindow(surface);
+  if (reduced()) return;
+  const to = rectOf(surface);
+  gsap.from(surface, { x: from.left - to.left, y: from.top - to.top, duration: TIMING.float.shadow, ease: EASE.signature, clearProps: "transform" });
+}
+function attachFloating(surface, { key, handle, corners = [], isFloating, float, dock }) {
+  const cleanups = [];
+  const listen = (element, listener) => {
+    element.addEventListener("pointerdown", listener);
+    cleanups.push(() => element.removeEventListener("pointerdown", listener));
+  };
+  let active = null;
+  let release = null;
+  const capture = (element, down, { onMove: onMove2, onUp }) => {
+    release?.();
+    active = down.pointerId;
+    try {
+      element.setPointerCapture?.(down.pointerId);
+    } catch {
+    }
+    const move = (event) => {
+      if (event.pointerId === active) onMove2(event);
+    };
+    const up = (event) => {
+      if (event.pointerId !== active) return;
+      stop2();
+      onUp();
+    };
+    const stop2 = () => {
+      active = null;
+      release = null;
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+    };
+    release = stop2;
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+  };
+  cleanups.push(() => release?.());
+  let body = null;
+  const settle = () => {
+    if (!body) return;
+    gsap.ticker.remove(tick);
+    body = null;
+  };
+  function tick() {
+    if (!body) return;
+    const now = performance.now();
+    const elapsed = Math.min((now - body.time) / 1e3, 1 / 30);
+    if (elapsed <= 0) return;
+    body.time = now;
+    if (body.gliding) {
+      const decay = Math.exp(-elapsed / TIMING.float.glideDecay);
+      body.vx *= decay;
+      body.vy *= decay;
+    } else {
+      body.vx += ((body.targetX - body.x) * SPRING.stiffness - body.vx * SPRING.damping) * elapsed / body.mass;
+      body.vy += ((body.targetY - body.y) * SPRING.stiffness - body.vy * SPRING.damping) * elapsed / body.mass;
+    }
+    body.x += body.vx * elapsed;
+    body.y += body.vy * elapsed;
+    const smoothing = 1 - Math.exp(-elapsed / TIMING.float.sizeSmoothing);
+    body.w += (body.targetW - body.w) * smoothing;
+    body.h += (body.targetH - body.h) * smoothing;
+    if (Math.abs(body.targetW - body.w) < 0.5) body.w = body.targetW;
+    if (Math.abs(body.targetH - body.h) < 0.5) body.h = body.targetH;
+    const rect = clampRect({ top: body.y, left: body.x, width: body.w, height: body.h });
+    if (rect.left !== body.x) {
+      body.x = rect.left;
+      body.vx = 0;
+    }
+    if (rect.top !== body.y) {
+      body.y = rect.top;
+      body.vy = 0;
+    }
+    place(surface, rect);
+    const resting = Math.hypot(body.vx, body.vy) < REST_SPEED && body.w === body.targetW && body.h === body.targetH;
+    if (body.gliding && resting) {
+      saveFloat(key, rect);
+      settle();
+    }
+  }
+  listen(handle, (down) => {
+    if (down.button !== 0 || active !== null || !floatingAvailable()) return;
+    down.preventDefault();
+    settle();
+    let moved = false;
+    capture(handle, down, {
+      onMove(event) {
+        const dx = event.clientX - down.clientX;
+        const dy = event.clientY - down.clientY;
+        if (!moved) {
+          if (Math.abs(dx) < LIFT && Math.abs(dy) < LIFT) return;
+          moved = true;
+          if (!isFloating()) float();
+          const rect = rectOf(surface);
+          const fullWidth = innerWidth - MARGIN * 2;
+          const fullHeight = innerHeight - MARGIN * 2;
+          const width = rect.width >= fullWidth - 2 ? Math.max(MIN_WIDTH, Math.round(fullWidth * SHRINK_FULL)) : rect.width;
+          const height = rect.height >= fullHeight - 2 ? Math.max(MIN_HEIGHT, Math.round(fullHeight * SHRINK_FULL)) : rect.height;
+          const grip = rect.width > 0 ? (down.clientX - rect.left) / rect.width : 0;
+          const left = rect.left + (rect.width - width) * grip;
+          const now2 = performance.now();
+          body = {
+            x: left,
+            y: rect.top,
+            vx: 0,
+            vy: 0,
+            w: rect.width,
+            h: rect.height,
+            targetX: left,
+            targetY: rect.top,
+            targetW: width,
+            targetH: height,
+            mass: Math.min(MAX_MASS, Math.max(1, Math.sqrt(rect.width * rect.height / MASS_AREA))),
+            time: now2,
+            gliding: false,
+            fromX: left,
+            fromY: rect.top,
+            pointerVx: 0,
+            pointerVy: 0,
+            pointerX: event.clientX,
+            pointerY: event.clientY,
+            pointerTime: now2
+          };
+          gsap.ticker.add(tick);
+        }
+        if (!body) return;
+        body.targetX = body.fromX + dx;
+        body.targetY = body.fromY + dy;
+        const now = performance.now();
+        const seconds = Math.max(1, now - body.pointerTime) / 1e3;
+        const smoothing = 1 - Math.exp(-seconds / POINTER_SMOOTHING);
+        body.pointerVx += ((event.clientX - body.pointerX) / seconds - body.pointerVx) * smoothing;
+        body.pointerVy += ((event.clientY - body.pointerY) / seconds - body.pointerVy) * smoothing;
+        body.pointerX = event.clientX;
+        body.pointerY = event.clientY;
+        body.pointerTime = now;
+      },
+      onUp() {
+        if (!moved) {
+          if (isFloating()) dock();
+          else float();
+          return;
+        }
+        if (!body) return;
+        const speed = performance.now() - body.pointerTime > 80 ? 0 : Math.hypot(body.pointerVx, body.pointerVy);
+        if (speed >= FLING_SPEED) {
+          body.vx = body.pointerVx;
+          body.vy = body.pointerVy;
+        } else {
+          body.vx = 0;
+          body.vy = 0;
+          body.targetX = body.x;
+          body.targetY = body.y;
+        }
+        body.gliding = true;
+      }
+    });
+  });
+  for (const corner of corners) {
+    listen(corner, (down) => {
+      if (down.button !== 0 || active !== null || !floatingAvailable()) return;
+      down.preventDefault();
+      settle();
+      const side = corner.dataset.mkFloatCorner ?? "br";
+      const fromLeft = side.endsWith("l");
+      const fromTop = side.startsWith("t");
+      let start = null;
+      capture(corner, down, {
+        onMove(event) {
+          const dx = event.clientX - down.clientX;
+          const dy = event.clientY - down.clientY;
+          if (!start) {
+            if (Math.abs(dx) < LIFT && Math.abs(dy) < LIFT) return;
+            if (!isFloating()) float();
+            start = rectOf(surface);
+          }
+          const width = Math.min(innerWidth - MARGIN * 2, Math.max(MIN_WIDTH, fromLeft ? start.width - dx : start.width + dx));
+          const height = Math.min(innerHeight - MARGIN * 2, Math.max(MIN_HEIGHT, fromTop ? start.height - dy : start.height + dy));
+          place(
+            surface,
+            clampRect({
+              top: fromTop ? start.top + start.height - height : start.top,
+              left: fromLeft ? start.left + start.width - width : start.left,
+              width,
+              height
+            })
+          );
+        },
+        onUp() {
+          if (start) saveFloat(key, rectOf(surface));
+        }
+      });
+    });
+  }
+  return () => {
+    if (body?.gliding) saveFloat(key, rectOf(surface));
+    settle();
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+
+// src/motion/surface.ts
+var transparentColor = (color) => !color || color === "transparent" || /,\s*0\)$/.test(color) || /\/\s*0\)$/.test(color);
+function openModal(dialog, modal = true) {
+  if (dialog.hasAttribute("open")) return;
+  if (modal && typeof dialog.showModal === "function") dialog.showModal();
+  else if (typeof dialog.show === "function") dialog.show();
+  else dialog.setAttribute("open", "");
+}
+function closeModal(dialog) {
+  if (typeof dialog.close === "function") dialog.close();
+  else dialog.removeAttribute("open");
+}
+function fadeBackdrop(dialog, direction) {
+  if (typeof dialog.animate !== "function" || reduced()) return Promise.resolve();
+  try {
+    const animation = dialog.animate(direction === "in" ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }], {
+      duration: (direction === "in" ? TIMING.dialog.backdrop : TIMING.dialog.close) * 1e3,
+      easing: direction === "in" ? SIGNATURE_LINEAR : "linear",
+      fill: direction === "out" ? "forwards" : "none",
+      pseudoElement: "::backdrop"
+    });
+    return animation.finished.then(
+      () => void 0,
+      () => void 0
+    );
+  } catch {
+    return Promise.resolve();
+  }
+}
+function backdropVeil(surface) {
+  const backdrop = getComputedStyle(surface, "::backdrop");
+  const veil = document.createElement("div");
+  veil.setAttribute("aria-hidden", "true");
+  veil.dataset.mkVeil = "";
+  Object.assign(veil.style, {
+    position: "fixed",
+    inset: "0",
+    zIndex: "2147483645",
+    background: backdrop.background || backdrop.backgroundColor,
+    backdropFilter: backdrop.backdropFilter,
+    pointerEvents: "none"
+  });
+  return veil;
+}
+function ghostOf(surface) {
+  const rect = surface.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return null;
+  const style = getComputedStyle(surface);
+  const ghost = document.createElement("div");
+  ghost.className = surface.className;
+  ghost.innerHTML = surface.innerHTML;
+  ghost.setAttribute("aria-hidden", "true");
+  ghost.inert = true;
+  ghost.dataset.mkGhost = "";
+  const strip = ["id", "for", "name", "aria-labelledby", "aria-describedby", "aria-label", "role"];
+  for (const element of ghost.querySelectorAll(strip.map((name) => `[${name}]`).join(","))) {
+    for (const name of strip) element.removeAttribute(name);
+  }
+  for (const label of ghost.querySelectorAll("label")) {
+    const span = document.createElement("span");
+    span.className = label.className;
+    span.append(...label.childNodes);
+    label.replaceWith(span);
+  }
+  Object.assign(ghost.style, {
+    position: "fixed",
+    inset: "auto",
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    margin: "0",
+    display: style.display === "none" ? "flex" : style.display,
+    flexDirection: style.flexDirection,
+    zIndex: "2147483646",
+    pointerEvents: "none"
+  });
+  return ghost;
+}
+
+// src/motion/liquid.ts
+var GOO = "mk-liquid-goo";
+function ensureGoo() {
+  if (document.getElementById(GOO)) return;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("width", "0");
+  svg.setAttribute("height", "0");
+  svg.style.position = "absolute";
+  svg.innerHTML = `<defs><filter id="${GOO}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"/></filter></defs>`;
+  document.body.append(svg);
+}
+function gooLayer(surface) {
+  ensureGoo();
+  const box = surface.getBoundingClientRect();
+  const layer = document.createElement("div");
+  layer.className = "mk-morph-face mk-liquid";
+  layer.setAttribute("aria-hidden", "true");
+  Object.assign(layer.style, {
+    position: "absolute",
+    left: `${-box.left - surface.clientLeft}px`,
+    top: `${-box.top - surface.clientTop}px`,
+    width: `${innerWidth}px`,
+    height: `${innerHeight}px`,
+    zIndex: "-1",
+    pointerEvents: "none",
+    filter: `url(#${GOO})`,
+    borderRadius: "0",
+    background: "none"
+  });
+  const blob = (from, radius, color) => {
+    const element = document.createElement("div");
+    Object.assign(element.style, {
+      position: "absolute",
+      top: `${from.top}px`,
+      left: `${from.left}px`,
+      width: `${from.width}px`,
+      height: `${from.height}px`,
+      borderRadius: `${radius}px`,
+      background: color
+    });
+    layer.append(element);
+    return element;
+  };
+  surface.append(layer);
+  return { layer, blob };
+}
+function hideFrame(surface) {
+  const saved = surface.getAttribute("style");
+  Object.assign(surface.style, {
+    transition: "none",
+    background: "transparent",
+    boxShadow: "none",
+    borderColor: "transparent",
+    overflow: "visible"
+  });
+  return () => {
+    if (saved === null) surface.removeAttribute("style");
+    else surface.setAttribute("style", saved);
+  };
+}
+var radiusOf = (element, box) => Math.min(parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0, box.width / 2, box.height / 2);
+function centerParts(surface, parts) {
+  const box = surface.getBoundingClientRect();
+  const centerX = box.left + box.width / 2;
+  const centerY = box.top + box.height / 2;
+  for (const part2 of parts) {
+    const own = part2.getBoundingClientRect();
+    gsap.set(part2, { transformOrigin: `${centerX - own.left}px ${centerY - own.top}px` });
+  }
+  return { centerX, centerY };
+}
+function liquidOpen(surface, origin, parts) {
+  const box = surface.getBoundingClientRect();
+  const start = origin.getBoundingClientRect();
+  const surfaceColor = getComputedStyle(surface).backgroundColor;
+  const originLook = getComputedStyle(origin).backgroundColor;
+  const originColor = transparentColor(originLook) ? surfaceColor : originLook;
+  const endRadius = radiusOf(surface, box);
+  const startRadius = radiusOf(origin, start);
+  const { centerX, centerY } = centerParts(surface, parts);
+  const restore = hideFrame(surface);
+  const { layer, blob } = gooLayer(surface);
+  const originBlob = blob(start, startRadius, originColor);
+  const shape = blob(start, startRadius, originColor);
+  const towardX = start.left + start.width / 2 < innerWidth / 2 ? 1 : -1;
+  const towardY = start.top + start.height / 2 < innerHeight / 2 ? 1 : -1;
+  if (parts.length) gsap.set(parts, { opacity: 0 });
+  const current2 = { top: start.top, left: start.left, width: start.width, height: start.height, scale: 2, blur: 8 };
+  const paint = () => {
+    if (!parts.length) return;
+    gsap.set(parts, {
+      x: current2.left + current2.width / 2 - centerX,
+      y: current2.top + current2.height / 2 - centerY,
+      scale: current2.scale,
+      filter: `blur(${current2.blur}px)`
+    });
+  };
+  const motion = channels({ ...current2, radius: startRadius }, (name, value) => {
+    if (name === "radius") shape.style.borderRadius = `${value}px`;
+    else {
+      current2[name] = value;
+      if (name === "top" || name === "left" || name === "width" || name === "height") shape.style[name] = `${value}px`;
+      paint();
+    }
+  });
+  const L = TIMING.liquid;
+  void motion.animate(
+    { top: box.top, left: box.left, width: box.width, height: box.height, radius: endRadius, scale: 1, blur: 0 },
+    {
+      top: spring(144, 14, { velocity: 2400, direction: towardY }),
+      left: spring(144, 14, { velocity: 2400, direction: towardX }),
+      width: eased(L.size, bezier(0.8, 0.3, 0.5, 0.8)),
+      height: eased(L.size, bezier(0.8, 0.3, 0.5, 0.8)),
+      radius: eased(L.radius, easeOut),
+      scale: eased(L.content, easeOut),
+      blur: eased(L.content, easeOut)
+    }
+  );
+  gsap.to(shape, { background: surfaceColor, duration: L.color, delay: L.colorDelay, ease: "power2.out" });
+  if (parts.length) gsap.to(parts, { opacity: 1, duration: L.color, delay: L.colorDelay, ease: "power2.out" });
+  gsap.to(originBlob, { opacity: 0, duration: L.ghost, delay: L.ghostDelay, ease: "power2.out" });
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    motion.stop();
+    clearTimeout(timer);
+    layer.remove();
+    restore();
+    if (parts.length) gsap.set(parts, { clearProps: "opacity,transform,transformOrigin,filter" });
+  };
+  const timer = setTimeout(finish, L.safetyMs);
+  return finish;
+}
+function liquidClose(surface, origin, parts, onComplete) {
+  const box = surface.getBoundingClientRect();
+  const end = origin.getBoundingClientRect();
+  const surfaceColor = getComputedStyle(surface).backgroundColor;
+  const originLook = getComputedStyle(origin).backgroundColor;
+  const originColor = transparentColor(originLook) ? surfaceColor : originLook;
+  const startRadius = radiusOf(surface, box);
+  const endRadius = radiusOf(origin, end);
+  const { centerX, centerY } = centerParts(surface, parts);
+  hideFrame(surface);
+  const { blob } = gooLayer(surface);
+  const originBlob = blob(end, endRadius, originColor);
+  originBlob.style.opacity = "0";
+  const shape = blob(box, startRadius, surfaceColor);
+  const current2 = { top: box.top, left: box.left, width: box.width, height: box.height, scale: 1, blur: 0 };
+  const motion = channels({ ...current2, radius: startRadius, opacity: 1 }, (name, value) => {
+    if (name === "radius") shape.style.borderRadius = `${value}px`;
+    else if (name === "opacity") {
+      if (parts.length) gsap.set(parts, { opacity: value });
+    } else {
+      current2[name] = value;
+      if (name === "top" || name === "left" || name === "width" || name === "height") shape.style[name] = `${value}px`;
+      if (parts.length) {
+        gsap.set(parts, {
+          x: current2.left + current2.width / 2 - centerX,
+          y: current2.top + current2.height / 2 - centerY,
+          scale: current2.scale,
+          filter: `blur(${current2.blur}px)`
+        });
+      }
+    }
+  });
+  const L = TIMING.liquid;
+  void motion.animate(
+    { top: end.top, left: end.left, width: end.width, height: end.height, radius: endRadius, scale: 2, blur: 8, opacity: 0 },
+    {
+      top: spring(130, 18),
+      left: spring(130, 18),
+      width: eased(L.closeSize, easeOut),
+      height: eased(L.closeSize, easeOut),
+      // It rounds into the opener's shape early, long before it arrives.
+      radius: eased(L.closeSize, easeOut),
+      scale: eased(L.closeContent, easeOut),
+      blur: eased(L.closeContent, easeOut),
+      opacity: spring(137, 20)
+    }
+  );
+  gsap.to(originBlob, { opacity: 1, duration: L.originRestore, delay: 0.15, ease: "power2.in" });
+  gsap.to(shape, { background: originColor, duration: L.originRestore, ease: "power2.out" });
+  gsap.to(surface, { opacity: 0, duration: TIMING.dialog.close, ease: "power3.in" });
+  setTimeout(() => {
+    motion.stop();
+    onComplete();
+  }, L.safetyMs);
+}
+
+// src/motion/morph.ts
+var FACE = "mk-morph-face";
+var HIDDEN_ORIGIN = "data-mk-morph-origin";
+var SHARED = "data-mk-shared";
+var SHARED_HIDDEN = "data-mk-shared-hidden";
+var clamp = (value, min, max) => Math.min(Math.max(value, min), Math.max(min, max));
+var radiusOf2 = (value, size) => {
+  const parsed = Number.parseFloat(value) || 0;
+  return value.trim().endsWith("%") ? parsed / 100 * size : parsed;
+};
+function shapeOf(surface, origin) {
+  if (!origin?.isConnected) return null;
+  const start = origin.getBoundingClientRect();
+  const box = surface.getBoundingClientRect();
+  if (start.width < 4 || start.height < 4 || !box.width || !box.height) return null;
+  if (start.bottom < 0 || start.top > innerHeight || start.right < 0 || start.left > innerWidth) return null;
+  const width = Math.min(start.width, box.width);
+  const height = Math.min(start.height, box.height);
+  const left = clamp(start.left - box.left, 0, box.width - width);
+  const top = clamp(start.top - box.top, 0, box.height - height);
+  const corner = Math.min(radiusOf2(getComputedStyle(origin).borderTopLeftRadius, start.height), width / 2, height / 2);
+  const radius = radiusOf2(getComputedStyle(surface).borderTopLeftRadius, box.height);
+  return {
+    x: start.left + (start.width - width) / 2 - (box.left + left),
+    y: start.top + (start.height - height) / 2 - (box.top + top),
+    from: `inset(${top}px ${box.width - left - width}px ${box.height - top - height}px ${left}px round ${corner}px)`,
+    to: `inset(0px 0px 0px 0px round ${radius}px)`,
+    left,
+    top,
+    width,
+    height
+  };
+}
+var LOOK = [
+  "display",
+  "alignItems",
+  "justifyContent",
+  "gap",
+  "padding",
+  "borderRadius",
+  "borderWidth",
+  "borderStyle",
+  "borderColor",
+  "backgroundColor",
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "lineHeight",
+  "letterSpacing",
+  "whiteSpace"
+];
+function faceOf(surface, origin, shape, withCopy) {
+  const look = getComputedStyle(origin);
+  const face = document.createElement("div");
+  face.className = FACE;
+  face.setAttribute("aria-hidden", "true");
+  face.inert = true;
+  if (!transparentColor(look.backgroundColor)) face.style.background = look.backgroundColor;
+  surface.append(face);
+  if (!withCopy) return { face, copy: null };
+  const copy = document.createElement("span");
+  copy.innerHTML = origin.innerHTML;
+  for (const element of copy.querySelectorAll("[id], [name], [for]")) for (const name of ["id", "name", "for"]) element.removeAttribute(name);
+  for (const property of LOOK) copy.style[property] = look[property];
+  Object.assign(copy.style, {
+    position: "absolute",
+    left: `${shape.left}px`,
+    top: `${shape.top}px`,
+    width: `${shape.width}px`,
+    height: `${shape.height}px`,
+    boxSizing: "border-box",
+    margin: "0",
+    overflow: "hidden"
+  });
+  face.append(copy);
+  return { face, copy };
+}
+var running = /* @__PURE__ */ new WeakMap();
+var isMorphing = (surface) => running.has(surface);
+function stop(surface) {
+  running.get(surface)?.kill();
+  running.delete(surface);
+  gsap.killTweensOf(surface);
+  for (const face of surface.querySelectorAll(`:scope > .${FACE}`)) face.remove();
+  clearStyles([surface], MORPH_STYLES);
+}
+function stopMorph(surface) {
+  stop(surface);
+  const parts = [...surface.querySelectorAll(":scope > *")].filter((element) => !element.classList.contains("mk-liquid"));
+  gsap.killTweensOf(parts);
+  clearStyles(parts, MORPH_STYLES);
+}
+var compact = (element) => {
+  const box = element.getBoundingClientRect();
+  return box.width <= 360 && box.height <= 72;
+};
+function showOrigin(origin, { fade = false } = {}) {
+  if (!origin?.hasAttribute(HIDDEN_ORIGIN)) return;
+  if (!fade || reduced()) {
+    origin.removeAttribute(HIDDEN_ORIGIN);
+    return;
+  }
+  const previous = origin.style.transition;
+  const { originShow, originShowDelay } = TIMING.dialog;
+  origin.style.transition = `opacity ${originShow}s cubic-bezier(0.215, 0.61, 0.355, 1) ${originShowDelay}s`;
+  origin.removeAttribute(HIDDEN_ORIGIN);
+  setTimeout(() => {
+    origin.style.transition = previous;
+  }, (originShow + originShowDelay) * 1e3 + 50);
+}
+function groupOf(surface, parts, shape) {
+  const box = surface.getBoundingClientRect();
+  for (const part2 of parts) {
+    const own = part2.getBoundingClientRect();
+    gsap.set(part2, { transformOrigin: `${box.left - own.left}px ${box.top - own.top}px` });
+  }
+  return {
+    x: shape.left,
+    y: shape.top,
+    scaleX: box.width ? shape.width / box.width : 1,
+    scaleY: box.height ? shape.height / box.height : 1
+  };
+}
+var escape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/"/g, '\\"');
+function sharedPairs(origin, surface) {
+  return [origin, ...origin.querySelectorAll(`[${SHARED}]`)].filter((source) => source.hasAttribute(SHARED)).map((source) => ({
+    source,
+    target: surface.querySelector(`[${SHARED}="${escape(source.getAttribute(SHARED) ?? "")}"]`)
+  })).filter((pair) => pair.target !== null);
+}
+function textBox(element) {
+  const box = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  const px = (value) => parseFloat(value) || 0;
+  const left = box.left + px(style.borderLeftWidth) + px(style.paddingLeft);
+  const top = box.top + px(style.borderTopWidth) + px(style.paddingTop);
+  const bottom = box.bottom - px(style.borderBottomWidth) - px(style.paddingBottom);
+  return { left, top, height: Math.max(0, bottom - top), style };
+}
+var textOf = (element) => element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement ? element.value || element.placeholder : element.firstChild?.textContent ?? element.textContent ?? "";
+function flyText(from, to, text, duration) {
+  return new Promise((resolve) => {
+    const start = textBox(from);
+    const end = textBox(to);
+    const fromSize = parseFloat(start.style.fontSize) || 16;
+    const toSize = parseFloat(end.style.fontSize) || fromSize;
+    const scale = toSize / fromSize;
+    const ghost = document.createElement("div");
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.setAttribute("popover", "manual");
+    ghost.textContent = text;
+    Object.assign(ghost.style, {
+      position: "fixed",
+      inset: "auto",
+      left: `${start.left}px`,
+      top: `${start.top}px`,
+      margin: "0",
+      padding: "0",
+      border: "0",
+      background: "transparent",
+      overflow: "visible",
+      whiteSpace: "nowrap",
+      pointerEvents: "none",
+      fontFamily: start.style.fontFamily,
+      fontSize: start.style.fontSize,
+      fontWeight: start.style.fontWeight,
+      lineHeight: `${start.height || fromSize * 1.2}px`,
+      letterSpacing: start.style.letterSpacing,
+      color: start.style.color,
+      transformOrigin: "0 0"
+    });
+    document.body.append(ghost);
+    if (typeof ghost.showPopover === "function") ghost.showPopover();
+    const height = (start.height || fromSize * 1.2) * scale;
+    gsap.to(ghost, {
+      x: end.left - start.left,
+      y: end.top + end.height / 2 - height / 2 - start.top,
+      scale,
+      color: end.style.color,
+      duration,
+      ease: EASE.signature,
+      onComplete: () => {
+        ghost.remove();
+        resolve();
+      }
+    });
+  });
+}
+function releaseShared(origin) {
+  if (!origin) return;
+  for (const element of [origin, ...origin.querySelectorAll(`[${SHARED_HIDDEN}]`)]) element.removeAttribute(SHARED_HIDDEN);
+}
+function shareInto(origin, surface, duration = TIMING.dialog.open) {
+  for (const { source, target } of sharedPairs(origin, surface)) {
+    const text = textOf(source);
+    source.setAttribute(SHARED_HIDDEN, "");
+    gsap.set(target, { opacity: 0 });
+    void flyText(source, target, text, duration).then(() => gsap.set(target, { clearProps: "opacity" }));
+  }
+}
+function shareBack(surface, origin, duration = TIMING.dialog.close) {
+  for (const { source, target } of sharedPairs(origin, surface)) {
+    gsap.set(target, { opacity: 0 });
+    void flyText(target, source, textOf(source), duration).then(() => source.removeAttribute(SHARED_HIDDEN));
+  }
+}
+var partsOf = (surface, content) => [...surface.querySelectorAll(content ?? ":scope > *")].filter(
+  (element) => !element.classList.contains(FACE) && !element.classList.contains("mk-liquid")
+);
+function morphOpen(surface, origin, options = {}) {
+  registerMotion();
+  const { duration = TIMING.dialog.open, hideOrigin = false, content, stagger = 0, liquid = false } = options;
+  stop(surface);
+  if (reduced()) return null;
+  const parts = partsOf(surface, content);
+  if (liquid && !stagger && origin && shapeOf(surface, origin)) {
+    if (hideOrigin && compact(origin)) origin.setAttribute(HIDDEN_ORIGIN, "");
+    const settle = liquidOpen(surface, origin, parts);
+    const window2 = gsap.timeline({
+      onComplete: () => {
+        settle();
+        running.delete(surface);
+      },
+      onInterrupt: settle
+    });
+    window2.to({}, { duration: TIMING.liquid.safetyMs / 1e3 });
+    running.set(surface, window2);
+    return window2;
+  }
+  const enter = stagger ? { opacity: 1, y: 0, duration: TIMING.dialog.list, ease: "power2.out", stagger, clearProps: "opacity,transform" } : { opacity: 1, filter: "blur(0px)", duration, ease: EASE.signature, clearProps: "opacity,filter" };
+  const enterFrom = stagger ? { opacity: 0, y: -6 } : { opacity: 0, filter: "blur(8px)" };
+  const shape = shapeOf(surface, origin);
+  if (!shape || !origin) {
+    const rise = gsap.timeline({
+      onComplete: () => {
+        running.delete(surface);
+      }
+    }).fromTo(
+      surface,
+      { opacity: 0, scale: 0.92 },
+      { opacity: 1, scale: 1, duration: TIMING.dialog.fallback, ease: "power2.out", clearProps: "opacity,transform" }
+    );
+    if (parts.length) rise.fromTo(parts, enterFrom, { ...enter, duration: Math.min(enter.duration, TIMING.dialog.fallback) }, 0);
+    running.set(surface, rise);
+    return rise;
+  }
+  const list2 = Boolean(stagger);
+  if (!list2) shareInto(origin, surface, duration);
+  const { face, copy } = faceOf(surface, origin, shape, list2);
+  const group = list2 ? null : groupOf(surface, parts, shape);
+  if (hideOrigin && compact(origin)) origin.setAttribute(HIDDEN_ORIGIN, "");
+  const finish = () => {
+    face.remove();
+    running.delete(surface);
+    gsap.set(surface, { clearProps: "transform,clipPath,willChange" });
+    if (parts.length) gsap.set(parts, { clearProps: "opacity,transform,transformOrigin,filter" });
+  };
+  const timeline = gsap.timeline({ onComplete: finish, onInterrupt: finish }).fromTo(
+    surface,
+    { x: shape.x, y: shape.y, clipPath: shape.from, willChange: "transform,clip-path" },
+    { x: 0, y: 0, clipPath: shape.to, duration, ease: EASE.signature },
+    0
+  ).to(face, { opacity: 0, duration: TIMING.dialog.surfaceColor, ease: EASE.signature }, 0);
+  if (copy) timeline.to(copy, { opacity: 0, duration: 0.25, ease: "power2.out" }, 0.05);
+  if (parts.length) {
+    if (group) {
+      timeline.fromTo(
+        parts,
+        { ...group, opacity: 0, filter: "blur(8px)" },
+        { x: 0, y: 0, scaleX: 1, scaleY: 1, opacity: 1, filter: "blur(0px)", duration, ease: EASE.signature },
+        0
+      );
+    } else timeline.fromTo(parts, enterFrom, enter, duration * 0.2);
+  }
+  running.set(surface, timeline);
+  return timeline;
+}
+function morphClose(surface, origin, onComplete, options = {}) {
+  registerMotion();
+  const { duration = TIMING.dialog.close, content, liquid = false } = options;
+  stop(surface);
+  if (reduced()) {
+    onComplete();
+    return null;
+  }
+  const parts = partsOf(surface, content);
+  const shape = shapeOf(surface, origin);
+  if (!shape || !origin) {
+    const fade = gsap.timeline({
+      onComplete: () => {
+        running.delete(surface);
+        onComplete();
+        gsap.set(surface, { clearProps: "opacity,transform" });
+        if (parts.length) gsap.set(parts, { clearProps: "filter" });
+      }
+    }).to(surface, { scale: 0.9, duration, ease: EASE.signature }, 0).to(surface, { opacity: 0, duration, ease: EASE.fadeAway }, 0);
+    if (parts.length) fade.to(parts, { filter: "blur(32px)", duration, ease: EASE.blurAway }, 0);
+    running.set(surface, fade);
+    return fade;
+  }
+  const list2 = content !== void 0;
+  if (liquid && !list2) {
+    liquidClose(surface, origin, parts, onComplete);
+    return null;
+  }
+  const { face, copy } = faceOf(surface, origin, shape, list2);
+  gsap.set(copy ? [face, copy] : face, { opacity: 0 });
+  if (!list2) {
+    shareBack(surface, origin, duration);
+    const group = groupOf(surface, parts, shape);
+    const signature = gsap.parseEase(EASE.signature);
+    const toward = (progress) => signature(progress * (duration / TIMING.dialog.contentReturn));
+    const timeline2 = gsap.timeline({
+      onComplete: () => {
+        running.delete(surface);
+        onComplete();
+        face.remove();
+        gsap.set(surface, { clearProps: "transform,clipPath,opacity,willChange" });
+        if (parts.length) gsap.set(parts, { clearProps: "opacity,transform,transformOrigin,filter,borderRadius" });
+      },
+      onInterrupt: () => {
+        face.remove();
+        if (parts.length) gsap.set(parts, { clearProps: "opacity,transform,transformOrigin,filter,borderRadius" });
+      }
+    }).fromTo(
+      surface,
+      { clipPath: shape.to, willChange: "transform,clip-path" },
+      { x: shape.x, y: shape.y, clipPath: shape.from, duration, ease: EASE.signature },
+      0
+    ).to(face, { opacity: 1, duration, ease: EASE.signature }, 0).to(surface, { opacity: 0, duration, ease: "power3.in" }, 0);
+    if (parts.length) {
+      timeline2.to(parts, { ...group, duration, ease: toward }, 0).to(parts, { opacity: 0, borderRadius: "400px", duration, ease: EASE.fadeAway }, 0).to(parts, { filter: "blur(32px)", duration, ease: EASE.blurAway }, 0);
+    }
+    running.set(surface, timeline2);
+    return timeline2;
+  }
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      running.delete(surface);
+      onComplete();
+      face.remove();
+      gsap.set(surface, { clearProps: "transform,clipPath,willChange" });
+      if (parts.length) gsap.set(parts, { clearProps: "opacity,transform,filter" });
+    },
+    onInterrupt: () => {
+      face.remove();
+      if (parts.length) gsap.set(parts, { clearProps: "opacity,transform,filter" });
+    }
+  }).fromTo(
+    surface,
+    { clipPath: shape.to, willChange: "transform,clip-path" },
+    { x: shape.x, y: shape.y, clipPath: shape.from, duration, ease: EASE.signature },
+    0
+  ).to(face, { opacity: 1, duration: duration * 0.5, ease: "power1.in" }, duration * 0.3);
+  if (parts.length) timeline.to(parts, { opacity: 0, filter: "blur(32px)", duration: duration * 0.7, ease: "power2.in" }, 0);
+  if (copy) timeline.to(copy, { opacity: 1, duration: duration * 0.3, ease: "power1.in" }, duration * 0.65);
+  running.set(surface, timeline);
+  return timeline;
+}
+function morphCloseWithGhost(surface, origin, { inPlace = false, liquid = false } = {}) {
+  registerMotion();
+  const dragged = inPlace ? {
+    x: Number(gsap.getProperty(surface, "x")) || 0,
+    y: Number(gsap.getProperty(surface, "y")) || 0,
+    scale: Number(gsap.getProperty(surface, "scaleX")) || 1
+  } : null;
+  if (dragged) gsap.set(surface, { clearProps: "transform" });
+  const ghost = reduced() ? null : ghostOf(surface);
+  if (!ghost) {
+    showOrigin(origin);
+    releaseShared(origin);
+    return;
+  }
+  const veil = backdropVeil(surface);
+  document.body.append(veil, ghost);
+  showOrigin(origin, { fade: true });
+  gsap.to(veil, { opacity: 0, duration: TIMING.dialog.close, ease: "power3.in" });
+  if (dragged) gsap.set(ghost, { ...dragged, transformOrigin: getComputedStyle(surface).transformOrigin });
+  morphClose(
+    ghost,
+    dragged ? null : origin,
+    () => {
+      showOrigin(origin);
+      releaseShared(origin);
+      ghost.remove();
+      veil.remove();
+    },
+    { liquid }
+  );
+}
+
+// src/motion/sheet.ts
+var UNDERLAY_STYLES = ["transform", "translate", "rotate", "scale", "transform-origin", "opacity"];
+function sheetOpen(surface) {
+  if (reduced()) return null;
+  registerMotion();
+  return gsap.fromTo(surface, { yPercent: 100 }, { yPercent: 0, duration: TIMING.sheet.open, ease: EASE.sheet, clearProps: "transform" });
+}
+function sheetClose(surface, { inPlace = false } = {}) {
+  registerMotion();
+  const dragged = inPlace ? Number(gsap.getProperty(surface, "y")) || 0 : 0;
+  gsap.killTweensOf(surface);
+  clearStyles([surface], ["transform", "translate", "rotate", "scale"]);
+  const ghost = reduced() ? null : ghostOf(surface);
+  if (!ghost) return null;
+  const veil = backdropVeil(surface);
+  document.body.append(veil, ghost);
+  gsap.to(veil, { opacity: 0, duration: TIMING.sheet.close, ease: "power3.in", onComplete: () => veil.remove() });
+  return gsap.fromTo(
+    ghost,
+    { y: dragged, yPercent: 0 },
+    { yPercent: 100, duration: TIMING.sheet.close, ease: EASE.sheet, onComplete: () => ghost.remove() }
+  );
+}
+function pushUnderlay(elements) {
+  if (!elements.length || reduced()) return;
+  registerMotion();
+  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
+  gsap.to(elements, {
+    scale: TIMING.sheet.underlayScale,
+    opacity: TIMING.sheet.underlayOpacity,
+    transformOrigin: "50% 0",
+    duration,
+    ease,
+    overwrite: "auto"
+  });
+}
+function releaseUnderlay(elements, animated = true) {
+  if (!elements.length) return;
+  const restore = () => clearStyles(elements, UNDERLAY_STYLES);
+  if (!animated || reduced()) {
+    gsap.killTweensOf(elements);
+    restore();
+    return;
+  }
+  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
+  gsap.to(elements, { scale: 1, opacity: 1, duration, ease, overwrite: "auto", onComplete: restore });
+}
+
+// src/components/dialog/engine.ts
+var DEFAULT_LABELS = { close: "Cerrar", float: "Ventana flotante", dock: "Volver a su sitio" };
+var FIELDS = '[autofocus], input:not([type="hidden"]):not(:disabled), textarea:not(:disabled), select:not(:disabled)';
+var CORNERS = ["tl", "tr", "bl", "br"];
+var uid = 0;
+var part = (dialog, name) => dialog.querySelector(`[data-mk-part="${name}"]`);
+function createDialog(dialog, options = {}) {
+  if (!dialog) {
+    warnOnce("dialog: missing <dialog> element");
+    return inert({ open() {
+    }, close() {
+    }, toggle() {
+    }, float() {
+    }, dock() {
+    }, isOpen: false, isFloating: false, element: null });
+  }
+  registerMotion();
+  const {
+    variant = "morph",
+    placement = "center",
+    backdrop = true,
+    closeOnBackdrop = true,
+    drag = true,
+    float: floatKey = false,
+    autoResize = true,
+    triggers = true,
+    modal = true
+  } = options;
+  const labels = { ...DEFAULT_LABELS, ...options.labels };
+  const liquid = variant === "liquid";
+  const sheet = variant === "sheet";
+  const scope = createScope();
+  let session = [];
+  let opener = null;
+  let isOpen = false;
+  let closing = false;
+  let floating = false;
+  let ownCloses = 0;
+  const closeNatively = () => {
+    if (!dialog.hasAttribute("open")) return;
+    ownCloses += 1;
+    closeModal(dialog);
+  };
+  let destroyed = false;
+  let tearingDown = false;
+  if (placement !== "center") scope.attr(dialog, "data-mk-placement", placement);
+  if (!backdrop) scope.attr(dialog, "data-mk-backdrop", "none");
+  scope.attr(dialog, "data-mk-variant", variant);
+  const title = part(dialog, "title");
+  if (title && !dialog.hasAttribute("aria-label") && !dialog.hasAttribute("aria-labelledby")) {
+    if (!title.id) scope.attr(title, "id", `mk-dialog-title-${++uid}`);
+    scope.attr(dialog, "aria-labelledby", title.id);
+  }
+  const description = part(dialog, "description");
+  if (description && !dialog.hasAttribute("aria-describedby")) {
+    if (!description.id) scope.attr(description, "id", `mk-dialog-description-${++uid}`);
+    scope.attr(dialog, "aria-describedby", description.id);
+  }
+  const closeButton = part(dialog, "close");
+  if (closeButton && !closeButton.hasAttribute("aria-label") && !closeButton.textContent?.trim()) {
+    scope.attr(closeButton, "aria-label", labels.close);
+  }
+  const handle = floatKey ? part(dialog, "handle") : null;
+  if (handle) {
+    scope.attr(handle, "data-mk-no-drag", "");
+    scope.attr(handle, "aria-pressed", "false");
+    scope.attr(handle, "aria-label", labels.float);
+  }
+  const corners = [];
+  if (floatKey) {
+    for (const corner of CORNERS) {
+      const element = document.createElement("span");
+      element.className = "mk-float-corner";
+      element.dataset.mkFloatCorner = corner;
+      element.dataset.mkNoDrag = "";
+      element.setAttribute("aria-hidden", "true");
+      dialog.append(element);
+      corners.push(element);
+    }
+    scope.add(() => corners.forEach((corner) => corner.remove()));
+  }
+  const emit = (type, cancelable = false, detail = {}) => dialog.dispatchEvent(new CustomEvent(type, { bubbles: true, cancelable, detail: { dialog, ...detail } }));
+  const endSession = () => {
+    for (const cleanup of session.splice(0).reverse()) cleanup();
+  };
+  const settleFloating = () => {
+    if (!floating) return;
+    floating = false;
+    if (typeof dialog.hidePopover === "function" && dialog.hasAttribute("popover")) {
+      try {
+        dialog.hidePopover();
+      } catch {
+      }
+    }
+    dialog.removeAttribute("popover");
+    unplaceWindow(dialog);
+    if (handle) {
+      handle.setAttribute("aria-pressed", "false");
+      handle.setAttribute("aria-label", labels.float);
+    }
+  };
+  const closedQuietly = () => {
+    stopMorph(dialog);
+    endSession();
+    isOpen = false;
+    closing = false;
+    showOrigin(opener);
+    releaseShared(opener);
+    emit("mk:closed");
+    options.onClose?.();
+  };
+  const lift = () => {
+    if (!floatKey || floating || !isOpen || !floatingAvailable()) return;
+    const box = dialog.getBoundingClientRect();
+    const rect = savedFloat(floatKey) ?? { top: box.top, left: box.left, width: box.width, height: box.height };
+    const focused = document.activeElement;
+    const backdropStyle = getComputedStyle(dialog, "::backdrop");
+    const veil = document.createElement("div");
+    veil.setAttribute("aria-hidden", "true");
+    Object.assign(veil.style, {
+      position: "fixed",
+      inset: "0",
+      background: backdropStyle.background || backdropStyle.backgroundColor,
+      backdropFilter: backdropStyle.backdropFilter,
+      pointerEvents: "none"
+    });
+    closeNatively();
+    document.body.append(veil);
+    dialog.setAttribute("popover", "manual");
+    if (typeof dialog.showPopover === "function") dialog.showPopover();
+    else openModal(dialog, false);
+    liftWindow(dialog, rect);
+    gsap.to(veil, { opacity: 0, duration: reduced() ? 0 : TIMING.float.shadow, ease: EASE.signature, onComplete: () => veil.remove() });
+    floating = true;
+    if (handle) {
+      handle.setAttribute("aria-pressed", "true");
+      handle.setAttribute("aria-label", labels.dock);
+    }
+    showOrigin(opener, { fade: true });
+    if (focused instanceof HTMLElement && dialog.contains(focused)) focused.focus();
+  };
+  const dock = () => {
+    if (!floatKey || !floating) return;
+    const box = dialog.getBoundingClientRect();
+    const focused = document.activeElement;
+    floating = false;
+    if (typeof dialog.hidePopover === "function") dialog.hidePopover();
+    dialog.removeAttribute("popover");
+    closeNatively();
+    openModal(dialog, modal);
+    dockWindow(dialog, { top: box.top, left: box.left, width: box.width, height: box.height });
+    if (backdrop) void fadeBackdrop(dialog, "in");
+    forgetFloat(floatKey);
+    if (handle) {
+      handle.setAttribute("aria-pressed", "false");
+      handle.setAttribute("aria-label", labels.float);
+    }
+    if (focused instanceof HTMLElement && dialog.contains(focused)) focused.focus();
+  };
+  const startSession = () => {
+    if (sheet) {
+      const behind = [...document.querySelectorAll("[data-mk-underlay]")];
+      pushUnderlay(behind);
+      const root = document.documentElement;
+      const overflow = root.style.overflow;
+      root.style.overflow = "hidden";
+      session.push(() => {
+        root.style.overflow = overflow;
+        if (root.getAttribute("style") === "") root.removeAttribute("style");
+        releaseUnderlay(behind, !tearingDown);
+      });
+    }
+    if (autoResize && typeof ResizeObserver === "function") {
+      let last = dialog.offsetHeight;
+      let resizing = null;
+      const observer = new ResizeObserver(() => {
+        if (resizing?.isActive()) return;
+        const next = dialog.offsetHeight;
+        const previous = last;
+        last = next;
+        if (floating || Math.abs(next - previous) < 2 || !previous || isMorphing(dialog) || reduced()) return;
+        resizing = gsap.fromTo(
+          dialog,
+          { height: previous },
+          {
+            height: next,
+            duration: TIMING.dialog.autoResize,
+            ease: EASE.signature,
+            clearProps: "height",
+            onComplete: () => {
+              last = dialog.offsetHeight;
+            }
+          }
+        );
+      });
+      observer.observe(dialog);
+      session.push(() => {
+        observer.disconnect();
+        resizing?.kill();
+        clearStyles([dialog], ["height"]);
+      });
+    }
+    if (drag) {
+      session.push(
+        attachDragDismiss(dialog, {
+          canDrag: () => !isMorphing(dialog) && !floating && !closing && isOpen,
+          onDismiss: () => close(true)
+        })
+      );
+    }
+    if (placement === "anchor") {
+      const onResize = () => {
+        if (isOpen && !floating) anchorSurface(dialog, opener?.isConnected ? opener.getBoundingClientRect() : null);
+      };
+      addEventListener("resize", onResize);
+      session.push(() => {
+        removeEventListener("resize", onResize);
+        clearAnchor(dialog);
+      });
+    }
+    if (floatKey && handle) {
+      session.push(attachFloating(dialog, { key: floatKey, handle, corners, isFloating: () => floating, float: lift, dock }));
+      const onResize = () => {
+        if (floating && !floatingAvailable()) dock();
+      };
+      addEventListener("resize", onResize);
+      session.push(() => removeEventListener("resize", onResize));
+    }
+  };
+  const open = (origin) => {
+    if (destroyed || isOpen) return;
+    const active = document.activeElement;
+    opener = origin !== void 0 ? origin : active instanceof HTMLElement && active !== document.body && !dialog.contains(active) ? active : null;
+    closing = false;
+    isOpen = true;
+    openModal(dialog, modal);
+    if (placement === "anchor") anchorSurface(dialog, opener?.getBoundingClientRect());
+    if (backdrop && modal) void fadeBackdrop(dialog, "in");
+    if (sheet) sheetOpen(dialog);
+    else morphOpen(dialog, opener, { hideOrigin: true, liquid, content: options.animateContent === false ? ":scope > :not(*)" : void 0 });
+    startSession();
+    dialog.querySelector(FIELDS)?.focus({ preventScroll: true });
+    emit("mk:open", false, { origin: opener });
+    options.onOpen?.();
+  };
+  const close = (inPlace = false) => {
+    if (destroyed || !isOpen || closing) return;
+    if (!emit("mk:close", true, { inPlace })) return;
+    closing = true;
+    if (sheet) sheetClose(dialog, { inPlace });
+    else morphCloseWithGhost(dialog, opener, { inPlace, liquid });
+    endSession();
+    if (floating) settleFloating();
+    if (dialog.hasAttribute("open")) closeModal(dialog);
+    isOpen = false;
+    closing = false;
+    if (opener?.isConnected) opener.focus();
+    emit("mk:closed");
+    options.onClose?.();
+  };
+  scope.on(dialog, "cancel", (event) => {
+    event.preventDefault();
+    close();
+  });
+  scope.on(dialog, "close", () => {
+    if (ownCloses > 0) {
+      ownCloses -= 1;
+      return;
+    }
+    if (!isOpen || closing) return;
+    closedQuietly();
+  });
+  scope.on(dialog, "keydown", (event) => {
+    if (event.key === "Escape" && floating) {
+      event.preventDefault();
+      close();
+    }
+  });
+  scope.on(dialog, "click", (event) => {
+    const target = event.target;
+    if (target?.closest('[data-mk-part="close"], [data-mk-close]') && dialog.contains(target)) {
+      close();
+      return;
+    }
+    if (target !== dialog || !closeOnBackdrop || floating) return;
+    const mouse = event;
+    const box = dialog.getBoundingClientRect();
+    if (mouse.clientX < box.left || mouse.clientX > box.right || mouse.clientY < box.top || mouse.clientY > box.bottom) close();
+  });
+  const triggerId = triggers === true ? dialog.id : triggers || "";
+  if (triggerId) {
+    const selector = `[data-mk-open="${typeof CSS !== "undefined" && CSS.escape ? CSS.escape(triggerId) : triggerId}"]`;
+    scope.on(document, "click", (event) => {
+      const trigger = event.target?.closest(selector);
+      if (!trigger || dialog.contains(trigger)) return;
+      event.preventDefault();
+      if (isOpen) close();
+      else open(trigger);
+    });
+  }
+  dialog.dataset.mkReady = "";
+  return {
+    open,
+    close: () => close(),
+    toggle: (origin) => isOpen ? close() : open(origin),
+    float: lift,
+    dock,
+    get isOpen() {
+      return isOpen;
+    },
+    get isFloating() {
+      return floating;
+    },
+    element: dialog,
+    destroy() {
+      if (destroyed) return;
+      tearingDown = true;
+      if (isOpen) {
+        settleFloating();
+        closing = true;
+        if (dialog.hasAttribute("open")) closeModal(dialog);
+        closedQuietly();
+      }
+      destroyed = true;
+      endSession();
+      gsap.killTweensOf(dialog);
+      clearStyles([dialog], [...MORPH_STYLES, "height"]);
+      scope.dispose();
+      delete dialog.dataset.mkReady;
+    }
+  };
+}
+
+// src/components/menu/engine.ts
+var ITEM = "[data-mk-item]";
+function createMenu(dialog, options = {}) {
+  if (!dialog) {
+    warnOnce("menu: missing <dialog> element");
+    return inert({
+      open() {
+      },
+      close() {
+      },
+      toggle() {
+      },
+      float() {
+      },
+      dock() {
+      },
+      isOpen: false,
+      isFloating: false,
+      element: null,
+      items: []
+    });
+  }
+  const { closeOnSelect = true } = options;
+  const scope = createScope();
+  let ticketAnimation;
+  if (options.ticket) {
+    scope.attr(dialog, "data-mk-ticket", "");
+    scope.attr(dialog, "style", dialog.getAttribute("style"));
+    for (const item of dialog.querySelectorAll(ITEM)) scope.attr(item, "style", item.getAttribute("style"));
+    scope.add(() => ticketAnimation?.kill());
+  }
+  const items = () => [...dialog.querySelectorAll(ITEM)].filter((item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true");
+  scope.attr(dialog, "role", "menu");
+  const markItems = () => {
+    for (const item of dialog.querySelectorAll(ITEM)) {
+      scope.attr(item, "role", "menuitem");
+      scope.attr(item, "tabindex", "-1");
+    }
+  };
+  markItems();
+  const surface = createDialog(dialog, {
+    ...options,
+    placement: "anchor",
+    backdrop: false,
+    drag: false,
+    autoResize: false,
+    animateContent: false,
+    onOpen: () => {
+      markItems();
+      const list2 = items();
+      if (options.ticket && !reduced()) {
+        ticketAnimation?.kill();
+        ticketAnimation = gsap.timeline().fromTo(dialog, { clipPath: "inset(0 0 100% 0)" }, { clipPath: "inset(0 0 0% 0)", duration: TIMING.ticketMenu.open, ease: "expo.out" }).fromTo(list2, { yPercent: TIMING.ticketMenu.from }, { yPercent: 0, duration: TIMING.ticketMenu.content, stagger: TIMING.ticketMenu.stagger, ease: "expo.out" }, 0);
+      } else flowInMenu(list2);
+      list2[0]?.focus({ preventScroll: true });
+      options.onOpen?.();
+    }
+  });
+  const select = (item) => {
+    const value = item.dataset.mkValue ?? item.textContent?.trim() ?? "";
+    dialog.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { value, item } }));
+    options.onSelect?.(value, item);
+    if (closeOnSelect) surface.close();
+  };
+  scope.on(dialog, "click", (event) => {
+    const item = event.target?.closest(ITEM);
+    if (item && dialog.contains(item) && items().includes(item)) select(item);
+  });
+  scope.on(dialog, "keydown", (event) => {
+    const key = event.key;
+    const list2 = items();
+    if (!list2.length) return;
+    const at = list2.indexOf(document.activeElement);
+    const moves = {
+      ArrowDown: at < 0 ? 0 : (at + 1) % list2.length,
+      ArrowUp: at < 0 ? list2.length - 1 : (at - 1 + list2.length) % list2.length,
+      Home: 0,
+      End: list2.length - 1
+    };
+    if (key in moves) {
+      event.preventDefault();
+      list2[moves[key]]?.focus();
+      return;
+    }
+    const target = event.target;
+    if ((key === "Enter" || key === " ") && list2.includes(target) && !target.matches("button, a[href]")) {
+      event.preventDefault();
+      select(target);
+    }
+  });
+  return {
+    open: surface.open,
+    close: surface.close,
+    toggle: surface.toggle,
+    float: surface.float,
+    dock: surface.dock,
+    get isOpen() {
+      return surface.isOpen;
+    },
+    get isFloating() {
+      return surface.isFloating;
+    },
+    get items() {
+      return items();
+    },
+    element: dialog,
+    destroy() {
+      surface.destroy();
+      scope.dispose();
+    }
+  };
+}
+
+export {
+  PATHS,
+  springPath,
+  SIGNATURE_LINEAR,
+  gsap,
+  ScrollTrigger,
+  SplitText,
+  CustomEase,
+  Flip,
+  ELASTIC,
+  EASE,
+  registerMotion,
+  easeOut,
+  easeOutCubic,
+  easeInCubic,
+  bezier,
+  spring,
+  eased,
+  createChannelState,
+  stepChannel,
+  channels,
+  springEase,
+  splitWords,
+  splitGraphemes,
+  requestFrame,
+  nextFrame,
+  clearStyles,
+  MORPH_STYLES,
+  motionSpring,
+  springDuration,
+  springLinear,
+  flowIn,
+  flowOut,
+  stepChange,
+  flowInMenu,
+  flowInPalette,
+  flowInForm,
+  flowInLanding,
+  flowInContent,
+  pointer,
+  bindPointer,
+  takeMovement,
+  revealFrom,
+  tweenNumber,
+  countTo,
+  revealCounter,
+  anchorSurface,
+  clearAnchor,
+  attachDragDismiss,
+  floatingAvailable,
+  clampRect,
+  savedFloat,
+  forgetFloat,
+  liftWindow,
+  dockWindow,
+  attachFloating,
+  transparentColor,
+  openModal,
+  closeModal,
+  fadeBackdrop,
+  backdropVeil,
+  ghostOf,
+  liquidOpen,
+  liquidClose,
+  isMorphing,
+  stopMorph,
+  showOrigin,
+  releaseShared,
+  shareInto,
+  shareBack,
+  morphOpen,
+  morphClose,
+  morphCloseWithGhost,
+  sheetOpen,
+  sheetClose,
+  pushUnderlay,
+  releaseUnderlay,
+  createDialog,
+  createMenu
+};
+//# sourceMappingURL=chunk-34XYOXHG.js.map