@yewdiel21/motion-kit 0.17.0 → 0.18.0

package/dist/{chunk-7IQTMF7Y.js → chunk-Q7IW4FV3.js}

@@ -2700,7 +2700,7 @@ function createQuantity(root, options = {}) {
   const step = Number.isFinite(options.step) && options.step > 0 ? options.step : 1;
   const steps = Math.floor((max - min) / step + 1e-9);
   const upper = Math.min(max, Number((min + steps * step).toFixed(10)));
-  const normalize2 = (n) => Math.max(min, Math.min(upper, Number((min + Math.round((n - min) / step) * step).toFixed(10))));
+  const normalize3 = (n) => Math.max(min, Math.min(upper, Number((min + Math.round((n - min) / step) * step).toFixed(10))));
   const original = input.value;
   const disabled = options.disabled ?? input.disabled;
   const decrease = root.querySelector("[data-mk-quantity-decrease]");
@@ -2711,13 +2711,13 @@ function createQuantity(root, options = {}) {
   scope.attr(input, "disabled", disabled ? "" : null);
   scope.attr(root, "data-mk-ready", "");
   const initial = input.value.trim() ? Number(input.value) : NaN;
-  let value = normalize2(Number.isFinite(options.value) ? options.value : Number.isFinite(initial) ? initial : min);
+  let value = normalize3(Number.isFinite(options.value) ? options.value : Number.isFinite(initial) ? initial : min);
   let pendingReset = null;
   const typed = () => input.value.trim() && Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : NaN;
   const render = (syncInput = true) => {
     if (pendingReset) {
       if (pendingReset.eventPhase !== 0) return;
-      if (!pendingReset.defaultPrevented) value = normalize2(Number.isFinite(typed()) ? typed() : min);
+      if (!pendingReset.defaultPrevented) value = normalize3(Number.isFinite(typed()) ? typed() : min);
       pendingReset = null;
     }
     if (syncInput) input.value = String(value);
@@ -2728,7 +2728,7 @@ function createQuantity(root, options = {}) {
     if (scope.disposed || !Number.isFinite(next)) return;
     if (pendingReset?.eventPhase === 0) pendingReset = null;
     const previous = value;
-    value = normalize2(next);
+    value = normalize3(next);
     render(syncInput);
     if (notify && value !== previous) {
       options.onChange?.(value);
@@ -2744,7 +2744,7 @@ function createQuantity(root, options = {}) {
   });
   scope.on(input, "input", () => {
     const n = typed();
-    if (Number.isFinite(n) && normalize2(n) === n) commit(n, true, false);
+    if (Number.isFinite(n) && normalize3(n) === n) commit(n, true, false);
   });
   scope.on(input, "change", () => {
     if (Number.isFinite(typed())) setValue(typed());
@@ -6055,13 +6055,13 @@ function createRangeSlider(root, options = {}) {
   const places = Math.min(10, Math.max(decimals(step), decimals(min)));
   const fix = (n) => Number(n.toFixed(places));
   const upper = Math.min(max, fix(min + Math.floor((max - min) / step + 1e-9) * step));
-  const normalize2 = (n) => Math.max(min, Math.min(upper, fix(min + Math.round((n - min) / step) * step)));
+  const normalize3 = (n) => Math.max(min, Math.min(upper, fix(min + Math.round((n - min) / step) * step)));
   const disabled = options.disabled ?? inputs.some((input) => input.disabled);
   const output = root.querySelector("[data-mk-range-output]");
   const format = (n) => options.formatValue ? options.formatValue(n) : String(n);
   const originals = inputs.map((input) => input.value);
   const ordered = (list3) => pair ? [...list3].sort((a, b) => a - b) : list3;
-  const read = () => inputs.map((input) => input.value.trim() !== "" && Number.isFinite(Number(input.value)) ? normalize2(Number(input.value)) : NaN);
+  const read = () => inputs.map((input) => input.value.trim() !== "" && Number.isFinite(Number(input.value)) ? normalize3(Number(input.value)) : NaN);
   const authored = () => {
     const current4 = read();
     return inputs.map((input, i) => {
@@ -6069,7 +6069,7 @@ function createRangeSlider(root, options = {}) {
       if (written === void 0) return current4[i];
       const low = attrNumber(input, "min") ?? 0;
       const high = Math.max(low, attrNumber(input, "max") ?? 100);
-      return Number(input.value) === Math.min(high, Math.max(low, written)) ? normalize2(written) : current4[i];
+      return Number(input.value) === Math.min(high, Math.max(low, written)) ? normalize3(written) : current4[i];
     });
   };
   const initial = (() => {
@@ -6078,7 +6078,7 @@ function createRangeSlider(root, options = {}) {
     const fromInputs = authored();
     return inputs.map((_, i) => {
       const candidate = fromOption?.[i];
-      if (finite2(candidate)) return normalize2(candidate);
+      if (finite2(candidate)) return normalize3(candidate);
       return Number.isFinite(fromInputs[i]) ? fromInputs[i] : i === 0 ? min : upper;
     });
   })();
@@ -6188,7 +6188,7 @@ function createRangeSlider(root, options = {}) {
   };
   const take = (i) => {
     const raw = inputs[i].value;
-    const n = raw.trim() !== "" && Number.isFinite(Number(raw)) ? normalize2(Number(raw)) : NaN;
+    const n = raw.trim() !== "" && Number.isFinite(Number(raw)) ? normalize3(Number(raw)) : NaN;
     if (!Number.isFinite(n)) return false;
     let next = n;
     if (pair) next = i === 0 ? Math.min(next, values[1]) : Math.max(next, values[0]);
@@ -6257,7 +6257,7 @@ function createRangeSlider(root, options = {}) {
     setValue(next, notify = true) {
       if (scope.disposed) return;
       const list3 = Array.isArray(next) ? next : [next, next];
-      const candidate = inputs.map((_, i) => finite2(list3[i]) ? normalize2(list3[i]) : values[i]);
+      const candidate = inputs.map((_, i) => finite2(list3[i]) ? normalize3(list3[i]) : values[i]);
       values = ordered(candidate);
       render(dragging >= 0 ? "drag" : "glide");
       if (notify) commit(true);
@@ -8684,13 +8684,13 @@ function createPasswordStrength(root, options = {}) {
   let lit = 0;
   const paint = (animate) => {
     const previous = lit;
-    const level = input.value ? Math.max(1, result.score) : 0;
-    lit = level;
+    const level2 = input.value ? Math.max(1, result.score) : 0;
+    lit = level2;
     scope.attr(root, "data-mk-score", input.value ? String(result.score) : null);
     const bars = segments.map((segment) => segment.firstElementChild);
-    if (!animate || reduced()) gsap.set(bars, { scaleX: (i) => i < level ? 1 : 0 });
-    else if (level > previous) keep(gsap.fromTo(bars.slice(previous, level), { scaleX: 0 }, { scaleX: 1, duration: 0.35, ease: EASE.swatch, stagger: 0.07 }));
-    else if (level < previous) keep(gsap.to(bars.slice(level, previous).reverse(), { scaleX: 0, duration: 0.2, ease: "power2.in", stagger: 0.04 }));
+    if (!animate || reduced()) gsap.set(bars, { scaleX: (i) => i < level2 ? 1 : 0 });
+    else if (level2 > previous) keep(gsap.fromTo(bars.slice(previous, level2), { scaleX: 0 }, { scaleX: 1, duration: 0.35, ease: EASE.swatch, stagger: 0.07 }));
+    else if (level2 < previous) keep(gsap.to(bars.slice(level2, previous).reverse(), { scaleX: 0, duration: 0.2, ease: "power2.in", stagger: 0.04 }));
     if (label.textContent !== result.label) {
       if (!animate || reduced()) label.textContent = result.label;
       else {
@@ -21335,7 +21335,14 @@ function createSignaturePad(root, options = {}) {
   placeholder2.dataset.mkSignaturePlaceholder = "";
   placeholder2.setAttribute("aria-hidden", "true");
   placeholder2.textContent = options.placeholder ?? "Firma aqu\xED";
-  surface.append(svg2, placeholder2);
+  const pen = document.createElement("span");
+  pen.dataset.mkSignatureCursor = "";
+  pen.setAttribute("aria-hidden", "true");
+  const ghost = document.createElementNS(SVG_NS, "svg");
+  ghost.setAttribute("data-mk-signature-ghost", "");
+  ghost.setAttribute("aria-hidden", "true");
+  ghost.setAttribute("preserveAspectRatio", "none");
+  surface.append(svg2, ghost, placeholder2, pen);
   const footer = document.createElement("div");
   footer.dataset.mkSignatureFooter = "";
   const toolbar = document.createElement("div");
@@ -21346,7 +21353,11 @@ function createSignaturePad(root, options = {}) {
     const button2 = document.createElement("button");
     button2.type = "button";
     button2.dataset.mkSignatureAction = action;
-    button2.textContent = text;
+    const paths = { undo: "M9 5 4 10l5 5M4 10h9a6 6 0 0 1 6 6", redo: "m15 5 5 5-5 5m5-5h-9a6 6 0 0 0-6 6", clear: "m9 5 1-2h4l1 2M4 6h16M7 6l1 15h8l1-15M10 10v7m4-7v7" };
+    button2.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="${paths[action]}"/></svg>`;
+    const caption = document.createElement("span");
+    caption.textContent = text;
+    button2.append(caption);
     toolbar.append(button2);
     return button2;
   };
@@ -21358,13 +21369,17 @@ function createSignaturePad(root, options = {}) {
   status.dataset.mkSignatureStatus = "";
   status.setAttribute("role", "status");
   status.setAttribute("aria-live", "polite");
-  footer.append(status);
+  const heading = document.createElement("div");
+  heading.dataset.mkSignatureHeader = "";
+  const title = document.createElement("span");
+  title.textContent = options.label ?? "Tu firma";
+  heading.append(title, status);
   const hint = document.createElement("p");
   hint.dataset.mkSignatureHint = "";
   hint.id = `mk-signature-hint-${++nextId2}`;
   hint.textContent = options.hint ?? "Dibuja con el rat\xF3n, el dedo o un l\xE1piz. Puedes deshacer cada trazo.";
   svg2.setAttribute("aria-describedby", hint.id);
-  wrapper.append(surface, footer, hint);
+  wrapper.append(heading, surface, footer, hint);
   let hidden = null;
   if (options.name) {
     hidden = document.createElement("input");
@@ -21374,11 +21389,37 @@ function createSignaturePad(root, options = {}) {
   }
   root.append(wrapper);
   scope.add(() => wrapper.remove());
-  for (const name of ["data-mk-disabled", "data-mk-readonly", "data-mk-drawing", "data-mk-empty"]) scope.attr(root, name, null);
+  for (const name of ["data-mk-disabled", "data-mk-readonly", "data-mk-drawing", "data-mk-empty", "data-mk-pen-visible"]) scope.attr(root, name, null);
   scope.attr(root, "data-mk-ready", "");
   let dimensions = { width: 640, height: 240 };
   let active = null;
-  let feedback = null;
+  const effects = /* @__PURE__ */ new Set();
+  const statusCount = document.createElement("span");
+  const statusLabel = document.createElement("span");
+  let shown4 = null;
+  const paintStatus = () => {
+    const count = strokes.length;
+    if (shown4 && shown4.count === count && shown4.readOnly === readOnly) return;
+    const before = shown4;
+    shown4 = { count, readOnly };
+    const animate = before !== null && !reduced();
+    if (!count) {
+      status.textContent = "Sin firma";
+      if (animate && before.count) keep(blurIn(status, { from: "soft", duration: 0.25 }));
+      return;
+    }
+    statusLabel.replaceChildren(statusCount, ` ${count === 1 ? "trazo" : "trazos"} \xB7 ${readOnly ? "Solo lectura" : "Firma capturada"}`);
+    status.replaceChildren(statusLabel);
+    if (animate && before.count) keep(rollDigits(statusCount, String(count), count > before.count ? 1 : -1, 0.3));
+    else {
+      statusCount.textContent = String(count);
+      if (animate) keep(blurIn(status, { from: "soft", duration: 0.25 }));
+    }
+  };
+  const keep = (effect) => {
+    for (const animation of effects) if (animation.totalProgress() === 1) effects.delete(animation);
+    if (effect) effects.add(effect);
+  };
   const locked = () => disabled || readOnly;
   const update = () => {
     root.toggleAttribute("data-mk-empty", !strokes.length && !active);
@@ -21389,7 +21430,7 @@ function createSignaturePad(root, options = {}) {
     undoButton.disabled = locked() || !undoStack.length;
     redoButton.disabled = locked() || !redoStack.length;
     clearButton.disabled = locked() || !strokes.length;
-    status.textContent = strokes.length ? `${strokes.length} ${strokes.length === 1 ? "trazo" : "trazos"} \xB7 ${readOnly ? "Solo lectura" : "Firma capturada"}` : "Sin firma";
+    paintStatus();
     if (hidden) {
       hidden.disabled = disabled;
       hidden.value = JSON.stringify(exportData());
@@ -21432,39 +21473,103 @@ function createSignaturePad(root, options = {}) {
     redoStack = [];
   };
   const pulse = (button2) => {
-    feedback?.progress(1).kill();
+    keep(press(button2));
+    const icon2 = button2.querySelector("svg");
+    const turn = button2 === undoButton ? -50 : button2 === redoButton ? 50 : -14;
+    if (icon2 && !reduced()) keep(gsap.fromTo(icon2, { rotate: turn }, { rotate: 0, duration: 0.5, ease: EASE.click, overwrite: "auto", clearProps: "transform" }));
+  };
+  const wipeId = `mk-signature-wipe-${++nextId2}`;
+  let wipes = 0;
+  const animateInk = (before, reason) => {
     if (reduced()) return;
-    feedback = gsap.fromTo(button2, { scale: 0.95 }, { scale: 1, duration: 0.24, ease: EASE.click });
+    const { width, height } = dimensions;
+    const byX = (a, b) => (a.points[0]?.x ?? 0) - (b.points[0]?.x ?? 0);
+    const removed = before.filter((stroke) => !strokes.includes(stroke)).sort(byX);
+    const added = strokes.filter((stroke) => !before.includes(stroke)).sort(byX);
+    ghost.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    if (removed.length && reason === "clear") {
+      const svgNode = (tag, attributes) => {
+        const node = document.createElementNS(SVG_NS, tag);
+        for (const [name, value] of Object.entries(attributes)) node.setAttribute(name, String(value));
+        return node;
+      };
+      const points = removed.flatMap((stroke) => stroke.points);
+      const pad3 = inkWidth * 2 + 8;
+      const left = Math.min(...points.map((point) => point.x)) * width - pad3;
+      const right = Math.max(...points.map((point) => point.x)) * width + pad3;
+      const top = Math.max(0, Math.min(...points.map((point) => point.y)) * height - pad3);
+      const bottom = Math.min(height, Math.max(...points.map((point) => point.y)) * height + pad3);
+      const id = `${wipeId}-${++wipes}`;
+      const clip = svgNode("clipPath", { id });
+      const reveal = svgNode("rect", { x: left, y: 0, width: width * 2, height });
+      clip.append(reveal);
+      const ink = svgNode("g", { "clip-path": `url(#${id})` });
+      ink.append(...removed.map((stroke) => makePath(stroke, width, height)));
+      const edge = svgNode("rect", { x: left, y: top, width: 2, height: Math.max(24, bottom - top), rx: 1, fill: "currentColor", opacity: 0 });
+      ghost.append(clip, ink, edge);
+      const done = () => {
+        clip.remove();
+        ink.remove();
+        edge.remove();
+      };
+      const sweep = Math.min(0.6, Math.max(0.36, (right - left) / 900));
+      keep(gsap.timeline({ onComplete: done, onInterrupt: done }).to([reveal, edge], { attr: { x: right }, duration: sweep, ease: "power2.inOut" }, 0).to(edge, { opacity: 0.3, duration: 0.08 }, 0).to(edge, { opacity: 0, duration: 0.14 }, sweep - 0.12));
+    } else removed.forEach((stroke) => {
+      const path = makePath(stroke, width, height);
+      ghost.append(path);
+      const length = path.getTotalLength?.() ?? 0;
+      const done = () => path.remove();
+      if (!length) {
+        keep(gsap.to(path, { opacity: 0, duration: 0.25, onComplete: done }));
+        return;
+      }
+      path.style.strokeDasharray = `${length} ${length}`;
+      keep(gsap.timeline({ onComplete: done, onInterrupt: done }).fromTo(path, { strokeDashoffset: 0 }, { strokeDashoffset: length, duration: 0.5, ease: "power2.inOut" }, 0).to(path, { opacity: 0, duration: 0.16 }, 0.36));
+    });
+    const rendered = [...svg2.children];
+    added.forEach((stroke, index) => {
+      const path = rendered[strokes.indexOf(stroke)];
+      const length = path?.getTotalLength?.() ?? 0;
+      if (!path || !length) return;
+      path.style.strokeDasharray = `${length} ${length}`;
+      keep(gsap.fromTo(path, { strokeDashoffset: length }, { strokeDashoffset: 0, duration: 0.6, delay: Math.min(index * 0.08, 0.48), ease: EASE.wipe, clearProps: "strokeDasharray,strokeDashoffset" }));
+    });
   };
   const undo = () => {
     if (scope.disposed) return;
     cancel();
     if (!undoStack.length) return;
+    const before = strokes;
     redoStack.push(strokes);
     strokes = undoStack.pop();
     render();
     update();
     emit("undo");
+    animateInk(before, "undo");
   };
   const redo = () => {
     if (scope.disposed) return;
     cancel();
     if (!redoStack.length) return;
+    const before = strokes;
     undoStack.push(strokes);
     strokes = redoStack.pop();
     render();
     update();
     emit("redo");
+    animateInk(before, "redo");
   };
   const clear = () => {
     if (scope.disposed) return;
     cancel();
     if (!strokes.length) return;
+    const before = strokes;
     remember();
     strokes = [];
     render();
     update();
     emit("clear");
+    animateInk(before, "clear");
   };
   const form = hidden?.form;
   if (form) scope.on(form, "reset", (event) => {
@@ -21537,6 +21642,16 @@ function createSignaturePad(root, options = {}) {
     if (active?.pointerId === event.pointerId) cancel();
   });
   scope.on(window, "blur", cancel);
+  const movePen = (event) => {
+    const pointer2 = event;
+    const rect = surface.getBoundingClientRect();
+    root.toggleAttribute("data-mk-pen-visible", pointer2.pointerType !== "touch" && !locked());
+    pen.style.left = `${pointer2.clientX - rect.left}px`;
+    pen.style.top = `${pointer2.clientY - rect.top}px`;
+  };
+  scope.on(surface, "pointerenter", movePen);
+  scope.on(surface, "pointermove", movePen);
+  scope.on(surface, "pointerleave", () => root.removeAttribute("data-mk-pen-visible"));
   scope.on(document, "visibilitychange", () => {
     if (document.hidden) cancel();
   });
@@ -21549,7 +21664,7 @@ function createSignaturePad(root, options = {}) {
   scope.on(window, "resize", render);
   scope.add(() => {
     cancel();
-    feedback?.kill();
+    for (const effect of effects) effect.kill();
   });
   render();
   update();
@@ -21674,6 +21789,12 @@ var finite6 = (n) => Number.isFinite(n) && n >= 0;
 var clock = (n) => `${Math.floor(n / 60)}:${String(Math.floor(n % 60)).padStart(2, "0")}`;
 var playIcon = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 9 6-9 6Z"/></svg>';
 var pauseIcon = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 6v12M16 6v12"/></svg>';
+var level = (n) => typeof n === "number" && Number.isFinite(n) ? Math.max(0, Math.min(1, n)) : 0;
+var resample = (values, count) => count === values.length ? [...values] : Array.from({ length: count }, (_, k) => {
+  const from = Math.floor(k * values.length / count);
+  const slice = values.slice(from, Math.max(from + 1, Math.floor((k + 1) * values.length / count)));
+  return slice.reduce((sum, n) => sum + n, 0) / slice.length;
+});
 function createWaveformPlayer(root, options = {}) {
   if (!root) return inert({ play: async () => false, pause() {
   }, seek() {
@@ -21700,10 +21821,16 @@ function createWaveformPlayer(root, options = {}) {
   audio.hidden = true;
   const toggle = make("button", "toggle", container);
   toggle.type = "button";
+  const icon2 = make("span", "icon", toggle);
   const body = make("div", "body", container);
   const track = make("div", "track", body);
   const bars = make("div", "bars", track);
   bars.setAttribute("aria-hidden", "true");
+  const head = make("span", "head", track);
+  head.setAttribute("aria-hidden", "true");
+  const preview = make("span", "preview", track);
+  preview.setAttribute("aria-hidden", "true");
+  preview.hidden = true;
   const range = make("input", "seek", track);
   range.type = "range";
   range.min = "0";
@@ -21718,8 +21845,36 @@ function createWaveformPlayer(root, options = {}) {
   message.setAttribute("aria-live", "polite");
   scope.attr(root, "data-mk-ready", "");
   scope.attr(root, "data-mk-wave-state", "idle");
+  scope.attr(root, "data-mk-wave-scrubbing", null);
   let barNodes = [];
-  let effect;
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (effect) => {
+    for (const animation of effects) if (animation.totalProgress() === 1) effects.delete(animation);
+    if (effect) effects.add(effect);
+  };
+  let iconMotion = null;
+  let lastPlaying;
+  let lastRate = "";
+  let following = false;
+  const scrubbing = () => root.hasAttribute("data-mk-wave-scrubbing");
+  const paintProgress = (seconds, animate = true) => {
+    const progress = state.duration ? Math.max(0, Math.min(1, seconds / state.duration)) : 0;
+    track.style.setProperty("--mk-wave-progress", String(progress));
+    barNodes.forEach((bar, i) => {
+      const played = (i + 0.5) / barNodes.length <= progress;
+      if (bar.hasAttribute("data-mk-played") === played) return;
+      bar.toggleAttribute("data-mk-played", played);
+      if (animate && !scrubbing() && !reduced()) keep(gsap.fromTo(bar, { scaleY: 0.72 }, { scaleY: 1, duration: 0.35, ease: EASE.swatch, overwrite: "auto", clearProps: "transform" }));
+    });
+  };
+  const followPlayback = () => {
+    if (!scope.disposed && state.status === "playing") paintProgress(audio.currentTime);
+  };
+  const showPreview = (seconds, ratio) => {
+    preview.textContent = clock(seconds);
+    preview.style.setProperty("--mk-wave-at", String(Math.max(0.04, Math.min(0.96, ratio))));
+    preview.hidden = false;
+  };
   const snapshot = () => ({ ...state });
   const rates = () => {
     const values = opts.playbackRates === false ? [] : opts.playbackRates ?? [1, 1.5, 2];
@@ -21727,7 +21882,13 @@ function createWaveformPlayer(root, options = {}) {
   };
   const paint = () => {
     const playing = state.status === "playing";
-    toggle.innerHTML = playing || requested ? pauseIcon : playIcon;
+    const nextPlaying = playing || requested;
+    if (lastPlaying !== nextPlaying) {
+      icon2.innerHTML = nextPlaying ? pauseIcon : playIcon;
+      iconMotion?.kill();
+      if (lastPlaying !== void 0 && !reduced()) iconMotion = gsap.fromTo(icon2, { scale: 0.55, opacity: 0.3, filter: "blur(5px)" }, { scale: 1, opacity: 1, filter: "blur(0px)", duration: 0.3, ease: EASE.pop, clearProps: "transform,opacity,filter" });
+      lastPlaying = nextPlaying;
+    }
     toggle.setAttribute("aria-label", `${playing || requested ? "Pausar" : "Reproducir"} ${opts.label ?? "audio"}`);
     toggle.disabled = !!opts.disabled || !source;
     range.disabled = !!opts.disabled || !state.duration;
@@ -21738,10 +21899,22 @@ function createWaveformPlayer(root, options = {}) {
     time2.textContent = `${clock(state.currentTime)} / ${clock(state.duration)}`;
     rate.hidden = rates().length < 2;
     rate.disabled = !!opts.disabled;
-    rate.textContent = `${state.playbackRate}\xD7`;
+    const rateLabel = `${state.playbackRate}\xD7`;
+    if (lastRate !== rateLabel) {
+      if (lastRate) keep(rollDigits(rate, rateLabel, 1, 0.28));
+      else rate.textContent = rateLabel;
+      lastRate = rateLabel;
+    }
     rate.setAttribute("aria-label", `Velocidad ${state.playbackRate}\xD7. Cambiar velocidad`);
-    const progress = state.duration ? state.currentTime / state.duration : 0;
-    barNodes.forEach((bar, i) => bar.toggleAttribute("data-mk-played", (i + 0.5) / barNodes.length <= progress));
+    paintProgress(state.currentTime);
+    if (document.activeElement === range) showPreview(state.currentTime, state.duration ? state.currentTime / state.duration : 0);
+    if (playing && !following) {
+      following = true;
+      gsap.ticker.add(followPlayback);
+    } else if (!playing && following) {
+      following = false;
+      gsap.ticker.remove(followPlayback);
+    }
     root.setAttribute("data-mk-wave-state", state.status);
     message.textContent = state.error ?? (state.status === "loading" ? "Cargando audio\u2026" : state.status === "ended" ? "Audio finalizado" : "");
   };
@@ -21761,10 +21934,7 @@ function createWaveformPlayer(root, options = {}) {
     if (event) root.dispatchEvent(new CustomEvent(`mk:audio-${event}`, { bubbles: true, detail: snapshot() }));
   };
   const bounce = (target) => {
-    if (reduced()) return;
-    effect?.progress(1);
-    effect?.kill();
-    effect = gsap.fromTo(target, { scale: 0.88 }, { scale: 1, duration: 0.4, ease: EASE.swatch, clearProps: "transform" });
+    keep(press(target));
   };
   const fail = (message2) => {
     requested = false;
@@ -21825,17 +21995,27 @@ function createWaveformPlayer(root, options = {}) {
     pending = result;
     return result;
   };
-  const renderPeaks = () => {
+  const peakValues = () => {
     const supplied = Array.isArray(opts.peaks) ? opts.peaks : [];
-    const values = supplied.length ? supplied : Array(48).fill(0.24);
+    return supplied.length ? supplied.slice(0, 256).map(level) : Array(48).fill(0.24);
+  };
+  const barCount = (values) => {
+    const width = bars.clientWidth;
+    return width > 0 ? Math.max(12, Math.min(72, Math.floor((width + 3) / 8))) : values.length;
+  };
+  const renderPeaks = () => {
+    const values = peakValues();
     bars.replaceChildren();
-    barNodes = values.slice(0, 256).map((value) => {
+    barNodes = resample(values, barCount(values)).map((peak) => {
       const bar = make("i", "bar", bars);
-      const peak = typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;
       bar.style.height = `${8 + peak * 92}%`;
       return bar;
     });
+    paintProgress(state.currentTime, false);
   };
+  if (typeof ResizeObserver === "function") scope.observe(new ResizeObserver(() => {
+    if (!scope.disposed && barCount(peakValues()) !== barNodes.length) renderPeaks();
+  })).observe(bars);
   const update = (next) => {
     if (scope.disposed) return;
     const previousPeaks = opts.peaks;
@@ -21863,6 +22043,35 @@ function createWaveformPlayer(root, options = {}) {
     else void play();
   });
   scope.on(range, "input", () => seek(Number(range.value)));
+  scope.on(range, "pointermove", (event) => {
+    if (!state.duration || opts.disabled) return;
+    const rect = range.getBoundingClientRect();
+    if (!rect.width) return;
+    const inset = parseFloat(getComputedStyle(track).getPropertyValue("--mk-wave-inset")) || 0;
+    const ratio = Math.max(0, Math.min(1, (event.clientX - rect.left - inset) / Math.max(1, rect.width - inset * 2)));
+    showPreview(state.duration * ratio, ratio);
+  });
+  scope.on(range, "pointerleave", () => {
+    if (document.activeElement !== range) preview.hidden = true;
+  });
+  scope.on(range, "focus", () => {
+    if (state.duration) showPreview(state.currentTime, state.currentTime / state.duration);
+  });
+  scope.on(range, "blur", () => {
+    preview.hidden = true;
+  });
+  scope.on(range, "pointerdown", () => {
+    if (range.disabled) return;
+    root.setAttribute("data-mk-wave-scrubbing", "");
+    keep(press(head));
+  });
+  const release = () => {
+    if (!scrubbing()) return;
+    root.removeAttribute("data-mk-wave-scrubbing");
+    if (!reduced()) keep(gsap.fromTo(head, { scale: 1.12 }, { scale: 1, duration: 0.4, ease: EASE.swatch, overwrite: "auto", clearProps: "transform" }));
+  };
+  scope.on(window, "pointerup", release);
+  scope.on(window, "pointercancel", release);
   scope.on(rate, "click", () => {
     const available = rates();
     const index = available.indexOf(state.playbackRate);
@@ -21921,7 +22130,9 @@ function createWaveformPlayer(root, options = {}) {
     request++;
     requested = false;
     pending = null;
-    effect?.kill();
+    iconMotion?.kill();
+    for (const effect of effects) effect.kill();
+    gsap.ticker.remove(followPlayback);
     audio.pause();
     audio.removeAttribute("src");
     audio.load();
@@ -21938,6 +22149,7 @@ function createWaveformPlayer(root, options = {}) {
 var statusLabels = { sending: "Enviando", sent: "Enviado", delivered: "Entregado", read: "Le\xEDdo", failed: "No enviado" };
 function createVoiceMessageBubble(root, options = {}) {
   if (!root) return createWaveformPlayer(null, options);
+  registerMotion();
   const scope = createScope();
   let opts = { ...options };
   const content = document.createElement("div");
@@ -21981,6 +22193,12 @@ function createVoiceMessageBubble(root, options = {}) {
     player.update({ ...audio, label: opts.label ?? (opts.author ? `mensaje de voz de ${opts.author}` : "mensaje de voz") });
   };
   update(options);
+  let entrance = null;
+  if (!reduced()) {
+    content.style.transformOrigin = opts.direction === "outgoing" ? "right bottom" : "left bottom";
+    entrance = gsap.fromTo(content, { scale: 0.88, opacity: 0, filter: "blur(12px)", y: 10 }, { scale: 1, opacity: 1, filter: "blur(0px)", y: 0, duration: 0.65, ease: EASE.signature, clearProps: "transform,opacity,filter" });
+  }
+  scope.add(() => entrance?.kill());
   return {
     play: () => player.play(),
     pause: () => player.pause(),
@@ -22022,6 +22240,12 @@ function createDrilldownMenu(root, options = {}) {
   let focused = null;
   const remembered = /* @__PURE__ */ new Map();
   let animation = null;
+  let hoverMotion = null;
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (effect) => {
+    for (const animation2 of effects) if (animation2.totalProgress() === 1) effects.delete(animation2);
+    if (effect) effects.add(effect);
+  };
   const header = document.createElement("div");
   header.dataset.mkDrilldownHeader = "";
   const backButton = document.createElement("button");
@@ -22046,7 +22270,10 @@ function createDrilldownMenu(root, options = {}) {
   const empty = document.createElement("p");
   empty.dataset.mkDrilldownEmpty = "";
   empty.setAttribute("role", "status");
-  viewport.append(menu, empty);
+  const highlight = document.createElement("span");
+  highlight.dataset.mkDrilldownHighlight = "";
+  highlight.setAttribute("aria-hidden", "true");
+  viewport.append(highlight, menu, empty);
   backButton.setAttribute("aria-controls", menu.id);
   root.append(header, breadcrumb, viewport);
   scope.attr(root, "data-mk-ready", "");
@@ -22063,13 +22290,25 @@ function createDrilldownMenu(root, options = {}) {
     }
     return { valid: valid2, ancestors, items };
   };
-  const level = () => levelAt(path);
+  const level2 = () => levelAt(path);
   const enabled = () => [...menu.querySelectorAll("[data-mk-drilldown-item]")].filter((item) => !item.disabled);
   const buttonOf = (id) => enabled().find((item) => item.dataset.mkDrilldownItem === id);
+  const highlightItem = (button2) => {
+    hoverMotion?.kill();
+    for (const item of enabled()) item.toggleAttribute("data-mk-highlighted", item === button2);
+    if (!button2) {
+      highlight.style.opacity = "0";
+      return;
+    }
+    const geometry = { x: button2.offsetLeft + menu.offsetLeft, y: button2.offsetTop + menu.offsetTop, width: button2.offsetWidth, height: button2.offsetHeight, opacity: 1 };
+    if (reduced()) gsap.set(highlight, geometry);
+    else hoverMotion = gsap.to(highlight, { ...geometry, duration: 0.35, ease: EASE.swatch });
+  };
   const cancelMotion = () => {
     animation?.kill();
+    hoverMotion?.kill();
     animation = null;
-    gsap.set(menu, { clearProps: "transform,opacity,filter" });
+    gsap.set([menu, heading, breadcrumb, ...menu.children], { clearProps: "transform,opacity,filter" });
     gsap.set(viewport, { clearProps: "height" });
   };
   const roving = (id, focus = false) => {
@@ -22080,6 +22319,7 @@ function createDrilldownMenu(root, options = {}) {
     menu.tabIndex = target ? -1 : 0;
     if (focused) remembered.set(JSON.stringify(path), focused);
     if (focus) (target ?? menu).focus({ preventScroll: true });
+    if (focus) highlightItem(target);
   };
   const notifyPath = () => {
     const next = [...path];
@@ -22089,13 +22329,15 @@ function createDrilldownMenu(root, options = {}) {
   const render = (direction, focus, preferred) => {
     const oldHeight = viewport.getBoundingClientRect().height;
     cancelMotion();
-    const current3 = level();
+    highlightItem(null);
+    const current3 = level2();
     const label = config.label ?? "Actions";
     const title = current3.ancestors.at(-1)?.label ?? label;
     heading.textContent = title;
     backButton.hidden = path.length === 0;
     backButton.setAttribute("aria-label", config.backLabel ?? "Back");
     breadcrumb.setAttribute("aria-label", `${label} path`);
+    breadcrumb.hidden = path.length === 0;
     const labels = [label, ...current3.ancestors.map((item) => item.label)];
     crumbs.replaceChildren(...labels.map((text, index) => {
       const li = document.createElement("li");
@@ -22154,6 +22396,7 @@ function createDrilldownMenu(root, options = {}) {
       animation = gsap.timeline({ onComplete: () => {
         animation = null;
       } }).fromTo(menu, { x: 28 * direction, opacity: 0, filter: "blur(6px)" }, { x: 0, opacity: 1, filter: "blur(0px)", duration: 0.36, ease: EASE.signature, clearProps: "transform,opacity,filter" });
+      animation.fromTo([heading, breadcrumb], { y: -6, opacity: 0.3, filter: "blur(6px)" }, { y: 0, opacity: 1, filter: "blur(0px)", duration: 0.3, ease: EASE.pop, clearProps: "transform,opacity,filter" }, 0).fromTo([...menu.children], { x: 12 * direction, opacity: 0 }, { x: 0, opacity: 1, duration: 0.3, stagger: 0.035, ease: EASE.swatchLight, clearProps: "transform,opacity" }, 0.04);
       const nextHeight = viewport.getBoundingClientRect().height;
       if (oldHeight > 0 && nextHeight > 0 && oldHeight !== nextHeight) {
         animation.fromTo(viewport, { height: oldHeight }, { height: nextHeight, duration: 0.36, ease: EASE.signature, clearProps: "height" }, 0);
@@ -22175,16 +22418,22 @@ function createDrilldownMenu(root, options = {}) {
   };
   const open = (id) => {
     if (scope.disposed) return false;
-    const item = level().items.find((entry) => entry.id === id);
+    const item = level2().items.find((entry) => entry.id === id);
     if (!item || item.disabled || !branch(item)) return false;
     return navigate([...path, id], true, true);
   };
   const back = () => path.length ? navigate(path.slice(0, -1), true, true, path.at(-1)) : false;
   const reset = () => navigate([], true, root.contains(document.activeElement), path[0]);
   const activate = (id) => {
-    const item = level().items.find((entry) => entry.id === id);
+    const item = level2().items.find((entry) => entry.id === id);
     if (!item || item.disabled) return;
     if (branch(item)) return void open(id);
+    const button2 = buttonOf(id);
+    if (button2) {
+      for (const row of enabled()) row.toggleAttribute("data-mk-chosen", row === button2);
+      keep(press(button2));
+      keep(ringPulse(button2));
+    }
     const selected = copyItems([item])[0];
     const selectedPath = [...path, item.id];
     root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { item: selected, path: [...selectedPath] } }));
@@ -22198,8 +22447,20 @@ function createDrilldownMenu(root, options = {}) {
   });
   scope.on(menu, "focusin", (event) => {
     const button2 = event.target?.closest("[data-mk-drilldown-item]");
-    if (button2 && !button2.disabled) roving(button2.dataset.mkDrilldownItem, false);
+    if (button2 && !button2.disabled) {
+      roving(button2.dataset.mkDrilldownItem, false);
+      highlightItem(button2);
+    }
+  });
+  scope.on(menu, "pointerover", (event) => {
+    const button2 = event.target?.closest("[data-mk-drilldown-item]");
+    if (button2 && !button2.disabled) highlightItem(button2);
   });
+  scope.on(menu, "pointerleave", () => highlightItem(menu.contains(document.activeElement) ? buttonOf(focused ?? "") : null));
+  if (typeof ResizeObserver === "function") scope.observe(new ResizeObserver(() => {
+    const current3 = menu.querySelector("[data-mk-highlighted]");
+    if (current3) highlightItem(current3);
+  })).observe(menu);
   scope.on(root, "keydown", (event) => {
     const key2 = event.key;
     if ((key2 === "ArrowLeft" || key2 === "Escape") && path.length) {
@@ -22220,13 +22481,16 @@ function createDrilldownMenu(root, options = {}) {
     const button2 = event.target?.closest("[data-mk-drilldown-item]");
     if (!button2 || button2.disabled || !menu.contains(button2)) return;
     if (key2 === "Enter" || key2 === " " || key2 === "ArrowRight") {
-      const item = level().items.find((entry) => entry.id === button2.dataset.mkDrilldownItem);
+      const item = level2().items.find((entry) => entry.id === button2.dataset.mkDrilldownItem);
       if (key2 === "ArrowRight" && (!item || !branch(item))) return;
       event.preventDefault();
       activate(button2.dataset.mkDrilldownItem);
     }
   });
-  scope.on(backButton, "click", () => back());
+  scope.on(backButton, "click", () => {
+    keep(press(backButton));
+    back();
+  });
   scope.on(breadcrumb, "click", (event) => {
     const button2 = event.target?.closest("[data-mk-drilldown-crumb]");
     if (!button2 || !breadcrumb.contains(button2)) return;
@@ -22235,6 +22499,8 @@ function createDrilldownMenu(root, options = {}) {
   });
   scope.add(() => {
     cancelMotion();
+    for (const effect of effects) effect.kill();
+    gsap.killTweensOf([heading, breadcrumb, highlight]);
     remembered.clear();
     header.remove();
     breadcrumb.remove();
@@ -22282,7 +22548,7 @@ function createDrilldownMenu(root, options = {}) {
       return [...path];
     },
     get items() {
-      return copyItems(level().items);
+      return copyItems(level2().items);
     },
     element: root,
     destroy: () => scope.dispose()
@@ -22306,6 +22572,7 @@ function createWheelPicker(root, options = {}) {
   if (!root) return inert({ setValue() {
   }, setItems() {
   }, value: "" });
+  registerMotion();
   const scope = createScope(), uid2 = `mk-wheel-${++sequence25}`;
   let items = normalize(Array.isArray(options.items) ? options.items : []);
   const rawRows = Number.isFinite(options.visibleItems) ? Math.round(options.visibleItems) : 5;
@@ -22366,17 +22633,29 @@ function createWheelPicker(root, options = {}) {
   let typing;
   let prefix = "";
   let programmatic = null;
+  let glide = null;
+  let feedback = null;
   let dragging = null;
   let suppressClick = false;
   scope.add(() => {
     clearTimeout(timer2);
     clearTimeout(typing);
+    glide?.kill();
+    feedback?.kill();
   });
+  const radius = height * rows / 2, step = height / radius, camera = radius * 3;
   const paint = () => {
-    const offset = viewport.scrollTop / height;
+    const offset = viewport.scrollTop / height, flat = reduced();
     nodes.forEach((node, index) => {
-      const distance = Math.max(-3, Math.min(3, index - offset));
-      node.style.transform = reduced() ? "" : `perspective(600px) rotateX(${-distance * 14}deg) scale(${1 - Math.abs(distance) * 0.055})`;
+      const distance = index - offset;
+      const angle2 = distance * step, hidden = Math.abs(angle2) >= Math.PI / 2;
+      const depth = radius * (Math.cos(angle2) - 1);
+      const cameraScale = camera / (camera - depth);
+      const shiftY = (radius * Math.sin(angle2) - distance * height) / cameraScale;
+      node.style.transform = flat || hidden ? "" : `perspective(${camera.toFixed(0)}px) translate3d(0, ${shiftY.toFixed(3)}px, ${depth.toFixed(3)}px) rotateX(${(-angle2 * 180 / Math.PI).toFixed(3)}deg)`;
+      node.style.opacity = String((items[index].disabled ? 0.32 : 1) * (flat ? 1 : hidden ? 0 : Math.pow(Math.cos(angle2), 1.6)));
+      node.style.visibility = !flat && hidden ? "hidden" : "";
+      node.style.pointerEvents = !flat && Math.abs(angle2) > 1.2 ? "none" : "";
       node.setAttribute("aria-selected", String(index === current3));
     });
     input.value = items[current3]?.value ?? "";
@@ -22389,15 +22668,34 @@ function createWheelPicker(root, options = {}) {
     else {
       options.onChange?.(value);
       status.textContent = items[current3]?.label ?? "";
+      feedback?.kill();
+      if (!reduced()) feedback = gsap.fromTo(highlight, { scaleX: 0.94, scaleY: 0.82 }, { scaleX: 1, scaleY: 1, duration: 0.5, ease: EASE.click, clearProps: "transform" });
     }
     input.dispatchEvent(new Event(kind, { bubbles: true }));
     root.dispatchEvent(new CustomEvent(`mk:${kind}`, { bubbles: true, detail: { value, item: current3 >= 0 ? { ...items[current3] } : null } }));
   };
   const align = (animate) => {
+    glide?.kill();
+    glide = null;
     const top = Math.max(0, current3) * height;
-    if (animate && !reduced() && typeof viewport.scrollTo === "function") {
+    if (animate && !reduced()) {
       programmatic = top;
-      viewport.scrollTo({ top, behavior: "smooth" });
+      const proxy = { top: viewport.scrollTop };
+      glide = gsap.to(proxy, {
+        top,
+        duration: 0.55,
+        ease: EASE.swatch,
+        onUpdate: () => {
+          viewport.scrollTop = proxy.top;
+          paint();
+        },
+        onComplete: () => {
+          glide = null;
+          programmatic = null;
+          viewport.scrollTop = top;
+          paint();
+        }
+      });
     } else {
       programmatic = null;
       viewport.scrollTop = top;
@@ -22423,6 +22721,7 @@ function createWheelPicker(root, options = {}) {
   };
   const settle = () => {
     if (scope.disposed || dragging) return;
+    if (glide?.isActive()) return;
     clearTimeout(timer2);
     if (programmatic !== null) {
       programmatic = null;
@@ -22463,7 +22762,8 @@ function createWheelPicker(root, options = {}) {
     paint();
   };
   const interrupt = () => {
-    if (programmatic !== null && typeof viewport.scrollTo === "function") viewport.scrollTo({ top: viewport.scrollTop, behavior: "instant" });
+    glide?.kill();
+    glide = null;
     programmatic = null;
   };
   scope.on(viewport, "pointerdown", (event) => {
@@ -22591,6 +22891,2213 @@ function createWheelPicker(root, options = {}) {
   };
 }
 
+// src/components/stepper/engine.ts
+function createStepper(root, options = {}) {
+  if (!root) return inert({ value: 0, setValue() {
+  }, next() {
+  }, previous() {
+  }, reset() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (effect) => {
+    for (const prior of effects) if (prior.totalProgress() === 1) effects.delete(prior);
+    if (effect) effects.add(effect);
+  };
+  scope.add(() => {
+    effects.forEach((effect) => effect.kill());
+    effects.clear();
+  });
+  const items = (Array.isArray(options.items) ? options.items : []).filter((item) => item && typeof item.label === "string");
+  const clamp5 = (n) => Math.max(0, Math.min(Math.max(0, items.length - 1), Number.isFinite(n) ? Math.round(n) : 0));
+  const initial = clamp5(options.defaultValue ?? options.value ?? 0);
+  let value = clamp5(options.value ?? initial);
+  let furthest = value;
+  let pending = null;
+  const nav = document.createElement("nav");
+  nav.dataset.mkStepperBody = "";
+  nav.setAttribute("aria-label", options.label ?? "Progreso");
+  const list3 = document.createElement("ol");
+  list3.dataset.mkStepperList = "";
+  nav.append(list3);
+  const caption = document.createElement("span");
+  caption.dataset.mkStepperCaption = "";
+  caption.setAttribute("aria-live", "polite");
+  nav.append(caption);
+  root.append(nav);
+  scope.add(() => nav.remove());
+  const buttons = [];
+  const rows = [];
+  const marks = [];
+  items.forEach((item, index) => {
+    const row = document.createElement("li");
+    row.dataset.mkStepperItem = "";
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.dataset.mkStepperStep = String(index);
+    const marker = document.createElement("span");
+    marker.dataset.mkStepperMarker = "";
+    marker.setAttribute("aria-hidden", "true");
+    const copy = document.createElement("span");
+    copy.dataset.mkStepperCopy = "";
+    const title = document.createElement("span");
+    title.dataset.mkStepperLabel = "";
+    title.textContent = item.label;
+    copy.append(title);
+    if (item.description) {
+      const description = document.createElement("span");
+      description.dataset.mkStepperDescription = "";
+      description.textContent = item.description;
+      copy.append(description);
+    }
+    button2.append(marker, copy);
+    row.append(button2);
+    list3.append(row);
+    buttons.push(button2);
+    rows.push(row);
+    marks.push(marker);
+    scope.on(button2, "click", () => {
+      if (!button2.disabled && !button2.matches(":disabled")) choose(index, true);
+    });
+  });
+  const hidden = options.name ? document.createElement("input") : null;
+  if (hidden) {
+    hidden.type = "hidden";
+    hidden.name = options.name;
+    hidden.disabled = Boolean(options.disabled);
+    nav.append(hidden);
+  }
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "data-mk-variant", options.variant ?? "horizontal");
+  scope.attr(root, "data-mk-disabled", options.disabled ? "" : null);
+  const paint = (animate, before) => {
+    const nextEnabled = items.findIndex((item, index) => index > furthest && !item.disabled);
+    const availableThrough = Math.max(furthest, nextEnabled);
+    items.forEach((item, index) => {
+      const selected = index === value;
+      const complete = item.completed || index < value;
+      rows[index].toggleAttribute("data-mk-current", selected);
+      rows[index].toggleAttribute("data-mk-complete", Boolean(complete));
+      rows[index].toggleAttribute("data-mk-error", Boolean(item.error));
+      const button2 = buttons[index];
+      button2.disabled = Boolean(options.disabled || item.disabled || options.linear && index > availableThrough);
+      if (selected) button2.setAttribute("aria-current", "step");
+      else button2.removeAttribute("aria-current");
+      button2.setAttribute("aria-label", `${index + 1}. ${item.label}${item.error ? ", requiere atenci\xF3n" : complete ? ", completado" : ""}`);
+      marks[index].textContent = item.error ? "!" : complete ? "\u2713" : String(index + 1);
+    });
+    if (hidden) hidden.value = String(value);
+    const text = items.length ? `${value + 1} / ${items.length} \xB7 ${items[value]?.label ?? ""}` : "No hay pasos";
+    if (animate && !reduced()) keep(rollDigits(caption, text, value >= before ? 1 : -1, 0.3));
+    else caption.textContent = text;
+  };
+  const choose = (next, notify = false) => {
+    if (scope.disposed) return;
+    if (notify) pending = { value, furthest };
+    const before = value;
+    value = clamp5(next);
+    furthest = Math.max(furthest, value);
+    paint(before !== value, before);
+    if (before === value) return;
+    if (!reduced() && buttons[value]) {
+      keep(press(buttons[value]));
+      keep(gsap.fromTo(marks[value], { scale: 0.7, filter: "blur(4px)" }, { scale: 1, filter: "blur(0px)", duration: 0.4, ease: EASE.pop, overwrite: "auto", clearProps: "transform,filter" }));
+    }
+    if (notify) {
+      const emitted = value;
+      options.onChange?.(emitted);
+      if (!scope.disposed) root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value: emitted } }));
+    }
+  };
+  const move = (direction, notify = true) => {
+    if (options.disabled) return;
+    for (let i = value + direction; i >= 0 && i < items.length; i += direction) if (!items[i]?.disabled) {
+      choose(i, notify);
+      break;
+    }
+  };
+  const form = root.closest("form");
+  if (form) scope.on(form, "reset", (event) => scope.timeout(() => {
+    if (!scope.disposed && !event.defaultPrevented) {
+      furthest = initial;
+      choose(initial);
+    }
+  }, 0));
+  paint(false, value);
+  keep(blurIn(rows, { from: "soft", stagger: 0.04, duration: 0.35 }));
+  return {
+    get value() {
+      return value;
+    },
+    setValue(next, notify = false) {
+      const target = clamp5(next);
+      if (!notify && pending && target === pending.value) furthest = pending.furthest;
+      pending = null;
+      choose(target, notify);
+    },
+    next: (notify = true) => move(1, notify),
+    previous: (notify = true) => move(-1, notify),
+    reset: (notify = false) => {
+      pending = null;
+      furthest = initial;
+      choose(initial, notify);
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/radio-group/shared.ts
+var sequence26 = 0;
+function createChoices(root, prefix, options) {
+  if (!root) return inert({ value: null, setValue() {
+  }, reset() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (effect) => {
+    for (const prior of effects) if (prior.totalProgress() === 1) effects.delete(prior);
+    if (effect) effects.add(effect);
+  };
+  scope.add(() => {
+    effects.forEach((effect) => effect.kill());
+    effects.clear();
+  });
+  const part3 = (tag, parent, name2) => {
+    const el5 = document.createElement(tag);
+    el5.setAttribute(`data-mk-${prefix}-${name2}`, "");
+    parent.append(el5);
+    return el5;
+  };
+  const shell = part3("div", root, "body");
+  scope.add(() => shell.remove());
+  const group = part3("div", shell, "options");
+  group.setAttribute("role", "radiogroup");
+  group.setAttribute("aria-label", options.label ?? "Elige una opci\xF3n");
+  group.setAttribute("aria-required", String(Boolean(options.required)));
+  if (options.disabled) group.setAttribute("aria-disabled", "true");
+  const message = part3("span", shell, "message");
+  message.id = `mk-${prefix}-message-${++sequence26}`;
+  message.setAttribute("aria-live", "polite");
+  group.setAttribute("aria-describedby", message.id);
+  if (options.error) group.setAttribute("aria-invalid", "true");
+  const seen = /* @__PURE__ */ new Set();
+  const items = (Array.isArray(options.items) ? options.items : []).filter((item) => {
+    if (!item || typeof item.value !== "string" || seen.has(item.value)) return false;
+    seen.add(item.value);
+    return true;
+  });
+  const name = options.name ?? `mk-${prefix}-${sequence26}`;
+  const valid2 = (candidate) => candidate != null && items.some((item) => item.value === candidate) ? candidate : null;
+  const initial = valid2(options.defaultValue !== void 0 ? options.defaultValue : options.value);
+  let value = valid2(options.value !== void 0 ? options.value : initial);
+  const labels = [];
+  const inputs = [];
+  for (const item of items) {
+    const label = part3("label", group, "option");
+    const input = part3("input", label, "input");
+    input.type = "radio";
+    input.name = name;
+    input.value = item.value;
+    input.required = Boolean(options.required);
+    input.disabled = Boolean(options.disabled || item.disabled);
+    input.defaultChecked = item.value === initial;
+    const mark = part3("span", label, "mark");
+    mark.setAttribute("aria-hidden", "true");
+    mark.textContent = item.symbol ?? "";
+    const copy = part3("span", label, "copy");
+    part3("span", copy, "label").textContent = item.label;
+    if (item.description) part3("span", copy, "description").textContent = item.description;
+    if (options.error) {
+      input.setAttribute("aria-invalid", "true");
+      input.setAttribute("aria-describedby", message.id);
+    }
+    labels.push(label);
+    inputs.push(input);
+  }
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "data-mk-variant", options.variant ?? "pill");
+  scope.attr(root, "data-mk-disabled", options.disabled ? "" : null);
+  scope.attr(root, "data-mk-error", options.error ? "" : null);
+  const paint = (animate, before) => {
+    inputs.forEach((input, index) => {
+      input.checked = input.value === value;
+      labels[index].toggleAttribute("data-mk-selected", input.checked);
+    });
+    const caption = options.error ?? (items.length ? options.caption?.(value) ?? "" : "No hay opciones");
+    if (animate && !reduced()) keep(rollDigits(message, caption, Number(value) >= Number(before) ? 1 : -1, 0.28));
+    else message.textContent = caption;
+    const at = (candidate) => items.findIndex((item) => item.value === candidate);
+    options.decorate?.(labels, at(value), at(before), animate && before !== value && !reduced(), keep);
+  };
+  const choose = (next, notify = false, animate = true) => {
+    if (scope.disposed) return;
+    const target = valid2(next);
+    const before = value;
+    value = target;
+    paint(animate, before);
+    if (before === value) return;
+    const index = items.findIndex((item) => item.value === value);
+    if (animate && index >= 0 && !reduced()) {
+      keep(press(labels[index]));
+      keep(gsap.fromTo(labels[index].querySelector(`[data-mk-${prefix}-mark]`), { scale: 0.65, filter: "blur(4px)" }, { scale: 1, filter: "blur(0px)", duration: 0.4, ease: EASE.swatch, overwrite: "auto", clearProps: "transform,filter" }));
+    }
+    if (notify) {
+      const emitted = value;
+      options.onChange?.(emitted);
+      if (!scope.disposed) root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value: options.eventValue ? options.eventValue(emitted) : emitted } }));
+    }
+  };
+  inputs.forEach((input) => scope.on(input, "change", () => {
+    if (!input.disabled && !input.matches(":disabled") && input.checked) choose(input.value, true);
+    else paint(false, value);
+  }));
+  const form = inputs[0]?.form;
+  if (form) scope.on(form, "reset", (event) => {
+    scope.timeout(() => {
+      if (!scope.disposed && !event.defaultPrevented) choose(initial, false);
+    }, 0);
+  });
+  paint(false, value);
+  keep(blurIn(labels, { from: "soft", stagger: 0.035, duration: 0.35 }));
+  return { get value() {
+    return value;
+  }, setValue: choose, reset: (notify = false) => choose(initial, notify), destroy: () => scope.dispose() };
+}
+
+// src/components/radio-group/engine.ts
+function createRadioGroup(root, options = {}) {
+  return createChoices(root, "radio", options);
+}
+
+// src/components/equalizer-slider/shared.ts
+var finite7 = (n) => typeof n === "number" && Number.isFinite(n);
+var sequence27 = 0;
+function createNumericRange(root, options, design) {
+  if (!root) return inert({ value: design.value, setValue() {
+  }, reset() {
+  }, configure() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (effect) => {
+    for (const prior of effects) if (prior.totalProgress() === 1) effects.delete(prior);
+    if (effect) effects.add(effect);
+  };
+  scope.add(() => {
+    effects.forEach((effect) => effect.kill());
+    effects.clear();
+  });
+  let min = finite7(options.min) ? options.min : design.min;
+  let max = finite7(options.max) && options.max > min ? options.max : Math.max(min + 1, design.max);
+  let step = finite7(options.step) && options.step > 0 ? options.step : 1;
+  let lastStep = Math.max(0, Math.floor((max - min) / step + 1e-8));
+  let format = options.formatValue ?? design.format;
+  const snap = (n) => Number((min + Math.max(0, Math.min(lastStep, Math.round((n - min) / step))) * step).toFixed(8));
+  const initial = snap(finite7(options.defaultValue) ? options.defaultValue : finite7(options.value) ? options.value : design.value);
+  let value = snap(finite7(options.value) ? options.value : initial);
+  let committed = value;
+  let held = false;
+  const prefix = design.prefix;
+  const part3 = (tag, parent, name) => {
+    const el5 = document.createElement(tag);
+    el5.setAttribute(`data-mk-${prefix}-${name}`, "");
+    parent.append(el5);
+    return el5;
+  };
+  const shell = part3("div", root, "body");
+  scope.add(() => shell.remove());
+  const header = part3("div", shell, "header");
+  const label = part3("label", header, "label");
+  label.textContent = options.label ?? design.label;
+  const output = part3("output", header, "output");
+  output.setAttribute("aria-hidden", "true");
+  const track = part3("div", shell, "track");
+  const thumb = part3("span", track, "thumb");
+  thumb.setAttribute("aria-hidden", "true");
+  const input = part3("input", track, "input");
+  input.type = "range";
+  input.min = String(min);
+  input.max = String(max);
+  input.step = String(step);
+  input.defaultValue = String(initial);
+  input.value = String(value);
+  input.id = `mk-${prefix}-${++sequence27}`;
+  label.htmlFor = input.id;
+  input.disabled = Boolean(options.disabled);
+  if (options.name) input.name = options.name;
+  const message = part3("span", shell, "message");
+  message.textContent = options.error ?? "";
+  if (options.error) {
+    message.id = `${input.id}-error`;
+    input.setAttribute("aria-invalid", "true");
+    input.setAttribute("aria-describedby", message.id);
+  }
+  const ends = part3("div", shell, "ends");
+  ends.setAttribute("aria-hidden", "true");
+  const minEnd = part3("span", ends, "min");
+  minEnd.textContent = format(min);
+  const maxEnd = part3("span", ends, "max");
+  maxEnd.textContent = format(max);
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "data-mk-disabled", options.disabled ? "" : null);
+  scope.attr(root, "data-mk-error", options.error ? "" : null);
+  scope.attr(root, "data-mk-held", null);
+  scope.attr(root, "style", root.getAttribute("style"));
+  const decorate = design.decorate?.({ root, track, thumb, scope, keep });
+  let shown4 = null;
+  let glide = null;
+  scope.add(() => glide?.kill());
+  const show = (ratio, animate) => {
+    shown4 = ratio;
+    root.style.setProperty(`--mk-${prefix}-ratio`, String(ratio));
+    decorate?.(ratio, value, animate);
+  };
+  const paint = (animate, before) => {
+    const ratio = (value - min) / (max - min);
+    const text = format(value);
+    input.value = String(value);
+    input.setAttribute("aria-valuetext", text);
+    if (animate && !held && !reduced()) keep(rollDigits(output, text, value >= before ? 1 : -1, 0.3));
+    else {
+      const roll = rollDigits(output, text, value >= before ? 1 : -1, 0);
+      roll?.progress(1).kill();
+      output.textContent = text;
+    }
+    glide?.kill();
+    glide = null;
+    if (animate && !held && !reduced() && shown4 !== null && Math.abs(ratio - shown4) > 1e-4) {
+      const proxy = { ratio: shown4 };
+      glide = gsap.to(proxy, { ratio, duration: 0.5, ease: EASE.swatch, onUpdate: () => show(Math.max(0, Math.min(1, proxy.ratio)), true) });
+    } else show(ratio, animate && !held);
+  };
+  const emit = (type) => {
+    if (scope.disposed) return;
+    const emitted = value;
+    (type === "input" ? options.onInput : options.onChange)?.(emitted);
+    if (!scope.disposed) root.dispatchEvent(new CustomEvent(`mk:${type}`, { bubbles: true, detail: { value: emitted } }));
+  };
+  const set = (next, notify = false, animate = true) => {
+    if (scope.disposed || !finite7(next)) return;
+    const before = value;
+    value = snap(next);
+    paint(animate, before);
+    if (notify && value !== before) {
+      emit("input");
+      committed = value;
+      emit("change");
+    } else if (!notify && value !== before) committed = value;
+  };
+  scope.on(input, "input", () => {
+    if (input.disabled || input.matches(":disabled")) {
+      input.value = String(value);
+      return;
+    }
+    const before = value;
+    value = snap(Number(input.value));
+    paint(true, before);
+    if (value !== before) emit("input");
+  });
+  scope.on(input, "change", () => {
+    if (input.disabled || input.matches(":disabled")) return;
+    const before = value;
+    value = snap(Number(input.value));
+    if (value !== before) paint(true, before);
+    if (value !== committed) {
+      committed = value;
+      emit("change");
+    }
+  });
+  scope.on(input, "pointerdown", () => {
+    if (input.disabled || input.matches(":disabled")) return;
+    held = true;
+    root.setAttribute("data-mk-held", "");
+    keep(press(thumb));
+  });
+  const release = () => {
+    if (!held) return;
+    held = false;
+    root.removeAttribute("data-mk-held");
+    if (!reduced()) keep(gsap.fromTo(thumb, { scale: 1.12 }, { scale: 1, duration: 0.4, ease: EASE.swatch, overwrite: "auto", clearProps: "transform" }));
+  };
+  scope.on(window, "pointerup", release);
+  scope.on(window, "pointercancel", release);
+  scope.on(input, "blur", release);
+  if (input.form) scope.on(input.form, "reset", (event) => scope.timeout(() => {
+    if (!scope.disposed && !event.defaultPrevented) set(initial);
+  }, 0));
+  const configure = (next, notify = false) => {
+    if (scope.disposed) return;
+    const before = value;
+    if (finite7(next.min)) min = next.min;
+    if (finite7(next.max)) max = next.max > min ? next.max : min + 1;
+    if (finite7(next.step) && next.step > 0) step = next.step;
+    if (next.format) format = next.format;
+    lastStep = Math.max(0, Math.floor((max - min) / step + 1e-8));
+    input.min = String(min);
+    input.max = String(max);
+    input.step = String(step);
+    const ends2 = [[minEnd, format(min)], [maxEnd, format(max)]];
+    for (const [end, text] of ends2) {
+      if (reduced()) end.textContent = text;
+      else keep(rollDigits(end, text, 1, 0.3));
+    }
+    value = snap(finite7(next.value) ? next.value : value);
+    paint(true, before);
+    if (value !== before) {
+      committed = value;
+      if (notify) {
+        emit("input");
+        emit("change");
+      }
+    }
+  };
+  paint(false, value);
+  return { get value() {
+    return value;
+  }, setValue: set, reset: (notify = false) => set(initial, notify), configure, destroy: () => scope.dispose() };
+}
+
+// src/components/equalizer-slider/engine.ts
+function createEqualizerSlider(root, options = {}) {
+  return createNumericRange(root, options, {
+    prefix: "equalizer",
+    label: "Volumen",
+    min: 0,
+    max: 100,
+    value: 60,
+    format: (n) => `${n} %`,
+    decorate({ track, keep }) {
+      const wave = document.createElement("span");
+      wave.dataset.mkEqualizerWave = "";
+      wave.setAttribute("aria-hidden", "true");
+      track.prepend(wave);
+      const count = Math.max(12, Math.min(72, Math.round(Number.isFinite(options.bars) ? options.bars : 40)));
+      const bars = Array.from({ length: count }, (_, i) => {
+        const bar = document.createElement("span");
+        const supplied = options.waveform?.[i % options.waveform.length];
+        const height = Number.isFinite(supplied) ? Math.max(0.1, Math.min(1, supplied)) : 0.25 + 0.75 * Math.abs(Math.sin(i * 1.73) * Math.cos(i * 0.41));
+        bar.style.height = `${height * 100}%`;
+        wave.append(bar);
+        return bar;
+      });
+      return (ratio, _value, animate) => bars.forEach((bar, i) => {
+        const on = i / Math.max(1, count - 1) <= ratio;
+        const changed = bar.hasAttribute("data-mk-on") !== on;
+        bar.toggleAttribute("data-mk-on", on);
+        if (animate && changed && !reduced()) keep(gsap.fromTo(bar, { scaleY: 0.72 }, { scaleY: 1, duration: 0.35, ease: EASE.swatch, overwrite: "auto", clearProps: "transform" }));
+      });
+    }
+  });
+}
+
+// src/components/temperature-slider/engine.ts
+var RANGE = { C: { min: 16, max: 30, value: 22 }, F: { min: 60, max: 86, value: 72 } };
+var convert = (value, from, to) => from === to ? value : to === "F" ? value * 9 / 5 + 32 : (value - 32) * 5 / 9;
+function createTemperatureSlider(root, options = {}) {
+  let unit = options.unit === "F" ? "F" : "C";
+  const formatFor = (next) => (n) => `${n}\xB0${next}`;
+  const range = createNumericRange(root, options, {
+    prefix: "temperature",
+    label: "Temperatura",
+    ...RANGE[unit],
+    format: formatFor(unit),
+    decorate({ track, thumb }) {
+      const rail = document.createElement("span");
+      rail.dataset.mkTemperatureRail = "";
+      rail.setAttribute("aria-hidden", "true");
+      track.prepend(rail);
+      const fill = document.createElement("span");
+      fill.dataset.mkTemperatureFill = "";
+      rail.append(fill);
+      const ticks = document.createElement("span");
+      ticks.dataset.mkTemperatureTicks = "";
+      ticks.setAttribute("aria-hidden", "true");
+      for (let i = 0; i <= 14; i++) ticks.append(document.createElement("i"));
+      track.prepend(ticks);
+      thumb.textContent = "\xB7\xB7";
+      return (ratio) => {
+        root?.style.setProperty("--mk-temperature-warm", `${Math.round(ratio * 100)}%`);
+        fill.style.width = `${ratio * 100}%`;
+      };
+    }
+  });
+  return {
+    get value() {
+      return range.value;
+    },
+    get unit() {
+      return unit;
+    },
+    setValue: range.setValue,
+    reset: range.reset,
+    setUnit(next, limits = {}, notify = false) {
+      const target = next === "F" ? "F" : "C";
+      const value = Math.round(convert(range.value, unit, target));
+      unit = target;
+      range.configure({ min: limits.min ?? RANGE[target].min, max: limits.max ?? RANGE[target].max, step: limits.step, format: options.formatValue ?? formatFor(target), value }, notify);
+    },
+    destroy: range.destroy
+  };
+}
+
+// src/components/rating-scale/engine.ts
+var SENTIMENTS = ["Muy mal", "Mal", "Regular", "Bien", "Muy bien"];
+var SYMBOLS = ["\u2322", "\u2322", "\u2212", "\u2323", "\u2323"];
+function createRatingScale(root, options = {}) {
+  if (!root) return inert({ value: null, setValue() {
+  }, reset() {
+  } });
+  const sentiment = options.variant === "sentiment";
+  const min = Number.isFinite(options.min) ? Math.round(options.min) : sentiment ? 1 : 0;
+  const max = Number.isFinite(options.max) ? Math.max(min, Math.min(min + 20, Math.round(options.max))) : sentiment ? min + 4 : min + 10;
+  const labels = options.labels ?? (sentiment ? SENTIMENTS : []);
+  const items = Array.from({ length: max - min + 1 }, (_, i) => ({
+    value: String(min + i),
+    label: labels[i] ?? String(min + i),
+    symbol: sentiment ? SYMBOLS[Math.min(4, Math.round(i / Math.max(1, max - min) * 4))] : String(min + i)
+  }));
+  const normalize3 = (value) => value != null && Number.isFinite(value) ? String(Math.max(min, Math.min(max, Math.round(value)))) : null;
+  const instance = createChoices(root, "rating-scale", {
+    ...options,
+    variant: sentiment ? "sentiment" : "numbered",
+    items,
+    value: normalize3(options.value !== void 0 ? options.value : options.defaultValue),
+    defaultValue: normalize3(options.defaultValue !== void 0 ? options.defaultValue : options.value),
+    caption: (value) => value === null ? "Sin responder" : labels[Number(value) - min] ?? `${value} de ${max}`,
+    eventValue: (value) => value === null ? null : Number(value),
+    onChange: (value) => options.onChange?.(value === null ? null : Number(value)),
+    decorate(labels2, index, previous, animate, keep) {
+      labels2.forEach((label, i) => label.toggleAttribute("data-mk-in-range", !sentiment && index >= 0 && i < index));
+      if (!animate || index < 0) return;
+      if (sentiment) {
+        const mood = index / Math.max(1, labels2.length - 1) * 2 - 1;
+        const mark = labels2[index].querySelector("[data-mk-rating-scale-mark]");
+        keep(gsap.timeline().to(mark, { y: mood > 0 ? -8 * mood : 4 * -mood, rotate: mood === 0 ? 8 : 12 * mood, duration: 0.14, ease: "power2.out" }).to(mark, { y: 0, rotate: 0, duration: 0.55, ease: EASE.click, clearProps: "y,rotate" }));
+        return;
+      }
+      const from = previous >= 0 ? previous : 0, step = index >= from ? 1 : -1;
+      for (let i = from, k = 0; i !== index; i += step, k++) {
+        keep(gsap.timeline({ delay: Math.min(k * 0.03, 0.3) }).to(labels2[i], { y: -5, duration: 0.12, ease: "power2.out" }).to(labels2[i], { y: 0, duration: 0.4, ease: EASE.click, clearProps: "y" }));
+      }
+    }
+  });
+  return {
+    get value() {
+      return instance.value === null ? null : Number(instance.value);
+    },
+    setValue: (value, notify = false) => instance.setValue(normalize3(value), notify),
+    reset: (notify = false) => instance.reset(notify),
+    destroy: () => instance.destroy()
+  };
+}
+
+// src/components/notification-stack/engine.ts
+var sequence28 = 0;
+function createNotificationStack(root, options = {}) {
+  if (!root) return inert({ push() {
+  }, dismiss() {
+  }, clear() {
+  }, expand() {
+  }, collapse() {
+  }, toggle() {
+  }, setOptions() {
+  }, items: [], expanded: false });
+  registerMotion();
+  const scope = createScope();
+  let opts = { ...options };
+  let expanded = options.expanded ?? false;
+  let hovered = false;
+  let focused = false;
+  let inviting = false;
+  let resize = null;
+  const heights = /* @__PURE__ */ new WeakMap();
+  const original = [...root.childNodes];
+  const entries = /* @__PURE__ */ new Map();
+  const animations = /* @__PURE__ */ new Set();
+  const track = (animation) => {
+    for (const prior of animations) if (prior.totalProgress() === 1 || !prior.parent) animations.delete(prior);
+    if (animation) animations.add(animation);
+  };
+  const deck = document.createElement("div");
+  deck.className = "mk-notification-stack__deck";
+  deck.id = `mk-notifications-${++sequence28}`;
+  const empty = document.createElement("p");
+  empty.className = "mk-notification-stack__empty";
+  const toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "mk-notification-stack__toggle";
+  toggle.setAttribute("aria-controls", deck.id);
+  const count = document.createElement("span");
+  const toggleText = document.createElement("span");
+  const chevron2 = document.createElement("span");
+  chevron2.className = "mk-notification-stack__chevron";
+  chevron2.setAttribute("aria-hidden", "true");
+  chevron2.innerHTML = '<svg viewBox="0 0 16 16"><path d="m4 6 4 4 4-4"/></svg>';
+  toggle.append(count, toggleText, chevron2);
+  const live2 = document.createElement("span");
+  live2.className = "mk-sr-only";
+  live2.setAttribute("role", "status");
+  live2.setAttribute("aria-live", "polite");
+  root.replaceChildren(deck, empty, toggle, live2);
+  scope.attr(root, "class", `${root.className} mk-notification-stack`.trim());
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "role", "region");
+  const pause = (entry) => {
+    if (entry.timer !== void 0) {
+      clearTimeout(entry.timer);
+      entry.timer = void 0;
+      entry.remaining = Math.max(0, entry.remaining - (Date.now() - entry.started));
+    }
+  };
+  const paused = () => hovered || focused || opts.disabled || document.hidden;
+  const start = (entry) => {
+    if (paused() || entry.remaining === Infinity || entry.timer !== void 0) return;
+    entry.started = Date.now();
+    entry.timer = setTimeout(() => dismiss(entry.item.id), entry.remaining);
+  };
+  const syncTimers = () => entries.forEach((entry) => paused() ? pause(entry) : start(entry));
+  const duration = (item) => {
+    const ms = item.duration ?? opts.duration ?? 6e3;
+    return Number.isFinite(ms) && ms > 0 ? ms : Infinity;
+  };
+  const layout = (motion) => {
+    if (scope.disposed) return;
+    const cards = [...entries.values()].reverse();
+    const direction = opts.direction === "up" || opts.direction === "side" ? opts.direction : "down";
+    scope.attr(root, "data-mk-direction", direction);
+    scope.attr(root, "data-mk-expandable", !expanded && cards.length > 1 && !opts.disabled ? "" : null);
+    const peek = inviting && !expanded && !reduced() ? 18 : 12;
+    cards.forEach((entry, index) => {
+      const visible = expanded || index === 0;
+      entry.card.inert = !visible || !!opts.disabled;
+      entry.card.setAttribute("aria-hidden", String(!visible));
+      entry.card.toggleAttribute("data-mk-peek", !visible);
+    });
+    if (cards[0]) deck.style.setProperty("--mk-stack-front", `${cards[0].card.offsetHeight}px`);
+    let offset = 0;
+    let tallest = 0;
+    cards.forEach((entry, index) => {
+      entry.card.style.zIndex = String(cards.length - index);
+      const layer = Math.min(index, 3);
+      let x = 0, y = 0;
+      if (expanded) {
+        if (direction === "side") x = offset;
+        else y = direction === "up" ? -offset : offset;
+        offset += direction === "side" ? entry.card.offsetWidth + 12 : entry.card.offsetHeight + 8;
+      } else if (direction === "side") x = layer * peek;
+      else y = (direction === "up" ? -1 : 1) * layer * peek;
+      tallest = Math.max(tallest, entry.card.offsetHeight);
+      const delay = reduced() ? 0 : motion === "expand" ? index * 0.05 : motion === "collapse" ? Math.max(0, cards.length - 1 - index) * 0.03 : 0;
+      entry.card.style.setProperty("--mk-stack-delay", `${delay}s`);
+      track(gsap.to(entry.card, { x, y, scale: expanded ? 1 : Math.max(0.84, 1 - index * 0.045), opacity: expanded || index < 3 ? 1 : 0, duration: reduced() ? 0 : 0.45, delay, ease: EASE.swatch, overwrite: "auto" }));
+      if (motion === "expand" && index > 0 && !reduced()) track(gsap.fromTo(entry.card, { filter: "blur(6px)" }, { filter: "blur(0px)", duration: 0.4, delay, ease: "power2.out", clearProps: "filter" }));
+    });
+    const front = cards[0]?.card.offsetHeight || 100;
+    const height = !cards.length ? 0 : direction === "side" ? expanded ? tallest : front : expanded ? offset - 8 : front + Math.min(cards.length - 1, 2) * peek;
+    if (!expanded && direction === "side" && deck.scrollLeft) deck.scrollTo({ left: 0, behavior: reduced() ? "auto" : "smooth" });
+    track(gsap.to(deck, { height, duration: reduced() ? 0 : 0.4, ease: EASE.signature, overwrite: "auto" }));
+    empty.hidden = cards.length > 0;
+    empty.textContent = opts.labels?.empty ?? "Todo al d\xEDa. No hay notificaciones.";
+    toggle.hidden = cards.length < 2;
+    toggle.disabled = !!opts.disabled;
+    toggle.setAttribute("aria-expanded", String(expanded));
+    const toggleLabel = expanded ? opts.labels?.collapse ?? "Recoger" : opts.labels?.expand ?? "Ver todas";
+    if (toggleText.textContent !== toggleLabel) {
+      toggleText.textContent = toggleLabel;
+      if (motion) track(blurIn(toggleText, { from: "soft", duration: 0.25 }));
+    }
+    track(rollDigits(count, String(cards.length)));
+    scope.attr(root, "aria-label", opts.label ?? "Notificaciones");
+    scope.attr(root, "data-mk-expanded", String(expanded));
+    scope.attr(root, "data-mk-disabled", opts.disabled ? "" : null);
+  };
+  const dismiss = (id) => {
+    if (scope.disposed || opts.disabled) return;
+    const entry = entries.get(id);
+    if (!entry) return;
+    pause(entry);
+    resize?.unobserve(entry.card);
+    const hadFocus = entry.card.contains(document.activeElement);
+    entries.delete(id);
+    if (hadFocus) {
+      const next = [...entries.values()].reverse()[0];
+      const target = next?.card.querySelector("button");
+      if (target) {
+        next.card.inert = false;
+        target.focus();
+      } else {
+        root.setAttribute("tabindex", "-1");
+        root.focus();
+      }
+    }
+    gsap.killTweensOf(entry.card);
+    entry.card.inert = true;
+    entry.card.setAttribute("aria-hidden", "true");
+    if (reduced()) entry.card.remove();
+    else track(gsap.to(entry.card, { y: "-=18", scale: 0.94, opacity: 0, filter: "blur(8px)", duration: 0.23, ease: EASE.close, onComplete: () => entry.card.remove() }));
+    layout();
+    opts.onDismiss?.(id);
+    root.dispatchEvent(new CustomEvent("mk:dismiss", { bubbles: true, detail: { id } }));
+  };
+  const build = (item) => {
+    const card = document.createElement("article");
+    card.className = "mk-notification-stack__card";
+    card.dataset.mkNotification = item.id;
+    card.dataset.mkTone = item.tone ?? "neutral";
+    const mark = document.createElement("span");
+    mark.className = "mk-notification-stack__mark";
+    mark.setAttribute("aria-hidden", "true");
+    mark.textContent = item.tone === "success" ? "\u2713" : item.tone === "error" ? "!" : "\u2197";
+    const body = document.createElement("div");
+    body.className = "mk-notification-stack__body";
+    const title = document.createElement("strong");
+    title.textContent = item.title;
+    body.append(title);
+    if (item.description) {
+      const description = document.createElement("p");
+      description.textContent = item.description;
+      body.append(description);
+    }
+    if (item.action) {
+      const action = document.createElement("button");
+      action.type = "button";
+      action.className = "mk-notification-stack__action";
+      action.dataset.mkNotificationAction = item.id;
+      action.textContent = item.action.label;
+      action.disabled = !!opts.disabled;
+      body.append(action);
+    }
+    card.append(mark, body);
+    if (item.dismissible !== false) {
+      const close = document.createElement("button");
+      close.type = "button";
+      close.className = "mk-notification-stack__dismiss";
+      close.dataset.mkNotificationDismiss = item.id;
+      close.setAttribute("aria-label", `${opts.labels?.dismiss ?? "Cerrar"}: ${item.title}`);
+      close.textContent = "\xD7";
+      close.disabled = !!opts.disabled;
+      card.append(close);
+    }
+    return { item: { ...item }, card, remaining: duration(item), started: 0 };
+  };
+  const push = (item) => {
+    if (scope.disposed || !item.id || entries.has(item.id)) return;
+    const entry = build(item);
+    entries.set(item.id, entry);
+    deck.append(entry.card);
+    resize?.observe(entry.card);
+    layout();
+    track(blurIn(entry.card, { from: "pop", duration: 0.35 }));
+    live2.textContent = `${item.title}${item.description ? `. ${item.description}` : ""}`;
+    start(entry);
+  };
+  const setExpanded = (next, notify = true, allowDisabled = false) => {
+    if (scope.disposed || expanded === next || opts.disabled && !allowDisabled) return;
+    if (!next && [...entries.values()].slice(0, -1).some((entry) => entry.card.contains(document.activeElement))) {
+      if (opts.disabled) {
+        root.tabIndex = -1;
+        root.focus();
+      } else toggle.focus();
+    }
+    expanded = next;
+    layout(next ? "expand" : "collapse");
+    if (notify) {
+      opts.onExpandedChange?.(expanded);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { expanded } }));
+    }
+  };
+  scope.attr(root, "tabindex", root.getAttribute("tabindex"));
+  scope.on(root, "pointerenter", () => {
+    hovered = true;
+    syncTimers();
+  });
+  scope.on(root, "pointerleave", () => {
+    hovered = false;
+    syncTimers();
+  });
+  scope.on(root, "focusin", () => {
+    focused = true;
+    syncTimers();
+  });
+  scope.on(root, "focusout", (event) => {
+    focused = root.contains(event.relatedTarget);
+    syncTimers();
+  });
+  scope.on(document, "visibilitychange", syncTimers);
+  scope.on(deck, "pointerenter", () => {
+    inviting = true;
+    if (!expanded && entries.size > 1) layout();
+  });
+  scope.on(deck, "pointerleave", () => {
+    inviting = false;
+    if (!expanded && entries.size > 1) layout();
+  });
+  scope.on(root, "click", (event) => {
+    if (opts.disabled) return;
+    if (!expanded && entries.size > 1 && deck.contains(event.target) && !event.target.closest("button")) {
+      setExpanded(true);
+      return;
+    }
+    const button2 = event.target.closest("button");
+    if (!button2 || !root.contains(button2) || button2.disabled) return;
+    track(press(button2));
+    if (button2 === toggle) setExpanded(!expanded);
+    else if (button2.dataset.mkNotificationDismiss) dismiss(button2.dataset.mkNotificationDismiss);
+    else if (button2.dataset.mkNotificationAction) {
+      const id = button2.dataset.mkNotificationAction;
+      entries.get(id)?.item.action?.onClick?.();
+      opts.onAction?.(id);
+      dismiss(id);
+    }
+  });
+  if (typeof ResizeObserver === "function") {
+    resize = scope.observe(new ResizeObserver((records) => {
+      let changed = false;
+      for (const record of records) {
+        const card = record.target;
+        if (heights.get(card) !== card.offsetHeight) {
+          heights.set(card, card.offsetHeight);
+          changed = true;
+        }
+      }
+      if (changed) layout();
+    }));
+  }
+  scope.on(window, "resize", () => layout(), { passive: true });
+  const setOptions = (next) => {
+    if (scope.disposed) return;
+    opts = { ...opts, ...next };
+    if (next.items) {
+      const ids = new Set(next.items.map((item) => item.id));
+      for (const [id, entry] of entries) if (!ids.has(id)) {
+        pause(entry);
+        resize?.unobserve(entry.card);
+        if (entry.card.contains(document.activeElement)) {
+          root.setAttribute("tabindex", "-1");
+          root.focus();
+        }
+        gsap.killTweensOf(entry.card);
+        entry.card.remove();
+        entries.delete(id);
+      }
+      for (const item of next.items) {
+        const existing = entries.get(item.id);
+        if (!existing) {
+          push(item);
+          continue;
+        }
+        const replacement = build(item);
+        if (existing.card.contains(document.activeElement)) {
+          root.setAttribute("tabindex", "-1");
+          root.focus();
+        }
+        pause(existing);
+        replacement.remaining = existing.remaining;
+        existing.card.replaceWith(replacement.card);
+        gsap.killTweensOf(existing.card);
+        entries.set(item.id, replacement);
+        resize?.unobserve(existing.card);
+        resize?.observe(replacement.card);
+      }
+      const ordered = next.items.map((item) => entries.get(item.id)).filter((entry) => !!entry);
+      entries.clear();
+      for (const entry of ordered) {
+        entries.set(entry.item.id, entry);
+        deck.append(entry.card);
+      }
+    }
+    if (next.expanded !== void 0) setExpanded(next.expanded, false, true);
+    for (const entry of entries.values()) entry.card.querySelectorAll("button").forEach((button2) => {
+      button2.disabled = !!opts.disabled;
+      if (button2.hasAttribute("data-mk-notification-dismiss")) button2.setAttribute("aria-label", `${opts.labels?.dismiss ?? "Cerrar"}: ${entry.item.title}`);
+    });
+    layout();
+    syncTimers();
+  };
+  for (const item of options.items ?? []) push(item);
+  layout();
+  return {
+    push,
+    dismiss,
+    clear() {
+      for (const id of [...entries.keys()]) dismiss(id);
+    },
+    expand: () => setExpanded(true),
+    collapse: () => setExpanded(false),
+    toggle: () => setExpanded(!expanded),
+    setOptions,
+    get items() {
+      return [...entries.values()].map((entry) => ({ ...entry.item }));
+    },
+    get expanded() {
+      return expanded;
+    },
+    destroy() {
+      if (scope.disposed) return;
+      entries.forEach(pause);
+      animations.forEach((animation) => animation.kill());
+      gsap.killTweensOf([...root.querySelectorAll("*")]);
+      scope.dispose();
+      root.replaceChildren(...original);
+    }
+  };
+}
+
+// src/components/bento-grid/engine.ts
+function createBentoGrid(root, options = {}) {
+  if (!root) return inert({ refresh() {
+  }, setFilter() {
+  }, reorder() {
+  }, mutate() {
+  }, setOptions() {
+  }, filter: null, keys: [] });
+  registerMotion();
+  const scope = createScope();
+  let opts = { ...options };
+  let filter = opts.filter ?? null;
+  let animation = null;
+  const micro = /* @__PURE__ */ new Set();
+  const track = (value) => {
+    if (value) micro.add(value);
+  };
+  const originals = [...root.childNodes];
+  const originalItems = new Set(root.children);
+  const remembered = /* @__PURE__ */ new Set();
+  let queued = 0;
+  scope.attr(root, "class", `${root.className} mk-bento-grid`.trim());
+  scope.attr(root, "style", root.getAttribute("style"));
+  scope.attr(root, "data-mk-ready", "");
+  const items = () => [...root.children].filter((node) => node instanceof HTMLElement && node.hasAttribute("data-mk-bento-item"));
+  const key2 = (item) => item.dataset.mkBentoItem;
+  const visible = () => items().filter((item) => !item.hidden);
+  const save = (item) => {
+    if (remembered.has(item)) return;
+    remembered.add(item);
+    for (const attr of ["style", "hidden", "inert", "aria-hidden", "data-flip-id"]) scope.attr(item, attr, item.getAttribute(attr));
+  };
+  items().forEach(save);
+  let last;
+  const notify = () => {
+    const keys = visible().map(key2);
+    opts.onChange?.(keys);
+    root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { keys, filter } }));
+  };
+  const paint = () => {
+    const desired = Number.isFinite(opts.columns) ? Math.max(1, Math.min(12, Math.round(opts.columns))) : 3;
+    const cols = root.clientWidth > 0 && root.clientWidth < 280 ? 1 : root.clientWidth > 0 && root.clientWidth < 440 ? Math.min(2, desired) : desired;
+    root.style.setProperty("--mk-bento-columns", String(cols));
+    root.style.setProperty("--mk-bento-gap", `${Math.max(0, opts.gap ?? 12)}px`);
+    items().forEach((item) => {
+      save(item);
+      item.style.setProperty("--mk-bento-col-span", String(Math.max(1, Math.min(cols, Number(item.dataset.mkColSpan) || 1))));
+      item.style.setProperty("--mk-bento-row-span", String(Math.max(1, Math.min(8, Number(item.dataset.mkRowSpan) || 1))));
+      const show = !filter || (item.dataset.mkCategory ?? "").split(/\s+/).includes(filter);
+      if (!show && item.contains(document.activeElement)) {
+        scope.attr(root, "tabindex", root.getAttribute("tabindex"));
+        root.tabIndex = -1;
+        root.focus();
+      }
+      item.hidden = !show;
+      item.inert = !show;
+      item.setAttribute("aria-hidden", String(!show));
+    });
+    scope.attr(root, "data-mk-empty", visible().length ? null : "");
+    if (!root.hasAttribute("data-mk-empty-label")) scope.attr(root, "data-mk-empty-label", "No hay elementos en esta vista.");
+  };
+  const transition = (state = last, entering = []) => {
+    if (scope.disposed) return;
+    animation?.kill();
+    paint();
+    if (!reduced()) {
+      animation = Flip.from(state ?? Flip.getState([]), { targets: visible(), duration: Math.max(0, opts.duration ?? 0.55), ease: EASE.signature, stagger: 0.025, absolute: false, scale: false, prune: true, onComplete: () => {
+        if (!scope.disposed) last = Flip.getState(visible());
+      } });
+      track(blurIn(entering.filter((item) => !item.hidden), { from: "soft", stagger: 0.04, duration: 0.35 }));
+    }
+    if (!reduced()) last = Flip.getState(visible());
+  };
+  const capture = () => {
+    animation?.kill();
+    if (reduced()) return void 0;
+    const focused = document.activeElement;
+    Flip.killFlipsOf(items());
+    const state = Flip.getState(visible());
+    if (focused?.isConnected && focused !== document.activeElement) focused.focus({ preventScroll: true });
+    return state;
+  };
+  const mutate = (change) => {
+    if (scope.disposed) return;
+    const focused = document.activeElement;
+    const state = capture();
+    const before = new Set(items());
+    change();
+    transition(state, items().filter((item) => !before.has(item)));
+    if (focused && focused !== document.body && root.contains(focused) && !focused.closest("[hidden], [inert]")) focused.focus({ preventScroll: true });
+    else if (focused && !focused.isConnected) {
+      scope.attr(root, "tabindex", root.getAttribute("tabindex"));
+      root.tabIndex = -1;
+      root.focus();
+    }
+    observer?.takeRecords();
+    notify();
+  };
+  const setFilter = (next) => {
+    if (scope.disposed || next === filter) return;
+    const state = capture();
+    const before = new Set(visible());
+    filter = next;
+    paint();
+    transition(state, visible().filter((item) => !before.has(item)));
+    notify();
+  };
+  const refresh = () => {
+    if (scope.disposed) return;
+    transition(last, items().filter((item) => !remembered.has(item)));
+  };
+  const observer = typeof MutationObserver === "function" ? scope.observe(new MutationObserver((records) => {
+    if (!records.some((record) => record.type === "childList" ? record.target === root : record.target instanceof HTMLElement && record.target.parentElement === root)) return;
+    cancelAnimationFrame(queued);
+    queued = requestAnimationFrame(refresh);
+  })) : null;
+  observer?.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-mk-category", "data-mk-col-span", "data-mk-row-span"] });
+  scope.on(root, "click", (event) => {
+    const control = event.target.closest("button, a");
+    if (control && root.contains(control) && !control.matches(':disabled, [aria-disabled="true"]')) {
+      scope.attr(control, "style", control.getAttribute("style"));
+      track(press(control));
+    }
+  });
+  if (typeof ResizeObserver === "function") {
+    let width = root.clientWidth;
+    const resize = scope.observe(new ResizeObserver(() => {
+      if (root.clientWidth !== width) {
+        width = root.clientWidth;
+        animation?.kill();
+        paint();
+        last = Flip.getState(visible());
+      }
+    }));
+    resize.observe(root);
+  }
+  paint();
+  if (!reduced()) last = Flip.getState(visible());
+  track(blurIn(visible(), { from: "soft", stagger: 0.04 }));
+  return {
+    refresh,
+    mutate,
+    setFilter,
+    reorder(keys) {
+      mutate(() => {
+        const byKey = new Map(items().map((item) => [key2(item), item]));
+        for (const id of new Set(keys)) {
+          const item = byKey.get(id);
+          if (item) {
+            root.append(item);
+            byKey.delete(id);
+          }
+        }
+        byKey.forEach((item) => root.append(item));
+      });
+    },
+    setOptions(next) {
+      if (scope.disposed) return;
+      const state = capture();
+      opts = { ...opts, ...next };
+      if (next.filter !== void 0) filter = next.filter;
+      transition(state);
+    },
+    get filter() {
+      return filter;
+    },
+    get keys() {
+      return visible().map(key2);
+    },
+    destroy() {
+      if (scope.disposed) return;
+      cancelAnimationFrame(queued);
+      animation?.kill();
+      micro.forEach((value) => value.kill());
+      if (!reduced()) Flip.killFlipsOf(items());
+      gsap.killTweensOf([...remembered]);
+      scope.dispose();
+      const added = [...root.childNodes].filter((node) => !originals.includes(node) && !(node instanceof Element && originalItems.has(node)));
+      root.replaceChildren(...originals, ...added);
+    }
+  };
+}
+
+// src/components/scroll-preview-dock/engine.ts
+function createScrollPreviewDock(root, options = {}) {
+  if (!root) return inert({ select() {
+  }, update() {
+  }, setOptions() {
+  }, value: "" });
+  registerMotion();
+  const scope = createScope();
+  let opts = { ...options };
+  let current3 = "";
+  let previewed = "";
+  let frame = 0;
+  let scrolling = null;
+  let unbindScroller = () => {
+  };
+  let scroller = null;
+  const original = [...root.childNodes];
+  const animations = /* @__PURE__ */ new Set();
+  const track = (animation) => {
+    if (animation) animations.add(animation);
+  };
+  const panel = document.createElement("div");
+  panel.className = "mk-scroll-preview-dock__preview";
+  panel.setAttribute("aria-hidden", "true");
+  const image = document.createElement("span");
+  image.className = "mk-scroll-preview-dock__image";
+  const copy = document.createElement("span");
+  const title = document.createElement("strong");
+  const description = document.createElement("span");
+  description.className = "mk-scroll-preview-dock__description";
+  copy.append(title, description);
+  panel.append(image, copy);
+  const nav = document.createElement("nav");
+  nav.className = "mk-scroll-preview-dock__nav";
+  const pill = document.createElement("span");
+  pill.className = "mk-scroll-preview-dock__pill";
+  pill.setAttribute("aria-hidden", "true");
+  const empty = document.createElement("p");
+  empty.className = "mk-scroll-preview-dock__empty";
+  empty.textContent = "No hay secciones para explorar.";
+  root.replaceChildren(panel, nav, empty);
+  scope.attr(root, "class", `${root.className} mk-scroll-preview-dock`.trim());
+  scope.attr(root, "data-mk-ready", "");
+  const items = () => opts.items ?? [];
+  const enabled = (item) => !opts.disabled && !item.disabled;
+  const section = (item) => {
+    if (item.section instanceof HTMLElement) return item.section;
+    if (!item.section) return document.getElementById(item.id);
+    try {
+      return (scroller ?? document).querySelector(item.section);
+    } catch {
+      return null;
+    }
+  };
+  const links = () => [...nav.querySelectorAll("a")];
+  const thumb = (node, item) => {
+    node.replaceChildren();
+    if (item.thumbnail) {
+      const img = document.createElement("img");
+      img.src = item.thumbnail;
+      img.alt = "";
+      img.draggable = false;
+      node.append(img);
+    } else {
+      const letter = document.createElement("span");
+      letter.textContent = item.label.slice(0, 2);
+      node.append(letter);
+    }
+  };
+  const preview = (id, animate = true) => {
+    const item = items().find((item2) => item2.id === id);
+    if (!item || previewed === id) return;
+    previewed = id;
+    thumb(image, item);
+    title.textContent = item.label;
+    description.textContent = item.description ?? "Explorar secci\xF3n";
+    for (const link of links()) link.dataset.mkPreview = String(link.dataset.mkSection === id);
+    if (animate) {
+      gsap.killTweensOf(panel);
+      track(blurIn(panel, { from: "soft", duration: 0.28 }));
+    }
+  };
+  const place3 = (animate = true) => {
+    const active = links().find((link) => link.dataset.mkSection === current3);
+    pill.hidden = !active;
+    if (!active) return;
+    track(gsap.to(pill, { x: active.offsetLeft, y: active.offsetTop, width: active.offsetWidth, height: active.offsetHeight, duration: reduced() || !animate ? 0 : 0.45, ease: EASE.swatch, overwrite: "auto" }));
+  };
+  const activate = (id, notify = true) => {
+    if (scope.disposed || current3 === id) return;
+    current3 = id;
+    for (const link of links()) {
+      if (link.dataset.mkSection === id) link.setAttribute("aria-current", "location");
+      else link.removeAttribute("aria-current");
+    }
+    place3();
+    if (!root.contains(document.activeElement) && !root.matches(":hover")) preview(id);
+    else if (!previewed) preview(id, false);
+    if (notify) {
+      opts.onChange?.(id);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value: id } }));
+    }
+  };
+  const update = () => {
+    frame = 0;
+    if (scope.disposed) return;
+    const top = scroller ? scroller.getBoundingClientRect().top + scroller.clientTop : 0;
+    const height = scroller ? scroller.clientHeight : window.innerHeight;
+    const line = top + Math.min(120, height * 0.3) + (opts.offset ?? 0);
+    const targets = items().filter(enabled).map((item) => ({ item, node: section(item) })).filter((entry) => !!entry.node);
+    let target = targets[0];
+    for (const entry of targets) if (entry.node.getBoundingClientRect().top <= line) target = entry;
+    const atEnd = scroller ? scroller.scrollHeight > scroller.clientHeight && scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2 : document.documentElement.scrollHeight > window.innerHeight && window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;
+    if (atEnd) target = targets.at(-1);
+    if (target) activate(target.item.id);
+    place3(false);
+  };
+  const queue = () => {
+    if (!frame) frame = requestAnimationFrame(update);
+  };
+  const bindScroller = () => {
+    unbindScroller();
+    scroller = typeof opts.scroller === "string" ? (() => {
+      try {
+        return root.closest(opts.scroller) ?? document.querySelector(opts.scroller);
+      } catch {
+        return null;
+      }
+    })() : opts.scroller ?? null;
+    const target = scroller ?? window;
+    target.addEventListener("scroll", queue, { passive: true });
+    target.addEventListener("wheel", cancelScroll, { passive: true });
+    target.addEventListener("touchstart", cancelScroll, { passive: true });
+    unbindScroller = () => {
+      target.removeEventListener("scroll", queue);
+      target.removeEventListener("wheel", cancelScroll);
+      target.removeEventListener("touchstart", cancelScroll);
+    };
+  };
+  function cancelScroll() {
+    scrolling?.kill();
+    scrolling = null;
+  }
+  const select = (id) => {
+    if (scope.disposed) return;
+    const item = items().find((entry) => entry.id === id);
+    if (!item || !enabled(item)) return;
+    const target = section(item);
+    if (!target) return;
+    cancelScroll();
+    const top = Math.max(0, (scroller ? scroller.scrollTop + target.getBoundingClientRect().top - scroller.getBoundingClientRect().top - scroller.clientTop : window.scrollY + target.getBoundingClientRect().top) - (opts.offset ?? 0));
+    activate(id);
+    preview(id);
+    if (scroller) {
+      if (reduced()) scroller.scrollTop = top;
+      else scrolling = gsap.to(scroller, { scrollTop: top, duration: 0.65, ease: EASE.signature, overwrite: "auto", onUpdate: queue });
+    } else if (reduced()) window.scrollTo({ top, behavior: "instant" });
+    else {
+      const position2 = { top: window.scrollY };
+      scrolling = gsap.to(position2, { top, duration: 0.65, ease: EASE.signature, onUpdate: () => {
+        window.scrollTo(0, position2.top);
+        queue();
+      } });
+    }
+  };
+  const render = () => {
+    gsap.killTweensOf(pill);
+    nav.replaceChildren(pill);
+    nav.setAttribute("aria-label", opts.label ?? "Explorar secciones");
+    const unique = /* @__PURE__ */ new Set();
+    for (const item of items()) {
+      if (!item.id || unique.has(item.id)) continue;
+      unique.add(item.id);
+      const link = document.createElement("a");
+      link.href = `#${encodeURIComponent(section(item)?.id || item.id)}`;
+      link.dataset.mkSection = item.id;
+      link.className = "mk-scroll-preview-dock__item";
+      const cover = document.createElement("span");
+      cover.className = "mk-scroll-preview-dock__thumb";
+      cover.setAttribute("aria-hidden", "true");
+      thumb(cover, item);
+      const label = document.createElement("span");
+      label.textContent = item.label;
+      link.append(cover, label);
+      if (!enabled(item)) {
+        link.setAttribute("aria-disabled", "true");
+        link.tabIndex = -1;
+      }
+      nav.append(link);
+    }
+    empty.hidden = unique.size > 0;
+    panel.hidden = unique.size === 0;
+    nav.hidden = unique.size === 0;
+    scope.attr(root, "data-mk-disabled", opts.disabled ? "" : null);
+    previewed = "";
+    const next = items().find((item) => item.id === current3 && enabled(item)) ?? items().find(enabled);
+    current3 = "";
+    if (next) {
+      activate(next.id, false);
+      preview(next.id, false);
+    } else pill.hidden = true;
+  };
+  scope.on(nav, "click", (event) => {
+    const link = event.target.closest("a[data-mk-section]");
+    if (!link) return;
+    if (link.getAttribute("aria-disabled") === "true") {
+      event.preventDefault();
+      return;
+    }
+    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || event.button !== 0) return;
+    const item = items().find((item2) => item2.id === link.dataset.mkSection);
+    if (!item || !section(item)) return;
+    event.preventDefault();
+    track(press(link));
+    select(item.id);
+  });
+  scope.on(nav, "pointerover", (event) => {
+    const link = event.target.closest("a[data-mk-section]");
+    if (link && link.getAttribute("aria-disabled") !== "true") preview(link.dataset.mkSection);
+  });
+  scope.on(nav, "focusin", (event) => {
+    const link = event.target.closest("a[data-mk-section]");
+    if (link) preview(link.dataset.mkSection);
+  });
+  scope.on(root, "pointerleave", () => {
+    if (!root.contains(document.activeElement)) preview(current3);
+  });
+  scope.on(root, "focusout", (event) => {
+    if (!root.contains(event.relatedTarget)) preview(current3);
+  });
+  scope.on(nav, "keydown", (event) => {
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+      if (["PageUp", "PageDown", "ArrowUp", "ArrowDown", " "].includes(event.key)) cancelScroll();
+      return;
+    }
+    const available = links().filter((link) => link.getAttribute("aria-disabled") !== "true");
+    const index = available.indexOf(document.activeElement);
+    if (index < 0 || !available.length) return;
+    event.preventDefault();
+    available[event.key === "Home" ? 0 : event.key === "End" ? available.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + available.length) % available.length]?.focus();
+  });
+  scope.on(window, "resize", queue, { passive: true });
+  if (typeof ResizeObserver === "function") {
+    const resize = scope.observe(new ResizeObserver(queue));
+    resize.observe(nav);
+  }
+  bindScroller();
+  render();
+  update();
+  return {
+    select,
+    update,
+    get value() {
+      return current3;
+    },
+    setOptions(next) {
+      if (scope.disposed) return;
+      const focusedId = root.contains(document.activeElement) ? document.activeElement?.closest("a[data-mk-section]")?.dataset.mkSection : void 0;
+      opts = { ...opts, ...next };
+      if ("scroller" in next) {
+        cancelScroll();
+        bindScroller();
+      }
+      render();
+      if (focusedId) {
+        const target = links().find((link) => link.dataset.mkSection === focusedId && link.getAttribute("aria-disabled") !== "true") ?? links().find((link) => link.getAttribute("aria-disabled") !== "true");
+        if (target) target.focus();
+        else {
+          scope.attr(root, "tabindex", root.getAttribute("tabindex"));
+          root.tabIndex = -1;
+          root.focus();
+        }
+      }
+      update();
+    },
+    destroy() {
+      if (scope.disposed) return;
+      cancelAnimationFrame(frame);
+      cancelScroll();
+      unbindScroller();
+      animations.forEach((animation) => animation.kill());
+      gsap.killTweensOf([...root.querySelectorAll("*")]);
+      scope.dispose();
+      root.replaceChildren(...original);
+    }
+  };
+}
+
+// src/components/sticky-header/engine.ts
+function createStickyHeader(root, options = {}) {
+  const surface = root?.querySelector("[data-mk-sticky-surface]");
+  if (!root || !surface) {
+    if (root) warnOnce("sticky-header: needs an authored [data-mk-sticky-surface]");
+    return inert({ update() {
+    }, setOptions() {
+    }, compact: false, progress: 0 });
+  }
+  registerMotion();
+  const scope = createScope();
+  let opts = { ...options };
+  let scroller = null;
+  let unbind = () => {
+  };
+  let frame = 0;
+  let progress = -1;
+  let compact2 = false;
+  const title = surface.querySelector("[data-mk-sticky-title]");
+  const subtitle = surface.querySelector("[data-mk-sticky-subtitle]");
+  const animations = /* @__PURE__ */ new Set();
+  const track = (animation) => {
+    if (animation) animations.add(animation);
+  };
+  for (const node of [root, surface, title, subtitle]) if (node) scope.attr(node, "style", node.getAttribute("style"));
+  scope.attr(root, "class", `${root.className} mk-sticky-header`.trim());
+  scope.attr(root, "data-mk-ready", "");
+  const dimensions = () => {
+    const large = Number.isFinite(opts.expandedHeight) ? Math.max(48, opts.expandedHeight) : 104;
+    const small = Number.isFinite(opts.compactHeight) ? Math.max(40, Math.min(large, opts.compactHeight)) : Math.min(64, large);
+    root.style.setProperty("--mk-sticky-expanded-height", `${large}px`);
+    root.style.setProperty("--mk-sticky-top", `${Math.max(0, opts.top ?? 0)}px`);
+    return { large, small };
+  };
+  const update = () => {
+    frame = 0;
+    if (scope.disposed) return;
+    const { large, small } = dimensions();
+    const position2 = scroller ? scroller.scrollTop : window.scrollY;
+    const next = opts.disabled ? 0 : Math.max(0, Math.min(1, (position2 - Math.max(0, opts.threshold ?? 8)) / Math.max(1, opts.range ?? 96)));
+    if (next === progress) return;
+    const initial = progress < 0;
+    progress = next;
+    const isCompact = next >= 0.5;
+    scope.attr(root, "data-mk-compact", String(isCompact));
+    scope.attr(root, "data-mk-disabled", opts.disabled ? "" : null);
+    const duration = reduced() || initial ? 0 : 0.22;
+    track(gsap.to(surface, { height: large + (small - large) * next, borderRadius: 24 - 8 * next, paddingLeft: 24 - 8 * next, paddingRight: 24 - 8 * next, duration, ease: EASE.swatch, overwrite: "auto" }));
+    if (title) track(gsap.to(title, { scale: 1 - 0.16 * next, y: -2 * next, transformOrigin: "left center", duration, ease: EASE.swatch, overwrite: "auto" }));
+    if (subtitle) track(gsap.to(subtitle, { opacity: 1 - next, y: -8 * next, height: `${(1 - next) * 1.5}em`, filter: `blur(${next * 4}px)`, duration, ease: EASE.signature, overwrite: "auto" }));
+    if (isCompact !== compact2) {
+      compact2 = isCompact;
+      opts.onChange?.(compact2);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { compact: compact2, progress } }));
+    }
+  };
+  const queue = () => {
+    if (!frame) frame = requestAnimationFrame(update);
+  };
+  const bind = () => {
+    unbind();
+    scroller = typeof opts.scroller === "string" ? (() => {
+      try {
+        return root.closest(opts.scroller) ?? document.querySelector(opts.scroller);
+      } catch {
+        return null;
+      }
+    })() : opts.scroller ?? null;
+    const target = scroller ?? window;
+    target.addEventListener("scroll", queue, { passive: true });
+    unbind = () => target.removeEventListener("scroll", queue);
+  };
+  scope.on(window, "resize", queue, { passive: true });
+  scope.on(surface, "click", (event) => {
+    const control = event.target.closest("button, a");
+    if (control && !control.matches(':disabled, [aria-disabled="true"]')) {
+      scope.attr(control, "style", control.getAttribute("style"));
+      track(press(control));
+    }
+  });
+  if (typeof ResizeObserver === "function") {
+    const observer = scope.observe(new ResizeObserver(queue));
+    observer.observe(root);
+  }
+  bind();
+  update();
+  return {
+    update,
+    get compact() {
+      return compact2;
+    },
+    get progress() {
+      return Math.max(0, progress);
+    },
+    setOptions(next) {
+      if (scope.disposed) return;
+      opts = { ...opts, ...next };
+      if ("scroller" in next) bind();
+      progress = -1;
+      update();
+    },
+    destroy() {
+      if (scope.disposed) return;
+      cancelAnimationFrame(frame);
+      unbind();
+      animations.forEach((animation) => animation.kill());
+      gsap.killTweensOf([surface, title, subtitle].filter((node) => !!node));
+      scope.dispose();
+    }
+  };
+}
+
+// src/components/handwriting-text/glyphs.ts
+var GLYPHS = {
+  A: { width: 35, strokes: ["M2 43L26 5L27 42", "M10 30L31 28"] },
+  B: { width: 34, strokes: ["M4 43L14 7", "M10 8C40 -2 35 25 11 25C40 14 37 45 4 43"] },
+  C: { width: 34, strokes: ["M33 12C18 -8 -3 20 5 36Q12 52 31 35"] },
+  D: { width: 35, strokes: ["M5 43L15 7", "M10 7C46 -3 40 48 4 43"] },
+  E: { width: 30, strokes: ["M31 7L13 9L4 42L29 40", "M10 25L27 23"] },
+  F: { width: 29, strokes: ["M4 43L14 8L32 7", "M10 25L27 24"] },
+  G: { width: 36, strokes: ["M33 12C15 -8 -4 27 7 39Q21 51 31 26L19 28"] },
+  H: { width: 36, strokes: ["M4 43L14 7", "M28 43L37 7", "M8 27L32 24"] },
+  I: { width: 20, strokes: ["M17 8L8 42", "M9 9L25 7", "M1 43L17 41"] },
+  J: { width: 28, strokes: ["M19 8L32 7L24 33Q17 54 3 38"] },
+  K: { width: 34, strokes: ["M4 43L14 7", "M35 7L10 29L29 43"] },
+  L: { width: 28, strokes: ["M14 7L4 42Q15 39 29 41"] },
+  M: { width: 47, strokes: ["M3 43L15 7L22 35L44 7L35 43"] },
+  N: { width: 37, strokes: ["M4 43L14 7L28 42L38 7"] },
+  O: { width: 36, strokes: ["M25 7C5 1 -5 43 15 43C35 46 46 3 25 7Z"] },
+  P: { width: 32, strokes: ["M4 43L14 8C40 -2 39 30 8 27"] },
+  Q: { width: 37, strokes: ["M25 7C5 1 -5 43 15 43C35 46 46 3 25 7Z", "M19 33L33 48"] },
+  R: { width: 34, strokes: ["M4 43L14 8C40 -2 39 30 8 27L29 44"] },
+  S: { width: 31, strokes: ["M31 12C19 -5 -4 16 16 25C39 35 12 55 2 36"] },
+  T: { width: 31, strokes: ["M3 10L34 7", "M20 9L11 43"] },
+  U: { width: 36, strokes: ["M13 7L5 31C-1 52 27 48 31 29L37 7"] },
+  V: { width: 35, strokes: ["M7 7L10 43L37 7"] },
+  W: { width: 48, strokes: ["M7 7L9 43L27 15L28 43L50 7"] },
+  X: { width: 34, strokes: ["M10 7L28 43", "M36 7L2 43"] },
+  Y: { width: 34, strokes: ["M8 7L19 27L37 7", "M19 27L14 43"] },
+  Z: { width: 32, strokes: ["M7 9L34 7L2 43L29 41"] },
+  a: { width: 27, strokes: ["M23 23C9 12 2 40 13 42C21 44 26 21 23 22L20 39Q20 47 29 37"] },
+  b: { width: 27, strokes: ["M4 42Q21 -6 13 3Q5 7 7 36C19 7 34 30 19 40Q11 46 7 38L29 36"] },
+  c: { width: 25, strokes: ["M23 24C17 13 3 26 6 37Q10 49 27 35"] },
+  d: { width: 28, strokes: ["M22 24C8 12 0 39 11 42Q20 46 29 4Q31 -1 27 3L21 38Q21 46 31 35"] },
+  e: { width: 25, strokes: ["M5 33Q25 29 21 21Q17 13 8 27C-1 43 15 49 27 35"] },
+  f: { width: 23, strokes: ["M2 57Q1 63 7 52L22 7Q24 -3 16 5Q7 17 11 27L24 24", "M3 27L20 26"] },
+  g: { width: 28, strokes: ["M24 24C10 12 1 39 12 42Q20 45 24 23L18 54Q12 68 6 57Q3 48 31 36"] },
+  h: { width: 28, strokes: ["M4 42Q24 -6 14 4Q8 10 5 41C17 9 26 18 21 34Q17 49 31 35"] },
+  i: { width: 15, strokes: ["M9 24L5 36Q2 47 18 35", "M12 13L12.2 13.2"] },
+  j: { width: 18, strokes: ["M13 24L6 53Q1 68 -4 56Q-6 48 21 35", "M16 13L16.2 13.2"] },
+  k: { width: 27, strokes: ["M4 42Q24 -7 14 4Q8 10 5 41", "M25 22Q8 38 10 32Q17 27 19 37Q21 45 30 35"] },
+  l: { width: 18, strokes: ["M3 32Q28 -4 15 3Q7 8 6 31Q3 49 21 35"] },
+  m: { width: 40, strokes: ["M3 41L9 23L5 39Q18 11 20 25L17 39Q31 11 32 25L29 36Q28 46 43 35"] },
+  n: { width: 28, strokes: ["M3 41L9 23L5 39Q21 10 23 25L20 36Q19 46 31 35"] },
+  o: { width: 27, strokes: ["M22 22C7 14 0 39 12 42Q22 46 26 28Q26 18 19 24Q15 33 30 32"] },
+  p: { width: 28, strokes: ["M-1 58L11 22L7 35Q19 12 25 25Q29 40 14 42L8 39L31 35"] },
+  q: { width: 28, strokes: ["M23 24C10 12 1 39 12 42Q22 45 24 23L17 58Q15 62 19 53L31 36"] },
+  r: { width: 23, strokes: ["M2 41L9 22Q8 31 16 24Q20 18 21 23Q21 27 17 28L26 35"] },
+  s: { width: 24, strokes: ["M22 21Q18 15 10 24Q6 28 17 33Q25 39 14 43Q3 46 6 38L27 35"] },
+  t: { width: 21, strokes: ["M16 10L7 35Q3 48 24 35", "M2 25L23 23"] },
+  u: { width: 29, strokes: ["M9 23L4 35Q1 52 24 24L20 38Q21 45 32 35"] },
+  v: { width: 26, strokes: ["M6 23Q-1 58 22 27Q25 20 21 23Q19 31 29 31"] },
+  w: { width: 39, strokes: ["M7 23Q-1 56 19 27Q10 56 34 27Q37 20 33 23Q31 31 42 31"] },
+  x: { width: 25, strokes: ["M7 24Q14 28 17 39Q20 45 28 35", "M24 23L3 42"] },
+  y: { width: 28, strokes: ["M8 23L4 35Q2 50 24 24L16 54Q11 67 5 58Q0 50 31 36"] },
+  z: { width: 25, strokes: ["M6 25Q16 19 24 24L5 41Q14 36 20 43Q25 51 10 59Q1 63 5 54L28 36"] },
+  "0": { width: 29, strokes: ["M23 8C4 0 -2 42 13 43C28 44 34 7 23 8Z"] },
+  "1": { width: 20, strokes: ["M5 17L17 8L9 42", "M2 43L18 43"] },
+  "2": { width: 28, strokes: ["M4 17C10 -2 35 7 23 22L3 42Q14 38 28 42"] },
+  "3": { width: 27, strokes: ["M6 11Q32 0 23 20L13 25Q34 17 24 36Q17 48 3 39"] },
+  "4": { width: 29, strokes: ["M20 7L2 31L30 29", "M25 9L17 43"] },
+  "5": { width: 28, strokes: ["M29 8L10 9L5 25Q27 14 25 32Q20 49 3 39"] },
+  "6": { width: 28, strokes: ["M25 8C7 -1 -6 43 13 43C30 43 29 16 13 25L5 33"] },
+  "7": { width: 27, strokes: ["M4 10L29 9L9 43", "M9 26L24 25"] },
+  "8": { width: 28, strokes: ["M18 24C-6 12 23 -2 27 12Q28 21 10 28C-5 37 13 52 24 38Q33 27 18 24Z"] },
+  "9": { width: 28, strokes: ["M24 20Q5 38 4 21C4 3 31 1 25 21L14 44"] },
+  ".": { width: 12, strokes: ["M6 41L6.4 41.4"] },
+  ",": { width: 12, strokes: ["M8 40L4 49"] },
+  "!": { width: 13, strokes: ["M12 5L6 31", "M5 41L5.4 41.4"] },
+  "?": { width: 25, strokes: ["M3 14Q10 0 23 10Q29 18 16 24L11 31", "M9 42L9.4 42.4"] },
+  "-": { width: 23, strokes: ["M4 28L22 27"] },
+  "'": { width: 11, strokes: ["M9 7L6 15"] }
+};
+
+// src/components/handwriting-text/engine.ts
+var SVG12 = "http://www.w3.org/2000/svg";
+function createHandwritingText(root, options = {}) {
+  if (!root) return inert({ setText() {
+  }, replay() {
+  }, text: "" });
+  registerMotion();
+  const scope = createScope();
+  let text = options.text ?? root.textContent ?? "";
+  const authored = [...root.childNodes];
+  const svg2 = document.createElementNS(SVG12, "svg");
+  svg2.setAttribute("aria-hidden", "true");
+  svg2.dataset.mkHandwritingDrawing = "";
+  root.replaceChildren(svg2);
+  scope.add(() => {
+    svg2.remove();
+    root.append(...authored);
+  });
+  scope.attr(root, "data-mk-handwriting", "");
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "role", "img");
+  let strokes = [];
+  let timeline = null;
+  const duration = Number.isFinite(options.duration) ? Math.max(0.1, Math.min(30, options.duration)) : 2.4;
+  const complete = () => {
+    if (scope.disposed) return;
+    options.onComplete?.();
+    root.dispatchEvent(new CustomEvent("mk:complete", { bubbles: true }));
+  };
+  const replay = () => {
+    if (scope.disposed) return;
+    timeline?.kill();
+    timeline = null;
+    if (reduced() || !strokes.length) {
+      gsap.set(strokes, { strokeDashoffset: 0 });
+      return;
+    }
+    gsap.set(strokes, { strokeDashoffset: 1 });
+    timeline = gsap.timeline({ onComplete: complete });
+    const step = duration / strokes.length;
+    for (const stroke of strokes) timeline.to(stroke, { strokeDashoffset: 0, duration: step, ease: EASE.wipe });
+  };
+  const draw = () => {
+    timeline?.kill();
+    timeline = null;
+    strokes = [];
+    svg2.replaceChildren();
+    scope.attr(root, "aria-label", text);
+    scope.attr(root, "data-mk-empty", text ? null : "");
+    let x = 5;
+    let y = 6;
+    let width = 10;
+    for (const char of text) {
+      if (char === "\n") {
+        width = Math.max(width, x + 5);
+        x = 5;
+        y += 64;
+        continue;
+      }
+      if (/\s/u.test(char)) {
+        x += 14;
+        continue;
+      }
+      const normalized = char.normalize("NFD");
+      const glyph = GLYPHS[normalized[0]];
+      if (glyph) {
+        const paths = [...glyph.strokes];
+        if (normalized.includes("\u0301")) paths.push("M16 14L23 7");
+        if (normalized.includes("\u0303")) paths.push("M11 14Q16 8 20 13Q24 17 28 10");
+        if (normalized.includes("\u0308")) paths.push("M12 12L12.3 12.3M23 12L23.3 12.3");
+        for (const d of paths) {
+          const path = document.createElementNS(SVG12, "path");
+          path.setAttribute("d", d);
+          path.setAttribute("transform", `translate(${x} ${y})`);
+          path.setAttribute("pathLength", "1");
+          path.setAttribute("stroke-dasharray", "1");
+          path.setAttribute("stroke-dashoffset", "0");
+          svg2.append(path);
+          strokes.push(path);
+        }
+        x += glyph.width;
+      } else {
+        const fallback = document.createElementNS(SVG12, "text");
+        fallback.textContent = char;
+        fallback.setAttribute("x", String(x));
+        fallback.setAttribute("y", String(y + 42));
+        fallback.setAttribute("data-mk-handwriting-fallback", "");
+        svg2.append(fallback);
+        x += 34;
+      }
+    }
+    svg2.setAttribute("viewBox", `0 0 ${Math.max(width, x + 8)} ${y + 64}`);
+    svg2.setAttribute("preserveAspectRatio", "xMinYMid meet");
+  };
+  draw();
+  if (options.autoplay !== false) replay();
+  scope.add(() => {
+    timeline?.kill();
+    gsap.killTweensOf(strokes);
+  });
+  return {
+    replay,
+    setText(next, animate = true) {
+      if (scope.disposed || next === text) return;
+      text = String(next);
+      draw();
+      if (animate) replay();
+    },
+    get text() {
+      return text;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/particle-button/engine.ts
+function createParticleButton(root, options = {}) {
+  if (!root) return inert({ burst() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  let button2 = root.matches("button") ? root : root.querySelector("button");
+  if (!button2) {
+    button2 = document.createElement("button");
+    root.append(button2);
+    const made = button2;
+    scope.add(() => made.remove());
+  }
+  const control = button2;
+  if (!control.textContent?.trim() && !control.querySelector("[aria-label], svg, img")) {
+    const name = document.createElement("span");
+    name.textContent = options.label ?? "Celebrar";
+    control.append(name);
+    scope.add(() => name.remove());
+  }
+  const originalStyle = control.getAttribute("style");
+  const originalTransform = control.style.transform;
+  scope.add(() => {
+    if (originalStyle === null) control.removeAttribute("style");
+    else control.setAttribute("style", originalStyle);
+  });
+  scope.attr(control, "type", control.getAttribute("type") ?? "button");
+  scope.attr(control, "data-mk-particle-button", "");
+  scope.attr(root, "data-mk-ready", "");
+  const count = Number.isFinite(options.count) ? Math.min(16, Math.max(3, Math.round(options.count))) : 9;
+  const distance = Number.isFinite(options.distance) ? Math.min(100, Math.max(12, options.distance)) : 52;
+  let particles = null;
+  let pressing = null;
+  const fire = () => {
+    if (scope.disposed || control.disabled || control.getAttribute("aria-disabled") === "true") return;
+    particles?.kill();
+    particles = reduced() ? null : burst(control, { count, distance, ring: false, size: 5, colors: ["var(--mk-text)", "var(--mk-accent)"] });
+  };
+  scope.on(control, "click", (event) => {
+    if (control.disabled || control.getAttribute("aria-disabled") === "true") {
+      event.preventDefault();
+      return;
+    }
+    pressing?.kill();
+    pressing = press(control);
+    pressing?.eventCallback("onComplete", () => {
+      gsap.set(control, { clearProps: "transform,scale" });
+      control.style.transform = originalTransform;
+      if (!control.getAttribute("style")) control.removeAttribute("style");
+    });
+    fire();
+    options.onAction?.();
+    root.dispatchEvent(new CustomEvent("mk:action", { bubbles: true }));
+  });
+  scope.add(() => {
+    particles?.kill();
+    pressing?.kill();
+  });
+  return { burst: fire, destroy: () => scope.dispose() };
+}
+
+// src/components/magnetize-button/engine.ts
+function createMagnetizeButton(root, options = {}) {
+  if (!root) return inert({ attract() {
+  }, release() {
+  }, attracted: false });
+  registerMotion();
+  const scope = createScope();
+  let button2 = root.matches("button") ? root : root.querySelector("button");
+  if (!button2) {
+    button2 = document.createElement("button");
+    root.append(button2);
+    const made = button2;
+    scope.add(() => made.remove());
+  }
+  const control = button2;
+  if (!control.textContent?.trim() && !control.querySelector("[aria-label], svg, img")) {
+    const label = document.createElement("span");
+    label.textContent = options.label ?? "Reunir ideas";
+    control.append(label);
+    scope.add(() => label.remove());
+  }
+  const originalStyle = control.getAttribute("style");
+  const originalTransform = control.style.transform;
+  scope.add(() => {
+    if (originalStyle === null) control.removeAttribute("style");
+    else control.setAttribute("style", originalStyle);
+  });
+  scope.attr(control, "type", control.getAttribute("type") ?? "button");
+  scope.attr(control, "data-mk-magnetize-button", "");
+  scope.attr(root, "data-mk-ready", "");
+  const layer = document.createElement("span");
+  layer.dataset.mkMagnetParticles = "";
+  layer.setAttribute("aria-hidden", "true");
+  control.append(layer);
+  scope.add(() => layer.remove());
+  const count = Number.isFinite(options.count) ? Math.min(24, Math.max(4, Math.round(options.count))) : 14;
+  const reach = Number.isFinite(options.reach) ? Math.min(90, Math.max(16, options.reach)) : 42;
+  const dots = [];
+  for (let i = 0; i < count; i++) {
+    const dot = document.createElement("i");
+    layer.append(dot);
+    dots.push(dot);
+  }
+  let hovered = false;
+  let focused = false;
+  let attracted = false;
+  let tween = null;
+  let pressing = null;
+  const disabled = () => control.disabled || control.getAttribute("aria-disabled") === "true";
+  const positions = (near) => {
+    const w = control.offsetWidth || 160;
+    const h = control.offsetHeight || 48;
+    return dots.map((_, i) => {
+      const angle2 = i / count * Math.PI * 2 - Math.PI / 2;
+      const c = Math.cos(angle2);
+      const s = Math.sin(angle2);
+      const boundary = Math.min((w / 2 + 4) / Math.max(1e-3, Math.abs(c)), (h / 2 + 4) / Math.max(1e-3, Math.abs(s)));
+      const radius = boundary + (near ? 0 : reach * (0.72 + i % 3 * 0.14));
+      return { x: c * radius, y: s * radius, opacity: near ? 0.88 : 0.25, scale: near ? 1 : 0.6 };
+    });
+  };
+  const paint = (near, animate) => {
+    tween?.kill();
+    tween = null;
+    layer.hidden = reduced() || disabled();
+    if (layer.hidden) {
+      attracted = false;
+      scope.attr(control, "data-mk-attracted", null);
+      return;
+    }
+    attracted = near;
+    scope.attr(control, "data-mk-attracted", near ? "" : null);
+    const targets = positions(near);
+    if (!animate) {
+      dots.forEach((dot, i) => gsap.set(dot, targets[i]));
+      return;
+    }
+    tween = gsap.timeline();
+    dots.forEach((dot, i) => tween.to(dot, { ...targets[i], duration: near ? 0.62 : 0.48, ease: near ? EASE.swatch : EASE.signature }, i * 8e-3));
+  };
+  const sync = () => paint(hovered || focused, true);
+  scope.on(control, "pointerenter", () => {
+    hovered = true;
+    sync();
+  });
+  scope.on(control, "pointerleave", () => {
+    hovered = false;
+    sync();
+  });
+  scope.on(control, "focus", () => {
+    focused = true;
+    sync();
+  });
+  scope.on(control, "blur", () => {
+    focused = false;
+    sync();
+  });
+  scope.on(control, "click", (event) => {
+    if (disabled()) {
+      event.preventDefault();
+      return;
+    }
+    pressing?.kill();
+    pressing = press(control);
+    pressing?.eventCallback("onComplete", () => {
+      gsap.set(control, { clearProps: "transform,scale" });
+      control.style.transform = originalTransform;
+      if (!control.getAttribute("style")) control.removeAttribute("style");
+    });
+    options.onAction?.();
+    root.dispatchEvent(new CustomEvent("mk:action", { bubbles: true }));
+  });
+  if (typeof ResizeObserver !== "undefined") scope.observe(new ResizeObserver(() => paint(attracted, false))).observe(control);
+  if (typeof MutationObserver !== "undefined") scope.observe(new MutationObserver(() => paint(hovered || focused, false))).observe(control, { attributes: true, attributeFilter: ["disabled", "aria-disabled"] });
+  if (typeof matchMedia === "function") {
+    const media = matchMedia("(prefers-reduced-motion: reduce)");
+    scope.on(media, "change", () => paint(hovered || focused, false));
+  }
+  paint(false, false);
+  scope.add(() => {
+    tween?.kill();
+    pressing?.kill();
+    gsap.killTweensOf(dots);
+  });
+  return { attract: () => {
+    if (!scope.disposed) paint(true, true);
+  }, release: () => {
+    if (!scope.disposed) paint(false, true);
+  }, get attracted() {
+    return attracted;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/components/badge-button/engine.ts
+var normalize2 = (value) => Number.isFinite(value) ? Math.max(0, Math.min(Number.MAX_SAFE_INTEGER, Math.round(value))) : 0;
+var sequence29 = 0;
+function createBadgeButton(root, options = {}) {
+  if (!root) return inert({ setCount() {
+  }, count: 0 });
+  registerMotion();
+  const scope = createScope();
+  let button2 = root.matches("button") ? root : root.querySelector("button");
+  if (!button2) {
+    button2 = document.createElement("button");
+    root.append(button2);
+    const made = button2;
+    scope.add(() => made.remove());
+  }
+  const control = button2;
+  if (!control.textContent?.trim() && !control.querySelector("[aria-label], svg, img")) {
+    const label = document.createElement("span");
+    label.textContent = options.label ?? "Guardar";
+    control.append(label);
+    scope.add(() => label.remove());
+  }
+  const originalStyle = control.getAttribute("style");
+  const originalTransform = control.style.transform;
+  scope.add(() => {
+    if (originalStyle === null) control.removeAttribute("style");
+    else control.setAttribute("style", originalStyle);
+  });
+  const badge = document.createElement("span");
+  badge.dataset.mkBadgeCount = "";
+  badge.setAttribute("aria-hidden", "true");
+  control.append(badge);
+  scope.add(() => badge.remove());
+  const spoken = document.createElement("span");
+  spoken.className = "mk-sr-only";
+  control.append(spoken);
+  scope.add(() => spoken.remove());
+  const authoredLabel = control.getAttribute("aria-label");
+  const labelledBy = control.getAttribute("aria-labelledby");
+  if (labelledBy?.trim()) {
+    spoken.id = `mk-badge-quantity-${++sequence29}`;
+    scope.attr(control, "aria-labelledby", `${labelledBy} ${spoken.id}`);
+  }
+  scope.attr(control, "type", control.getAttribute("type") ?? "button");
+  scope.attr(control, "data-mk-badge-button", "");
+  scope.attr(root, "data-mk-ready", "");
+  let count = normalize2(options.count ?? 0);
+  const max = Math.max(1, normalize2(options.max ?? 99));
+  const step = Number.isFinite(options.step) ? Math.round(options.step) : 1;
+  let rolling2 = null;
+  let bump = null;
+  let pressing = null;
+  const format = () => count > max ? `${max}+` : String(count);
+  const announce = () => {
+    spoken.textContent = ` (${count})`;
+    if (!labelledBy?.trim() && authoredLabel?.trim()) scope.attr(control, "aria-label", `${authoredLabel} (${count})`);
+  };
+  const paint = () => {
+    badge.hidden = options.hideZero !== false && count === 0;
+    badge.textContent = format();
+    announce();
+  };
+  const setCount = (next, notify = false) => {
+    if (scope.disposed || !Number.isFinite(next)) return;
+    const previous = count;
+    count = normalize2(next);
+    if (count === previous) return;
+    const wasHidden = badge.hidden;
+    badge.hidden = options.hideZero !== false && count === 0;
+    announce();
+    rolling2?.kill();
+    bump?.kill();
+    if (reduced() || badge.hidden) paint();
+    else {
+      rolling2 = rollDigits(badge, format(), count >= previous ? 1 : -1, 0.34);
+      bump = gsap.fromTo(badge, { scale: wasHidden ? 0.35 : 0.8, y: wasHidden ? 7 : 0 }, { scale: 1, y: 0, duration: 0.5, ease: wasHidden ? EASE.pop : EASE.swatch });
+    }
+    if (notify) {
+      options.onChange?.(count);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { count } }));
+    }
+  };
+  scope.on(control, "click", (event) => {
+    if (control.disabled || control.getAttribute("aria-disabled") === "true") {
+      event.preventDefault();
+      return;
+    }
+    pressing?.kill();
+    pressing = press(control);
+    pressing?.eventCallback("onComplete", () => {
+      gsap.set(control, { clearProps: "transform,scale" });
+      control.style.transform = originalTransform;
+      if (!control.getAttribute("style")) control.removeAttribute("style");
+    });
+    setCount(count + step, true);
+  });
+  paint();
+  scope.add(() => {
+    rolling2?.kill();
+    bump?.kill();
+    pressing?.kill();
+    gsap.killTweensOf(badge);
+  });
+  return { setCount, get count() {
+    return count;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/components/morphing-page-dots/engine.ts
+function createMorphingPageDots(root, options = {}) {
+  if (!root) return inert({ setValue() {
+  }, value: 0 });
+  registerMotion();
+  const scope = createScope();
+  const count = Number.isFinite(options.count) ? Math.min(20, Math.max(1, Math.round(options.count))) : 5;
+  const normalize3 = (index) => Math.min(count - 1, Math.max(0, Math.round(index)));
+  let value = normalize3(Number.isFinite(options.value) ? options.value : 0);
+  const authored = [...root.childNodes];
+  const rail = document.createElement("span");
+  rail.dataset.mkPageRail = "";
+  const blob = document.createElement("i");
+  blob.dataset.mkPageBlob = "";
+  blob.setAttribute("aria-hidden", "true");
+  rail.append(blob);
+  const buttons = [];
+  for (let i = 0; i < count; i++) {
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.dataset.mkPageDot = "";
+    button2.setAttribute("aria-label", options.labels?.[i] ?? `P\xE1gina ${i + 1} de ${count}`);
+    if (options.pageIds?.[i]) button2.setAttribute("aria-controls", options.pageIds[i]);
+    button2.disabled = Boolean(options.disabled);
+    const dot = document.createElement("i");
+    dot.setAttribute("aria-hidden", "true");
+    button2.append(dot);
+    rail.append(button2);
+    buttons.push(button2);
+  }
+  root.replaceChildren(rail);
+  scope.add(() => {
+    rail.remove();
+    root.append(...authored);
+  });
+  scope.attr(root, "role", "group");
+  scope.attr(root, "aria-label", options.label ?? "P\xE1ginas");
+  scope.attr(root, "data-mk-morphing-page-dots", "");
+  scope.attr(root, "data-mk-ready", "");
+  let moving = null;
+  let pressing = null;
+  const at = (index) => {
+    const button2 = buttons[index];
+    const size = button2.offsetWidth || 44;
+    return (button2.offsetLeft || index * size) + size / 2 - 12;
+  };
+  const place3 = () => {
+    moving?.kill();
+    moving = null;
+    gsap.set(blob, { left: at(value), width: 24, scaleY: 1 });
+  };
+  const paint = () => buttons.forEach((button2, i) => {
+    button2.setAttribute("aria-current", i === value ? "page" : "false");
+    button2.tabIndex = i === value ? 0 : -1;
+  });
+  const setValue = (index, notify = false) => {
+    if (scope.disposed || !Number.isFinite(index)) return;
+    const next = normalize3(index);
+    if (value === next) return;
+    const start = at(value);
+    const end = at(next);
+    value = next;
+    paint();
+    moving?.kill();
+    if (reduced()) place3();
+    else {
+      const current3 = Number(gsap.getProperty(blob, "left")) || start;
+      moving = gsap.timeline().to(blob, { left: Math.min(current3, end), width: Math.abs(end - current3) + 24, scaleY: 0.68, duration: 0.18, ease: EASE.wipe }).to(blob, { left: end, width: 24, scaleY: 1, duration: 0.48, ease: EASE.swatch }, 0.13);
+    }
+    if (notify) {
+      options.onChange?.(value);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value } }));
+    }
+  };
+  buttons.forEach((button2, i) => {
+    scope.on(button2, "click", () => {
+      if (button2.disabled) return;
+      pressing?.kill();
+      pressing = press(button2);
+      setValue(i, true);
+    });
+    scope.on(button2, "keydown", (event) => {
+      if (button2.disabled) return;
+      const key2 = event.key;
+      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(key2)) return;
+      event.preventDefault();
+      const rtl = getComputedStyle(root).direction === "rtl";
+      let next = key2 === "Home" ? 0 : key2 === "End" ? count - 1 : (value + (key2 === "ArrowRight" !== rtl ? 1 : -1) + count) % count;
+      setValue(next, true);
+      buttons[next].focus();
+    });
+  });
+  if (typeof ResizeObserver !== "undefined") scope.observe(new ResizeObserver(place3)).observe(rail);
+  paint();
+  place3();
+  scope.add(() => {
+    moving?.kill();
+    pressing?.kill();
+  });
+  return { setValue, get value() {
+    return value;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/components/not-found/engine.ts
+var ILLUSTRATION = '<svg viewBox="0 0 320 140" fill="none" aria-hidden="true"><path data-mk-lost-track d="M20 115H100Q118 115 118 95V72Q118 53 138 53H185Q205 53 205 73V95Q205 115 224 115H300"/><g data-mk-lost-four><path d="M72 23L35 79H84M77 23V107"/><path d="M263 23L226 79H275M268 23V107"/></g><g data-mk-lost-portal><rect x="124" y="18" width="72" height="96" rx="32"/><ellipse cx="160" cy="66" rx="17" ry="29"/><path d="M145 66h30M160 51v30"/></g><path data-mk-lost-star d="M211 13v12m-6-6h12M105 118v8m-4-4h8"/></svg>';
+function createNotFound(root, options = {}) {
+  if (!root) return inert({ replay() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  const authored = [...root.childNodes];
+  const content = document.createElement("div");
+  content.dataset.mkNotFoundContent = "";
+  const art = document.createElement("div");
+  art.dataset.mkNotFoundArt = "";
+  art.innerHTML = ILLUSTRATION;
+  const eyebrow = document.createElement("p");
+  eyebrow.dataset.mkNotFoundCode = "";
+  eyebrow.textContent = `404 \xB7 ${options.brand ?? "Motion Kit"}`;
+  const heading = document.createElement("h2");
+  heading.textContent = options.title ?? "Este camino se perdi\xF3.";
+  const description = document.createElement("p");
+  description.dataset.mkNotFoundDescription = "";
+  description.textContent = options.description ?? "La p\xE1gina que buscas no est\xE1 aqu\xED. Volvamos a un lugar conocido.";
+  const actions = document.createElement("div");
+  actions.dataset.mkNotFoundActions = "";
+  const home = document.createElement("a");
+  home.href = options.homeHref ?? "/";
+  home.textContent = options.homeLabel ?? "Volver al inicio";
+  actions.append(home);
+  const back = document.createElement("button");
+  back.type = "button";
+  back.textContent = options.backLabel ?? "Ir atr\xE1s";
+  back.disabled = !options.onBack && history.length <= 1;
+  if (options.showBack !== false) actions.append(back);
+  content.append(art, eyebrow, heading, description, actions);
+  root.replaceChildren(content);
+  scope.add(() => {
+    content.remove();
+    root.append(...authored);
+  });
+  scope.attr(root, "data-mk-not-found", "");
+  scope.attr(root, "data-mk-ready", "");
+  let entering = null;
+  let drawing = null;
+  let pressing = null;
+  const portal = art.querySelector("[data-mk-lost-portal]");
+  const replay = () => {
+    if (scope.disposed) return;
+    entering?.kill();
+    drawing?.kill();
+    if (reduced()) {
+      gsap.set([art, eyebrow, heading, description, actions], { clearProps: "all" });
+      return;
+    }
+    entering = blurIn([art, eyebrow, heading, description, actions], { from: "soft", duration: 0.5, stagger: 0.055 });
+    drawing = gsap.fromTo(portal, { rotation: -12, scale: 0.82, transformOrigin: "50% 50%" }, { rotation: 0, scale: 1, duration: 0.8, ease: EASE.swatch });
+  };
+  scope.on(back, "click", () => {
+    if (!back.disabled) {
+      pressing?.kill();
+      pressing = press(back);
+      if (options.onBack) options.onBack();
+      else history.back();
+    }
+  });
+  scope.on(home, "click", () => {
+    pressing?.kill();
+    pressing = press(home);
+  });
+  replay();
+  scope.add(() => {
+    entering?.kill();
+    drawing?.kill();
+    pressing?.kill();
+  });
+  return { replay, destroy: () => scope.dispose() };
+}
+
 export {
   PATHS,
   springPath,
@@ -22816,6 +25323,21 @@ export {
   createWaveformPlayer,
   createVoiceMessageBubble,
   createDrilldownMenu,
-  createWheelPicker
+  createWheelPicker,
+  createStepper,
+  createRadioGroup,
+  createEqualizerSlider,
+  createTemperatureSlider,
+  createRatingScale,
+  createNotificationStack,
+  createBentoGrid,
+  createScrollPreviewDock,
+  createStickyHeader,
+  createHandwritingText,
+  createParticleButton,
+  createMagnetizeButton,
+  createBadgeButton,
+  createMorphingPageDots,
+  createNotFound
 };
-//# sourceMappingURL=chunk-7IQTMF7Y.js.map
+//# sourceMappingURL=chunk-Q7IW4FV3.js.map