@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/chunk-Q4LVFNLN.js

@@ -0,0 +1,1617 @@
+import {
+  EASE,
+  Flip,
+  bezier,
+  channels,
+  clearStyles,
+  easeInCubic,
+  easeOut,
+  easeOutCubic,
+  eased,
+  flowIn,
+  flowInPalette,
+  flowOut,
+  gsap,
+  motionSpring,
+  nextFrame,
+  registerMotion,
+  revealCounter,
+  revealFrom,
+  splitGraphemes,
+  splitWords,
+  spring,
+  springEase
+} from "./chunk-34XYOXHG.js";
+import {
+  THEMES,
+  THEME_EVENT,
+  getTheme,
+  setTheme
+} from "./chunk-J27KH2A2.js";
+import {
+  TIMING,
+  createScope,
+  entrances,
+  reduced,
+  subscribe
+} from "./chunk-RFDIZYFX.js";
+import {
+  inert,
+  warnOnce
+} from "./chunk-TGV27ZWM.js";
+
+// src/motion/chat.ts
+var isUser = (bubble) => bubble.dataset.mkRole === "user" || bubble.classList.contains("user");
+function enterMessages(bubbles, { textSelector = "[data-mk-text], .message-text" } = {}) {
+  if (!bubbles.length || reduced()) return null;
+  registerMotion();
+  const reverts = [];
+  const cleanup = () => {
+    for (const revert of reverts.splice(0)) revert();
+  };
+  const timeline = gsap.timeline({ onComplete: cleanup, onInterrupt: cleanup });
+  bubbles.forEach((bubble, index) => {
+    gsap.set(bubble, { transformOrigin: isUser(bubble) ? "100% 50%" : "0% 50%" });
+    timeline.fromTo(
+      bubble,
+      { scale: 0.5, autoAlpha: 0, filter: "blur(24px)" },
+      { scale: 1, autoAlpha: 1, filter: "blur(0px)", duration: TIMING.bubble, ease: EASE.signature, clearProps: "transform,opacity,visibility,filter" },
+      index * TIMING.bubbleStagger
+    );
+    const text = bubble.querySelector(textSelector);
+    if (!text) return;
+    const before = text.offsetHeight;
+    const split = splitWords(text);
+    const lineHeight = parseFloat(getComputedStyle(text).lineHeight) || 0;
+    let targets = split.parts;
+    if (!split.parts.length || text.offsetHeight - before > lineHeight / 2) {
+      split.revert();
+      targets = [text];
+    } else reverts.push(() => split.revert());
+    timeline.fromTo(
+      targets,
+      { y: 16, autoAlpha: 0, filter: "blur(6px)" },
+      {
+        y: 0,
+        autoAlpha: 1,
+        filter: "blur(0px)",
+        duration: TIMING.word,
+        ease: "back.out(1)",
+        stagger: TIMING.wordStagger,
+        clearProps: "transform,opacity,visibility,filter"
+      },
+      index * TIMING.bubbleStagger
+    );
+  });
+  return timeline;
+}
+function fitComposer(field, min = 64) {
+  const from = field.offsetHeight;
+  field.style.height = "auto";
+  const to = Math.max(min, field.scrollHeight);
+  field.style.height = `${from}px`;
+  if (from === to || reduced()) {
+    field.style.height = `${to}px`;
+    return null;
+  }
+  registerMotion();
+  return gsap.to(field, { height: to, duration: TIMING.composer, ease: "power2.out", overwrite: "auto" });
+}
+function scrollToLatest(scroller) {
+  const top = scroller.scrollHeight - scroller.clientHeight;
+  if (reduced()) {
+    scroller.scrollTop = top;
+    return null;
+  }
+  registerMotion();
+  const state = { top: scroller.scrollTop };
+  return gsap.to(state, {
+    top,
+    duration: TIMING.chatScroll,
+    ease: EASE.chatScroll,
+    overwrite: "auto",
+    onUpdate: () => {
+      scroller.scrollTop = state.top;
+    }
+  });
+}
+
+// src/components/theme-picker/engine.ts
+function createThemePicker(root, options = {}) {
+  if (!root) {
+    warnOnce("theme-picker: missing root");
+    return inert({ select() {
+    } });
+  }
+  registerMotion();
+  const scope = createScope();
+  const ctx = gsap.context(() => {
+  });
+  const generated = [];
+  let swatches = [...root.querySelectorAll("[data-mk-swatch]")];
+  if (!swatches.length) {
+    const byId = new Map(THEMES.map((theme) => [theme.id, theme]));
+    const ids = options.themes ?? THEMES.filter((theme) => options.showHidden || !theme.hidden).map((theme) => theme.id);
+    for (const id of ids) {
+      const theme = byId.get(id);
+      if (!theme) {
+        warnOnce(`theme-picker: unknown theme "${id}"`);
+        continue;
+      }
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "mk-swatch";
+      button.dataset.mkSwatch = theme.id;
+      button.title = theme.name;
+      button.setAttribute("aria-label", theme.name);
+      button.style.setProperty("--mk-swatch", theme.seed);
+      root.append(button);
+      generated.push(button);
+    }
+    swatches = generated;
+  }
+  scope.attr(root, "role", "group");
+  if (!root.hasAttribute("aria-label")) scope.attr(root, "aria-label", options.labels?.group ?? "Tema");
+  const sync = () => {
+    const current = getTheme().id;
+    for (const swatch of swatches) scope.attr(swatch, "aria-pressed", String(swatch.dataset.mkSwatch === current));
+  };
+  const select = (id) => {
+    setTheme(id);
+    options.onChange?.(id);
+  };
+  scope.on(root, "click", (event) => {
+    const swatch = event.target?.closest("[data-mk-swatch]");
+    if (swatch && root.contains(swatch) && swatch.dataset.mkSwatch) select(swatch.dataset.mkSwatch);
+  });
+  scope.on(document, THEME_EVENT, sync);
+  sync();
+  if (entrances()) ctx.add(() => flowInPalette(swatches));
+  root.dataset.mkReady = "";
+  return {
+    select,
+    destroy() {
+      scope.dispose();
+      ctx.revert();
+      for (const button of generated.splice(0)) button.remove();
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/components/toast/store.ts
+var TOAST_LIMIT = 5;
+var items = [];
+var nextId = 1;
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => {
+  for (const listener of listeners) listener();
+};
+var getToasts = () => items;
+function subscribeToasts(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function show(message, { origin = null, duration = 4e3, tone = "success", action, icon = true } = {}) {
+  const id = nextId++;
+  const live = items.filter((item) => !item.closing);
+  const extra = new Set(live.slice(0, Math.max(0, live.length - TOAST_LIMIT + 1)).map((item) => item.id));
+  items = [
+    ...items.map((item) => extra.has(item.id) ? { ...item, closing: true } : item),
+    { id, message, origin, duration, tone, action: action ?? null, icon, closing: false }
+  ];
+  emit();
+  return id;
+}
+function dismissToast(id) {
+  const item = items.find((entry) => entry.id === id);
+  if (!item || item.closing) return;
+  items = items.map((entry) => entry.id === id ? { ...entry, closing: true } : entry);
+  emit();
+}
+function removeToast(id) {
+  toastTimers.clear(id);
+  items = items.filter((entry) => entry.id !== id);
+  emit();
+}
+function clearToasts() {
+  for (const item of items) toastTimers.clear(item.id);
+  items = [];
+  emit();
+}
+var toast = Object.assign(show, { dismiss: dismissToast, clear: clearToasts });
+var running = /* @__PURE__ */ new Map();
+var toastTimers = {
+  start(id, duration) {
+    if (duration <= 0 || running.has(id)) return;
+    running.set(id, { handle: setTimeout(() => dismissToast(id), duration), remaining: duration, started: Date.now() });
+  },
+  pause(id) {
+    const timer = running.get(id);
+    if (!timer?.handle) return;
+    clearTimeout(timer.handle);
+    timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.started));
+    timer.handle = null;
+  },
+  resume(id) {
+    const timer = running.get(id);
+    if (!timer || timer.handle) return;
+    if (timer.remaining <= 0) {
+      dismissToast(id);
+      return;
+    }
+    timer.started = Date.now();
+    timer.handle = setTimeout(() => dismissToast(id), timer.remaining);
+  },
+  clear(id) {
+    const timer = running.get(id);
+    if (timer?.handle) clearTimeout(timer.handle);
+    running.delete(id);
+  }
+};
+
+// src/components/icons.ts
+var ICON_PATHS = {
+  close: "M6 6l12 12M18 6L6 18",
+  expand: "M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7",
+  shrink: "M4 14h6v6M20 10h-6V4M10 14l-7 7M14 10l7-7",
+  check: "M5 12.5l4.5 4.5L19 7.5",
+  alert: "M12 8v5M12 16.5v.01M10.3 3.9L2.6 17.3a2 2 0 001.7 3h15.4a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z",
+  info: "M12 11v6M12 7.5v.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+  send: "M12 19V5M5.5 11.5L12 5l6.5 6.5",
+  mic: "M12 3a3 3 0 00-3 3v6a3 3 0 006 0V6a3 3 0 00-3-3zM5.5 11a6.5 6.5 0 0013 0M12 17.5V21",
+  sparkle: "M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z",
+  grip: "M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01"
+};
+function iconSvg(name, size = 20) {
+  return `<svg aria-hidden="true" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ICON_PATHS[name]}"/></svg>`;
+}
+
+// src/components/toast/engine.ts
+var STACK = { peek: 16, scaleStep: 0.05, minScale: 0.7, maxVisible: 3, gap: 8, baseZ: 1e3 };
+var DISTANCE = { enter: 12, enterBlur: 6, exit: 24, exitBlur: 4, fade: 120 };
+var GESTURE = { swipe: 48, wheel: 80, expandDrag: 24, resistance: 0.15, wheelEndMs: 140 };
+var TONE_ICONS = { success: "check", error: "alert", info: "info", neutral: null };
+function layout(count, expanded, heights) {
+  let offset = 0;
+  return Array.from({ length: count }, (_, index) => {
+    if (expanded) {
+      const slot = { y: offset, scale: 1, opacity: 1, visible: true, zIndex: STACK.baseZ - index };
+      offset += (heights[index] ?? 0) + STACK.gap;
+      return slot;
+    }
+    const visible = index < STACK.maxVisible;
+    return {
+      y: index * STACK.peek,
+      scale: Math.max(STACK.minScale, 1 - index * STACK.scaleStep),
+      opacity: visible ? 1 : 0,
+      visible,
+      zIndex: STACK.baseZ - index
+    };
+  });
+}
+function revealLetters(element) {
+  const text = element.textContent ?? "";
+  const T = TIMING.toast;
+  if (!text || text.length > 64 || reduced()) return;
+  const letters = splitGraphemes(text, 64);
+  const original = element.innerHTML;
+  const width = element.getBoundingClientRect().width;
+  const fragment = document.createDocumentFragment();
+  const chars = [];
+  let word = null;
+  for (const letter of letters) {
+    if (!letter.trim()) {
+      word = null;
+      fragment.append(document.createTextNode(letter));
+      continue;
+    }
+    if (!word) {
+      word = document.createElement("span");
+      word.style.display = "inline-block";
+      word.style.whiteSpace = "nowrap";
+      fragment.append(word);
+    }
+    const char = document.createElement("span");
+    char.textContent = letter;
+    char.style.display = "inline-block";
+    word.append(char);
+    chars.push(char);
+  }
+  if (width) element.style.width = `${width}px`;
+  element.textContent = "";
+  element.append(fragment);
+  gsap.fromTo(
+    chars,
+    { opacity: 0, yPercent: 40, filter: "blur(4px)" },
+    {
+      opacity: 1,
+      yPercent: 0,
+      filter: "blur(0px)",
+      duration: T.chars,
+      ease: easeOutCubic,
+      delay: (index) => T.charsDelay + index * T.charsStagger,
+      onComplete: () => {
+        element.innerHTML = original;
+        element.style.width = "";
+      }
+    }
+  );
+}
+function morphFrom(card, shell, body, origin) {
+  const T = TIMING.toast;
+  const box = shell.getBoundingClientRect();
+  const start = origin.getBoundingClientRect();
+  const look = getComputedStyle(origin);
+  const own = getComputedStyle(shell);
+  const endRadius = parseFloat(own.borderTopLeftRadius) || 20;
+  const startRadius = Math.min(parseFloat(look.borderTopLeftRadius) || 0, start.height / 2);
+  card.style.width = `${box.width}px`;
+  card.style.height = `${box.height}px`;
+  body.style.width = `${body.getBoundingClientRect().width}px`;
+  const towardX = start.left + start.width / 2 < innerWidth / 2 ? 1 : -1;
+  const towardY = start.top + start.height / 2 < innerHeight / 2 ? 1 : -1;
+  const offset = { x: start.left - box.left, y: start.top - box.top };
+  Object.assign(shell.style, {
+    position: "absolute",
+    top: "0px",
+    left: "0px",
+    width: `${start.width}px`,
+    height: `${start.height}px`,
+    borderRadius: `${startRadius}px`,
+    background: look.backgroundColor,
+    transform: `translate(${offset.x}px, ${offset.y}px)`,
+    transition: "none"
+  });
+  Object.assign(body.style, { transform: "scale(2)", transformOrigin: "center center", filter: "blur(8px)", opacity: "0" });
+  origin.style.transition = "opacity 160ms ease";
+  origin.style.opacity = "0";
+  void shell.offsetWidth;
+  shell.style.transition = `background ${T.morphColor}s ease-out ${T.morphColorDelay}s, box-shadow ${T.morphShadow}s ease-out ${T.morphShadowDelay}s`;
+  shell.style.background = "";
+  body.style.transition = `opacity ${T.morphColor}s ease-out ${T.morphColorDelay}s`;
+  body.style.opacity = "1";
+  const motion = channels(
+    { x: offset.x, y: offset.y, width: start.width, height: start.height, radius: startRadius, scale: 2, blur: 8 },
+    (name, value) => {
+      if (name === "x") offset.x = value;
+      else if (name === "y") offset.y = value;
+      else if (name === "width") shell.style.width = `${value}px`;
+      else if (name === "height") shell.style.height = `${value}px`;
+      else if (name === "radius") shell.style.borderRadius = `${value}px`;
+      else if (name === "scale") body.style.transform = `scale(${value})`;
+      else if (name === "blur") body.style.filter = `blur(${value}px)`;
+      if (name === "x" || name === "y") shell.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
+    }
+  );
+  void motion.animate(
+    { x: 0, y: 0, width: box.width, height: box.height, radius: endRadius, scale: 1, blur: 0 },
+    {
+      x: spring(144, 14, { velocity: 2400, direction: towardX }),
+      y: spring(144, 14, { velocity: 2400, direction: towardY }),
+      width: eased(T.morphSize, bezier(0.8, 0.3, 0.5, 0.8)),
+      height: eased(T.morphSize, bezier(0.8, 0.3, 0.5, 0.8)),
+      radius: eased(T.morphRadius, easeOut),
+      scale: eased(T.morphContent, easeOut),
+      blur: eased(T.morphContent, easeOut)
+    }
+  );
+  let settled = false;
+  const settle = () => {
+    if (settled) return;
+    settled = true;
+    clearTimeout(timer);
+    motion.stop();
+    for (const name of ["position", "top", "left", "width", "height", "border-radius", "background", "transform", "transition"]) shell.style.removeProperty(name);
+    card.style.removeProperty("width");
+    card.style.removeProperty("height");
+    for (const name of ["transform", "transform-origin", "filter", "opacity", "width", "transition"]) body.style.removeProperty(name);
+    origin.style.transition = "opacity 300ms ease";
+    origin.style.opacity = "";
+    setTimeout(() => {
+      origin.style.transition = "";
+    }, 320);
+  };
+  const timer = setTimeout(settle, T.safetyMs);
+  return settle;
+}
+function buildCard(item, dismissLabel) {
+  const card = document.createElement("div");
+  card.className = "mk-toast";
+  card.dataset.mkToast = String(item.id);
+  card.dataset.mkTone = item.tone;
+  const shell = document.createElement("div");
+  shell.className = "mk-toast__shell";
+  const body = document.createElement("div");
+  body.className = "mk-toast__body";
+  const icon = item.icon ? TONE_ICONS[item.tone] : null;
+  if (icon) {
+    const holder = document.createElement("span");
+    holder.className = "mk-toast__icon";
+    holder.innerHTML = iconSvg(icon, 18);
+    body.append(holder);
+  }
+  const message = document.createElement("span");
+  message.className = "mk-toast__message";
+  message.textContent = item.message;
+  body.append(message);
+  if (item.action) {
+    const action = document.createElement("button");
+    action.type = "button";
+    action.className = "mk-toast__action";
+    action.dataset.mkToastAction = "";
+    action.textContent = item.action.label;
+    body.append(action);
+  }
+  const dismiss = document.createElement("button");
+  dismiss.type = "button";
+  dismiss.className = "mk-toast__dismiss";
+  dismiss.dataset.mkToastDismiss = "";
+  dismiss.setAttribute("aria-label", dismissLabel);
+  dismiss.innerHTML = iconSvg("close", 14);
+  body.append(dismiss);
+  shell.append(body);
+  card.append(shell);
+  return { card, shell, body, message };
+}
+function createToaster(host, options = {}) {
+  if (!host) {
+    warnOnce("toaster: missing host");
+    return inert();
+  }
+  registerMotion();
+  const dismissLabel = options.labels?.dismiss ?? "Cerrar";
+  const scope = createScope();
+  const cards = /* @__PURE__ */ new Map();
+  const entered = /* @__PURE__ */ new Set();
+  const leaving = /* @__PURE__ */ new Set();
+  const dragging = /* @__PURE__ */ new Set();
+  const settles = /* @__PURE__ */ new Map();
+  let expanded = false;
+  let collapse;
+  const popover = typeof host.showPopover === "function";
+  scope.attr(host, "role", "status");
+  scope.attr(host, "aria-live", "polite");
+  if (popover) scope.attr(host, "popover", "manual");
+  const live = () => getToasts().filter((item) => !item.closing).reverse().map((item) => ({ item, entry: cards.get(item.id) })).filter((pair) => pair.entry !== void 0);
+  const slotsFor = () => {
+    const entries = live();
+    return { entries, slots: layout(entries.length, expanded, entries.map(({ entry }) => entry.card.offsetHeight)) };
+  };
+  const relayout = (duration = TIMING.toast.relayout, ease = easeOutCubic, stagger = 0) => {
+    const { entries, slots } = slotsFor();
+    entries.forEach(({ item, entry }, index) => {
+      const slot = slots[index];
+      if (!slot) return;
+      entry.card.style.zIndex = String(slot.zIndex);
+      entry.card.style.pointerEvents = slot.visible ? "auto" : "none";
+      entry.card.setAttribute("aria-hidden", slot.visible ? "false" : "true");
+      if (dragging.has(item.id) || !entered.has(item.id)) return;
+      gsap.to(entry.card, {
+        xPercent: -50,
+        y: slot.y,
+        scale: slot.scale,
+        opacity: slot.opacity,
+        duration: reduced() ? 0 : duration,
+        ease,
+        delay: stagger * index,
+        overwrite: "auto"
+      });
+    });
+  };
+  const restingY = (id) => {
+    const { entries, slots } = slotsFor();
+    return slots[entries.findIndex(({ item }) => item.id === id)]?.y ?? 0;
+  };
+  const openDeck = () => {
+    clearTimeout(collapse);
+    if (expanded) return;
+    expanded = true;
+    for (const { item } of live()) toastTimers.pause(item.id);
+    relayout(TIMING.toast.expand, springEase(0.55), TIMING.toast.expandStagger);
+  };
+  const closeDeck = () => {
+    clearTimeout(collapse);
+    collapse = setTimeout(() => {
+      if (!expanded) return;
+      expanded = false;
+      for (const { item } of live()) toastTimers.resume(item.id);
+      relayout(TIMING.toast.expand, springEase(0.55), TIMING.toast.expandStagger);
+    }, TIMING.toast.collapseDelayMs);
+  };
+  const showLayer = (visible) => {
+    if (!popover) return;
+    try {
+      if (host.matches(":popover-open")) host.hidePopover();
+      if (visible) host.showPopover();
+    } catch {
+    }
+  };
+  const attachGestures = (item, card) => {
+    let start = null;
+    let wheel = null;
+    const move = (offset) => gsap.set(card, { y: restingY(item.id) + offset, opacity: Math.max(0, 1 + Math.min(0, offset) / DISTANCE.fade) });
+    const cancel = () => {
+      dragging.delete(item.id);
+      gsap.to(card, { y: restingY(item.id), opacity: 1, duration: 0.25, ease: easeOutCubic });
+      if (!expanded) toastTimers.resume(item.id);
+    };
+    card.addEventListener("mouseenter", openDeck);
+    card.addEventListener("mouseleave", closeDeck);
+    card.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0 || event.target.closest('button, a, input, textarea, select, [role="button"]')) return;
+      start = { y: event.clientY, type: event.pointerType };
+      card.setPointerCapture?.(event.pointerId);
+      dragging.add(item.id);
+      gsap.killTweensOf(card);
+      toastTimers.pause(item.id);
+    });
+    card.addEventListener("pointermove", (event) => {
+      if (!start) return;
+      const dy = event.clientY - start.y;
+      move(dy < 0 ? dy : start.type === "touch" ? dy * GESTURE.resistance : 0);
+    });
+    const up = (event) => {
+      if (!start) return;
+      const dy = event.clientY - start.y;
+      const type = start.type;
+      start = null;
+      if (dy < -GESTURE.swipe) {
+        dragging.delete(item.id);
+        dismissToast(item.id);
+      } else if (type === "touch" && dy > GESTURE.expandDrag) {
+        cancel();
+        if (expanded) closeDeck();
+        else openDeck();
+      } else cancel();
+    };
+    card.addEventListener("pointerup", up);
+    card.addEventListener("pointercancel", up);
+    card.addEventListener(
+      "wheel",
+      (event) => {
+        const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaMode === 2 ? event.deltaY * innerHeight : event.deltaY;
+        if (!wheel) {
+          wheel = { offset: 0, end: void 0 };
+          dragging.add(item.id);
+          toastTimers.pause(item.id);
+        }
+        wheel.offset = Math.min(0, wheel.offset - delta);
+        move(wheel.offset);
+        clearTimeout(wheel.end);
+        wheel.end = setTimeout(() => {
+          const offset = wheel?.offset ?? 0;
+          wheel = null;
+          if (offset < -GESTURE.wheel) {
+            dragging.delete(item.id);
+            dismissToast(item.id);
+          } else cancel();
+        }, GESTURE.wheelEndMs);
+      },
+      { passive: true }
+    );
+    card.addEventListener("click", (event) => {
+      const target = event.target;
+      if (target.closest("[data-mk-toast-dismiss]")) dismissToast(item.id);
+      else if (target.closest("[data-mk-toast-action]")) {
+        item.action?.onClick();
+        dismissToast(item.id);
+      }
+    });
+  };
+  const finishCard = (id) => {
+    settles.get(id)?.();
+    settles.delete(id);
+    const entry = cards.get(id);
+    if (entry) {
+      gsap.killTweensOf(entry.card);
+      entry.card.remove();
+    }
+    cards.delete(id);
+    entered.delete(id);
+    leaving.delete(id);
+    dragging.delete(id);
+  };
+  const render = () => {
+    const list = getToasts();
+    const ids = new Set(list.map((item) => item.id));
+    for (const id of [...cards.keys()]) if (!ids.has(id)) finishCard(id);
+    for (const item of list) {
+      if (!cards.has(item.id) && !item.closing) {
+        const entry = buildCard(item, dismissLabel);
+        cards.set(item.id, entry);
+        host.append(entry.card);
+        gsap.set(entry.card, { xPercent: -50 });
+        attachGestures(item, entry.card);
+      }
+    }
+    showLayer(list.some((item) => !item.closing) || leaving.size > 0);
+    for (const item of list) {
+      const entry = cards.get(item.id);
+      if (!entry) continue;
+      if (!entered.has(item.id) && !item.closing) {
+        entered.add(item.id);
+        toastTimers.start(item.id, item.duration);
+        relayout();
+        gsap.killTweensOf(entry.card);
+        gsap.set(entry.card, { xPercent: -50, y: restingY(item.id), scale: 1, opacity: 1 });
+        if (expanded) toastTimers.pause(item.id);
+        revealLetters(entry.message);
+        if (reduced()) continue;
+        if (item.origin?.isConnected) settles.set(item.id, morphFrom(entry.card, entry.shell, entry.body, item.origin));
+        else {
+          const y = restingY(item.id);
+          gsap.fromTo(
+            entry.card,
+            { y: y - DISTANCE.enter, opacity: 0, filter: `blur(${DISTANCE.enterBlur}px)` },
+            { y, opacity: 1, filter: "blur(0px)", duration: TIMING.toast.enter, ease: springEase(0.58, -3.5), clearProps: "filter" }
+          );
+        }
+      }
+      if (item.closing && !leaving.has(item.id)) {
+        leaving.add(item.id);
+        toastTimers.clear(item.id);
+        entry.card.style.zIndex = String(STACK.baseZ + 1);
+        const done = () => {
+          finishCard(item.id);
+          removeToast(item.id);
+        };
+        if (reduced()) done();
+        else {
+          gsap.to(entry.card, {
+            y: Number(gsap.getProperty(entry.card, "y")) - DISTANCE.exit,
+            opacity: 0,
+            filter: `blur(${DISTANCE.exitBlur}px)`,
+            duration: TIMING.toast.exit,
+            ease: easeInCubic,
+            overwrite: "auto",
+            onComplete: done
+          });
+        }
+        relayout();
+      }
+    }
+  };
+  scope.add(subscribeToasts(render));
+  render();
+  host.dataset.mkReady = "";
+  return {
+    destroy() {
+      clearTimeout(collapse);
+      for (const id of [...cards.keys()]) finishCard(id);
+      showLayer(false);
+      scope.dispose();
+      delete host.dataset.mkReady;
+    }
+  };
+}
+
+// src/components/chat-background/engine.ts
+var VARS = ["--mk-chat-orbit-1", "--mk-chat-orbit-2", "--mk-chat-blob-opacity", "--mk-chat-scale"];
+var instances = /* @__PURE__ */ new WeakMap();
+var chatBackgroundOf = (el) => el ? instances.get(el) ?? null : null;
+function createChatBackground(root, options = {}) {
+  if (!root) {
+    warnOnce("chat-background: missing root");
+    return inert({ setEnergy() {
+    }, setScale() {
+    }, busy() {
+    }, energy: 0, scale: 1 });
+  }
+  registerMotion();
+  const scope = createScope();
+  const state = { energy: options.energy ?? 0, scale: options.scale ?? 1 };
+  let noise = root.querySelector(":scope > .mk-chat-background__noise");
+  if (!noise) {
+    noise = document.createElement("div");
+    noise.className = "mk-chat-background__noise";
+    noise.setAttribute("aria-hidden", "true");
+    root.append(noise);
+    const created = noise;
+    scope.add(() => created.remove());
+  }
+  scope.attr(root, "aria-hidden", "true");
+  const paint = () => {
+    const e = Math.max(0, state.energy);
+    root.style.setProperty("--mk-chat-orbit-1", `${Math.max(1, 10 - 3.5 * e).toFixed(3)}s`);
+    root.style.setProperty("--mk-chat-orbit-2", `${Math.max(1, 15 - 4.5 * e).toFixed(3)}s`);
+    root.style.setProperty("--mk-chat-blob-opacity", (0.5 + 0.15 * e).toFixed(3));
+    root.style.setProperty("--mk-chat-scale", ((1 + 0.1 * e) * state.scale).toFixed(3));
+  };
+  scope.add(() => {
+    gsap.killTweensOf(state);
+    for (const name of VARS) root.style.removeProperty(name);
+    if (root.getAttribute("style") === "") root.removeAttribute("style");
+  });
+  paint();
+  const instance = {
+    setEnergy(energy) {
+      state.energy = Number.isFinite(energy) ? energy : 0;
+      paint();
+    },
+    setScale(scale) {
+      state.scale = Number.isFinite(scale) ? scale : 1;
+      paint();
+    },
+    busy(on) {
+      const to = on ? { energy: 1.6, scale: 1.8 } : { energy: 0, scale: 1 };
+      gsap.killTweensOf(state);
+      if (reduced()) {
+        Object.assign(state, to);
+        paint();
+        return;
+      }
+      gsap.to(state, {
+        ...to,
+        duration: on ? TIMING.onboarding.busy : TIMING.onboarding.idle,
+        ease: on ? "power2.out" : "power2.inOut",
+        onUpdate: paint
+      });
+    },
+    get energy() {
+      return state.energy;
+    },
+    get scale() {
+      return state.scale;
+    },
+    destroy() {
+      instances.delete(root);
+      scope.dispose();
+      delete root.dataset.mkReady;
+    }
+  };
+  instances.set(root, instance);
+  root.dataset.mkReady = "";
+  return instance;
+}
+
+// src/components/chat/engine.ts
+var MESSAGE = "[data-mk-message]";
+var PENDING_ID = "mk-chat-pending";
+var part = (root, name) => root.querySelector(`[data-mk-part="${name}"]`);
+var capturePending = (placeholder) => {
+  registerMotion();
+  return placeholder ? Flip.getState(placeholder) : null;
+};
+function morphPendingToReply(state, reply, scroller) {
+  registerMotion();
+  if (!state || reduced()) {
+    if (!reduced()) enterMessages([reply]);
+    return null;
+  }
+  const text = reply.querySelector("[data-mk-text], .message-text");
+  if (text) text.style.width = `${text.getBoundingClientRect().width}px`;
+  reply.setAttribute("data-flip-id", PENDING_ID);
+  const words = text && !text.querySelector("table, pre") ? splitWords(text) : null;
+  if (words?.parts.length) {
+    gsap.fromTo(
+      words.parts,
+      { y: 16, autoAlpha: 0, filter: "blur(6px)" },
+      {
+        y: 0,
+        autoAlpha: 1,
+        filter: "blur(0px)",
+        duration: TIMING.word,
+        ease: "back.out(1)",
+        stagger: TIMING.wordStagger,
+        clearProps: "transform,opacity,visibility,filter",
+        onComplete: () => words.revert()
+      }
+    );
+  }
+  return Flip.from(state, {
+    targets: reply,
+    duration: TIMING.bubble,
+    scale: false,
+    ease: EASE.signature,
+    onUpdate: () => {
+      if (scroller) scroller.scrollTop = scroller.scrollHeight;
+    },
+    onComplete: () => {
+      reply.removeAttribute("data-flip-id");
+      if (text) text.style.width = "";
+    }
+  });
+}
+function chatMessage(role, text) {
+  const message = document.createElement("div");
+  message.dataset.mkMessage = "";
+  message.dataset.mkRole = role;
+  const body = document.createElement("span");
+  body.dataset.mkText = "";
+  body.textContent = text;
+  message.append(body);
+  return message;
+}
+function createChat(root, options = {}) {
+  const messages = root ? part(root, "messages") : null;
+  if (!root || !messages) {
+    warnOnce('chat: needs a [data-mk-part="messages"] container');
+    return inert({
+      add: () => document.createElement("div"),
+      pending() {
+      },
+      reply: () => document.createElement("div"),
+      confirm() {
+      },
+      setRecording() {
+      },
+      scrollToLatest() {
+      },
+      adopt() {
+      },
+      messages: null
+    });
+  }
+  registerMotion();
+  const { clearOnSend = true } = options;
+  const thinking = options.labels?.thinking ?? "Pensando...";
+  const scope = createScope();
+  const composer = part(root, "composer");
+  const input = composer?.querySelector('[data-mk-part="input"], textarea') ?? null;
+  const mic = part(root, "mic");
+  const seen = /* @__PURE__ */ new WeakSet();
+  let placeholder = null;
+  let pendingTimer;
+  let waiting = false;
+  scope.attr(messages, "role", "log");
+  scope.attr(messages, "aria-live", "polite");
+  const existing = [...messages.querySelectorAll(MESSAGE)];
+  if (options.animateExisting) enterMessages(existing);
+  for (const message of existing) seen.add(message);
+  const observer = scope.observe(
+    new MutationObserver((records) => {
+      const fresh = [];
+      for (const record of records) {
+        for (const node of record.addedNodes) {
+          if (!(node instanceof HTMLElement) || !node.matches(MESSAGE) || seen.has(node)) continue;
+          seen.add(node);
+          fresh.push(node);
+        }
+      }
+      if (!fresh.length) return;
+      enterMessages(fresh);
+      scrollToLatest(messages);
+    })
+  );
+  observer.observe(messages, { childList: true });
+  const clearPending = () => {
+    clearTimeout(pendingTimer);
+    pendingTimer = void 0;
+    waiting = false;
+  };
+  const add = (role, text) => {
+    const message = chatMessage(role, text);
+    messages.append(message);
+    return message;
+  };
+  const pending = () => {
+    clearPending();
+    waiting = true;
+    pendingTimer = setTimeout(() => {
+      pendingTimer = void 0;
+      if (!waiting || placeholder) return;
+      placeholder = document.createElement("div");
+      placeholder.dataset.mkMessage = "";
+      placeholder.dataset.mkRole = "assistant";
+      placeholder.dataset.mkPending = "";
+      placeholder.setAttribute("data-flip-id", PENDING_ID);
+      placeholder.innerHTML = `<span class="mk-chat__thinking">${iconSvg("sparkle", 18)}<span></span></span>`;
+      placeholder.querySelector("span span").textContent = thinking;
+      seen.add(placeholder);
+      messages.append(placeholder);
+      enterMessages([placeholder]);
+      scrollToLatest(messages);
+    }, TIMING.chat.pendingDelayMs);
+  };
+  const reply = (content) => {
+    const message = typeof content === "string" ? chatMessage("assistant", content) : content;
+    clearPending();
+    seen.add(message);
+    const was = placeholder;
+    placeholder = null;
+    if (was?.isConnected) {
+      const state = capturePending(was);
+      was.replaceWith(message);
+      morphPendingToReply(state, message, messages);
+    } else {
+      if (!message.isConnected) messages.append(message);
+      enterMessages([message]);
+      scrollToLatest(messages);
+    }
+    return message;
+  };
+  const confirm = (bar) => {
+    if (reduced()) return;
+    flowIn(bar);
+    const words = splitWords(bar);
+    if (!words.parts.length) return;
+    gsap.fromTo(
+      words.parts,
+      { y: 16, autoAlpha: 0, filter: "blur(6px)" },
+      {
+        y: 0,
+        autoAlpha: 1,
+        filter: "blur(0px)",
+        duration: TIMING.word,
+        ease: "back.out(1)",
+        stagger: TIMING.chat.confirmWordStagger,
+        clearProps: "transform,opacity,visibility,filter",
+        onComplete: () => words.revert()
+      }
+    );
+  };
+  const send = () => {
+    if (!input) return;
+    const text = input.value.trim();
+    if (!text) return;
+    const allowed = root.dispatchEvent(new CustomEvent("mk:send", { bubbles: true, cancelable: true, detail: { text } }));
+    if (!allowed) return;
+    options.onSend?.(text);
+    if (clearOnSend) {
+      input.value = "";
+      fitComposer(input);
+    }
+  };
+  if (input) {
+    scope.on(input, "input", () => fitComposer(input));
+    scope.on(input, "keydown", (event) => {
+      const key = event;
+      if (key.key !== "Enter" || key.shiftKey || key.isComposing) return;
+      event.preventDefault();
+      send();
+    });
+  }
+  if (composer) {
+    scope.on(composer, "submit", (event) => {
+      event.preventDefault();
+      send();
+    });
+    const sendButton = part(root, "send");
+    if (sendButton && !composer.matches("form")) scope.on(sendButton, "click", send);
+  }
+  scope.add(() => {
+    clearPending();
+    placeholder?.remove();
+    placeholder = null;
+  });
+  if (input) fitComposer(input);
+  root.dataset.mkReady = "";
+  return {
+    add,
+    pending,
+    reply,
+    confirm,
+    setRecording(on) {
+      if (mic) scope.attr(mic, "data-mk-recording", on ? "" : null);
+    },
+    scrollToLatest: () => scrollToLatest(messages),
+    adopt: (message) => seen.add(message),
+    messages,
+    destroy() {
+      scope.dispose();
+      if (input) input.style.removeProperty("height");
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/components/nav/engine.ts
+var NAV_STYLES = ["clasica", "bonita", "dock", "guapa", "tasks", "melon", "tunnel"];
+var ITEM = ".mk-nav__buttons .mk-nav__button";
+var isStyle = (value) => NAV_STYLES.includes(value);
+var valueOf = (item) => item.dataset.mkValue ?? item.getAttribute("href") ?? void 0;
+var read = (key) => {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+var write = (key, value) => {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+};
+function revealShell(nav) {
+  if (!entrances()) return null;
+  const shell = nav.closest(".mk-shell") ?? nav.parentElement;
+  if (!shell) return null;
+  const origin = nav.querySelector(".mk-nav__button--first") ?? nav.querySelector(ITEM) ?? nav;
+  return revealFrom(shell, { origin });
+}
+function createNav(root, options = {}) {
+  if (!root) {
+    warnOnce("nav: missing root");
+    return inert({ select() {
+    }, setStyle() {
+    }, setAccent() {
+    }, index: -1, style: "bonita", items: [] });
+  }
+  const scope = createScope();
+  const items2 = () => [...root.querySelectorAll(ITEM)];
+  const fromClass = NAV_STYLES.find((name) => root.classList.contains(`mk-nav--${name}`));
+  const saved = options.storageKey ? read(options.storageKey) : null;
+  let style = options.style ?? (isStyle(saved) ? saved : void 0) ?? fromClass ?? "bonita";
+  const paint = (accent2) => {
+    const classes = new Set(root.classList);
+    for (const name of NAV_STYLES) classes.delete(`mk-nav--${name}`);
+    classes.add("mk-nav");
+    classes.add(`mk-nav--${style}`);
+    if (accent2) classes.add("mk-nav--accent");
+    else classes.delete("mk-nav--accent");
+    scope.attr(root, "class", [...classes].join(" "));
+  };
+  let accent = options.accent ?? root.classList.contains("mk-nav--accent");
+  paint(accent);
+  if (root.localName !== "nav") scope.attr(root, "role", "navigation");
+  if (!root.hasAttribute("aria-label") && !root.hasAttribute("aria-labelledby")) scope.attr(root, "aria-label", options.labels?.nav ?? "Principal");
+  const mark = (current) => {
+    for (const item of items2()) scope.attr(item, "aria-current", item === current ? "page" : null);
+  };
+  const find = (target) => {
+    const list = items2();
+    return typeof target === "number" ? list[target] : list.find((item) => valueOf(item) === target);
+  };
+  scope.on(root, "click", (event) => {
+    const item = event.target?.closest(ITEM);
+    if (!item || !root.contains(item)) return;
+    const index = items2().indexOf(item);
+    const value = valueOf(item);
+    const detail = { index, value, item, originalEvent: event };
+    if (!root.dispatchEvent(new CustomEvent("mk:navigate", { bubbles: true, cancelable: true, detail }))) {
+      event.preventDefault();
+      return;
+    }
+    mark(item);
+    options.onSelect?.(index, value, item);
+  });
+  let reveal = null;
+  if (options.reveal) reveal = revealShell(root);
+  root.dataset.mkReady = "";
+  return {
+    select(target) {
+      const item = find(target);
+      if (!item) warnOnce(`nav: no item ${JSON.stringify(target)}`);
+      else mark(item);
+    },
+    setStyle(next) {
+      if (!isStyle(next)) {
+        warnOnce(`nav: unknown style "${String(next)}" (use ${NAV_STYLES.join(", ")})`);
+        return;
+      }
+      style = next;
+      paint(accent);
+      if (options.storageKey) write(options.storageKey, next);
+    },
+    setAccent(on) {
+      accent = on;
+      paint(accent);
+    },
+    get index() {
+      return items2().findIndex((item) => item.getAttribute("aria-current") === "page");
+    },
+    get style() {
+      return style;
+    },
+    get items() {
+      return items2();
+    },
+    destroy() {
+      reveal?.cancel();
+      reveal = null;
+      scope.dispose();
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/components/steps/engine.ts
+var STEP = "[data-mk-step]";
+var ITEM_STYLES = ["transform", "translate", "rotate", "scale", "filter", "opacity", "visibility"];
+function createSteps(root, options = {}) {
+  const steps = root ? [...root.querySelectorAll(STEP)].filter((step) => {
+    const outer = step.parentElement?.closest(STEP);
+    return !outer || !root.contains(outer);
+  }) : [];
+  if (!root || !steps.length) {
+    warnOnce("steps: needs [data-mk-step] children");
+    return inert({ next: async () => {
+    }, prev: async () => {
+    }, goTo: async () => {
+    }, busy() {
+    }, index: -1, count: 0, steps: [] });
+  }
+  registerMotion();
+  const scope = createScope();
+  const { duration = TIMING.onboarding.step, animateFirst = true, target = "[data-mk-flow-item]" } = options;
+  const clamp = (value) => Math.min(steps.length - 1, Math.max(0, Math.round(value)));
+  const marked = steps.findIndex((step) => step.hasAttribute("data-mk-current"));
+  let index = clamp(options.index ?? (marked >= 0 ? marked : 0));
+  let wanted = index;
+  let running2 = null;
+  let stopCounter = () => {
+  };
+  const itemsOf = (step) => {
+    const marked2 = [...step.querySelectorAll(target)];
+    return marked2.length ? marked2 : [...step.children];
+  };
+  const show2 = (current) => {
+    steps.forEach((step, i) => {
+      scope.attr(step, "hidden", i === current ? null : "");
+      scope.attr(step, "data-mk-current", i === current ? "" : null);
+    });
+  };
+  const counter = () => {
+    const el = root.querySelector("[data-mk-counter]");
+    if (!el) return;
+    stopCounter();
+    stopCounter = revealCounter(el, index + 1, { duration: TIMING.onboarding.counter });
+  };
+  const focusTitle = (step) => {
+    const title = step.querySelector("[data-mk-step-title]") ?? step.querySelector("h1, h2, h3, h4, h5, h6");
+    if (!title) return;
+    if (!title.hasAttribute("tabindex") && title.tabIndex < 0) scope.attr(title, "tabindex", "-1");
+    title.focus({ preventScroll: true });
+  };
+  const change = async () => {
+    try {
+      while (wanted !== index && !scope.disposed) {
+        const previous = index;
+        const next = wanted;
+        const out = reduced() ? null : flowOut(itemsOf(steps[previous]), { duration });
+        if (out) await out;
+        if (scope.disposed) return;
+        index = next;
+        show2(index);
+        const step = steps[index];
+        await nextFrame();
+        if (scope.disposed) return;
+        const items2 = itemsOf(step);
+        clearStyles(items2, ["visibility"]);
+        flowIn(items2, { duration, autoAlpha: false });
+        counter();
+        focusTitle(step);
+        root.dispatchEvent(new CustomEvent("mk:step", { bubbles: true, detail: { index, previous, step } }));
+        options.onChange?.(index, previous);
+      }
+    } finally {
+      running2 = null;
+    }
+  };
+  const goTo = (to) => {
+    wanted = clamp(to);
+    if (wanted === index && !running2) return Promise.resolve();
+    running2 ??= change();
+    return running2;
+  };
+  show2(index);
+  scope.add(() => {
+    stopCounter();
+    for (const step of steps) {
+      const items2 = itemsOf(step);
+      gsap.killTweensOf(items2);
+      clearStyles(items2, ITEM_STYLES);
+    }
+  });
+  scope.on(root, "click", (event) => {
+    const trigger = event.target?.closest("[data-mk-step-next], [data-mk-step-prev], [data-mk-step-goto]");
+    if (!trigger || !root.contains(trigger)) return;
+    if (trigger.hasAttribute("data-mk-step-next")) void goTo(wanted + 1);
+    else if (trigger.hasAttribute("data-mk-step-prev")) void goTo(wanted - 1);
+    else void goTo(Number(trigger.dataset.mkStepGoto) - 1);
+  });
+  const counterEl = root.querySelector("[data-mk-counter]");
+  if (counterEl) {
+    const text = counterEl.textContent;
+    counterEl.textContent = String(index + 1);
+    scope.add(() => {
+      counterEl.textContent = text;
+    });
+  }
+  if (animateFirst && entrances()) flowIn(itemsOf(steps[index]), { duration });
+  root.dataset.mkReady = "";
+  return {
+    next: () => goTo(wanted + 1),
+    prev: () => goTo(wanted - 1),
+    goTo,
+    busy(on) {
+      scope.attr(root, "aria-busy", on ? "true" : null);
+      const background = root.querySelector(".mk-chat-background, mk-chat-background");
+      chatBackgroundOf(background)?.busy(on);
+    },
+    get index() {
+      return index;
+    },
+    get count() {
+      return steps.length;
+    },
+    get steps() {
+      return steps;
+    },
+    destroy() {
+      scope.dispose();
+      delete root.dataset.mkReady;
+    }
+  };
+}
+
+// src/components/cursor/engine.ts
+var svg = (extra = "") => `<svg aria-hidden="true" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"${extra}><path d="${ICON_PATHS.send}"/></svg>`;
+function backgroundTone(el) {
+  if (!el) return "light";
+  if (el.closest("img, video, picture, canvas")) return "dark";
+  for (let node = el; node; node = node.parentElement) {
+    const match = getComputedStyle(node).backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+    if (!match) continue;
+    const alpha = match[4] === void 0 ? 1 : parseFloat(match[4]);
+    if (alpha <= 0.1) continue;
+    const luminance = (Number(match[1]) * 299 + Number(match[2]) * 587 + Number(match[3]) * 114) / 1e3;
+    return luminance > TIMING.cursor.light ? "light" : "dark";
+  }
+  return "light";
+}
+function createCursor(host, options = {}) {
+  const variant = options.variant ?? "chip";
+  const idle = inert({ visible: false, label: "", position: { x: 0, y: 0 }, tone: "light", update() {
+  } });
+  if (!host) {
+    warnOnce("cursor: missing element");
+    return idle;
+  }
+  const coarse = typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
+  if (coarse || reduced()) return idle;
+  registerMotion();
+  const scope = createScope();
+  const t = TIMING.cursor;
+  const zone = options.zone ?? (variant === "dot" ? host.parentElement ?? document.body : document.documentElement);
+  scope.attr(host, "class", [host.getAttribute("class"), "mk-cursor", `mk-cursor--${variant}`].filter(Boolean).join(" "));
+  scope.attr(host, "aria-hidden", "true");
+  const pointer = { x: -100, y: -100, placed: false };
+  const position = { x: -100, y: -100 };
+  const velocity = { x: 0, y: 0 };
+  let visible = false;
+  let label = "";
+  let tone = "light";
+  const made = [];
+  let chip = null;
+  let chipLabel = null;
+  let chipIcon = null;
+  let word = null;
+  const size = { width: 0, height: 0 };
+  if (variant === "chip") {
+    chip = document.createElement("span");
+    chip.className = "mk-cursor__chip mk-glass";
+    chip.innerHTML = '<span class="mk-glass__shadow" aria-hidden="true"></span><span class="mk-cursor__icon mk-icon"></span><span class="mk-cursor__label"></span>';
+    chipIcon = chip.querySelector(".mk-cursor__icon");
+    chipLabel = chip.querySelector(".mk-cursor__label");
+    host.append(chip);
+    made.push(chip);
+    gsap.set(chip, { autoAlpha: 0, scale: 0.8 });
+  } else {
+    const arrows = options.arrows ?? "y";
+    scope.attr(host, "data-mk-arrows", arrows);
+    scope.attr(zone, "data-mk-cursor-zone", "");
+    const dot = document.createElement("span");
+    dot.className = "mk-cursor__dot";
+    dot.innerHTML = arrows === "none" ? '<span class="mk-cursor__circle"></span><span class="mk-cursor__text"><span class="mk-cursor__word"></span></span>' : `<span class="mk-cursor__circle"></span><span class="mk-cursor__arrow mk-cursor__arrow--start">${svg()}</span><span class="mk-cursor__text"><span class="mk-cursor__word"></span></span><span class="mk-cursor__arrow mk-cursor__arrow--end">${svg()}</span>`;
+    word = dot.querySelector(".mk-cursor__word");
+    if (word) word.textContent = options.text ?? "";
+    host.append(dot);
+    made.push(dot);
+    scope.attr(host, "data-mk-hidden", "");
+  }
+  const appear = motionSpring(...TIMING.springs.cursorAppear);
+  const showChip = (next) => {
+    if (!chip || !chipLabel || !chipIcon) return;
+    const text = next?.dataset.mkCursor ?? "";
+    if (text) {
+      label = text;
+      chipLabel.textContent = text;
+      chipIcon.textContent = next?.dataset.mkCursorIcon ?? "";
+      chip.classList.toggle("mk-cursor__chip--circle", next?.dataset.mkCursorShape === "circle");
+      const box = chip.getBoundingClientRect();
+      size.width = box.width;
+      size.height = box.height;
+    }
+    if (Boolean(text) === visible) return;
+    visible = Boolean(text);
+    if (!visible) label = "";
+    gsap.to(chip, {
+      autoAlpha: visible ? 1 : 0,
+      scale: visible ? 1 : 0.8,
+      duration: appear.duration,
+      ease: appear.ease,
+      overwrite: "auto"
+    });
+  };
+  let inZone = false;
+  let overHide = false;
+  const syncDot = () => scope.attr(host, "data-mk-hidden", inZone && !overHide ? null : "");
+  const wordFor = (target) => {
+    if (!word) return;
+    const source = target?.closest("[data-mk-cursor]");
+    word.textContent = source && zone.contains(source) ? source.dataset.mkCursor ?? "" : options.text ?? "";
+  };
+  const place = (event) => {
+    if (event.pointerType === "touch") return;
+    pointer.x = event.clientX;
+    pointer.y = event.clientY;
+    if (!pointer.placed) {
+      pointer.placed = true;
+      if (variant === "dot") {
+        position.x = pointer.x;
+        position.y = pointer.y;
+      }
+    }
+  };
+  scope.on(window, "pointermove", (event) => place(event), { passive: true });
+  const overTarget = variant === "chip" ? document : zone;
+  scope.on(overTarget, "pointerover", (event) => {
+    const target = event.target;
+    if (variant === "chip") {
+      const source = target?.closest("[data-mk-cursor]") ?? null;
+      showChip(source && zone.contains(source) ? source : null);
+      return;
+    }
+    overHide = Boolean(target?.closest("[data-mk-cursor-hide]"));
+    wordFor(target);
+    syncDot();
+  });
+  if (variant === "dot") {
+    scope.on(zone, "pointerenter", (event) => {
+      place(event);
+      inZone = true;
+      visible = true;
+      syncDot();
+    });
+    scope.on(zone, "pointerleave", () => {
+      inZone = false;
+      visible = false;
+      scope.attr(host, "data-mk-pressed", null);
+      syncDot();
+    });
+    scope.on(zone, "pointerdown", () => scope.attr(host, "data-mk-pressed", ""));
+    scope.on(window, "pointerup", () => scope.attr(host, "data-mk-pressed", null));
+  }
+  const [stiffness, damping] = TIMING.springs.cursorFollow;
+  const update = (dt = 1) => {
+    if (variant === "chip") {
+      const halfW = size.width / 2 + t.gutter;
+      const halfH = size.height / 2 + t.gutter;
+      const tx = size.width ? Math.min(Math.max(pointer.x, halfW), innerWidth - halfW) : pointer.x;
+      const ty = size.height ? Math.min(Math.max(pointer.y, halfH), innerHeight - halfH) : pointer.y;
+      const steps = Math.max(1, Math.ceil(dt * 4));
+      const h = dt / 60 / steps;
+      for (let i = 0; i < steps; i++) {
+        velocity.x += (stiffness * (tx - position.x) - damping * velocity.x) * h;
+        velocity.y += (stiffness * (ty - position.y) - damping * velocity.y) * h;
+        position.x += velocity.x * h;
+        position.y += velocity.y * h;
+      }
+      if (visible && typeof document.elementFromPoint === "function") {
+        tone = backgroundTone(document.elementFromPoint(pointer.x, pointer.y));
+        if (chip && chip.dataset.mkTone !== tone) chip.dataset.mkTone = tone;
+      }
+    } else {
+      const step = 1 - Math.pow(1 - t.dotLerp, dt);
+      position.x += (pointer.x - position.x) * step;
+      position.y += (pointer.y - position.y) * step;
+    }
+    host.style.transform = `translate3d(${position.x.toFixed(2)}px, ${position.y.toFixed(2)}px, 0) translate(-50%, -50%)`;
+  };
+  scope.add(subscribe(update));
+  update(0);
+  host.dataset.mkReady = "";
+  return {
+    get visible() {
+      return visible;
+    },
+    get label() {
+      return label;
+    },
+    get position() {
+      return { ...position };
+    },
+    get tone() {
+      return tone;
+    },
+    update,
+    destroy() {
+      if (chip) gsap.killTweensOf(chip);
+      scope.dispose();
+      for (const node of made.splice(0)) node.remove();
+      host.style.removeProperty("transform");
+      if (host.getAttribute("style") === "") host.removeAttribute("style");
+      delete host.dataset.mkReady;
+    }
+  };
+}
+
+// src/components/island/engine.ts
+var sequence = 0;
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function createIsland(root, options = {}) {
+  const shell = root?.querySelector(".mk-island__shell") ?? null;
+  const panels = root ? [...root.querySelectorAll("[data-mk-island-panel]")] : [];
+  if (!root || !shell || !panels.length) {
+    warnOnce("island: needs .mk-island__shell and at least one [data-mk-island-panel]");
+    return inert({ open() {
+    }, close() {
+    }, toggle() {
+    }, ready() {
+    }, active: null });
+  }
+  const t = TIMING.island;
+  const { entrance = true, closeOnScroll = true, closeOnNavigate = true, focusOnOpen = true, onChange } = options;
+  registerMotion();
+  const scope = createScope();
+  const toggles = [...root.querySelectorAll("[data-mk-island-toggle]")];
+  const cta = root.querySelector(".mk-island__cta");
+  const backdrops = [...root.querySelectorAll("[data-mk-island-close]")];
+  let active = null;
+  let trigger = null;
+  let scrollStart = 0;
+  let armed = false;
+  let focusTimer;
+  let entered = false;
+  let entry = null;
+  const flag = (el, name, on) => {
+    if (el) scope.attr(el, name, on ? "" : null);
+  };
+  const sync = () => {
+    for (const panel of panels) {
+      const on = panel.dataset.mkIslandPanel === active;
+      if (active) flag(panel, "hidden", !on);
+      scope.attr(panel, "aria-hidden", String(!on));
+      flag(panel, "inert", !on);
+    }
+    for (const button of toggles) scope.attr(button, "aria-expanded", String(button.dataset.mkIslandToggle === active));
+    flag(cta, "inert", Boolean(active));
+    for (const backdrop of backdrops) {
+      flag(backdrop, "inert", !active);
+      scope.attr(backdrop, "aria-hidden", String(!active));
+    }
+    flag(root, "data-mk-open", Boolean(active));
+    scope.attr(root, "data-mk-active", active);
+  };
+  const stagger = (opening) => {
+    root.querySelectorAll("[data-mk-island-item]").forEach((item, index) => {
+      scope.attr(item, "style", item.getAttribute("style"));
+      item.style.setProperty("--mk-island-delay", opening ? `${Number((t.delay + index * t.step).toFixed(3))}s` : "0s");
+    });
+  };
+  const close = (returnFocus = true) => {
+    if (scope.disposed || !active) return;
+    clearTimeout(focusTimer);
+    active = null;
+    stagger(false);
+    sync();
+    onChange?.(null);
+    if (returnFocus && trigger?.isConnected) trigger.focus({ preventScroll: true });
+  };
+  const open = (name = panels[0].dataset.mkIslandPanel, source) => {
+    if (scope.disposed) return;
+    const panel = panels.find((el) => el.dataset.mkIslandPanel === name);
+    if (!panel) return;
+    const wasClosed = !active;
+    clearTimeout(focusTimer);
+    active = name;
+    trigger = source ?? toggles.find((el) => el.dataset.mkIslandToggle === name) ?? trigger;
+    if (wasClosed) {
+      scrollStart = window.scrollY;
+      armed = false;
+      stagger(true);
+    }
+    sync();
+    onChange?.(name);
+    if (focusOnOpen)
+      focusTimer = setTimeout(
+        () => {
+          if (active !== name) return;
+          const first = [...panel.querySelectorAll(FOCUSABLE)].find((el) => !el.closest("[hidden], [inert]"));
+          (first ?? panel).focus({ preventScroll: true });
+        },
+        reduced() ? 0 : t.focus
+      );
+  };
+  const toggle = (name = panels[0].dataset.mkIslandPanel, source) => active === name ? close(false) : open(name, source);
+  for (const panel of panels) {
+    if (!panel.id) scope.attr(panel, "id", `mk-island-panel-${++sequence}`);
+    if (!panel.hasAttribute("tabindex")) scope.attr(panel, "tabindex", "-1");
+    if (!panel.hasAttribute("role")) scope.attr(panel, "role", "region");
+  }
+  for (const button of toggles) {
+    const panel = panels.find((el) => el.dataset.mkIslandPanel === button.dataset.mkIslandToggle);
+    if (panel) scope.attr(button, "aria-controls", panel.id);
+    scope.on(button, "click", () => toggle(button.dataset.mkIslandToggle, button));
+  }
+  for (const backdrop of backdrops) scope.on(backdrop, "click", () => close(true));
+  scope.on(document, "keydown", (event) => {
+    if (active && event.key === "Escape") {
+      event.preventDefault();
+      close(true);
+    }
+  });
+  if (closeOnNavigate)
+    scope.on(root, "click", (event) => {
+      const link = event.target?.closest?.("a[href]");
+      if (active && link?.closest("[data-mk-island-panel]")) close(false);
+    });
+  if (closeOnScroll) {
+    const arm = () => {
+      if (active) armed = true;
+    };
+    scope.on(window, "wheel", arm, { passive: true });
+    scope.on(window, "touchmove", arm, { passive: true });
+    scope.on(
+      window,
+      "scroll",
+      () => {
+        if (active && armed && Math.abs(window.scrollY - scrollStart) > 1) close(false);
+      },
+      { passive: true }
+    );
+  }
+  scope.add(() => clearTimeout(focusTimer));
+  const moving = entrance !== false && entrances();
+  if (moving) gsap.set(shell, { yPercent: t.offset });
+  const ready = () => {
+    if (scope.disposed || entered || !moving) return;
+    entered = true;
+    entry = gsap.to(shell, { yPercent: 0, duration: t.entrance });
+  };
+  scope.add(() => {
+    entry?.kill();
+    if (moving) gsap.set(shell, { clearProps: "transform,translate" });
+    if (shell.getAttribute("style") === "") shell.removeAttribute("style");
+  });
+  sync();
+  if (entrance === true) ready();
+  scope.attr(root, "data-mk-ready", "");
+  return {
+    open: (name) => open(name),
+    close,
+    toggle: (name) => toggle(name),
+    ready,
+    get active() {
+      return active;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+export {
+  enterMessages,
+  fitComposer,
+  scrollToLatest,
+  createThemePicker,
+  ICON_PATHS,
+  iconSvg,
+  TOAST_LIMIT,
+  getToasts,
+  subscribeToasts,
+  dismissToast,
+  removeToast,
+  clearToasts,
+  toast,
+  toastTimers,
+  createToaster,
+  chatBackgroundOf,
+  createChatBackground,
+  PENDING_ID,
+  capturePending,
+  morphPendingToReply,
+  chatMessage,
+  createChat,
+  NAV_STYLES,
+  revealShell,
+  createNav,
+  createSteps,
+  createCursor,
+  createIsland
+};
+//# sourceMappingURL=chunk-Q4LVFNLN.js.map