@yewdiel21/motion-kit 0.14.0 → 0.15.0

package/dist/chunk-JXRS3OEA.js

@@ -0,0 +1,3638 @@
+import {
+  EASE,
+  Flip,
+  addDays,
+  bezier,
+  blurIn,
+  capitalize,
+  channels,
+  dayKey,
+  easeInCubic,
+  easeOut,
+  easeOutCubic,
+  eased,
+  flowIn,
+  flowInPalette,
+  gsap,
+  motionSpring,
+  press,
+  registerMotion,
+  revealFrom,
+  rollDigits,
+  safeFormat,
+  splitGraphemes,
+  splitWords,
+  spring,
+  springEase,
+  startOfWeek,
+  toDate,
+  weekdayNames
+} from "./chunk-A6QQCF6V.js";
+import {
+  THEMES,
+  THEME_EVENT,
+  getTheme,
+  setTheme
+} from "./chunk-RVSKEBIC.js";
+import {
+  TIMING,
+  createScope,
+  entrances,
+  reduced,
+  subscribe,
+  whileVisible
+} from "./chunk-DOOMULVV.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/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 = ["sidebar", "pills", "dock", "card", "rail", "wash", "magnify"];
+var NAV_STYLE_ALIASES = { clasica: "sidebar", bonita: "pills", guapa: "card", tasks: "rail", melon: "wash", tunnel: "magnify" };
+var toNavStyle = (value) => NAV_STYLES.includes(value) ? value : NAV_STYLE_ALIASES[value];
+var ITEM = ".mk-nav__buttons .mk-nav__button";
+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: "pills", items: [] });
+  }
+  const scope = createScope();
+  const items2 = () => [...root.querySelectorAll(ITEM)];
+  const known = [...NAV_STYLES, ...Object.keys(NAV_STYLE_ALIASES)];
+  const fromClass = toNavStyle(known.find((name) => root.classList.contains(`mk-nav--${name}`)));
+  const saved = options.storageKey ? read(options.storageKey) : null;
+  let style = toNavStyle(options.style) ?? toNavStyle(saved) ?? fromClass ?? "pills";
+  const paint = (accent2) => {
+    const classes = new Set(root.classList);
+    for (const name of known) 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) {
+      const resolved = toNavStyle(next);
+      if (!resolved) {
+        warnOnce(`nav: unknown style "${String(next)}" (use ${NAV_STYLES.join(", ")})`);
+        return;
+      }
+      style = resolved;
+      paint(accent);
+      if (options.storageKey) write(options.storageKey, resolved);
+    },
+    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/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()
+  };
+}
+
+// src/components/pill-button/engine.ts
+var PILL_ARROW = '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>';
+function createPillButton(root, options = {}) {
+  const control = root ? root.matches('button, a, [role="button"]') ? root : root.querySelector('button, a, [role="button"]') : null;
+  if (!root || !control) return inert();
+  registerMotion();
+  const scope = createScope();
+  const icon = control.querySelector("[data-mk-pill-icon]");
+  if (!control.querySelector("[data-mk-pill-label]")) {
+    const label = document.createElement("span");
+    label.dataset.mkPillLabel = "";
+    for (const node of [...control.childNodes]) if (node !== icon) label.append(node);
+    control.prepend(label);
+    scope.add(() => label.replaceWith(...label.childNodes));
+  }
+  if (!icon) {
+    const made = document.createElement("span");
+    made.dataset.mkPillIcon = "";
+    made.setAttribute("aria-hidden", "true");
+    made.innerHTML = options.icon ?? PILL_ARROW;
+    control.append(made);
+    scope.add(() => made.remove());
+  }
+  const fill = document.createElement("span");
+  fill.dataset.mkPillFill = "";
+  fill.setAttribute("aria-hidden", "true");
+  control.prepend(fill);
+  scope.add(() => fill.remove());
+  scope.attr(control, "data-mk-pill", options.expand ? "expand" : "");
+  scope.attr(root, "data-mk-ready", "");
+  let tapped;
+  scope.on(control, "pointerdown", (event) => {
+    press(control);
+    if (event.pointerType !== "touch") return;
+    control.setAttribute("data-mk-active", "");
+    clearTimeout(tapped);
+    tapped = setTimeout(() => control.removeAttribute("data-mk-active"), 650);
+  });
+  scope.add(() => {
+    clearTimeout(tapped);
+    control.removeAttribute("data-mk-active");
+  });
+  return { destroy: () => scope.dispose() };
+}
+
+// src/components/toolbar/engine.ts
+function createToolbar(root, options = {}) {
+  const tools = root ? [...root.querySelectorAll("button")] : [];
+  if (!root || !tools.length) {
+    if (root) warnOnce("toolbar: needs at least one <button>");
+    return inert({ setValue() {
+    }, value: "" });
+  }
+  registerMotion();
+  const scope = createScope();
+  const vertical = options.orientation !== "horizontal";
+  const valueOf2 = (tool) => tool.dataset.mkTool ?? String(tools.indexOf(tool));
+  const labelOf = (tool) => tool.getAttribute("aria-label") ?? tool.title ?? tool.textContent?.trim() ?? "";
+  scope.attr(root, "role", "toolbar");
+  scope.attr(root, "aria-orientation", vertical ? "vertical" : "horizontal");
+  scope.attr(root, "data-mk-orientation", vertical ? "vertical" : "horizontal");
+  for (const tool of tools) {
+    scope.attr(tool, "type", tool.getAttribute("type") ?? "button");
+    scope.attr(tool, "aria-pressed", "false");
+    scope.attr(tool, "tabindex", "-1");
+    if (options.tips !== false && tool.title) {
+      scope.attr(tool, "aria-label", tool.getAttribute("aria-label") ?? tool.title);
+      scope.attr(tool, "title", null);
+    }
+  }
+  const blob = document.createElement("span");
+  blob.dataset.mkToolbarBlob = "";
+  blob.setAttribute("aria-hidden", "true");
+  root.prepend(blob);
+  const tip = document.createElement("span");
+  tip.dataset.mkToolbarTip = "";
+  tip.setAttribute("aria-hidden", "true");
+  tip.hidden = true;
+  if (options.tips !== false) root.append(tip);
+  scope.add(() => {
+    gsap.killTweensOf([blob, tip]);
+    blob.remove();
+    tip.remove();
+  });
+  scope.attr(root, "data-mk-ready", "");
+  const find = (value) => tools.find((tool) => valueOf2(tool) === value);
+  let current = find(options.value) ?? tools.find((tool) => !tool.disabled) ?? tools[0];
+  const box = (tool) => ({ start: vertical ? tool.offsetTop : tool.offsetLeft, size: vertical ? tool.offsetHeight : tool.offsetWidth, cross: vertical ? tool.offsetLeft : tool.offsetTop, crossSize: vertical ? tool.offsetWidth : tool.offsetHeight });
+  const along = vertical ? "y" : "x";
+  const across = vertical ? "x" : "y";
+  const length = vertical ? "height" : "width";
+  const thickness = vertical ? "width" : "height";
+  let timeline = null;
+  const place = () => {
+    const at = box(current);
+    timeline?.kill();
+    gsap.set(blob, { [along]: at.start, [across]: at.cross, [length]: at.size, [thickness]: at.crossSize, scaleX: 1, scaleY: 1 });
+  };
+  const slide = (from, to) => {
+    if (reduced() || from === to) return place();
+    const a = box(from);
+    const b = box(to);
+    const forward = b.start > a.start;
+    const reach = forward ? b.start + b.size - a.start : a.start + a.size - b.start;
+    const squeeze = vertical ? { scaleX: 0.84 } : { scaleY: 0.84 };
+    const relax = vertical ? { scaleX: 1 } : { scaleY: 1 };
+    timeline?.kill();
+    timeline = gsap.timeline();
+    timeline.to(blob, { [along]: forward ? a.start : b.start, [length]: reach, ...squeeze, duration: 0.2, ease: "power2.in" }, 0);
+    timeline.to(blob, { [along]: b.start, [length]: b.size, duration: 0.42, ease: EASE.swatch }, 0.16);
+    timeline.to(blob, { ...relax, duration: 0.5, ease: "elastic.out(1, 0.45)" }, 0.18);
+  };
+  const squish = () => {
+    if (reduced()) return;
+    timeline?.kill();
+    place();
+    timeline = gsap.timeline();
+    timeline.to(blob, { scaleX: 0.88, scaleY: 0.88, duration: 0.1, ease: "power2.out" }).to(blob, { scaleX: 1, scaleY: 1, duration: 0.45, ease: "elastic.out(1, 0.4)" });
+  };
+  const paint = () => {
+    for (const tool of tools) {
+      tool.setAttribute("aria-pressed", String(tool === current));
+      tool.setAttribute("tabindex", tool === current ? "0" : "-1");
+    }
+  };
+  let tipFor = null;
+  let tipTimer;
+  scope.add(() => clearTimeout(tipTimer));
+  const showTip = (tool, linger = 0) => {
+    if (options.tips === false) return;
+    clearTimeout(tipTimer);
+    const text = labelOf(tool);
+    if (!text) return hideTip();
+    const at = box(tool);
+    const appearing = tip.hidden;
+    const changed = tipFor !== tool;
+    tipFor = tool;
+    tip.textContent = text;
+    tip.hidden = false;
+    const tipSize = vertical ? tip.offsetHeight : tip.offsetWidth;
+    const spot = at.start + at.size / 2 - tipSize / 2;
+    if (appearing || reduced()) {
+      gsap.killTweensOf(tip);
+      gsap.set(tip, { [along]: spot });
+      if (!reduced()) gsap.fromTo(tip, { opacity: 0, [across]: -8, filter: "blur(4px)", scale: 0.9 }, { opacity: 1, [across]: 0, filter: "blur(0px)", scale: 1, duration: 0.28, ease: EASE.pop });
+      else gsap.set(tip, { opacity: 1, [across]: 0, scale: 1, filter: "none" });
+    } else if (changed) {
+      gsap.to(tip, { [along]: spot, opacity: 1, [across]: 0, scale: 1, filter: "blur(0px)", duration: 0.32, ease: EASE.swatch, overwrite: "auto" });
+    }
+    if (linger) tipTimer = setTimeout(hideTip, linger);
+  };
+  const hideTip = () => {
+    clearTimeout(tipTimer);
+    tipFor = null;
+    if (tip.hidden) return;
+    if (reduced()) {
+      tip.hidden = true;
+      return;
+    }
+    gsap.to(tip, { opacity: 0, [across]: -6, filter: "blur(4px)", scale: 0.92, duration: 0.18, ease: "power2.in", overwrite: "auto", onComplete: () => {
+      tip.hidden = true;
+    } });
+  };
+  const choose = (tool, notify) => {
+    if (tool.disabled) return;
+    const previous = current;
+    current = tool;
+    paint();
+    if (previous === current) squish();
+    else slide(previous, current);
+    if (previous === current || !notify) return;
+    const value = valueOf2(current);
+    options.onChange?.(value);
+    root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value } }));
+  };
+  scope.on(root, "click", (event) => {
+    const tool = event.target.closest("button");
+    if (!tool || !tools.includes(tool)) return;
+    press(tool);
+    choose(tool, true);
+    showTip(tool, 1200);
+  });
+  scope.on(root, "pointerover", (event) => {
+    const tool = event.target.closest("button");
+    if (tool && tools.includes(tool) && event.pointerType !== "touch") showTip(tool);
+  });
+  scope.on(root, "pointerleave", () => {
+    tipTimer = setTimeout(hideTip, 120);
+  });
+  scope.on(root, "focusin", (event) => {
+    const tool = event.target;
+    if (tools.includes(tool) && tool.matches(":focus-visible")) showTip(tool);
+  });
+  scope.on(root, "focusout", (event) => {
+    if (!root.contains(event.relatedTarget)) hideTip();
+  });
+  scope.on(root, "keydown", (event) => {
+    const key = event.key;
+    const enabled = tools.filter((tool) => !tool.disabled);
+    const at = enabled.indexOf(document.activeElement);
+    if (at < 0) return;
+    const next = key === "ArrowDown" || key === "ArrowRight" ? enabled[(at + 1) % enabled.length] : key === "ArrowUp" || key === "ArrowLeft" ? enabled[(at - 1 + enabled.length) % enabled.length] : key === "Home" ? enabled[0] : key === "End" ? enabled[enabled.length - 1] : null;
+    if (!next) return;
+    event.preventDefault();
+    choose(next, true);
+    next.focus();
+    showTip(next, 1200);
+  });
+  if (typeof ResizeObserver === "function") scope.observe(new ResizeObserver(() => place())).observe(root);
+  paint();
+  place();
+  return {
+    setValue(value, notify = false) {
+      const tool = find(value);
+      if (tool) choose(tool, notify);
+    },
+    get value() {
+      return valueOf2(current);
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/bidirectional-slider/engine.ts
+var finite = (value) => typeof value === "number" && Number.isFinite(value);
+var ICONS = {
+  signs: ['<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12"/></svg>', '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 12h12M12 6v12"/></svg>'],
+  volume: [
+    '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5z"/><path d="M15.5 9.5a3.5 3.5 0 0 1 0 5"/></svg>',
+    '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9.5v5h3.5L12 18.5v-13L7.5 9.5z"/><path d="M15.5 9.5a3.5 3.5 0 0 1 0 5"/><path d="M18 7a7 7 0 0 1 0 10"/></svg>'
+  ]
+};
+function createBidirectionalSlider(root, options = {}) {
+  if (!root) return inert({ setValue() {
+  }, reset() {
+  }, value: 0 });
+  registerMotion();
+  const scope = createScope();
+  const min = finite(options.min) ? options.min : -100;
+  const max = finite(options.max) && options.max > min ? options.max : Math.max(min + 1, 100);
+  const origin = Math.min(max, Math.max(min, finite(options.origin) ? options.origin : 0));
+  const step = finite(options.step) && options.step > 0 ? options.step : 1;
+  const decimals = (String(step).split(".")[1] ?? "").length;
+  const snap = (n) => Number(Math.min(max, Math.max(min, Math.round((n - min) / step) * step + min)).toFixed(decimals));
+  const format = options.formatValue ?? ((n) => {
+    const delta = Number((n - origin).toFixed(decimals));
+    const text = new Intl.NumberFormat(void 0, { maximumFractionDigits: decimals }).format(Math.abs(delta));
+    return delta > 0 ? `+${text}` : delta < 0 ? `\u2212${text}` : text;
+  });
+  const made = (tag, parent, data) => {
+    const element = document.createElement(tag);
+    element.setAttribute(`data-mk-bislider-${data}`, "");
+    parent.append(element);
+    scope.add(() => element.remove());
+    return element;
+  };
+  const icons = options.icons === false ? null : ICONS[options.icons ?? "signs"];
+  const less = icons ? made("button", root, "less") : null;
+  const track = made("span", root, "track");
+  const more = icons ? made("button", root, "more") : null;
+  if (less && more && icons) {
+    less.type = more.type = "button";
+    less.tabIndex = more.tabIndex = -1;
+    less.innerHTML = icons[0];
+    more.innerHTML = icons[1];
+    less.setAttribute("aria-label", "Menos");
+    more.setAttribute("aria-label", "M\xE1s");
+    root.prepend(less);
+  }
+  const clip = made("span", track, "clip");
+  clip.setAttribute("aria-hidden", "true");
+  const fill = made("span", clip, "fill");
+  const notch = made("span", clip, "notch");
+  const thumb = made("span", track, "thumb");
+  const bubble = made("span", track, "bubble");
+  for (const part2 of [fill, notch, thumb, bubble]) part2.setAttribute("aria-hidden", "true");
+  let input = root.querySelector('input[type="range"]');
+  if (input) {
+    const kept = input;
+    const place = { parent: kept.parentNode, next: kept.nextSibling };
+    const saved = ["min", "max", "step", "value", "data-mk-bislider-input"].map((name) => [name, kept.getAttribute(name)]);
+    const value2 = kept.value;
+    scope.add(() => {
+      for (const [name, was] of saved) {
+        if (was === null) kept.removeAttribute(name);
+        else kept.setAttribute(name, was);
+      }
+      kept.value = value2;
+      place.parent?.insertBefore(kept, place.next);
+    });
+  } else {
+    input = document.createElement("input");
+    input.type = "range";
+    scope.add(() => input.remove());
+  }
+  const range = input;
+  track.append(range);
+  range.dataset.mkBisliderInput = "";
+  range.min = String(min);
+  range.max = String(max);
+  range.step = String(step);
+  if (options.name) scope.attr(range, "name", options.name);
+  if (options.label && !range.getAttribute("aria-label")) scope.attr(range, "aria-label", options.label);
+  if (options.disabled) scope.attr(range, "disabled", "");
+  const start = snap(finite(options.value) ? options.value : range.getAttribute("value") !== null ? Number(range.getAttribute("value")) : origin);
+  range.value = String(start);
+  range.defaultValue = String(start);
+  scope.attr(root, "data-mk-ready", "");
+  let value = start;
+  let committed = start;
+  const shown = { v: start };
+  const pct = (n) => (n - min) / (max - min) * 100;
+  notch.style.left = `${pct(origin)}%`;
+  const paint = () => {
+    const at = pct(shown.v);
+    const from = pct(origin);
+    fill.style.left = `${Math.min(at, from)}%`;
+    fill.style.width = `${Math.abs(at - from)}%`;
+    thumb.style.left = `${at}%`;
+    bubble.style.left = `${at}%`;
+    root.setAttribute("data-mk-side", shown.v > origin ? "more" : shown.v < origin ? "less" : "origin");
+  };
+  scope.add(() => root.removeAttribute("data-mk-side"));
+  const describe = () => {
+    const text = format(value);
+    bubble.textContent = text;
+    range.setAttribute("aria-valuetext", text);
+  };
+  scope.add(() => range.removeAttribute("aria-valuetext"));
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (animation) => {
+    if (!animation) return;
+    effects.add(animation);
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    gsap.killTweensOf(shown);
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+  const bump = (element, scale = 1.25) => {
+    if (!element || reduced()) return;
+    keep(gsap.fromTo(element, { scale }, { scale: 1, duration: 0.5, ease: "elastic.out(1, 0.4)", overwrite: "auto" }));
+  };
+  let held = false;
+  const set = (next, glide, notify) => {
+    const before = value;
+    value = snap(next);
+    range.value = String(value);
+    describe();
+    gsap.killTweensOf(shown);
+    if (glide && !reduced()) keep(gsap.to(shown, { v: value, duration: 0.45, ease: EASE.swatch, onUpdate: paint }));
+    else {
+      shown.v = value;
+      paint();
+    }
+    if ((before - origin) * (value - origin) < 0 || before !== origin && value === origin) bump(notch, 1.8);
+    if (value !== before && value === max) bump(more);
+    if (value !== before && value === min) bump(less);
+    if (notify && value !== before) {
+      options.onInput?.(value);
+      root.dispatchEvent(new CustomEvent("mk:input", { bubbles: true, detail: { value } }));
+    }
+    if (notify === "change") commit();
+  };
+  const commit = () => {
+    if (value === committed) return;
+    committed = value;
+    options.onChange?.(value);
+    root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value } }));
+  };
+  scope.on(range, "input", () => {
+    const next = Number(range.value);
+    const before = value;
+    set(next, !held, false);
+    if (value !== before) {
+      options.onInput?.(value);
+      root.dispatchEvent(new CustomEvent("mk:input", { bubbles: true, detail: { value } }));
+    }
+  });
+  scope.on(range, "change", commit);
+  scope.on(range, "dblclick", () => set(origin, true, "change"));
+  let pointer = null;
+  scope.on(range, "pointerdown", (event) => {
+    const down = event;
+    if (range.disabled || down.button !== 0) return;
+    held = true;
+    pointer = down.pointerId;
+    root.setAttribute("data-mk-held", "");
+  });
+  scope.on(window, "pointermove", (event) => {
+    const move = event;
+    if (!held || move.pointerId !== pointer || reduced()) return;
+    const box = track.getBoundingClientRect();
+    const over = move.clientX > box.right ? move.clientX - box.right : move.clientX < box.left ? move.clientX - box.left : 0;
+    const stretch = Math.min(1, Math.abs(over) / 80) * 0.04;
+    gsap.set(track, { scaleX: 1 + stretch, transformOrigin: over > 0 ? "0% 50%" : "100% 50%" });
+  });
+  const release = (event) => {
+    if (!held || event.pointerId !== pointer) return;
+    held = false;
+    pointer = null;
+    root.removeAttribute("data-mk-held");
+    if (!reduced()) keep(gsap.to(track, { scaleX: 1, duration: 0.6, ease: "elastic.out(1, 0.35)", clearProps: "transform,transformOrigin" }));
+  };
+  scope.on(window, "pointerup", release);
+  scope.on(window, "pointercancel", release);
+  scope.add(() => {
+    root.removeAttribute("data-mk-held");
+    gsap.set(track, { clearProps: "transform,transformOrigin" });
+  });
+  let repeat;
+  const stop = () => {
+    clearTimeout(repeat);
+    if (repeat !== void 0) commit();
+    repeat = void 0;
+  };
+  scope.add(() => clearTimeout(repeat));
+  for (const [button, direction] of [[less, -1], [more, 1]]) {
+    if (!button) continue;
+    scope.on(button, "pointerdown", (event) => {
+      if (range.disabled || event.button !== 0) return;
+      event.preventDefault();
+      press(button);
+      const tick = (delay) => {
+        set(value + step * direction, true, "input");
+        repeat = setTimeout(() => tick(Math.max(50, delay * 0.8)), delay);
+      };
+      tick(400);
+    });
+    scope.on(button, "pointerup", stop);
+    scope.on(button, "pointerleave", stop);
+    scope.on(button, "pointercancel", stop);
+  }
+  const form = range.form;
+  if (form) scope.on(form, "reset", () => setTimeout(() => set(Number(range.defaultValue), true, false)));
+  describe();
+  paint();
+  return {
+    setValue: (next, notify = false) => set(next, true, notify ? "change" : false),
+    reset: (notify = false) => set(origin, true, notify ? "change" : false),
+    get value() {
+      return value;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/voice-dots/engine.ts
+var LABELS = { idle: "Asistente en espera", listening: "Escuchando\u2026", thinking: "Pensando\u2026", speaking: "Hablando\u2026" };
+var STATES = ["idle", "listening", "thinking", "speaking"];
+var mediaSources = /* @__PURE__ */ new WeakMap();
+var audio = null;
+function createVoiceDots(root, options = {}) {
+  if (!root) return inert({ setState() {
+  }, state: "idle", setLevel() {
+  }, listen: async () => () => {
+  }, stop() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  const count = Math.max(3, Math.min(6, Math.round(options.count ?? 4)));
+  const size = Math.max(4, options.size ?? 12);
+  const labels = { ...LABELS, ...options.labels };
+  let state = STATES.includes(options.state) ? options.state : "idle";
+  const row = document.createElement("span");
+  row.dataset.mkVoiceRow = "";
+  row.setAttribute("aria-hidden", "true");
+  const dots = Array.from({ length: count }, (_, i) => {
+    const dot = document.createElement("span");
+    dot.dataset.mkVoiceDot = String(i + 1);
+    row.append(dot);
+    return dot;
+  });
+  const status = document.createElement("span");
+  status.className = "mk-sr-only";
+  status.setAttribute("role", "status");
+  root.append(row, status);
+  scope.add(() => {
+    row.remove();
+    status.remove();
+  });
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "data-mk-state", state);
+  if (options.colorful) scope.attr(root, "data-mk-colorful", "");
+  root.style.setProperty("--mk-voice-size", `${size}px`);
+  scope.add(() => {
+    root.style.removeProperty("--mk-voice-size");
+    if (!root.getAttribute("style")) root.removeAttribute("style");
+  });
+  const drawn = dots.map(() => ({ h: size, x: 0, y: 0, vh: 0 }));
+  const levels = dots.map(() => 0);
+  let time = 0;
+  const gap = size * 0.9;
+  const home = (i) => (i - (count - 1) / 2) * (size + gap);
+  const draw = () => {
+    dots.forEach((dot, i) => {
+      const d = drawn[i];
+      dot.style.height = `${d.h.toFixed(2)}px`;
+      dot.style.transform = `translate(${d.x.toFixed(2)}px, ${d.y.toFixed(2)}px)`;
+    });
+  };
+  const still = () => {
+    dots.forEach((_, i) => Object.assign(drawn[i], { h: size, x: 0, y: 0, vh: 0 }));
+    draw();
+  };
+  let analyser = null;
+  let bins = null;
+  let release = null;
+  let listening = 0;
+  const sample = () => {
+    if (!analyser || !bins) return;
+    analyser.getByteFrequencyData(bins);
+    const hz = (audio?.sampleRate ?? 48e3) / 2 / bins.length;
+    const low = Math.max(1, Math.floor(120 / hz));
+    const high = Math.min(bins.length - 1, Math.ceil(3e3 / hz));
+    const span = (high - low) / count;
+    for (let i = 0; i < count; i++) {
+      let sum = 0;
+      const from = Math.floor(low + span * i);
+      const to = Math.max(from + 1, Math.floor(low + span * (i + 1)));
+      for (let k = from; k < to; k++) sum += bins[k];
+      levels[i] = Math.min(1, sum / (to - from) / 255 * (1.4 + i * 0.35));
+    }
+  };
+  const tick = (dt) => {
+    if (reduced()) return;
+    time += dt / 60;
+    sample();
+    const k = 1 - Math.exp(-dt * 0.35);
+    dots.forEach((_, i) => {
+      const d = drawn[i];
+      let h = size;
+      let x = 0;
+      let y = 0;
+      if (state === "idle") {
+        h = size * (1 + 0.18 * Math.max(0, Math.sin(time * 3.2 - i * 0.7)));
+        y = -2 * Math.max(0, Math.sin(time * 3.2 - i * 0.7));
+      } else if (state === "listening") {
+        h = size + levels[i] * size * 3.2;
+      } else if (state === "thinking") {
+        const angle = time * 4 + i / count * Math.PI * 2;
+        const ring = size * 1.2;
+        x = Math.cos(angle) * ring - home(i);
+        y = Math.sin(angle) * ring;
+      } else {
+        const wave = 0.5 + 0.5 * Math.sin(time * 9 - i * 0.9);
+        const voice = analyser ? levels[i] : 0.55;
+        h = size + wave * voice * size * 2.4;
+      }
+      const stiffness = h > d.h ? 0.5 : 0.18;
+      d.vh = (d.vh + (h - d.h) * stiffness) * 0.6;
+      d.h = Math.max(size * 0.8, d.h + d.vh * dt);
+      d.x += (x - d.x) * k;
+      d.y += (y - d.y) * k;
+    });
+    draw();
+  };
+  const stopLoop = whileVisible(root, tick);
+  scope.add(stopLoop);
+  const stop = () => {
+    listening++;
+    release?.();
+    release = null;
+    analyser = null;
+    bins = null;
+    levels.fill(0);
+  };
+  scope.add(stop);
+  const setState = (next) => {
+    if (!STATES.includes(next)) return;
+    state = next;
+    root.setAttribute("data-mk-state", next);
+    status.textContent = next === "idle" ? "" : labels[next];
+    if (reduced()) still();
+    root.dispatchEvent(new CustomEvent("mk:state", { bubbles: true, detail: { state: next } }));
+  };
+  draw();
+  if (state !== "idle") status.textContent = labels[state];
+  return {
+    setState,
+    get state() {
+      return state;
+    },
+    setLevel(level) {
+      const list = Array.isArray(level) ? level : dots.map(() => level);
+      dots.forEach((_, i) => {
+        const value = Number(list[i % Math.max(1, list.length)]);
+        levels[i] = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+      });
+    },
+    async listen(source) {
+      stop();
+      const request = listening;
+      const Context = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+      if (!Context || scope.disposed) return () => {
+      };
+      audio ??= new Context();
+      if (audio.state === "suspended") await audio.resume().catch(() => {
+      });
+      if (scope.disposed || request !== listening) return () => {
+      };
+      const node = audio.createAnalyser();
+      node.fftSize = 256;
+      node.smoothingTimeConstant = 0.55;
+      let input;
+      if (source instanceof HTMLMediaElement) {
+        const existing = mediaSources.get(source) ?? audio.createMediaElementSource(source);
+        mediaSources.set(source, existing);
+        existing.disconnect();
+        input = existing;
+        node.connect(audio.destination);
+      } else input = audio.createMediaStreamSource(source);
+      input.connect(node);
+      analyser = node;
+      bins = new Uint8Array(new ArrayBuffer(node.frequencyBinCount));
+      const mine = () => {
+        try {
+          input.disconnect(node);
+          node.disconnect();
+        } catch {
+        }
+        if (source instanceof HTMLMediaElement && audio) input.connect(audio.destination);
+      };
+      release = mine;
+      return () => {
+        if (release === mine) stop();
+      };
+    },
+    stop,
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/chart/parts.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SLOTS = 8;
+var svg2 = (tag, attrs = {}) => {
+  const element = document.createElementNS(SVG_NS, tag);
+  for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, String(value));
+  return element;
+};
+var finite2 = (value) => typeof value === "number" && Number.isFinite(value);
+var round = (n) => Math.round(n * 100) / 100;
+var slotColor = (i, total = SLOTS) => total === 1 ? "var(--mk-chart-mono)" : i < SLOTS ? `var(--mk-chart-${i + 1})` : "var(--mk-chart-other)";
+var formatNumber = (value) => new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(value);
+var polar = (cx, cy, r, angle) => [cx + r * Math.sin(angle), cy - r * Math.cos(angle)];
+function arcPath(cx, cy, outer, inner, a0, a1) {
+  const sweep = Math.min(a1 - a0, Math.PI * 2 - 1e-4);
+  const end = a0 + sweep;
+  const large = sweep > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, outer, a0);
+  const [x1, y1] = polar(cx, cy, outer, end);
+  if (inner <= 0) return `M${round(cx)},${round(cy)}L${round(x0)},${round(y0)}A${round(outer)},${round(outer)} 0 ${large} 1 ${round(x1)},${round(y1)}Z`;
+  const [x2, y2] = polar(cx, cy, inner, end);
+  const [x3, y3] = polar(cx, cy, inner, a0);
+  return `M${round(x0)},${round(y0)}A${round(outer)},${round(outer)} 0 ${large} 1 ${round(x1)},${round(y1)}L${round(x2)},${round(y2)}A${round(inner)},${round(inner)} 0 ${large} 0 ${round(x3)},${round(y3)}Z`;
+}
+function chartFrame(root, scope, kind) {
+  if (!root.classList.contains("mk-chart")) {
+    root.classList.add("mk-chart");
+    scope.add(() => {
+      root.classList.remove("mk-chart");
+      if (!root.classList.length) root.removeAttribute("class");
+    });
+  }
+  scope.attr(root, "data-mk-chart-type", kind);
+  const made = (tag, parent = root) => {
+    const element = document.createElement(tag);
+    parent.append(element);
+    scope.add(() => element.remove());
+    return element;
+  };
+  const plot = made("div");
+  plot.dataset.mkChartPlot = "";
+  const canvas = svg2("svg");
+  canvas.dataset.mkChartSvg = "";
+  canvas.setAttribute("role", "img");
+  canvas.setAttribute("tabindex", "0");
+  canvas.setAttribute("focusable", "true");
+  plot.append(canvas);
+  const tooltip = made("div", plot);
+  tooltip.dataset.mkChartTooltip = "";
+  tooltip.setAttribute("aria-hidden", "true");
+  tooltip.hidden = true;
+  const empty = made("p");
+  empty.dataset.mkChartEmpty = "";
+  empty.hidden = true;
+  const legend = made("ul");
+  legend.dataset.mkChartLegend = "";
+  const table = made("table");
+  table.dataset.mkChartTable = "";
+  table.className = "mk-sr-only";
+  const live = made("span");
+  live.className = "mk-sr-only";
+  live.setAttribute("role", "status");
+  scope.attr(root, "data-mk-ready", "");
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (animation) => {
+    if (!animation) return;
+    effects.add(animation);
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    gsap.killTweensOf(tooltip);
+  });
+  const tip = (at) => {
+    if (!at) {
+      if (!tooltip.hidden && !reduced()) {
+        gsap.killTweensOf(tooltip, "opacity,scale");
+        keep(gsap.to(tooltip, { opacity: 0, scale: 0.94, duration: 0.15, ease: "power2.in", onComplete: () => {
+          tooltip.hidden = true;
+        } }));
+      } else tooltip.hidden = true;
+      return;
+    }
+    tooltip.replaceChildren();
+    const title = document.createElement("strong");
+    title.textContent = at.title;
+    tooltip.append(title);
+    for (const each of at.rows) {
+      const row = document.createElement("span");
+      row.dataset.mkChartRow = "";
+      const swatch = document.createElement("i");
+      if (!each.color || /--mk-(text|chart-mono|muted)/.test(each.color)) swatch.dataset.mkMono = "";
+      else swatch.style.background = each.color;
+      const name = document.createElement("span");
+      name.textContent = each.name;
+      const amount = document.createElement("b");
+      amount.textContent = each.value;
+      row.append(swatch, name, amount);
+      tooltip.append(row);
+    }
+    const appearing = tooltip.hidden;
+    tooltip.hidden = false;
+    const width = plot.clientWidth || 300;
+    const height = plot.clientHeight || 240;
+    const tipW = tooltip.offsetWidth || 160;
+    const tipH = tooltip.offsetHeight || 60;
+    const left = round(Math.max(0, Math.min(width - tipW, at.x > width / 2 ? at.x - 16 - tipW : at.x + 16)));
+    const top = round(Math.max(0, Math.min(height - tipH, at.y - tipH - 12)));
+    if (appearing || reduced()) {
+      gsap.killTweensOf(tooltip);
+      gsap.set(tooltip, { x: left, y: top });
+      if (!reduced()) keep(gsap.fromTo(tooltip, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.25, ease: EASE.pop }));
+      else gsap.set(tooltip, { opacity: 1, scale: 1 });
+    } else {
+      gsap.killTweensOf(tooltip, "opacity,scale");
+      gsap.set(tooltip, { opacity: 1, scale: 1 });
+      keep(gsap.to(tooltip, { x: left, y: top, duration: 0.25, ease: "power3.out", overwrite: "auto" }));
+    }
+  };
+  const fillLegend = (items2, show2, type = "bar") => {
+    legend.replaceChildren();
+    legend.hidden = !show2 || !items2.length;
+    if (legend.hidden) return [];
+    return items2.map((item) => {
+      const li = document.createElement("li");
+      const swatch = document.createElement("span");
+      swatch.dataset.mkChartSwatch = "";
+      swatch.dataset.mkType = type;
+      swatch.style.background = item.color;
+      swatch.style.color = item.color;
+      swatch.setAttribute("aria-hidden", "true");
+      const name = document.createElement("span");
+      name.textContent = item.name;
+      li.append(swatch, name);
+      legend.append(li);
+      return li;
+    });
+  };
+  const fillTable = (caption, head, rows) => {
+    table.replaceChildren();
+    const cap = document.createElement("caption");
+    cap.textContent = caption;
+    const thead = document.createElement("thead");
+    const headRow = document.createElement("tr");
+    for (const text of head) {
+      const th = document.createElement("th");
+      th.scope = "col";
+      th.textContent = text;
+      headRow.append(th);
+    }
+    thead.append(headRow);
+    const body = document.createElement("tbody");
+    for (const cells of rows) {
+      const row = document.createElement("tr");
+      cells.forEach((text, i) => {
+        const cell = document.createElement(i ? "td" : "th");
+        if (!i) cell.scope = "row";
+        cell.textContent = text;
+        row.append(cell);
+      });
+      body.append(row);
+    }
+    table.append(cap, thead, body);
+  };
+  return { plot, canvas, tooltip, empty, legend, table, live, tip, fillLegend, fillTable, keep };
+}
+function onWidth(root, scope, draw) {
+  if (typeof ResizeObserver !== "function") return;
+  let width = 0;
+  let frame = 0;
+  const observer = scope.observe(
+    new ResizeObserver(() => {
+      const next = Math.round(root.clientWidth);
+      if (!next || next === width) return;
+      const first = !width;
+      width = next;
+      if (first) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(draw);
+    })
+  );
+  observer.observe(root);
+  scope.add(() => cancelAnimationFrame(frame));
+}
+
+// src/components/pie-chart/engine.ts
+var PULL = 7;
+function createPieChart(root, initial = {}) {
+  if (!root) return inert({ update() {
+  }, select() {
+  }, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, "pie");
+  const { plot, canvas, keep } = frame;
+  let options = { ...initial };
+  let selected = null;
+  const center = document.createElement("div");
+  center.dataset.mkPieCenter = "";
+  center.setAttribute("aria-hidden", "true");
+  const centerValue = document.createElement("strong");
+  const centerLabel = document.createElement("span");
+  center.append(centerValue, centerLabel);
+  plot.append(center);
+  scope.add(() => center.remove());
+  const format = (value) => options.formatValue ? options.formatValue(value) : formatNumber(value);
+  const slices = () => (options.data ?? []).filter((slice) => finite2(slice.value) && slice.value > 0).map((slice, i, all) => ({ label: String(slice.label), value: slice.value, color: slice.color ?? slotColor(i, Math.max(2, all.length)) }));
+  let model = slices();
+  const total = () => model.reduce((sum, slice) => sum + slice.value, 0);
+  const share = (value) => new Intl.NumberFormat(void 0, { style: "percent", maximumFractionDigits: 1 }).format(value / (total() || 1));
+  const donut = () => Math.min(0.9, Math.max(0, finite2(options.donut) ? options.donut : 0.62));
+  const anglesOf = (values) => {
+    const sum = values.reduce((a, b) => a + b, 0) || 1;
+    const pad = values.filter((v) => v > 0).length > 1 ? (finite2(options.gap) ? options.gap : 1.5) * Math.PI / 180 : 0;
+    let at = 0;
+    return values.map((value) => {
+      const sweep = value / sum * Math.PI * 2;
+      const a0 = at + Math.min(pad / 2, sweep / 4);
+      const a1 = at + sweep - Math.min(pad / 2, sweep / 4);
+      at += sweep;
+      return [a0, Math.max(a0, a1)];
+    });
+  };
+  let paths = [];
+  let shown = [];
+  let geometry = { size: 240, cx: 120, cy: 120, outer: 112, inner: 70 };
+  let glide = null;
+  scope.add(() => glide?.kill());
+  const measure = () => {
+    const width = Math.round(plot.clientWidth || root.clientWidth || 0);
+    const wanted = finite2(options.size) ? options.size : 240;
+    const size = Math.max(120, width ? Math.min(wanted, width) : wanted);
+    const outer = size / 2 - PULL - 2;
+    geometry = { size, cx: size / 2, cy: size / 2, outer, inner: outer * donut() };
+    canvas.setAttribute("viewBox", `0 0 ${size} ${size}`);
+    canvas.setAttribute("width", String(size));
+    canvas.setAttribute("height", String(size));
+    plot.style.setProperty("--mk-pie-size", `${size}px`);
+  };
+  scope.add(() => plot.style.removeProperty("--mk-pie-size"));
+  const paint = (angles) => {
+    shown = angles;
+    const { cx, cy, outer, inner } = geometry;
+    paths.forEach((path, i) => {
+      const [a0, a1] = angles[i] ?? [0, 0];
+      path.setAttribute("d", a1 - a0 > 1e-4 ? arcPath(cx, cy, outer, inner, a0, a1) : "");
+    });
+  };
+  const build = () => {
+    canvas.replaceChildren();
+    const group = svg2("g", { "data-mk-part": "series" });
+    paths = model.map((slice, i) => {
+      const path = svg2("path", { "data-mk-index": i });
+      path.style.fill = slice.color;
+      group.append(path);
+      return path;
+    });
+    canvas.append(group);
+  };
+  const paintCenter = (animate) => {
+    center.hidden = donut() < 0.35 || !model.length;
+    if (center.hidden) return;
+    const slice = selected === null ? null : model[selected];
+    const text = slice ? format(slice.value) : format(total());
+    const caption = slice ? `${slice.label} \xB7 ${share(slice.value)}` : options.totalLabel ?? "Total";
+    const changed = centerLabel.textContent !== caption;
+    if (centerValue.textContent !== text) {
+      if (animate && !reduced() && centerValue.textContent) keep(rollDigits(centerValue, text, 1, 0.35));
+      else centerValue.textContent = text;
+    }
+    centerLabel.textContent = caption;
+    if (changed && animate && !reduced()) keep(blurIn(centerLabel, { from: "soft", duration: 0.3 }));
+  };
+  const paintSelection = (announce) => {
+    const { outer } = geometry;
+    paths.forEach((path, i) => {
+      const chosen = i === selected;
+      path.toggleAttribute("data-mk-dim", selected !== null && !chosen);
+      if (!chosen) {
+        path.style.transform = "";
+        return;
+      }
+      const [a0, a1] = shown[i] ?? [0, 0];
+      const [dx, dy] = polar(0, 0, Math.min(PULL, outer * 0.06), (a0 + a1) / 2);
+      path.style.transform = `translate(${round(dx)}px, ${round(dy)}px)`;
+    });
+    legendItems.forEach((item, i) => item.toggleAttribute("data-mk-dim", selected !== null && i !== selected));
+    paintCenter(true);
+    const slice = selected === null ? null : model[selected];
+    if (slice && center.hidden) {
+      const [a0, a1] = shown[selected] ?? [0, 0];
+      const [x, y] = polar(geometry.cx, geometry.cy, geometry.outer * 0.7, (a0 + a1) / 2);
+      frame.tip({ x, y, title: slice.label, rows: [{ name: share(slice.value), color: slice.color, value: format(slice.value) }] });
+    } else frame.tip(null);
+    if (announce && slice) frame.live.textContent = `${slice.label}: ${format(slice.value)}, ${share(slice.value)}`;
+  };
+  let legendItems = [];
+  const draw = (animate) => {
+    glide?.kill();
+    const before = shown;
+    const sameCount = paths.length === model.length;
+    const name = options.label ?? "Gr\xE1fica circular";
+    canvas.setAttribute("aria-label", model.length ? `${name}. ${model.length} partes, total ${format(total())}. Usa las flechas para recorrerlas.` : `${name}: ${options.emptyLabel ?? "sin datos"}`);
+    frame.fillTable(name, ["Parte", "Valor", "Porcentaje"], model.map((slice) => [slice.label, format(slice.value), share(slice.value)]));
+    legendItems = frame.fillLegend(model.map((slice) => ({ name: slice.label, color: slice.color })), options.legend ?? true);
+    legendItems.forEach((item, i) => {
+      item.addEventListener("pointerenter", () => select(i));
+      item.addEventListener("pointerleave", () => select(null));
+    });
+    frame.empty.hidden = model.length > 0;
+    frame.empty.textContent = options.emptyLabel ?? "Sin datos para mostrar";
+    plot.hidden = !model.length;
+    if (!model.length) {
+      canvas.replaceChildren();
+      paths = [];
+      shown = [];
+      selected = null;
+      return;
+    }
+    if (selected !== null && selected >= model.length) selected = null;
+    measure();
+    if (!sameCount || !before.length) build();
+    paths.forEach((path, i) => {
+      path.style.fill = model[i].color;
+    });
+    const target = anglesOf(model.map((slice) => slice.value));
+    const done = () => {
+      paint(target);
+      paintSelection(false);
+    };
+    if (!animate || reduced()) return done();
+    const state = { t: 0 };
+    if (sameCount && before.length) {
+      glide = gsap.to(state, {
+        t: 1,
+        duration: 0.6,
+        ease: EASE.swatch,
+        onUpdate: () => paint(target.map(([a0, a1], i) => [before[i][0] + (a0 - before[i][0]) * state.t, before[i][1] + (a1 - before[i][1]) * state.t])),
+        onComplete: done
+      });
+      paintCenter(true);
+      return;
+    }
+    paint(target.map(() => [0, 0]));
+    centerValue.textContent = format(0);
+    glide = gsap.to(state, {
+      t: 1,
+      duration: 0.9,
+      ease: EASE.signature,
+      onUpdate: () => paint(target.map(([a0, a1]) => [a0 * state.t, a1 * state.t])),
+      onComplete: done
+    });
+    paintCenter(true);
+  };
+  const select = (index, announce = false) => {
+    if (scope.disposed) return;
+    const next = index === null || !model.length ? null : (Math.round(index) % model.length + model.length) % model.length;
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    options.onSelect?.(selected);
+    const slice = selected === null ? null : model[selected];
+    root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { index: selected, label: slice?.label ?? null, value: slice?.value ?? null } }));
+  };
+  const indexAt = (event) => {
+    const target = event.target.closest("[data-mk-index]");
+    return target ? Number(target.getAttribute("data-mk-index")) : null;
+  };
+  scope.on(canvas, "pointermove", (event) => select(indexAt(event)));
+  scope.on(canvas, "pointerdown", (event) => select(indexAt(event)));
+  scope.on(canvas, "pointerleave", (event) => {
+    if (event.pointerType === "mouse") select(null);
+  });
+  scope.on(canvas, "focus", () => {
+    if (selected === null && model.length) select(0, true);
+  });
+  scope.on(canvas, "blur", () => select(null));
+  scope.on(canvas, "keydown", (event) => {
+    const key = event.key;
+    const moves = { ArrowRight: (selected ?? -1) + 1, ArrowDown: (selected ?? -1) + 1, ArrowLeft: (selected ?? 1) - 1, ArrowUp: (selected ?? 1) - 1, Home: 0, End: model.length - 1, Escape: null };
+    if (!(key in moves) || !model.length) return;
+    event.preventDefault();
+    select(moves[key], true);
+  });
+  onWidth(root, scope, () => {
+    measure();
+    paint(shown);
+    paintSelection(false);
+  });
+  draw(true);
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = slices();
+      draw(true);
+    },
+    select: (index) => select(index),
+    get selected() {
+      return selected;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/radar-chart/engine.ts
+function niceMax(value) {
+  if (value <= 0) return 1;
+  const power = 10 ** Math.floor(Math.log10(value));
+  const fraction = value / power;
+  return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10) * power;
+}
+function createRadarChart(root, initial = {}) {
+  if (!root) return inert({ update() {
+  }, select() {
+  }, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, "radar");
+  const { plot, canvas, keep } = frame;
+  let options = { ...initial };
+  let selected = null;
+  let focusSeries = null;
+  const format = (value) => options.formatValue ? options.formatValue(value) : formatNumber(value);
+  const modelOf = () => {
+    const axes = (options.axes ?? []).map(String);
+    const raw = options.series ?? [];
+    return {
+      axes,
+      series: raw.map((series, i) => ({
+        name: String(series.name ?? ""),
+        values: axes.map((_, k) => finite2(series.values[k]) ? Math.max(0, series.values[k]) : null),
+        color: series.color ?? slotColor(i, raw.length)
+      }))
+    };
+  };
+  let model = modelOf();
+  const hasData = () => model.axes.length >= 3 && model.series.some((series) => series.values.some(finite2));
+  const maxOf = () => finite2(options.max) && options.max > 0 ? options.max : niceMax(Math.max(0, ...model.series.flatMap((series) => series.values.filter(finite2))));
+  let geometry = { size: 300, cx: 150, cy: 150, r: 110 };
+  const angle = (k) => k / model.axes.length * Math.PI * 2;
+  let shapes = [];
+  let guide = null;
+  let labels = [];
+  let shown = [];
+  let glide = null;
+  scope.add(() => glide?.kill());
+  const measure = () => {
+    const width = Math.round(plot.clientWidth || root.clientWidth || 0);
+    const wanted = finite2(options.size) ? options.size : 300;
+    const size = Math.max(180, width ? Math.min(wanted, width) : wanted);
+    const r = size / 2 - Math.min(64, Math.max(36, Math.max(...model.axes.map((axis) => axis.length)) * 3.6 + 14));
+    geometry = { size, cx: size / 2, cy: size / 2, r: Math.max(40, r) };
+    canvas.setAttribute("viewBox", `0 0 ${size} ${size}`);
+    canvas.setAttribute("width", String(size));
+    canvas.setAttribute("height", String(size));
+    plot.style.setProperty("--mk-radar-size", `${size}px`);
+  };
+  scope.add(() => plot.style.removeProperty("--mk-radar-size"));
+  const pointOf = (value, k, max) => polar(geometry.cx, geometry.cy, Math.min(value, max) / max * geometry.r, angle(k));
+  const build = () => {
+    canvas.replaceChildren();
+    const { cx, cy, r } = geometry;
+    const n = model.axes.length;
+    const levels = Math.max(1, Math.round(options.levels ?? 4));
+    const grid = svg2("g", { "data-mk-part": "grid" });
+    for (let level = 1; level <= levels; level++) {
+      const radius = r * level / levels;
+      if (options.grid === "circle") grid.append(svg2("circle", { cx, cy, r: round(radius) }));
+      else {
+        const points = Array.from({ length: n }, (_, k) => polar(cx, cy, radius, angle(k)).map(round).join(",")).join(" ");
+        grid.append(svg2("polygon", { points }));
+      }
+    }
+    for (let k = 0; k < n; k++) {
+      const [x, y] = polar(cx, cy, r, angle(k));
+      grid.append(svg2("line", { x1: cx, y1: cy, x2: round(x), y2: round(y), "data-mk-spoke": k }));
+    }
+    canvas.append(grid);
+    const names = svg2("g", { "data-mk-part": "axes" });
+    labels = model.axes.map((axis, k) => {
+      const a = angle(k);
+      const [x, y] = polar(cx, cy, r + 14, a);
+      const sin = Math.sin(a);
+      const text = svg2("text", { x: round(x), y: round(y), "text-anchor": Math.abs(sin) < 0.2 ? "middle" : sin > 0 ? "start" : "end", "dominant-baseline": "middle" });
+      text.textContent = axis;
+      names.append(text);
+      return text;
+    });
+    canvas.append(names);
+    guide = svg2("line", { "data-mk-part": "guide" });
+    guide.style.display = "none";
+    canvas.append(guide);
+    const series = svg2("g", { "data-mk-part": "series" });
+    shapes = model.series.map((each, s) => {
+      const group = svg2("g", { "data-mk-series": s });
+      const area = svg2("path", { "data-mk-part": "area" });
+      area.style.fill = each.color;
+      const edge = svg2("path", { "data-mk-part": "edge" });
+      edge.style.stroke = each.color;
+      group.append(area, edge);
+      const dots = model.axes.map(() => {
+        const dot = svg2("circle", { r: 3, "data-mk-part": "dot" });
+        dot.style.fill = each.color;
+        group.append(dot);
+        return dot;
+      });
+      series.append(group);
+      return { area, edge, dots };
+    });
+    canvas.append(series);
+  };
+  const paint = (values) => {
+    shown = values;
+    const max = maxOf();
+    shapes.forEach((shape, s) => {
+      const list = values[s] ?? [];
+      const points = model.axes.map((_, k) => pointOf(list[k] ?? 0, k, max));
+      const d = `M${points.map(([x, y]) => `${round(x)},${round(y)}`).join("L")}Z`;
+      shape.area.setAttribute("d", d);
+      shape.edge.setAttribute("d", d);
+      shape.dots.forEach((dot, k) => {
+        dot.setAttribute("cx", String(round(points[k][0])));
+        dot.setAttribute("cy", String(round(points[k][1])));
+        dot.style.display = finite2(model.series[s].values[k]) ? "" : "none";
+      });
+    });
+  };
+  const paintSelection = (announce) => {
+    shapes.forEach((shape, s) => {
+      shape.area.parentElement.toggleAttribute("data-mk-dim", focusSeries !== null && s !== focusSeries);
+      shape.dots.forEach((dot, k2) => {
+        const on = k2 === selected;
+        if (on === dot.hasAttribute("data-mk-on")) return;
+        dot.toggleAttribute("data-mk-on", on);
+        const r = on ? 5 : 3;
+        if (reduced()) dot.setAttribute("r", String(r));
+        else keep(gsap.to(dot, { attr: { r }, duration: on ? 0.3 : 0.2, ease: on ? EASE.pop : "power2.out" }));
+      });
+    });
+    labels.forEach((label, k2) => label.toggleAttribute("data-mk-on", k2 === selected));
+    if (selected === null || !guide) {
+      if (guide) guide.style.display = "none";
+      frame.tip(null);
+      return;
+    }
+    const k = selected;
+    const [x, y] = polar(geometry.cx, geometry.cy, geometry.r, angle(k));
+    Object.entries({ x1: geometry.cx, y1: geometry.cy, x2: round(x), y2: round(y) }).forEach(([name, value]) => guide.setAttribute(name, String(value)));
+    guide.style.display = "";
+    const rows = model.series.map((series) => ({ name: series.name, color: series.color, value: finite2(series.values[k]) ? format(series.values[k]) : "\u2014" }));
+    const max = maxOf();
+    const top = Math.min(...model.series.map((series) => pointOf(series.values[k] ?? 0, k, max)[1]));
+    frame.tip({ x: round(x), y: Math.min(round(y), top), title: model.axes[k], rows });
+    if (announce) frame.live.textContent = `${model.axes[k]}. ${rows.map((row) => `${row.name ? `${row.name}: ` : ""}${row.value}`).join(". ")}`;
+  };
+  let legendItems = [];
+  const draw = (animate) => {
+    glide?.kill();
+    const name = options.label ?? "Gr\xE1fica de radar";
+    canvas.setAttribute("aria-label", hasData() ? `${name}. ${model.axes.length} medidas: ${model.axes.join(", ")}. Series: ${model.series.map((series) => series.name).join(", ")}. Usa las flechas para recorrer las medidas.` : `${name}: ${options.emptyLabel ?? "sin datos"}`);
+    frame.fillTable(name, ["Medida", ...model.series.map((series) => series.name || "Valor")], model.axes.map((axis, k) => [axis, ...model.series.map((series) => finite2(series.values[k]) ? format(series.values[k]) : "\u2014")]));
+    legendItems = frame.fillLegend(model.series, options.legend ?? model.series.length > 1, "area");
+    legendItems.forEach((item, s) => {
+      item.addEventListener("pointerenter", () => {
+        focusSeries = s;
+        paintSelection(false);
+      });
+      item.addEventListener("pointerleave", () => {
+        focusSeries = null;
+        paintSelection(false);
+      });
+    });
+    const ok = hasData();
+    frame.empty.hidden = ok;
+    frame.empty.textContent = options.emptyLabel ?? "Sin datos para mostrar";
+    plot.hidden = !ok;
+    if (!ok) {
+      canvas.replaceChildren();
+      shapes = [];
+      shown = [];
+      selected = null;
+      return;
+    }
+    if (selected !== null && selected >= model.axes.length) selected = null;
+    const before = shown;
+    const comparable = before.length === model.series.length && before.every((list) => list.length === model.axes.length) && shapes.length === model.series.length;
+    measure();
+    build();
+    const target = model.series.map((series) => series.values.map((value) => value ?? 0));
+    const done = () => {
+      paint(target);
+      paintSelection(false);
+    };
+    if (!animate || reduced()) return done();
+    const state = { t: 0 };
+    if (comparable) {
+      glide = gsap.to(state, { t: 1, duration: 0.6, ease: EASE.swatch, onUpdate: () => paint(target.map((list, s) => list.map((value, k) => before[s][k] + (value - before[s][k]) * state.t))), onComplete: done });
+      return;
+    }
+    const stagger = 0.09;
+    const total = 0.7 + stagger * (target.length - 1);
+    paint(target.map((list) => list.map(() => 0)));
+    glide = gsap.to(state, {
+      t: total,
+      duration: total,
+      ease: "none",
+      onUpdate: () => paint(target.map((list, s) => {
+        const local = Math.min(1, Math.max(0, (state.t - s * stagger) / 0.7));
+        const eased2 = gsap.parseEase(EASE.swatch)(local);
+        return list.map((value) => value * eased2);
+      })),
+      onComplete: done
+    });
+  };
+  const select = (axis, announce = false) => {
+    if (scope.disposed) return;
+    const n = model.axes.length;
+    const next = axis === null || !hasData() ? null : (Math.round(axis) % n + n) % n;
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    options.onSelect?.(selected);
+    root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { index: selected, label: selected === null ? null : model.axes[selected], values: selected === null ? [] : model.series.map((series) => series.values[selected]) } }));
+  };
+  const axisAt = (event) => {
+    const box = canvas.getBoundingClientRect();
+    const scale = box.width ? geometry.size / box.width : 1;
+    const x = (event.clientX - box.left) * scale - geometry.cx;
+    const y = (event.clientY - box.top) * scale - geometry.cy;
+    if (Math.hypot(x, y) < geometry.r * 0.12) return selected;
+    const a = (Math.atan2(x, -y) + Math.PI * 2) % (Math.PI * 2);
+    return Math.round(a / (Math.PI * 2 / model.axes.length)) % model.axes.length;
+  };
+  scope.on(canvas, "pointermove", (event) => select(axisAt(event)));
+  scope.on(canvas, "pointerdown", (event) => select(axisAt(event)));
+  scope.on(canvas, "pointerleave", (event) => {
+    if (event.pointerType === "mouse") select(null);
+  });
+  scope.on(canvas, "focus", () => {
+    if (selected === null && hasData()) select(0, true);
+  });
+  scope.on(canvas, "blur", () => select(null));
+  scope.on(canvas, "keydown", (event) => {
+    const key = event.key;
+    const moves = { ArrowRight: (selected ?? -1) + 1, ArrowDown: (selected ?? -1) + 1, ArrowLeft: (selected ?? 1) - 1, ArrowUp: (selected ?? 1) - 1, Home: 0, End: model.axes.length - 1, Escape: null };
+    if (!(key in moves) || !hasData()) return;
+    event.preventDefault();
+    select(moves[key], true);
+  });
+  onWidth(root, scope, () => {
+    if (!hasData()) return;
+    measure();
+    build();
+    paint(shown);
+    paintSelection(false);
+  });
+  draw(true);
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = modelOf();
+      draw(true);
+    },
+    select: (axis) => select(axis),
+    get selected() {
+      return selected;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/radial-chart/engine.ts
+function strokeArc(cx, cy, r, a0, a1) {
+  const end = a0 + Math.min(a1 - a0, Math.PI * 2 - 1e-3);
+  const [x0, y0] = polar(cx, cy, r, a0);
+  const [x1, y1] = polar(cx, cy, r, end);
+  return `M${round(x0)},${round(y0)}A${round(r)},${round(r)} 0 ${end - a0 > Math.PI ? 1 : 0} 1 ${round(x1)},${round(y1)}`;
+}
+function createRadialChart(root, initial = {}) {
+  if (!root) return inert({ update() {
+  }, select() {
+  }, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, "radial");
+  const { plot, canvas, keep } = frame;
+  let options = { ...initial };
+  let selected = null;
+  const center = document.createElement("div");
+  center.dataset.mkRadialCenter = "";
+  center.setAttribute("aria-hidden", "true");
+  const centerValue = document.createElement("strong");
+  const centerLabel = document.createElement("span");
+  center.append(centerValue, centerLabel);
+  plot.append(center);
+  scope.add(() => center.remove());
+  const format = (value) => options.formatValue ? options.formatValue(value) : formatNumber(value);
+  const modelOf = () => {
+    const data = (options.data ?? []).filter((datum) => finite2(datum.value));
+    const top = Math.max(0, ...data.map((datum) => datum.value));
+    return data.map((datum, i) => ({
+      label: String(datum.label),
+      value: Math.max(0, datum.value),
+      max: finite2(datum.max) && datum.max > 0 ? datum.max : finite2(options.max) && options.max > 0 ? options.max : top || 1,
+      color: datum.color ?? slotColor(i, Math.max(2, data.length))
+    }));
+  };
+  let model = modelOf();
+  const total = () => model.reduce((sum, ring) => sum + ring.value, 0);
+  const percent = (ring) => new Intl.NumberFormat(void 0, { style: "percent", maximumFractionDigits: 0 }).format(ring.value / ring.max);
+  const sweep = () => Math.min(360, Math.max(90, finite2(options.sweep) ? options.sweep : 360)) * Math.PI / 180;
+  const startAngle = () => -sweep() / 2 + (sweep() >= Math.PI * 2 - 1e-6 ? Math.PI : 0);
+  let geometry = { size: 240, cx: 120, cy: 120, radii: [], thickness: 12 };
+  let arcs = [];
+  let tracks = [];
+  let shown = [];
+  let glide = null;
+  scope.add(() => glide?.kill());
+  const measure = () => {
+    const width = Math.round(plot.clientWidth || root.clientWidth || 0);
+    const wanted = finite2(options.size) ? options.size : 240;
+    const size = Math.max(120, width ? Math.min(wanted, width) : wanted);
+    const n = Math.max(1, model.length);
+    const outer = size / 2 - 4;
+    const fit = outer * 0.6 / (n + (n - 1) * 0.35);
+    const thickness = finite2(options.thickness) ? options.thickness : Math.max(4, Math.min(16, fit));
+    const spacing = thickness * 1.35;
+    geometry = { size, cx: size / 2, cy: size / 2, thickness, radii: model.map((_, i) => outer - thickness / 2 - i * spacing) };
+    canvas.setAttribute("viewBox", `0 0 ${size} ${size}`);
+    canvas.setAttribute("width", String(size));
+    canvas.setAttribute("height", String(size));
+    plot.style.setProperty("--mk-radial-size", `${size}px`);
+    plot.style.setProperty("--mk-radial-thickness", `${thickness}px`);
+  };
+  scope.add(() => {
+    plot.style.removeProperty("--mk-radial-size");
+    plot.style.removeProperty("--mk-radial-thickness");
+  });
+  const build = () => {
+    canvas.replaceChildren();
+    const { cx, cy, radii } = geometry;
+    const a0 = startAngle();
+    const back = svg2("g", { "data-mk-part": "tracks" });
+    const front = svg2("g", { "data-mk-part": "series" });
+    tracks = model.map((_, i) => {
+      const track = svg2("path", { d: strokeArc(cx, cy, radii[i], a0, a0 + sweep()), "data-mk-index": i });
+      back.append(track);
+      return track;
+    });
+    arcs = model.map((ring, i) => {
+      const arc = svg2("path", { "data-mk-index": i, "data-mk-part": "ring" });
+      arc.style.stroke = ring.color;
+      front.append(arc);
+      return arc;
+    });
+    canvas.append(back, front);
+  };
+  const paint = (values) => {
+    shown = values;
+    const { cx, cy, radii } = geometry;
+    const a0 = startAngle();
+    arcs.forEach((arc, i) => {
+      const share = Math.min(1, Math.max(0, (values[i] ?? 0) / model[i].max));
+      arc.setAttribute("d", share > 1e-3 ? strokeArc(cx, cy, radii[i], a0, a0 + sweep() * share) : "");
+    });
+  };
+  const paintCenter = (animate) => {
+    center.hidden = !model.length;
+    const ring = selected === null ? null : model[selected];
+    const text = ring ? format(ring.value) : format(total());
+    const caption = ring ? `${ring.label} \xB7 ${percent(ring)}` : options.totalLabel ?? "Total";
+    const changed = centerLabel.textContent !== caption;
+    if (centerValue.textContent !== text) {
+      if (animate && !reduced() && centerValue.textContent) keep(rollDigits(centerValue, text, 1, 0.35));
+      else centerValue.textContent = text;
+    }
+    centerLabel.textContent = caption;
+    if (changed && animate && !reduced()) keep(blurIn(centerLabel, { from: "soft", duration: 0.3 }));
+  };
+  let legendItems = [];
+  const paintSelection = (announce) => {
+    for (const list of [arcs, tracks]) list.forEach((each, i) => {
+      each.toggleAttribute("data-mk-on", i === selected);
+      each.toggleAttribute("data-mk-dim", selected !== null && i !== selected);
+    });
+    legendItems.forEach((item, i) => item.toggleAttribute("data-mk-dim", selected !== null && i !== selected));
+    paintCenter(true);
+    const ring = selected === null ? null : model[selected];
+    if (announce && ring) frame.live.textContent = `${ring.label}: ${format(ring.value)} de ${format(ring.max)}, ${percent(ring)}`;
+  };
+  const draw = (animate) => {
+    glide?.kill();
+    const name = options.label ?? "Gr\xE1fica radial";
+    canvas.setAttribute("aria-label", model.length ? `${name}. ${model.length} anillos, total ${format(total())}. Usa las flechas para recorrerlos.` : `${name}: ${options.emptyLabel ?? "sin datos"}`);
+    frame.fillTable(name, ["Anillo", "Valor", "Meta", "Avance"], model.map((ring) => [ring.label, format(ring.value), format(ring.max), percent(ring)]));
+    legendItems = frame.fillLegend(model.map((datum) => ({ name: datum.label, color: datum.color })), options.legend ?? true);
+    legendItems.forEach((item, i) => {
+      item.addEventListener("pointerenter", () => select(i));
+      item.addEventListener("pointerleave", () => select(null));
+    });
+    frame.empty.hidden = model.length > 0;
+    frame.empty.textContent = options.emptyLabel ?? "Sin datos para mostrar";
+    plot.hidden = !model.length;
+    if (!model.length) {
+      canvas.replaceChildren();
+      arcs = [];
+      shown = [];
+      selected = null;
+      return;
+    }
+    if (selected !== null && selected >= model.length) selected = null;
+    const before = shown;
+    const comparable = before.length === model.length && arcs.length === model.length;
+    measure();
+    build();
+    const target = model.map((ring) => ring.value);
+    const done = () => {
+      paint(target);
+      paintSelection(false);
+    };
+    if (!animate || reduced()) return done();
+    const state = { t: 0 };
+    if (comparable) {
+      glide = gsap.to(state, { t: 1, duration: 0.6, ease: EASE.swatch, onUpdate: () => paint(target.map((value, i) => before[i] + (value - before[i]) * state.t)), onComplete: done });
+      paintCenter(true);
+      return;
+    }
+    const stagger = 0.08;
+    const length = 0.8 + stagger * (target.length - 1);
+    const ease = gsap.parseEase(EASE.swatch);
+    paint(target.map(() => 0));
+    centerValue.textContent = format(0);
+    glide = gsap.to(state, {
+      t: length,
+      duration: length,
+      ease: "none",
+      onUpdate: () => paint(target.map((value, i) => value * ease(Math.min(1, Math.max(0, (state.t - i * stagger) / 0.8))))),
+      onComplete: done
+    });
+    paintCenter(true);
+  };
+  const select = (index, announce = false) => {
+    if (scope.disposed) return;
+    const next = index === null || !model.length ? null : (Math.round(index) % model.length + model.length) % model.length;
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    options.onSelect?.(selected);
+    const ring = selected === null ? null : model[selected];
+    root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { index: selected, label: ring?.label ?? null, value: ring?.value ?? null } }));
+  };
+  const ringAt = (event) => {
+    const box = canvas.getBoundingClientRect();
+    const scale = box.width ? geometry.size / box.width : 1;
+    const distance = Math.hypot((event.clientX - box.left) * scale - geometry.cx, (event.clientY - box.top) * scale - geometry.cy);
+    const near = geometry.radii.findIndex((r) => Math.abs(distance - r) <= geometry.thickness * 0.7);
+    return near < 0 ? null : near;
+  };
+  scope.on(canvas, "pointermove", (event) => select(ringAt(event)));
+  scope.on(canvas, "pointerdown", (event) => select(ringAt(event)));
+  scope.on(canvas, "pointerleave", (event) => {
+    if (event.pointerType === "mouse") select(null);
+  });
+  scope.on(canvas, "focus", () => {
+    if (selected === null && model.length) select(0, true);
+  });
+  scope.on(canvas, "blur", () => select(null));
+  scope.on(canvas, "keydown", (event) => {
+    const key = event.key;
+    const moves = { ArrowDown: (selected ?? -1) + 1, ArrowRight: (selected ?? -1) + 1, ArrowUp: (selected ?? 1) - 1, ArrowLeft: (selected ?? 1) - 1, Home: 0, End: model.length - 1, Escape: null };
+    if (!(key in moves) || !model.length) return;
+    event.preventDefault();
+    select(moves[key], true);
+  });
+  onWidth(root, scope, () => {
+    if (!model.length) return;
+    measure();
+    build();
+    paint(shown);
+    paintSelection(false);
+  });
+  draw(true);
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = modelOf();
+      draw(true);
+    },
+    select: (index) => select(index),
+    get selected() {
+      return selected;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/sankey-chart/engine.ts
+function createSankeyChart(root, initial = {}) {
+  if (!root) return inert({ update() {
+  }, select() {
+  }, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, "sankey");
+  const { plot, canvas } = frame;
+  let options = { ...initial };
+  let selected = null;
+  let hoverNode = null;
+  const uid = `mk-sankey-${Math.random().toString(36).slice(2, 8)}`;
+  const format = (value) => options.formatValue ? options.formatValue(value) : formatNumber(value);
+  const modelOf = () => {
+    const nodes = (options.nodes ?? []).map((node, i, all) => ({ id: String(node.id), label: String(node.label ?? node.id), color: node.color ?? slotColor(i, Math.max(2, all.length)) }));
+    const index = new Map(nodes.map((node, i) => [node.id, i]));
+    const links = (options.links ?? []).map((link, i) => ({ source: index.get(String(link.source)) ?? -1, target: index.get(String(link.target)) ?? -1, value: link.value, given: i })).filter((link) => link.source >= 0 && link.target >= 0 && link.source !== link.target && finite2(link.value) && link.value > 0);
+    const depth = nodes.map(() => 0);
+    for (let pass = 0; pass < nodes.length; pass++) {
+      let moved = false;
+      for (const link of links) {
+        if (depth[link.target] < depth[link.source] + 1 && depth[link.source] + 1 < nodes.length) {
+          depth[link.target] = depth[link.source] + 1;
+          moved = true;
+        }
+      }
+      if (!moved) break;
+    }
+    const columns = Math.max(0, ...depth) + 1;
+    nodes.forEach((_, i) => {
+      if (links.some((link) => link.source === i) || !links.some((link) => link.target === i)) return;
+      depth[i] = columns - 1;
+    });
+    const used = nodes.map((_, i) => links.some((link) => link.source === i || link.target === i));
+    const value = nodes.map((_, i) => Math.max(links.filter((link) => link.target === i).reduce((s, l) => s + l.value, 0), links.filter((link) => link.source === i).reduce((s, l) => s + l.value, 0)));
+    return { nodes, links, depth, columns, used, value };
+  };
+  let model = modelOf();
+  const hasData = () => model.links.length > 0;
+  let width = 600;
+  let height = 320;
+  const layoutOf = () => {
+    width = Math.max(240, Math.round(plot.clientWidth || root.clientWidth || 600));
+    height = Math.max(160, finite2(options.height) ? options.height : 320);
+    const nodeWidth2 = Math.max(4, finite2(options.nodeWidth) ? options.nodeWidth : 12);
+    const pad = Math.max(2, finite2(options.nodePadding) ? options.nodePadding : 14);
+    const top = 6;
+    const usable = height - top * 2;
+    const columns = Array.from({ length: model.columns }, (_, c) => model.nodes.map((_2, i) => i).filter((i) => model.used[i] && model.depth[i] === c));
+    const ky = Math.min(...columns.filter((list) => list.length).map((list) => (usable - pad * (list.length - 1)) / list.reduce((sum, i) => sum + model.value[i], 0)));
+    const step = model.columns > 1 ? (width - nodeWidth2) / (model.columns - 1) : 0;
+    const nodes = model.nodes.map(() => ({ x: 0, y0: 0, y1: 0 }));
+    for (const list of columns) {
+      const total = list.reduce((sum, i) => sum + model.value[i] * ky, 0) + pad * Math.max(0, list.length - 1);
+      let y = top + (usable - total) / 2;
+      for (const i of list) {
+        const h = Math.max(1, model.value[i] * ky);
+        nodes[i] = { x: model.depth[i] * step, y0: y, y1: y + h };
+        y += h + pad;
+      }
+    }
+    const out = /* @__PURE__ */ new Map();
+    const into = /* @__PURE__ */ new Map();
+    const centre = (i) => (nodes[i].y0 + nodes[i].y1) / 2;
+    const links = model.links.map(() => ({ sy: 0, ty: 0, width: 0 }));
+    const order = model.links.map((_, k) => k);
+    for (const k of [...order].sort((a, b) => centre(model.links[a].target) - centre(model.links[b].target))) {
+      const link = model.links[k];
+      const w = link.value * ky;
+      const at = out.get(link.source) ?? nodes[link.source].y0;
+      links[k].sy = at + w / 2;
+      links[k].width = w;
+      out.set(link.source, at + w);
+    }
+    for (const k of [...order].sort((a, b) => centre(model.links[a].source) - centre(model.links[b].source))) {
+      const link = model.links[k];
+      const at = into.get(link.target) ?? nodes[link.target].y0;
+      links[k].ty = at + links[k].width / 2;
+      into.set(link.target, at + links[k].width);
+    }
+    return { nodes, links };
+  };
+  let shown = null;
+  let rects = [];
+  let bands = [];
+  let names = [];
+  let glide = null;
+  scope.add(() => glide?.kill());
+  const nodeWidth = () => Math.max(4, finite2(options.nodeWidth) ? options.nodeWidth : 12);
+  const build = () => {
+    canvas.replaceChildren();
+    canvas.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    canvas.setAttribute("width", String(width));
+    canvas.setAttribute("height", String(height));
+    const defs = svg2("defs");
+    const flows = svg2("g", { "data-mk-part": "links" });
+    bands = model.links.map((link, k) => {
+      const gradient = svg2("linearGradient", { id: `${uid}-${k}`, gradientUnits: "userSpaceOnUse" });
+      const from = svg2("stop", { offset: "0" });
+      from.style.stopColor = model.nodes[link.source].color;
+      const to = svg2("stop", { offset: "1" });
+      to.style.stopColor = model.nodes[link.target].color;
+      gradient.append(from, to);
+      defs.append(gradient);
+      const band = svg2("path", { "data-mk-index": k });
+      band.style.fill = `url(#${uid}-${k})`;
+      flows.append(band);
+      return band;
+    });
+    const nodesLayer = svg2("g", { "data-mk-part": "nodes" });
+    rects = model.nodes.map((node, i) => {
+      const rect = svg2("rect", { width: nodeWidth(), rx: 3, "data-mk-node": i });
+      rect.style.fill = node.color;
+      if (!model.used[i]) rect.style.display = "none";
+      nodesLayer.append(rect);
+      return rect;
+    });
+    const labels = svg2("g", { "data-mk-part": "labels" });
+    names = model.nodes.map((node, i) => {
+      const text = svg2("text", { "dominant-baseline": "middle" });
+      text.textContent = node.label;
+      const amount = document.createElementNS(SVG_NS, "tspan");
+      amount.setAttribute("data-mk-part", "amount");
+      amount.textContent = ` ${format(model.value[i])}`;
+      text.append(amount);
+      if (!model.used[i]) text.style.display = "none";
+      labels.append(text);
+      return text;
+    });
+    canvas.append(defs, flows, nodesLayer, labels);
+  };
+  const paint = (layout2) => {
+    shown = layout2;
+    const w = nodeWidth();
+    layout2.nodes.forEach((node, i) => {
+      const rect = rects[i];
+      rect.setAttribute("x", String(round(node.x)));
+      rect.setAttribute("y", String(round(node.y0)));
+      rect.setAttribute("height", String(round(Math.max(1, node.y1 - node.y0))));
+      const last = model.depth[i] === model.columns - 1 && model.columns > 1;
+      const name = names[i];
+      const first = model.depth[i] === 0;
+      const x = round(last ? node.x - 8 : first ? node.x + w + 8 : node.x + w / 2);
+      const available = model.columns > 1 ? (width - w) / (model.columns - 1) - 20 : width - w - 16;
+      const characters = Math.max(3, Math.floor(available / 7));
+      const label = model.nodes[i].label;
+      if (name.firstChild) name.firstChild.textContent = label.length > characters ? `${label.slice(0, characters - 1)}\u2026` : label;
+      name.setAttribute("x", String(x));
+      name.setAttribute("y", String(round((node.y0 + node.y1) / 2 - 7)));
+      name.setAttribute("text-anchor", last ? "end" : first ? "start" : "middle");
+      const amount = name.querySelector("tspan");
+      amount?.setAttribute("x", String(x));
+      amount?.setAttribute("dy", "14");
+    });
+    layout2.links.forEach((link, k) => {
+      const { source, target } = model.links[k];
+      const x0 = layout2.nodes[source].x + w;
+      const x1 = layout2.nodes[target].x;
+      const xm = (x0 + x1) / 2;
+      const h = link.width / 2;
+      const [s0, s1, t0, t1] = [link.sy - h, link.sy + h, link.ty - h, link.ty + h].map(round);
+      bands[k].setAttribute("d", `M${round(x0)},${s0}C${round(xm)},${s0} ${round(xm)},${t0} ${round(x1)},${t0}L${round(x1)},${t1}C${round(xm)},${t1} ${round(xm)},${s1} ${round(x0)},${s1}Z`);
+      const gradient = canvas.querySelector(`#${uid}-${k}`);
+      gradient?.setAttribute("x1", String(round(x0)));
+      gradient?.setAttribute("x2", String(round(x1)));
+    });
+  };
+  const share = (part2, whole) => new Intl.NumberFormat(void 0, { style: "percent", maximumFractionDigits: 1 }).format(part2 / (whole || 1));
+  const paintSelection = (announce) => {
+    const lit = (k) => selected !== null ? k === selected : hoverNode !== null ? model.links[k].source === hoverNode || model.links[k].target === hoverNode : false;
+    const any = selected !== null || hoverNode !== null;
+    bands.forEach((band, k) => {
+      band.toggleAttribute("data-mk-on", lit(k));
+      band.toggleAttribute("data-mk-dim", any && !lit(k));
+    });
+    rects.forEach((rect, i) => rect.toggleAttribute("data-mk-dim", any && !model.links.some((link, k) => lit(k) && (link.source === i || link.target === i))));
+    if (!shown || selected === null && hoverNode === null) {
+      frame.tip(null);
+      return;
+    }
+    if (selected !== null) {
+      const link = model.links[selected];
+      const geometry = shown.links[selected];
+      const x = (shown.nodes[link.source].x + shown.nodes[link.target].x + nodeWidth()) / 2;
+      const y = (geometry.sy + geometry.ty) / 2 - geometry.width / 2;
+      const from = model.nodes[link.source];
+      const to = model.nodes[link.target];
+      const rows = [{ name: `${share(link.value, model.value[link.source])} de ${from.label}`, color: from.color, value: format(link.value) }];
+      frame.tip({ x: round(x), y: round(y), title: `${from.label} \u2192 ${to.label}`, rows });
+      if (announce) frame.live.textContent = `${from.label} a ${to.label}: ${format(link.value)}`;
+    } else {
+      const i = hoverNode;
+      const node = shown.nodes[i];
+      frame.tip({ x: round(node.x + nodeWidth() / 2), y: round(node.y0), title: model.nodes[i].label, rows: [{ name: "Total", color: model.nodes[i].color, value: format(model.value[i]) }] });
+    }
+  };
+  const draw = (animate) => {
+    glide?.kill();
+    const name = options.label ?? "Diagrama de flujo";
+    canvas.setAttribute("aria-label", hasData() ? `${name}. ${model.links.length} flujos entre ${model.used.filter(Boolean).length} etapas. Usa las flechas para recorrer los flujos.` : `${name}: ${options.emptyLabel ?? "sin datos"}`);
+    frame.fillTable(name, ["Flujo", "Valor"], model.links.map((link) => [`${model.nodes[link.source].label} \u2192 ${model.nodes[link.target].label}`, format(link.value)]));
+    frame.fillLegend([], false);
+    const ok = hasData();
+    frame.empty.hidden = ok;
+    frame.empty.textContent = options.emptyLabel ?? "Sin datos para mostrar";
+    plot.hidden = !ok;
+    if (!ok) {
+      canvas.replaceChildren();
+      shown = null;
+      selected = null;
+      return;
+    }
+    if (selected !== null && selected >= model.links.length) selected = null;
+    const before = shown;
+    const target = layoutOf();
+    const comparable = before && before.nodes.length === target.nodes.length && before.links.length === target.links.length;
+    build();
+    const done = () => {
+      paint(target);
+      paintSelection(false);
+    };
+    if (!animate || reduced()) return done();
+    if (comparable) {
+      const state = { t: 0 };
+      const mix = (a, b) => a + (b - a) * state.t;
+      glide = gsap.to(state, {
+        t: 1,
+        duration: 0.6,
+        ease: EASE.swatch,
+        onUpdate: () => paint({
+          nodes: target.nodes.map((node, i) => ({ x: mix(before.nodes[i].x, node.x), y0: mix(before.nodes[i].y0, node.y0), y1: mix(before.nodes[i].y1, node.y1) })),
+          links: target.links.map((link, k) => ({ sy: mix(before.links[k].sy, link.sy), ty: mix(before.links[k].ty, link.ty), width: mix(before.links[k].width, link.width) }))
+        }),
+        onComplete: done
+      });
+      return;
+    }
+    done();
+    const timeline = gsap.timeline();
+    rects.forEach((rect2, i) => {
+      timeline.fromTo(rect2, { scaleY: 0, transformOrigin: "50% 50%" }, { scaleY: 1, duration: 0.5, ease: EASE.swatch, clearProps: "transform" }, (model.depth[i] ?? 0) * 0.12);
+    });
+    timeline.fromTo(names, { opacity: 0 }, { opacity: 1, duration: 0.4, stagger: 0.02, clearProps: "opacity" }, 0.2);
+    const clip = svg2("clipPath", { id: `${uid}-wipe` });
+    const rect = svg2("rect", { x: 0, y: 0, width: 0, height });
+    clip.append(rect);
+    canvas.prepend(clip);
+    const flows = canvas.querySelector('[data-mk-part="links"]');
+    flows.setAttribute("clip-path", `url(#${uid}-wipe)`);
+    timeline.to(rect, { attr: { width }, duration: 0.9, ease: EASE.wipe, onComplete: () => {
+      flows.removeAttribute("clip-path");
+      clip.remove();
+    } }, 0.1);
+    glide = timeline;
+  };
+  const select = (index, announce = false) => {
+    if (scope.disposed) return;
+    const n = model.links.length;
+    const next = index === null || !n ? null : (Math.round(index) % n + n) % n;
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    options.onSelect?.(selected === null ? null : model.links[selected].given);
+    const link = selected === null ? null : model.links[selected];
+    root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { index: link?.given ?? null, source: link ? model.nodes[link.source].id : null, target: link ? model.nodes[link.target].id : null, value: link?.value ?? null } }));
+  };
+  scope.on(canvas, "pointermove", (event) => {
+    const target = event.target;
+    const band = target.closest("[data-mk-index]");
+    const node = target.closest("[data-mk-node]");
+    if (node) {
+      const i = Number(node.getAttribute("data-mk-node"));
+      if (selected !== null) select(null);
+      if (hoverNode !== i) {
+        hoverNode = i;
+        paintSelection(false);
+      }
+      return;
+    }
+    if (hoverNode !== null) {
+      hoverNode = null;
+      paintSelection(false);
+    }
+    select(band ? Number(band.getAttribute("data-mk-index")) : null);
+  });
+  scope.on(canvas, "pointerleave", (event) => {
+    if (event.pointerType !== "mouse") return;
+    hoverNode = null;
+    select(null);
+    paintSelection(false);
+  });
+  scope.on(canvas, "focus", () => {
+    if (selected === null && hasData()) select(0, true);
+  });
+  scope.on(canvas, "blur", () => select(null));
+  scope.on(canvas, "keydown", (event) => {
+    const key = event.key;
+    const moves = { ArrowDown: (selected ?? -1) + 1, ArrowRight: (selected ?? -1) + 1, ArrowUp: (selected ?? 1) - 1, ArrowLeft: (selected ?? 1) - 1, Home: 0, End: model.links.length - 1, Escape: null };
+    if (!(key in moves) || !hasData()) return;
+    event.preventDefault();
+    select(moves[key], true);
+  });
+  onWidth(root, scope, () => {
+    if (!hasData()) return;
+    const layout2 = layoutOf();
+    build();
+    paint(layout2);
+    paintSelection(false);
+  });
+  draw(true);
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = modelOf();
+      draw(true);
+    },
+    select: (index) => {
+      const at = index === null ? null : model.links.findIndex((link) => link.given === index);
+      select(at === null || at < 0 ? null : at);
+    },
+    get selected() {
+      return selected === null ? null : model.links[selected].given;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/heatmap-chart/engine.ts
+var LEFT = 28;
+var TOP = 18;
+function createHeatmapChart(root, initial = {}) {
+  if (!root) return inert({ update() {
+  }, select() {
+  }, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const frame = chartFrame(root, scope, "heatmap");
+  const { plot, canvas, keep } = frame;
+  let options = { ...initial };
+  let selected = null;
+  const scroller = document.createElement("div");
+  scroller.dataset.mkHeatmapScroll = "";
+  plot.prepend(scroller);
+  scroller.append(canvas);
+  scope.add(() => scroller.remove());
+  const scale = document.createElement("div");
+  scale.dataset.mkHeatmapScale = "";
+  scale.setAttribute("aria-hidden", "true");
+  root.insertBefore(scale, frame.legend);
+  scope.add(() => scale.remove());
+  const locale = () => options.locale ?? (document.documentElement.lang || "es");
+  const format = (value) => options.formatValue ? options.formatValue(value) : formatNumber(value);
+  const levels = () => Math.max(1, Math.min(8, Math.round(options.levels ?? 4)));
+  const modelOf = () => {
+    const values = /* @__PURE__ */ new Map();
+    const add = (key, value) => finite2(value) && values.set(key, (values.get(key) ?? 0) + value);
+    if (Array.isArray(options.data)) for (const datum of options.data) add(dayKey(toDate(datum.date)), datum.value);
+    else if (options.data) for (const [key, value] of Object.entries(options.data)) add(dayKey(toDate(key)), value);
+    const weeks = Math.max(1, Math.min(106, Math.round(options.weeks ?? 53)));
+    const firstDay = Number.isInteger(options.firstDay) && options.firstDay >= 0 && options.firstDay <= 6 ? options.firstDay : 1;
+    const end = toDate(options.end ?? /* @__PURE__ */ new Date());
+    const start = startOfWeek(addDays(end, -(weeks - 1) * 7), firstDay);
+    const days = [];
+    for (let date = start, i = 0; date <= end; date = addDays(date, 1), i++) {
+      const key = dayKey(date);
+      days.push({ key, date, value: values.get(key) ?? 0, week: Math.floor(i / 7), day: i % 7 });
+    }
+    const max = Math.max(0, ...days.map((each) => each.value));
+    return { days, weeks: (days[days.length - 1]?.week ?? 0) + 1, firstDay, max, total: days.reduce((sum, each) => sum + each.value, 0) };
+  };
+  let model = modelOf();
+  const levelOf = (value) => value <= 0 || !model.max ? 0 : Math.max(1, Math.ceil(value / model.max * levels()));
+  const fillOf = (level) => level === 0 ? "var(--mk-heatmap-empty)" : `color-mix(in srgb, ${options.color ?? "var(--mk-heatmap-color)"} ${Math.round(22 + 78 * level / levels())}%, var(--mk-heatmap-empty))`;
+  let cells = [];
+  let builtFrom = "";
+  let geometry = { cell: 12, gap: 3, width: 0, height: 0 };
+  const longDate = () => safeFormat(locale(), { weekday: "short", day: "numeric", month: "long", year: "numeric" });
+  const build = (animate) => {
+    canvas.replaceChildren();
+    const available = Math.max(0, (plot.clientWidth || root.clientWidth || 0) - LEFT);
+    const gap = 3;
+    const fit = available ? Math.floor(available / model.weeks - gap) : 12;
+    const cell = Math.max(10, Math.min(14, fit));
+    const width = LEFT + model.weeks * (cell + gap);
+    const height = TOP + 7 * (cell + gap);
+    geometry = { cell, gap, width, height };
+    canvas.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    canvas.setAttribute("width", String(width));
+    canvas.setAttribute("height", String(height));
+    plot.style.setProperty("--mk-heatmap-width", `${width}px`);
+    const months = svg2("g", { "data-mk-part": "months" });
+    const monthName = safeFormat(locale(), { month: "short" });
+    let last = -1;
+    for (const each of model.days) {
+      if (each.day !== 0) continue;
+      const month = addDays(each.date, 6).getMonth();
+      if (month === last) continue;
+      last = month;
+      if (each.week > model.weeks - 2 && model.weeks > 4) continue;
+      const text = svg2("text", { x: LEFT + each.week * (cell + gap), y: 10 });
+      text.textContent = capitalize(monthName.format(addDays(each.date, 6)).replace(".", ""));
+      months.append(text);
+    }
+    const names = weekdayNames(locale(), model.firstDay, "short");
+    const weekdays = svg2("g", { "data-mk-part": "weekdays" });
+    [1, 3, 5].forEach((row) => {
+      const text = svg2("text", { x: 0, y: round(TOP + row * (cell + gap) + cell / 2), "dominant-baseline": "middle" });
+      text.textContent = capitalize(names[row].replace(".", "")).slice(0, 3);
+      weekdays.append(text);
+    });
+    const grid = svg2("g", { "data-mk-part": "cells" });
+    cells = model.days.map((each, i) => {
+      const rect = svg2("rect", { x: LEFT + each.week * (cell + gap), y: TOP + each.day * (cell + gap), width: cell, height: cell, rx: 3, "data-mk-index": i, "data-mk-level": levelOf(each.value) });
+      rect.style.fill = fillOf(levelOf(each.value));
+      grid.append(rect);
+      return rect;
+    });
+    canvas.append(months, weekdays, grid);
+    builtFrom = model.days[0]?.key ?? "";
+    scroller.scrollLeft = scroller.scrollWidth;
+    if (animate && !reduced()) keep(gsap.fromTo(cells, { opacity: 0, scale: 0.3 }, { opacity: 1, scale: 1, duration: 0.35, ease: EASE.pop, clearProps: "opacity,transform", stagger: (i) => Math.min(0.7, (model.days[i].week + model.days[i].day) * 8e-3) }));
+  };
+  scope.add(() => plot.style.removeProperty("--mk-heatmap-width"));
+  const paintScale = () => {
+    scale.replaceChildren();
+    scale.hidden = options.legend === false || !model.days.length;
+    if (scale.hidden) return;
+    const less = document.createElement("span");
+    less.textContent = "Menos";
+    scale.append(less);
+    for (let level = 0; level <= levels(); level++) {
+      const swatch = document.createElement("i");
+      swatch.style.background = fillOf(level);
+      swatch.addEventListener("pointerenter", () => {
+        for (const cell of cells) cell.toggleAttribute("data-mk-dim", cell.getAttribute("data-mk-level") !== String(level));
+      });
+      swatch.addEventListener("pointerleave", () => {
+        for (const cell of cells) cell.removeAttribute("data-mk-dim");
+      });
+      scale.append(swatch);
+    }
+    const more = document.createElement("span");
+    more.textContent = "M\xE1s";
+    scale.append(more);
+  };
+  const unit = () => options.unit ?? "actividades";
+  const paintSelection = (announce) => {
+    cells.forEach((cell2, i) => cell2.toggleAttribute("data-mk-on", i === selected));
+    const each = selected === null ? null : model.days[selected];
+    if (!each) {
+      frame.tip(null);
+      return;
+    }
+    const { cell, gap } = geometry;
+    const x = LEFT + each.week * (cell + gap) + cell / 2 - scroller.scrollLeft;
+    const y = TOP + each.day * (cell + gap);
+    const title = capitalize(longDate().format(each.date));
+    frame.tip({ x, y, title, rows: [{ name: unit(), color: fillOf(Math.max(1, levelOf(each.value))), value: format(each.value) }] });
+    if (announce) frame.live.textContent = `${title}: ${format(each.value)} ${unit()}`;
+  };
+  const draw = (animate) => {
+    const name = options.label ?? "Actividad diaria";
+    canvas.setAttribute("aria-label", model.days.length ? `${name}. ${model.weeks} semanas, ${format(model.total)} ${unit()} en total. Usa las flechas para recorrer los d\xEDas.` : `${name}: ${options.emptyLabel ?? "sin datos"}`);
+    const active = model.days.filter((each) => each.value > 0);
+    frame.fillTable(`${name}: ${format(model.total)} ${unit()}`, ["D\xEDa", capitalize(unit())], active.map((each) => [capitalize(longDate().format(each.date)), format(each.value)]));
+    frame.fillLegend([], false);
+    paintScale();
+    if (selected !== null && selected >= model.days.length) selected = null;
+    const same = cells.length === model.days.length && cells.length > 0 && builtFrom === model.days[0].key;
+    if (same && animate) {
+      cells.forEach((cell, i) => {
+        const level = levelOf(model.days[i].value);
+        cell.setAttribute("data-mk-level", String(level));
+        cell.style.fill = fillOf(level);
+      });
+    } else build(animate);
+    paintSelection(false);
+  };
+  const select = (index, announce = false) => {
+    if (scope.disposed) return;
+    const next = index === null || !model.days.length ? null : Math.max(0, Math.min(model.days.length - 1, Math.round(index)));
+    if (next === selected) return;
+    selected = next;
+    paintSelection(announce);
+    const each = selected === null ? null : model.days[selected];
+    options.onSelect?.(each?.key ?? null, each?.value ?? null);
+    root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { date: each?.key ?? null, value: each?.value ?? null } }));
+  };
+  scope.on(canvas, "pointermove", (event) => {
+    const cell = event.target.closest("[data-mk-index]");
+    select(cell ? Number(cell.getAttribute("data-mk-index")) : null);
+  });
+  scope.on(canvas, "pointerleave", (event) => {
+    if (event.pointerType === "mouse") select(null);
+  });
+  scope.on(canvas, "focus", () => {
+    if (selected === null && model.days.length) select(model.days.length - 1, true);
+  });
+  scope.on(canvas, "blur", () => select(null));
+  scope.on(canvas, "keydown", (event) => {
+    const key = event.key;
+    const at = selected ?? model.days.length - 1;
+    const moves = { ArrowUp: at - 1, ArrowDown: at + 1, ArrowLeft: at - 7, ArrowRight: at + 7, PageUp: at - 28, PageDown: at + 28, Home: 0, End: model.days.length - 1, Escape: null };
+    if (!(key in moves) || !model.days.length) return;
+    event.preventDefault();
+    select(moves[key], true);
+    const cell = selected === null ? null : cells[selected];
+    if (cell) {
+      const x = Number(cell.getAttribute("x"));
+      if (x - scroller.scrollLeft < LEFT || x - scroller.scrollLeft > scroller.clientWidth - geometry.cell * 2) scroller.scrollLeft = x - scroller.clientWidth / 2;
+    }
+  });
+  onWidth(root, scope, () => {
+    build(false);
+    paintSelection(false);
+  });
+  draw(true);
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = modelOf();
+      draw(true);
+    },
+    select(date) {
+      const index = date === null ? -1 : model.days.findIndex((each) => each.key === date);
+      select(index < 0 ? null : index);
+    },
+    get selected() {
+      return selected === null ? null : model.days[selected]?.key ?? null;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/orbit-menu/engine.ts
+function createOrbitMenu(root, options = {}) {
+  const toggle = root?.querySelector("[data-mk-orbit-toggle]") ?? null;
+  const items2 = root ? [...root.querySelectorAll("[data-mk-orbit-item]")] : [];
+  if (!root || !toggle || !items2.length) {
+    if (root) warnOnce("orbit-menu: needs a [data-mk-orbit-toggle] and at least one [data-mk-orbit-item]");
+    return inert({ open() {
+    }, close() {
+    }, toggle() {
+    }, isOpen: false });
+  }
+  registerMotion();
+  const scope = createScope();
+  const radius = Number.isFinite(options.radius) ? Math.max(24, options.radius) : 96;
+  const start = (Number.isFinite(options.start) ? options.start : 0) * Math.PI / 180;
+  const angles = items2.map((_, i) => start + i * Math.PI * 2 / items2.length);
+  const valueOf2 = (item) => item.dataset.mkValue ?? String(items2.indexOf(item));
+  if (!toggle.children.length && !toggle.textContent?.trim()) {
+    const burger = document.createElement("span");
+    burger.dataset.mkOrbitBurger = "";
+    burger.setAttribute("aria-hidden", "true");
+    burger.append(document.createElement("i"), document.createElement("i"), document.createElement("i"));
+    toggle.append(burger);
+    scope.add(() => burger.remove());
+  }
+  scope.attr(toggle, "aria-expanded", "false");
+  scope.attr(toggle, "aria-haspopup", "true");
+  if (!toggle.getAttribute("aria-label") && !toggle.textContent?.trim()) scope.attr(toggle, "aria-label", "Men\xFA");
+  for (const item of items2) {
+    scope.attr(item, "inert", "");
+    if (item instanceof HTMLButtonElement) scope.attr(item, "type", item.getAttribute("type") ?? "button");
+  }
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "data-mk-state", "closed");
+  const states = items2.map((_, i) => ({ a: angles[i], r: 0 }));
+  const apply = (i) => {
+    const { a, r } = states[i];
+    gsap.set(items2[i], { x: r * Math.sin(a), y: -r * Math.cos(a) });
+  };
+  let timeline = null;
+  scope.add(() => {
+    timeline?.kill();
+    gsap.set(items2, { clearProps: "transform,opacity,filter,visibility" });
+  });
+  gsap.set(items2, { opacity: 0, scale: 0.3, visibility: "hidden" });
+  let open = false;
+  const set = (next, focus = false) => {
+    if (next === open) return;
+    open = next;
+    toggle.setAttribute("aria-expanded", String(open));
+    root.dataset.mkState = open ? "open" : "closed";
+    for (const item of items2) item.toggleAttribute("inert", !open);
+    timeline?.kill();
+    if (reduced()) {
+      items2.forEach((item, i) => {
+        states[i] = { a: angles[i], r: open ? radius : 0 };
+        apply(i);
+        gsap.set(item, { opacity: open ? 1 : 0, scale: open ? 1 : 0.3, filter: "none", visibility: open ? "visible" : "hidden" });
+      });
+    } else if (open) {
+      timeline = gsap.timeline();
+      items2.forEach((item, i) => {
+        const state = states[i];
+        if (state.r < 1) state.a = angles[i] - 0.7;
+        const at = i * 0.045;
+        gsap.set(item, { visibility: "visible" });
+        timeline.to(state, { r: radius, duration: 0.55, ease: EASE.swatch, onUpdate: () => apply(i) }, at);
+        timeline.to(state, { a: angles[i], duration: 0.5, ease: "power3.out", onUpdate: () => apply(i) }, at);
+        timeline.fromTo(item, { filter: "blur(8px)" }, { opacity: 1, scale: 1, filter: "blur(0px)", duration: 0.35, ease: "power2.out", clearProps: "filter" }, at);
+      });
+    } else {
+      timeline = gsap.timeline();
+      [...items2].reverse().forEach((item, k) => {
+        const i = items2.length - 1 - k;
+        const state = states[i];
+        const at = k * 0.03;
+        timeline.to(state, { r: 0, a: state.a + 0.6, duration: 0.3, ease: "power2.in", onUpdate: () => apply(i) }, at);
+        timeline.to(item, { opacity: 0, scale: 0.3, filter: "blur(6px)", duration: 0.28, ease: "power2.in", onComplete: () => {
+          gsap.set(item, { visibility: "hidden", clearProps: "filter" });
+        } }, at);
+      });
+    }
+    if (focus === "first") items2[0].focus();
+    if (focus === "toggle") toggle.focus();
+    options.onToggle?.(open);
+    root.dispatchEvent(new CustomEvent("mk:toggle", { bubbles: true, detail: { open } }));
+  };
+  scope.on(toggle, "click", (event) => {
+    press(toggle);
+    set(!open, !open && event.detail === 0 ? "first" : false);
+  });
+  scope.on(root, "click", (event) => {
+    const item = event.target.closest("[data-mk-orbit-item]");
+    if (!item || !items2.includes(item) || !open) return;
+    press(item);
+    const value = valueOf2(item);
+    options.onSelect?.(value);
+    root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { value } }));
+    if (options.closeOnSelect !== false) set(false, "toggle");
+  });
+  const sides = { ArrowUp: 0, ArrowRight: Math.PI / 2, ArrowDown: Math.PI, ArrowLeft: Math.PI * 3 / 2 };
+  scope.on(root, "keydown", (event) => {
+    const key = event.key;
+    if (key === "Escape" && open) {
+      event.preventDefault();
+      set(false, "toggle");
+      return;
+    }
+    if (!(key in sides)) return;
+    if (!open) {
+      if (document.activeElement !== toggle) return;
+      event.preventDefault();
+      set(true);
+    } else event.preventDefault();
+    const want = sides[key];
+    const gap = (a) => {
+      const d = Math.abs(((a - want) % (Math.PI * 2) + Math.PI * 3) % (Math.PI * 2) - Math.PI);
+      return d;
+    };
+    let best = 0;
+    angles.forEach((a, i) => {
+      if (gap(a) < gap(angles[best])) best = i;
+    });
+    items2[best].focus();
+  });
+  scope.on(document, "pointerdown", (event) => {
+    if (open && !root.contains(event.target)) set(false);
+  });
+  return {
+    open: () => set(true),
+    close: () => set(false),
+    toggle: () => set(!open),
+    get isOpen() {
+      return open;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+export {
+  enterMessages,
+  fitComposer,
+  scrollToLatest,
+  createThemePicker,
+  ICON_PATHS,
+  iconSvg,
+  TOAST_LIMIT,
+  getToasts,
+  subscribeToasts,
+  dismissToast,
+  removeToast,
+  clearToasts,
+  toast,
+  toastTimers,
+  createToaster,
+  PENDING_ID,
+  capturePending,
+  morphPendingToReply,
+  chatMessage,
+  createChat,
+  NAV_STYLES,
+  NAV_STYLE_ALIASES,
+  toNavStyle,
+  revealShell,
+  createNav,
+  createCursor,
+  createIsland,
+  PILL_ARROW,
+  createPillButton,
+  createToolbar,
+  createBidirectionalSlider,
+  createVoiceDots,
+  createPieChart,
+  createRadarChart,
+  createRadialChart,
+  createSankeyChart,
+  createHeatmapChart,
+  createOrbitMenu
+};
+//# sourceMappingURL=chunk-JXRS3OEA.js.map