@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/dist/{chunk-CU6SXW3E.js → chunk-SDQ776LG.js}

@@ -213,8 +213,8 @@ function channels(start, onChange) {
       gsap2.ticker.remove(tick);
       gsap2.ticker.add(tick);
       resolveDone?.();
-      return new Promise((resolve) => {
-        resolveDone = resolve;
+      return new Promise((resolve2) => {
+        resolveDone = resolve2;
       });
     },
     stop() {
@@ -293,7 +293,7 @@ function requestFrame(fn) {
   const id = setTimeout(() => fn(Date.now()), 16);
   return () => clearTimeout(id);
 }
-var nextFrame = () => new Promise((resolve) => requestFrame(() => resolve()));
+var nextFrame = () => new Promise((resolve2) => requestFrame(() => resolve2()));
 
 // src/core/styles.ts
 function clearStyles(targets, properties) {
@@ -525,14 +525,14 @@ function revealFrom(target, options = {}) {
   paint();
   target.append(veil);
   let done = false;
-  let resolve;
-  const finished = new Promise((r) => resolve = r);
+  let resolve2;
+  const finished = new Promise((r) => resolve2 = r);
   const cleanup = () => {
     if (done) return;
     done = true;
     veil.remove();
     target.style.position = position2;
-    resolve();
+    resolve2();
   };
   const [duration, fade] = TIMING.reveal[speed];
   const timeline = gsap.timeline({ delay, onComplete: cleanup, onInterrupt: cleanup }).to(progress, { value: 100, duration, ease: "power2.out", onUpdate: paint }, 0).to(veil, { opacity: 0, duration: fade, ease: "power1.out" }, Math.max(0, duration * Math.min(1, 1 / overshoot) - 0.1));
@@ -708,14 +708,14 @@ function confetti(origin, options = {}) {
   let frame = 0;
   let last = 0;
   let stopped = false;
-  let resolve;
-  const finished = new Promise((done) => resolve = done);
+  let resolve2;
+  const finished = new Promise((done) => resolve2 = done);
   const stop2 = () => {
     if (stopped) return;
     stopped = true;
     cancelAnimationFrame(frame);
     canvas.remove();
-    resolve();
+    resolve2();
   };
   const draw = (now2) => {
     const f = last ? Math.min((now2 - last) / (1e3 / 60), 3) : 1;
@@ -1376,7 +1376,7 @@ function ensureGoo() {
   svg2.setAttribute("width", "0");
   svg2.setAttribute("height", "0");
   svg2.style.position = "absolute";
-  svg2.innerHTML = `<defs><filter id="${GOO}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"/></filter></defs>`;
+  svg2.innerHTML = `<defs><filter id="${GOO}" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"/></filter></defs>`;
   document.body.append(svg2);
 }
 function gooLayer(surface) {
@@ -1474,7 +1474,7 @@ function liquidOpen(surface, origin, parts) {
     }
   });
   const L = TIMING.liquid;
-  void motion.animate(
+  const settled = motion.animate(
     { top: box.top, left: box.left, width: box.width, height: box.height, radius: endRadius, scale: 1, blur: 0 },
     {
       top: spring(144, 14, { velocity: 2400, direction: towardY }),
@@ -1489,16 +1489,22 @@ function liquidOpen(surface, origin, parts) {
   gsap.to(shape, { background: surfaceColor, duration: L.color, delay: L.colorDelay, ease: "power2.out" });
   if (parts.length) gsap.to(parts, { opacity: 1, duration: L.color, delay: L.colorDelay, ease: "power2.out" });
   gsap.to(originBlob, { opacity: 0, duration: L.ghost, delay: L.ghostDelay, ease: "power2.out" });
+  const sharpen = setTimeout(() => {
+    layer.style.filter = "none";
+    originBlob.remove();
+  }, (L.ghostDelay + L.ghost) * 1e3 + 30);
   let done = false;
   const finish = () => {
     if (done) return;
     done = true;
     motion.stop();
     clearTimeout(timer2);
+    clearTimeout(sharpen);
     layer.remove();
     restore();
     if (parts.length) gsap.set(parts, { clearProps: "opacity,transform,transformOrigin,filter" });
   };
+  void settled.then(finish);
   const timer2 = setTimeout(finish, L.safetyMs);
   return finish;
 }
@@ -1700,7 +1706,7 @@ function textBox(element) {
 }
 var textOf = (element) => element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement ? element.value || element.placeholder : element.firstChild?.textContent ?? element.textContent ?? "";
 function flyText(from, to, text, duration) {
-  return new Promise((resolve) => {
+  return new Promise((resolve2) => {
     const start = textBox(from);
     const end = textBox(to);
     const fromSize = parseFloat(start.style.fontSize) || 16;
@@ -1742,7 +1748,7 @@ function flyText(from, to, text, duration) {
       ease: EASE.signature,
       onComplete: () => {
         ghost.remove();
-        resolve();
+        resolve2();
       }
     });
   });
@@ -2761,6 +2767,194 @@ function createQuantity(root, options = {}) {
   }, destroy: () => scope.dispose() };
 }
 
+// src/motion/micro.ts
+var list2 = (targets) => !targets ? [] : targets instanceof Element ? [targets] : [...targets];
+var live = () => {
+  registerMotion();
+  return !reduced();
+};
+function press(el5) {
+  if (!el5 || !live()) return null;
+  gsap.killTweensOf(el5, "scaleX,scaleY");
+  return gsap.timeline({
+    onComplete: () => {
+      gsap.set(el5, { clearProps: "scale,transform" });
+    }
+  }).to(el5, { scaleX: 0.95, scaleY: 0.9, duration: 0.1, ease: "power2.out" }).to(el5, { scaleX: 1, scaleY: 1, duration: 0.5, ease: EASE.click });
+}
+function blurIn(targets, { from = "rise", stagger = 0.05, delay = 0, duration } = {}) {
+  const items = list2(targets);
+  if (!items.length || !live()) return null;
+  const start = from === "pop" ? { opacity: 0, scale: 0.7, filter: "blur(32px)" } : from === "soft" ? { opacity: 0, scale: 0.96, filter: "blur(16px)" } : { opacity: 0, y: -20, filter: "blur(16px)" };
+  return gsap.fromTo(items, start, {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    filter: "blur(0px)",
+    duration: duration ?? (from === "pop" ? 0.3 : 0.5),
+    ease: from === "pop" ? EASE.pop : "power2.out",
+    stagger,
+    delay,
+    clearProps: "opacity,transform,filter"
+  });
+}
+function blurOut(targets, { to = "up", onComplete } = {}) {
+  const items = list2(targets);
+  if (!items.length) return null;
+  if (!live()) {
+    onComplete?.();
+    return null;
+  }
+  const end = to === "left" ? { x: -64 } : to === "down" ? { y: 24 } : { y: -20 };
+  return gsap.to(items, { ...end, opacity: 0, filter: "blur(16px)", duration: 0.5, ease: "power2.out", onComplete });
+}
+function collapse(el5, { onComplete } = {}) {
+  if (!el5) return null;
+  if (!live()) {
+    onComplete?.();
+    return null;
+  }
+  return gsap.to(el5, {
+    height: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    opacity: 0,
+    filter: "blur(16px)",
+    overflow: "hidden",
+    duration: 0.25,
+    ease: "power2.in",
+    onComplete
+  });
+}
+function shake(el5, distance = 4) {
+  if (!el5 || !live()) return null;
+  gsap.killTweensOf(el5, "x");
+  return gsap.to(el5, {
+    keyframes: { x: [0, -distance, distance, -distance, 0] },
+    duration: 0.5,
+    ease: EASE.shake,
+    clearProps: "x,transform"
+  });
+}
+function ringPulse(el5, color = "var(--mk-accent-soft)") {
+  if (!el5 || !live()) return null;
+  const before = { color: el5.style.outlineColor, style: el5.style.outlineStyle, offset: el5.style.outlineOffset };
+  el5.style.outlineColor = color;
+  el5.style.outlineStyle = "solid";
+  el5.style.outlineOffset = "-4px";
+  const restore = () => {
+    el5.style.outlineColor = before.color;
+    el5.style.outlineStyle = before.style;
+    el5.style.outlineOffset = before.offset;
+    el5.style.removeProperty("outline-width");
+    if (el5.getAttribute("style") === "") el5.removeAttribute("style");
+  };
+  return gsap.fromTo(el5, { outlineWidth: 0 }, { keyframes: { outlineWidth: [0, 4, 0] }, duration: 1, ease: "power1.inOut", onComplete: restore, onInterrupt: restore });
+}
+function burst(origin, { count = 7, distance = 28, colors = ["var(--mk-accent)"], ring = true, size = 6 } = {}) {
+  if (!origin || !live()) return null;
+  const layer = document.createElement("span");
+  layer.setAttribute("aria-hidden", "true");
+  layer.dataset.mkBurst = "";
+  Object.assign(layer.style, { position: "absolute", inset: "0", pointerEvents: "none", overflow: "visible", display: "grid", placeItems: "center" });
+  const positioned = getComputedStyle(origin).position !== "static";
+  const previousPosition = origin.style.position;
+  if (!positioned) origin.style.position = "relative";
+  origin.append(layer);
+  const cleanup = () => {
+    layer.remove();
+    if (!positioned) origin.style.position = previousPosition;
+    if (origin.getAttribute("style") === "") origin.removeAttribute("style");
+  };
+  const timeline = gsap.timeline({ onComplete: cleanup, onInterrupt: cleanup });
+  if (ring) {
+    const circle = document.createElement("span");
+    Object.assign(circle.style, { position: "absolute", width: "100%", aspectRatio: "1", borderRadius: "50%", border: `2px solid ${colors[0]}` });
+    layer.append(circle);
+    timeline.fromTo(circle, { scale: 0.3, opacity: 0.9 }, { scale: 1.6, opacity: 0, duration: 0.5, ease: "power2.out" }, 0);
+  }
+  for (let i = 0; i < count; i++) {
+    const angle2 = i / count * Math.PI * 2 - Math.PI / 2;
+    for (const [k, scale] of [[0, 1], [1, 0.6]]) {
+      const dot = document.createElement("span");
+      Object.assign(dot.style, {
+        position: "absolute",
+        width: `${size * scale}px`,
+        height: `${size * scale}px`,
+        borderRadius: "50%",
+        background: colors[(i + k) % colors.length]
+      });
+      layer.append(dot);
+      const reach = distance * (k ? 0.72 : 1);
+      const turn = k ? 0.32 : 0;
+      timeline.fromTo(
+        dot,
+        { x: 0, y: 0, scale: 0, opacity: 1 },
+        { x: Math.cos(angle2 + turn) * reach, y: Math.sin(angle2 + turn) * reach, scale: 1, duration: 0.45, ease: "power3.out" },
+        0.05
+      );
+      timeline.to(dot, { scale: 0, opacity: 0, duration: 0.3, ease: "power2.in" }, 0.38);
+    }
+  }
+  return timeline;
+}
+var rolling = /* @__PURE__ */ new WeakMap();
+function rollDigits(el5, text, direction = 1, duration = 0.5) {
+  if (!el5) return null;
+  rolling.get(el5)?.progress(1).kill();
+  rolling.delete(el5);
+  const previous = el5.textContent ?? "";
+  if (previous === text || !live()) {
+    el5.textContent = text;
+    return null;
+  }
+  const width = Math.max(previous.length, text.length);
+  const oldChars = previous.padStart(width, " ");
+  const newChars = text.padStart(width, " ");
+  el5.textContent = "";
+  const label = document.createElement("span");
+  label.className = "mk-sr-only";
+  label.textContent = text;
+  const visual = document.createElement("span");
+  visual.setAttribute("aria-hidden", "true");
+  visual.style.display = "inline-flex";
+  const moving = [];
+  const padding = Math.min(width - previous.length, width - text.length);
+  for (let i = padding; i < width; i++) {
+    const before = oldChars[i];
+    const after = newChars[i];
+    const cell = document.createElement("span");
+    Object.assign(cell.style, { position: "relative", display: "inline-block", overflow: "hidden", whiteSpace: "pre" });
+    const next = document.createElement("span");
+    next.style.display = "inline-block";
+    next.textContent = after;
+    cell.append(next);
+    if (before !== after) {
+      const old = document.createElement("span");
+      Object.assign(old.style, { position: "absolute", left: "0", top: "0", display: "inline-block" });
+      old.textContent = before;
+      cell.append(old);
+      moving.push([old, next]);
+    }
+    visual.append(cell);
+  }
+  el5.append(label, visual);
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      el5.textContent = text;
+      rolling.delete(el5);
+    }
+  });
+  moving.forEach(([old, next], i) => {
+    timeline.to(old, { yPercent: -100 * direction, opacity: 0, filter: "blur(4px)", duration, ease: EASE.signature }, i * 0.03);
+    timeline.fromTo(next, { yPercent: 100 * direction, opacity: 0, filter: "blur(4px)" }, { yPercent: 0, opacity: 1, filter: "blur(0px)", duration, ease: EASE.signature }, i * 0.03);
+  });
+  rolling.set(el5, timeline);
+  return timeline;
+}
+
 // src/components/pagination/engine.ts
 var positive = (n, fallback) => Number.isFinite(n) ? Math.max(1, Math.min(Number.MAX_SAFE_INTEGER - 32, Math.floor(n))) : fallback;
 function createPagination(root, options = {}) {
@@ -2768,16 +2962,33 @@ function createPagination(root, options = {}) {
   if (!root || !pages) return inert({ setPage() {
   }, setTotalPages() {
   }, page: 1, totalPages: 1 });
+  registerMotion();
   const scope = createScope();
   const original = [...pages.childNodes];
+  const indicator = document.createElement("span");
+  indicator.dataset.mkPaginationIndicator = "";
+  indicator.setAttribute("aria-hidden", "true");
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (animation) => {
+    if (!animation) return;
+    effects.add(animation);
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+  let placed = false;
   const previous = root.querySelector("[data-mk-pagination-previous]");
   const next = root.querySelector("[data-mk-pagination-next]");
   let total = positive(options.totalPages, 10);
   let page = Math.min(total, positive(options.page, 1));
   const siblings = Math.min(10, Math.max(0, Number.isFinite(options.siblings) ? Math.floor(options.siblings) : 1));
   scope.attr(root, "data-mk-ready", "");
-  const render = () => {
+  scope.attr(root, "data-mk-glide", "");
+  const render = (animate = false) => {
     const hadFocus = pages.contains(document.activeElement);
+    const before = new Map([...pages.querySelectorAll("[data-mk-page]")].map((button2) => [button2.dataset.mkPage, button2.offsetLeft]));
     const selected = /* @__PURE__ */ new Set([1, total]);
     for (let n = Math.max(1, page - siblings); n <= Math.min(total, page + siblings); n++) selected.add(n);
     const fragment = document.createDocumentFragment();
@@ -2799,8 +3010,23 @@ function createPagination(root, options = {}) {
       fragment.append(button2);
       last = n;
     }
-    pages.replaceChildren(fragment);
+    pages.replaceChildren(indicator, fragment);
     if (hadFocus) pages.querySelector("[aria-current]")?.focus();
+    const motion = animate && !reduced();
+    if (motion) {
+      for (const button2 of pages.querySelectorAll("[data-mk-page]")) {
+        const from = before.get(button2.dataset.mkPage);
+        if (from === void 0) keep(gsap.fromTo(button2, { opacity: 0, scale: 0.6, filter: "blur(4px)" }, { opacity: 1, scale: 1, filter: "blur(0px)", duration: 0.3, ease: EASE.pop, clearProps: "opacity,transform,filter" }));
+        else if (from !== button2.offsetLeft) keep(gsap.fromTo(button2, { x: from - button2.offsetLeft }, { x: 0, duration: 0.35, ease: EASE.swatch, clearProps: "transform" }));
+      }
+    }
+    const current3 = pages.querySelector("[aria-current]");
+    if (current3) {
+      const box = { x: current3.offsetLeft, width: current3.offsetWidth, height: current3.offsetHeight };
+      if (motion && placed) keep(gsap.to(indicator, { ...box, duration: 0.4, ease: EASE.swatch }));
+      else gsap.set(indicator, box);
+      placed = true;
+    }
     if (previous) scope.attr(previous, "disabled", page === 1 ? "" : null);
     if (next) scope.attr(next, "disabled", page === total ? "" : null);
   };
@@ -2810,7 +3036,7 @@ function createPagination(root, options = {}) {
     if (candidate === page) return;
     const focused = pages.contains(document.activeElement);
     page = candidate;
-    render();
+    render(true);
     if (focused) pages.querySelector("[aria-current]")?.focus();
     if (notify) {
       options.onChange?.(page);
@@ -2820,6 +3046,8 @@ function createPagination(root, options = {}) {
   scope.on(root, "click", (event) => {
     const target = event.target.closest("button");
     if (!target || target.disabled) return;
+    if (!reduced()) keep(press(target));
+    if ((target === previous || target === next) && !reduced()) keep(gsap.fromTo(target, { x: target === next ? 4 : -4 }, { x: 0, duration: 0.45, ease: EASE.click, clearProps: "x" }));
     if (target === previous) setPage(page - 1);
     else if (target === next) setPage(page + 1);
     else if (target.dataset.mkPage) setPage(Number(target.dataset.mkPage));
@@ -2856,6 +3084,7 @@ function createPagination(root, options = {}) {
 var sequence = 0;
 var EDGE2 = 12;
 var GAP2 = 12;
+var FOLD_MS = 400;
 function createHoverCard(root, options = {}) {
   const trigger = root?.querySelector("[data-mk-hover-trigger]");
   const panel = root?.querySelector("[data-mk-hover-panel]");
@@ -2901,6 +3130,8 @@ function createHoverCard(root, options = {}) {
     if (left + box.width > view.width - EDGE2) shift = view.width - EDGE2 - box.width - left;
     if (left + shift < EDGE2) shift = EDGE2 - left;
     if (shift) root.style.setProperty("--mk-hover-shift", `${Math.round(shift)}px`);
+    const target = trigger.getBoundingClientRect();
+    root.style.setProperty("--mk-hover-origin-x", `${Math.round(target.left + target.width / 2 - (left + shift))}px`);
   };
   let pending = null;
   const schedulePlace = () => {
@@ -2915,13 +3146,33 @@ function createHoverCard(root, options = {}) {
     clearTimeout(timer2);
     timer2 = void 0;
   };
+  let folding;
+  const settleFold = () => {
+    clearTimeout(folding);
+    folding = void 0;
+    panel.removeEventListener("animationend", settleFold);
+    if (scope.disposed) return;
+    scope.attr(root, "data-mk-closing", null);
+    if (!opened) scope.attr(panel, "hidden", "");
+  };
+  scope.add(() => {
+    clearTimeout(folding);
+    panel.removeEventListener("animationend", settleFold);
+  });
   const set = (value) => {
     cancel();
     if (scope.disposed) return;
     const changed = value !== opened;
     opened = value;
     scope.attr(trigger, "aria-expanded", String(value));
-    scope.attr(panel, "hidden", value ? null : "");
+    if (value) {
+      if (folding !== void 0) settleFold();
+      scope.attr(panel, "hidden", null);
+    } else if (changed && !reduced() && root.dataset.mkInput !== "keyboard" && !panel.hidden) {
+      scope.attr(root, "data-mk-closing", "");
+      panel.addEventListener("animationend", settleFold);
+      folding = setTimeout(settleFold, FOLD_MS);
+    } else if (folding === void 0) scope.attr(panel, "hidden", "");
     scope.attr(root, "data-mk-open", value ? "" : null);
     if (value && changed) {
       scope.attr(root, "data-mk-input", pointerInput ? "pointer" : "keyboard");
@@ -4174,7 +4425,7 @@ function createSlotPicker(root, options = {}) {
       ctx.add(() => flowIn(fresh, { target: ".mk-slot-picker__time", style: 2, startScale: 0.7, blur: 32, duration: 0.3, stagger: 0.02, ease: "mk-slot-in" }));
     }
   };
-  const resolve = (d) => {
+  const resolve2 = (d) => {
     const source = slots;
     if (Array.isArray(source)) return source;
     if (typeof source === "function") return source(d);
@@ -4190,7 +4441,7 @@ function createSlotPicker(root, options = {}) {
     const mine = ++request;
     let result;
     try {
-      result = resolve(date);
+      result = resolve2(date);
     } catch {
       result = [];
     }
@@ -4209,324 +4460,136 @@ function createSlotPicker(root, options = {}) {
             renderTimes("ready", 0);
           }
         }
-      );
-    } else {
-      times = clean(result);
-      if (time2 && !times.includes(time2)) time2 = null;
-      renderTimes("ready", direction);
-    }
-  };
-  const syncHeading = () => {
-    if (!heading) return;
-    if (date) {
-      heading.textContent = labels.heading(date);
-      if (!heading.hasAttribute("data-mk-shown")) scope.attr(heading, "data-mk-shown", "");
-    }
-  };
-  const emit = () => {
-    const key2 = date ? dayKey(date) : "";
-    const value = date && time2 ? `${key2}T${time2}` : null;
-    if (output) {
-      output.value = value ?? "";
-      output.dispatchEvent(new Event("input", { bubbles: true }));
-      output.dispatchEvent(new Event("change", { bubbles: true }));
-    }
-    if (date && time2 && value) {
-      const detail = { date, time: time2, key: key2, value };
-      options.onChange?.(detail);
-      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail }));
-    }
-  };
-  const selectDate = (input, notify = true) => {
-    if (scope.disposed) return;
-    const d = toDate(input);
-    if (disabled(d)) return;
-    const direction = date ? Math.sign(d.getTime() - date.getTime()) : 0;
-    if (sameDay(d, date)) return;
-    date = d;
-    time2 = null;
-    focusDay = d;
-    if (!sameMonth(d, month)) {
-      const dir = d > month ? 1 : -1;
-      month = d;
-      renderDays(dir);
-    }
-    daysHost.querySelectorAll('[role="gridcell"]').forEach((cell) => {
-      const b = cell.querySelector("[data-mk-slot-day]");
-      if (b) {
-        cell.setAttribute("aria-selected", String(b.dataset.mkSlotDay === dayKey(d)));
-        b.tabIndex = b.dataset.mkSlotDay === dayKey(d) ? 0 : -1;
-      }
-    });
-    syncHeading();
-    load(direction);
-    if (notify) {
-      options.onDateChange?.(d);
-      emit();
-    }
-  };
-  const selectTime = (t, notify = true) => {
-    if (scope.disposed || !date) return;
-    if (t !== null && !times.includes(t)) return;
-    time2 = t;
-    timesHost.querySelectorAll("[data-mk-slot-time]").forEach((b) => {
-      b.setAttribute("aria-checked", String(b.dataset.mkSlotTime === t));
-      b.tabIndex = (t ? b.dataset.mkSlotTime === t : b === timesHost.querySelector("[data-mk-slot-time]")) ? 0 : -1;
-    });
-    if (notify) emit();
-  };
-  scope.on(root, "click", (e) => {
-    const target = e.target.closest("button");
-    if (!target || target.disabled || !root.contains(target)) return;
-    if (target === prev) moveFocus(addMonths(month, -1), false);
-    else if (target === next) moveFocus(addMonths(month, 1), false);
-    else if (target.dataset.mkSlotDay) selectDate(target.dataset.mkSlotDay);
-    else if (target.dataset.mkSlotTime) selectTime(target.dataset.mkSlotTime);
-  });
-  scope.on(daysHost, "keydown", (e) => {
-    const event = e;
-    const key2 = event.target.dataset?.mkSlotDay;
-    if (!key2) return;
-    const d = toDate(key2);
-    const to = {
-      ArrowLeft: () => addDays(d, -1),
-      ArrowRight: () => addDays(d, 1),
-      ArrowUp: () => addDays(d, -7),
-      ArrowDown: () => addDays(d, 7),
-      Home: () => startOfWeek(d, firstDay),
-      End: () => addDays(startOfWeek(d, firstDay), 6),
-      PageUp: () => addMonths(d, -1),
-      PageDown: () => addMonths(d, 1)
-    }[event.key]?.();
-    if (!to) return;
-    event.preventDefault();
-    moveFocus(to, true);
-  });
-  scope.on(timesHost, "keydown", (e) => {
-    const event = e;
-    const current3 = event.target.dataset?.mkSlotTime;
-    if (!current3) return;
-    const i = times.indexOf(current3);
-    const to = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: times.length - 1 }[event.key];
-    if (to === void 0) return;
-    event.preventDefault();
-    const t = times[(to + times.length) % times.length];
-    selectTime(t);
-    timesHost.querySelector(`[data-mk-slot-time="${t}"]`)?.focus();
-  });
-  renderDays(0);
-  if (date) {
-    syncHeading();
-    load(0);
-    if (time2 && !times.includes(time2)) time2 = null;
-  } else renderTimes("placeholder", 0);
-  return {
-    selectDate: (d) => selectDate(d),
-    selectTime: (t) => selectTime(t),
-    setSlots(source) {
-      if (scope.disposed) return;
-      slots = fromJson(source) ?? [];
-      load(0);
-    },
-    get date() {
-      return date;
-    },
-    get time() {
-      return time2;
-    },
-    get value() {
-      return date && time2 ? `${dayKey(date)}T${time2}` : null;
-    },
-    destroy: () => scope.dispose()
-  };
-}
-
-// src/motion/micro.ts
-var list2 = (targets) => !targets ? [] : targets instanceof Element ? [targets] : [...targets];
-var live = () => {
-  registerMotion();
-  return !reduced();
-};
-function press(el5) {
-  if (!el5 || !live()) return null;
-  gsap.killTweensOf(el5, "scaleX,scaleY");
-  return gsap.timeline({
-    onComplete: () => {
-      gsap.set(el5, { clearProps: "scale,transform" });
-    }
-  }).to(el5, { scaleX: 0.95, scaleY: 0.9, duration: 0.1, ease: "power2.out" }).to(el5, { scaleX: 1, scaleY: 1, duration: 0.5, ease: EASE.click });
-}
-function blurIn(targets, { from = "rise", stagger = 0.05, delay = 0, duration } = {}) {
-  const items = list2(targets);
-  if (!items.length || !live()) return null;
-  const start = from === "pop" ? { opacity: 0, scale: 0.7, filter: "blur(32px)" } : from === "soft" ? { opacity: 0, scale: 0.96, filter: "blur(16px)" } : { opacity: 0, y: -20, filter: "blur(16px)" };
-  return gsap.fromTo(items, start, {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    filter: "blur(0px)",
-    duration: duration ?? (from === "pop" ? 0.3 : 0.5),
-    ease: from === "pop" ? EASE.pop : "power2.out",
-    stagger,
-    delay,
-    clearProps: "opacity,transform,filter"
-  });
-}
-function blurOut(targets, { to = "up", onComplete } = {}) {
-  const items = list2(targets);
-  if (!items.length) return null;
-  if (!live()) {
-    onComplete?.();
-    return null;
-  }
-  const end = to === "left" ? { x: -64 } : to === "down" ? { y: 24 } : { y: -20 };
-  return gsap.to(items, { ...end, opacity: 0, filter: "blur(16px)", duration: 0.5, ease: "power2.out", onComplete });
-}
-function collapse(el5, { onComplete } = {}) {
-  if (!el5) return null;
-  if (!live()) {
-    onComplete?.();
-    return null;
-  }
-  return gsap.to(el5, {
-    height: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    marginTop: 0,
-    marginBottom: 0,
-    opacity: 0,
-    filter: "blur(16px)",
-    overflow: "hidden",
-    duration: 0.25,
-    ease: "power2.in",
-    onComplete
-  });
-}
-function shake(el5, distance = 4) {
-  if (!el5 || !live()) return null;
-  gsap.killTweensOf(el5, "x");
-  return gsap.to(el5, {
-    keyframes: { x: [0, -distance, distance, -distance, 0] },
-    duration: 0.5,
-    ease: EASE.shake,
-    clearProps: "x,transform"
-  });
-}
-function ringPulse(el5, color = "var(--mk-accent-soft)") {
-  if (!el5 || !live()) return null;
-  const before = { color: el5.style.outlineColor, style: el5.style.outlineStyle, offset: el5.style.outlineOffset };
-  el5.style.outlineColor = color;
-  el5.style.outlineStyle = "solid";
-  el5.style.outlineOffset = "-4px";
-  const restore = () => {
-    el5.style.outlineColor = before.color;
-    el5.style.outlineStyle = before.style;
-    el5.style.outlineOffset = before.offset;
-    el5.style.removeProperty("outline-width");
-    if (el5.getAttribute("style") === "") el5.removeAttribute("style");
-  };
-  return gsap.fromTo(el5, { outlineWidth: 0 }, { keyframes: { outlineWidth: [0, 4, 0] }, duration: 1, ease: "power1.inOut", onComplete: restore, onInterrupt: restore });
-}
-function burst(origin, { count = 7, distance = 28, colors = ["var(--mk-accent)"], ring = true, size = 6 } = {}) {
-  if (!origin || !live()) return null;
-  const layer = document.createElement("span");
-  layer.setAttribute("aria-hidden", "true");
-  layer.dataset.mkBurst = "";
-  Object.assign(layer.style, { position: "absolute", inset: "0", pointerEvents: "none", overflow: "visible", display: "grid", placeItems: "center" });
-  const positioned = getComputedStyle(origin).position !== "static";
-  const previousPosition = origin.style.position;
-  if (!positioned) origin.style.position = "relative";
-  origin.append(layer);
-  const cleanup = () => {
-    layer.remove();
-    if (!positioned) origin.style.position = previousPosition;
-    if (origin.getAttribute("style") === "") origin.removeAttribute("style");
-  };
-  const timeline = gsap.timeline({ onComplete: cleanup, onInterrupt: cleanup });
-  if (ring) {
-    const circle = document.createElement("span");
-    Object.assign(circle.style, { position: "absolute", width: "100%", aspectRatio: "1", borderRadius: "50%", border: `2px solid ${colors[0]}` });
-    layer.append(circle);
-    timeline.fromTo(circle, { scale: 0.3, opacity: 0.9 }, { scale: 1.6, opacity: 0, duration: 0.5, ease: "power2.out" }, 0);
-  }
-  for (let i = 0; i < count; i++) {
-    const angle2 = i / count * Math.PI * 2 - Math.PI / 2;
-    for (const [k, scale] of [[0, 1], [1, 0.6]]) {
-      const dot = document.createElement("span");
-      Object.assign(dot.style, {
-        position: "absolute",
-        width: `${size * scale}px`,
-        height: `${size * scale}px`,
-        borderRadius: "50%",
-        background: colors[(i + k) % colors.length]
-      });
-      layer.append(dot);
-      const reach = distance * (k ? 0.72 : 1);
-      const turn = k ? 0.32 : 0;
-      timeline.fromTo(
-        dot,
-        { x: 0, y: 0, scale: 0, opacity: 1 },
-        { x: Math.cos(angle2 + turn) * reach, y: Math.sin(angle2 + turn) * reach, scale: 1, duration: 0.45, ease: "power3.out" },
-        0.05
-      );
-      timeline.to(dot, { scale: 0, opacity: 0, duration: 0.3, ease: "power2.in" }, 0.38);
-    }
-  }
-  return timeline;
-}
-var rolling = /* @__PURE__ */ new WeakMap();
-function rollDigits(el5, text, direction = 1, duration = 0.5) {
-  if (!el5) return null;
-  rolling.get(el5)?.progress(1).kill();
-  rolling.delete(el5);
-  const previous = el5.textContent ?? "";
-  if (previous === text || !live()) {
-    el5.textContent = text;
-    return null;
-  }
-  const width = Math.max(previous.length, text.length);
-  const oldChars = previous.padStart(width, " ");
-  const newChars = text.padStart(width, " ");
-  el5.textContent = "";
-  const label = document.createElement("span");
-  label.className = "mk-sr-only";
-  label.textContent = text;
-  const visual = document.createElement("span");
-  visual.setAttribute("aria-hidden", "true");
-  visual.style.display = "inline-flex";
-  const moving = [];
-  const padding = Math.min(width - previous.length, width - text.length);
-  for (let i = padding; i < width; i++) {
-    const before = oldChars[i];
-    const after = newChars[i];
-    const cell = document.createElement("span");
-    Object.assign(cell.style, { position: "relative", display: "inline-block", overflow: "hidden", whiteSpace: "pre" });
-    const next = document.createElement("span");
-    next.style.display = "inline-block";
-    next.textContent = after;
-    cell.append(next);
-    if (before !== after) {
-      const old = document.createElement("span");
-      Object.assign(old.style, { position: "absolute", left: "0", top: "0", display: "inline-block" });
-      old.textContent = before;
-      cell.append(old);
-      moving.push([old, next]);
+      );
+    } else {
+      times = clean(result);
+      if (time2 && !times.includes(time2)) time2 = null;
+      renderTimes("ready", direction);
     }
-    visual.append(cell);
-  }
-  el5.append(label, visual);
-  const timeline = gsap.timeline({
-    onComplete: () => {
-      el5.textContent = text;
-      rolling.delete(el5);
+  };
+  const syncHeading = () => {
+    if (!heading) return;
+    if (date) {
+      heading.textContent = labels.heading(date);
+      if (!heading.hasAttribute("data-mk-shown")) scope.attr(heading, "data-mk-shown", "");
+    }
+  };
+  const emit = () => {
+    const key2 = date ? dayKey(date) : "";
+    const value = date && time2 ? `${key2}T${time2}` : null;
+    if (output) {
+      output.value = value ?? "";
+      output.dispatchEvent(new Event("input", { bubbles: true }));
+      output.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    if (date && time2 && value) {
+      const detail = { date, time: time2, key: key2, value };
+      options.onChange?.(detail);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail }));
     }
+  };
+  const selectDate = (input, notify = true) => {
+    if (scope.disposed) return;
+    const d = toDate(input);
+    if (disabled(d)) return;
+    const direction = date ? Math.sign(d.getTime() - date.getTime()) : 0;
+    if (sameDay(d, date)) return;
+    date = d;
+    time2 = null;
+    focusDay = d;
+    if (!sameMonth(d, month)) {
+      const dir = d > month ? 1 : -1;
+      month = d;
+      renderDays(dir);
+    }
+    daysHost.querySelectorAll('[role="gridcell"]').forEach((cell) => {
+      const b = cell.querySelector("[data-mk-slot-day]");
+      if (b) {
+        cell.setAttribute("aria-selected", String(b.dataset.mkSlotDay === dayKey(d)));
+        b.tabIndex = b.dataset.mkSlotDay === dayKey(d) ? 0 : -1;
+      }
+    });
+    syncHeading();
+    load(direction);
+    if (notify) {
+      options.onDateChange?.(d);
+      emit();
+    }
+  };
+  const selectTime = (t, notify = true) => {
+    if (scope.disposed || !date) return;
+    if (t !== null && !times.includes(t)) return;
+    time2 = t;
+    timesHost.querySelectorAll("[data-mk-slot-time]").forEach((b) => {
+      b.setAttribute("aria-checked", String(b.dataset.mkSlotTime === t));
+      b.tabIndex = (t ? b.dataset.mkSlotTime === t : b === timesHost.querySelector("[data-mk-slot-time]")) ? 0 : -1;
+    });
+    if (notify) emit();
+  };
+  scope.on(root, "click", (e) => {
+    const target = e.target.closest("button");
+    if (!target || target.disabled || !root.contains(target)) return;
+    if (target === prev) moveFocus(addMonths(month, -1), false);
+    else if (target === next) moveFocus(addMonths(month, 1), false);
+    else if (target.dataset.mkSlotDay) selectDate(target.dataset.mkSlotDay);
+    else if (target.dataset.mkSlotTime) selectTime(target.dataset.mkSlotTime);
   });
-  moving.forEach(([old, next], i) => {
-    timeline.to(old, { yPercent: -100 * direction, opacity: 0, filter: "blur(4px)", duration, ease: EASE.signature }, i * 0.03);
-    timeline.fromTo(next, { yPercent: 100 * direction, opacity: 0, filter: "blur(4px)" }, { yPercent: 0, opacity: 1, filter: "blur(0px)", duration, ease: EASE.signature }, i * 0.03);
+  scope.on(daysHost, "keydown", (e) => {
+    const event = e;
+    const key2 = event.target.dataset?.mkSlotDay;
+    if (!key2) return;
+    const d = toDate(key2);
+    const to = {
+      ArrowLeft: () => addDays(d, -1),
+      ArrowRight: () => addDays(d, 1),
+      ArrowUp: () => addDays(d, -7),
+      ArrowDown: () => addDays(d, 7),
+      Home: () => startOfWeek(d, firstDay),
+      End: () => addDays(startOfWeek(d, firstDay), 6),
+      PageUp: () => addMonths(d, -1),
+      PageDown: () => addMonths(d, 1)
+    }[event.key]?.();
+    if (!to) return;
+    event.preventDefault();
+    moveFocus(to, true);
   });
-  rolling.set(el5, timeline);
-  return timeline;
+  scope.on(timesHost, "keydown", (e) => {
+    const event = e;
+    const current3 = event.target.dataset?.mkSlotTime;
+    if (!current3) return;
+    const i = times.indexOf(current3);
+    const to = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: times.length - 1 }[event.key];
+    if (to === void 0) return;
+    event.preventDefault();
+    const t = times[(to + times.length) % times.length];
+    selectTime(t);
+    timesHost.querySelector(`[data-mk-slot-time="${t}"]`)?.focus();
+  });
+  renderDays(0);
+  if (date) {
+    syncHeading();
+    load(0);
+    if (time2 && !times.includes(time2)) time2 = null;
+  } else renderTimes("placeholder", 0);
+  return {
+    selectDate: (d) => selectDate(d),
+    selectTime: (t) => selectTime(t),
+    setSlots(source) {
+      if (scope.disposed) return;
+      slots = fromJson(source) ?? [];
+      load(0);
+    },
+    get date() {
+      return date;
+    },
+    get time() {
+      return time2;
+    },
+    get value() {
+      return date && time2 ? `${dayKey(date)}T${time2}` : null;
+    },
+    destroy: () => scope.dispose()
+  };
 }
 
 // src/components/attachment/engine.ts
@@ -6232,6 +6295,22 @@ function barPath(x, width, base, end, rounded) {
   if (!r) return `M${round(x)},${round(base)}V${round(end)}H${round(x + width)}V${round(base)}Z`;
   return `M${round(x)},${round(base)}V${round(end + dir * r)}Q${round(x)},${round(end)} ${round(x + r)},${round(end)}H${round(x + width - r)}Q${round(x + width)},${round(end)} ${round(x + width)},${round(end + dir * r)}V${round(base)}Z`;
 }
+function pillPath(x, width, a, b) {
+  const top = Math.min(a, b), bottom = Math.max(a, b);
+  const r = Math.min(width / 2, (bottom - top) / 2);
+  return `M${round(x + r)},${round(top)}H${round(x + width - r)}Q${round(x + width)},${round(top)} ${round(x + width)},${round(top + r)}V${round(bottom - r)}Q${round(x + width)},${round(bottom)} ${round(x + width - r)},${round(bottom)}H${round(x + r)}Q${round(x)},${round(bottom)} ${round(x)},${round(bottom - r)}V${round(top + r)}Q${round(x)},${round(top)} ${round(x + r)},${round(top)}Z`;
+}
+function linePath(points, smooth) {
+  if (!points.length) return "";
+  let path = `M${round(points[0][0])},${round(points[0][1])}`;
+  const slopes = points.slice(1).map((point, i) => (point[1] - points[i][1]) / (point[0] - points[i][0] || 1));
+  const tangents = points.map((_, i) => i === 0 ? slopes[0] : i === points.length - 1 ? slopes[i - 1] : slopes[i - 1] * slopes[i] <= 0 ? 0 : 2 * slopes[i - 1] * slopes[i] / (slopes[i - 1] + slopes[i]));
+  for (let i = 1; i < points.length; i++) {
+    const [x0, y0] = points[i - 1], [x, y] = points[i], dx = (x - x0) / 3;
+    path += smooth ? `C${round(x0 + dx)},${round(y0 + tangents[i - 1] * dx)} ${round(x - dx)},${round(y - tangents[i] * dx)} ${round(x)},${round(y)}` : `L${round(x)},${round(y)}`;
+  }
+  return path;
+}
 function modelOf(options) {
   const fromPoints = options.points?.length ? { labels: options.points.map((point) => String(point.label)), series: [{ name: options.label ?? "", values: options.points.map((point) => point.value) }] } : null;
   const labels = fromPoints?.labels ?? (options.labels ?? []).map(String);
@@ -6244,7 +6323,9 @@ function modelOf(options) {
     name: String(series2.name ?? ""),
     values: Array.from({ length: count }, (_, j) => finite3(series2.values[j]) ? series2.values[j] : null),
     color: series2.color ?? (mono ? "var(--mk-chart-mono)" : i < SLOTS ? `var(--mk-chart-${i + 1})` : "var(--mk-chart-other)"),
-    dash: series2.dash
+    dash: series2.dash,
+    type: series2.type,
+    lowerValues: series2.lowerValues ? Array.from({ length: count }, (_, j) => finite3(series2.lowerValues[j]) ? series2.lowerValues[j] : null) : void 0
   }));
   return { labels: fullLabels, series };
 }
@@ -6312,7 +6393,9 @@ function createChart(root, initial = {}) {
     if (options.formatValue) return options.formatValue(value);
     return new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(value);
   };
-  const type = () => options.type === "bar" || options.type === "area" ? options.type : "line";
+  const type = () => options.type === "bar" || options.type === "area" || options.type === "composed" ? options.type : "line";
+  const seriesType = (index) => type() === "composed" ? model.series[index].type ?? "line" : type();
+  const hasBars = () => model.series.some((_, index) => seriesType(index) === "bar");
   const stacked = () => type() === "bar" && Boolean(options.stacked) && model.series.length > 1;
   const hasData = () => model.labels.length > 0 && model.series.some((series) => series.values.some(finite3));
   const totalsOf = (values, index) => {
@@ -6327,6 +6410,13 @@ function createChart(root, initial = {}) {
     return { up, down };
   };
   const targetValues = () => model.series.map((series) => series.values);
+  const lowerValues = () => model.series.map((series) => series.lowerValues ?? []);
+  const rangeText = (series, index) => {
+    const value = series.values[index];
+    const lower = series.lowerValues?.[index];
+    if (!finite3(value)) return "\u2014";
+    return finite3(lower) ? `${format(lower)} \u2013 ${format(value)}` : format(value);
+  };
   const totals = (index) => totalsOf(targetValues(), index);
   const domainOf = (values) => {
     let lo = 0;
@@ -6344,6 +6434,12 @@ function createChart(root, initial = {}) {
           lo = Math.min(lo, value);
         }
       }
+      for (const list3 of lowerValues()) {
+        if (finite3(list3[i])) {
+          lo = Math.min(lo, list3[i]);
+          hi = Math.max(hi, list3[i]);
+        }
+      }
     });
     if (hi === lo) hi = lo + 1;
     const step = niceStep((hi - lo) / 4);
@@ -6389,7 +6485,7 @@ function createChart(root, initial = {}) {
       for (const series of model.series) {
         const td = document.createElement("td");
         const value = series.values[i];
-        td.textContent = finite3(value) ? format(value) : "\u2014";
+        td.textContent = rangeText(series, i);
         row.append(td);
       }
       if (stacked()) {
@@ -6407,11 +6503,11 @@ function createChart(root, initial = {}) {
     const show = options.legend ?? model.series.length > 1;
     legend.hidden = !show || !hasData();
     if (legend.hidden) return;
-    for (const series of model.series) {
+    for (const [index, series] of model.series.entries()) {
       const item = document.createElement("li");
       const swatch = document.createElement("span");
       swatch.dataset.mkChartSwatch = "";
-      swatch.dataset.mkType = type();
+      swatch.dataset.mkType = seriesType(index);
       swatch.style.background = series.color;
       swatch.style.color = series.color;
       if (series.dash) swatch.dataset.mkDash = "";
@@ -6427,19 +6523,19 @@ function createChart(root, initial = {}) {
     for (let i = list3.length - 1; i >= 0; i--) if (finite3(list3[i])) return i;
     return -1;
   };
-  const paint = (values, lo, hi, step) => {
+  const paint = (values, lo, hi, step, lower = lowerValues()) => {
     canvas.replaceChildren();
     const width = Math.max(120, Math.round(plot.clientWidth || root.clientWidth || 600));
     const height = Math.max(80, Math.round(finite3(options.height) ? options.height : 240));
     canvas.setAttribute("viewBox", `0 0 ${width} ${height}`);
     canvas.setAttribute("width", String(width));
     canvas.setAttribute("height", String(height));
-    const bar = type() === "bar";
+    const bar = hasBars();
     const axis = Boolean(options.axis);
     const ticks = [];
     for (let t = lo; t <= hi + step / 2; t += step) ticks.push(Number(t.toPrecision(12)));
     const tickText = ticks.map(format);
-    const withEnd = !bar && options.endLabel !== false && lastPoint(values[0]) >= 0;
+    const withEnd = seriesType(0) !== "bar" && options.endLabel !== false && lastPoint(values[0]) >= 0;
     const left = axis ? Math.min(96, Math.max(28, Math.max(...tickText.map((text) => text.length)) * 7 + 12)) : 4;
     const top = 16;
     const right = withEnd ? Math.min(120, Math.max(48, format(values[0][lastPoint(values[0])]).length * 7.5 + 28)) : 8;
@@ -6452,6 +6548,7 @@ function createChart(root, initial = {}) {
     const slot = plotW / n;
     const xs = model.labels.map((_, i) => bar ? left + slot * (i + 0.5) : n === 1 ? left + plotW / 2 : left + plotW * i / (n - 1));
     geometry = { width, height, top, bottom: top + plotH, left, right: width - right, xs, y, base };
+    shown4 = { values, lower, lo, hi, type: type(), stacked: stacked() };
     const grid = svg("g", { "data-mk-part": "grid" });
     if (!axis) {
       const zero = svg("line", { x1: left, x2: width - right, y1: round(base), y2: round(base) });
@@ -6488,11 +6585,55 @@ function createChart(root, initial = {}) {
     const marks = svg("g", { "data-mk-part": "series" });
     const defs = svg("defs");
     if (bar) {
-      const groups = stacked() ? 1 : model.series.length;
-      const barWidth = Math.max(2, Math.min(BAR_MAX, (slot * 0.62 - GAP3 * (groups - 1)) / groups));
+      const barIndices = model.series.flatMap((_, index) => seriesType(index) === "bar" ? [index] : []);
+      const groups = stacked() ? 1 : barIndices.length;
+      const maxWidth = finite3(options.barWidth) ? Math.max(2, Math.min(96, options.barWidth)) : BAR_MAX;
+      const barWidth = Math.max(2, Math.min(maxWidth, (slot * 0.62 - GAP3 * (groups - 1)) / groups));
+      const pill2 = options.barStyle === "pill";
+      const trackLayer = svg("g", { "data-mk-part": "bar-tracks" });
+      canvas.append(trackLayer);
+      if (options.barFill && options.barFill !== "solid") {
+        model.series.forEach((series, k) => {
+          const gradient = svg("linearGradient", { id: `${uid2}-bar-${k}`, x1: 0, y1: 0, x2: 0, y2: 1 });
+          for (const [offset, opacity] of [["0", "1"], ["1", "0.4"]]) {
+            const stop2 = svg("stop", { offset });
+            stop2.style.stopColor = series.color;
+            stop2.style.stopOpacity = opacity;
+            gradient.append(stop2);
+          }
+          defs.append(gradient);
+        });
+        const hatch = svg("pattern", { id: `${uid2}-hatch`, patternUnits: "userSpaceOnUse", width: 6, height: 6, patternTransform: "rotate(35)" });
+        const ground = svg("rect", { width: 6, height: 6 });
+        ground.style.fill = "var(--mk-chart-track)";
+        const stripe = svg("line", { x1: 0, x2: 0, y1: 0, y2: 6 });
+        stripe.style.stroke = "var(--mk-chart-grid)";
+        stripe.style.strokeWidth = "2";
+        hatch.append(ground, stripe);
+        defs.append(hatch);
+      }
+      const fillBar = (path, k, index) => {
+        const fill = options.barFill && options.barFill !== "solid" ? `url(#${uid2}-bar-${k})` : model.series[k].color;
+        path.style.setProperty("--mk-bar-fill", fill);
+        path.style.fill = options.barFill === "spotlight" && index !== (selected ?? n - 1) ? `url(#${uid2}-hatch)` : fill;
+      };
+      const addTrack = (x) => {
+        if (!options.barTrack) return;
+        const path = svg("path", { d: pillPath(x, barWidth, top, base), "data-mk-part": "bar-track" });
+        trackLayer.append(path);
+      };
       const totalsLayer = svg("g", { "data-mk-part": "totals" });
       model.labels.forEach((_, i) => {
         if (stacked()) {
+          const clipId = `${uid2}-stack-${i}`;
+          if (pill2) {
+            const sum = totalsOf(values, i);
+            const clip = svg("clipPath", { id: clipId });
+            if (sum.up) clip.append(svg("path", { d: pillPath(xs[i] - barWidth / 2, barWidth, base, y(sum.up)) }));
+            if (sum.down) clip.append(svg("path", { d: pillPath(xs[i] - barWidth / 2, barWidth, base, y(sum.down)) }));
+            defs.append(clip);
+          }
+          addTrack(xs[i] - barWidth / 2);
           let up = 0;
           let down = 0;
           const outer = { up: -1, down: -1 };
@@ -6511,8 +6652,9 @@ function createChart(root, initial = {}) {
             const start = y(from) + (from !== 0 ? value > 0 ? -GAP3 : GAP3 : 0);
             const end = y(to);
             if (value > 0 && end >= start || value < 0 && end <= start) return;
-            const path = svg("path", { d: barPath(xs[i] - barWidth / 2, barWidth, start, end, k === (value > 0 ? outer.up : outer.down)), "data-mk-index": i, "data-mk-series": k });
-            path.style.fill = model.series[k].color;
+            const path = svg("path", { d: barPath(xs[i] - barWidth / 2, barWidth, start, end, !pill2 && k === (value > 0 ? outer.up : outer.down)), "data-mk-part": "bar", "data-mk-index": i, "data-mk-series": k });
+            if (pill2) path.setAttribute("clip-path", `url(#${clipId})`);
+            fillBar(path, k, i);
             marks.append(path);
           });
           if (slot >= 22 && up > 0) {
@@ -6524,30 +6666,35 @@ function createChart(root, initial = {}) {
         } else {
           const groupWidth = groups * barWidth + GAP3 * (groups - 1);
           values.forEach((list3, k) => {
+            if (seriesType(k) !== "bar") return;
             const value = list3[i];
+            const x = xs[i] - groupWidth / 2 + barIndices.indexOf(k) * (barWidth + GAP3);
+            addTrack(x);
             if (!finite3(value) || value === 0) return;
-            const x = xs[i] - groupWidth / 2 + k * (barWidth + GAP3);
-            const path = svg("path", { d: barPath(x, barWidth, base, y(value), true), "data-mk-index": i, "data-mk-series": k });
-            path.style.fill = model.series[k].color;
+            const path = svg("path", { d: pill2 ? pillPath(x, barWidth, base, y(value)) : barPath(x, barWidth, base, y(value), true), "data-mk-part": "bar", "data-mk-index": i, "data-mk-series": k });
+            fillBar(path, k, i);
             marks.append(path);
           });
         }
       });
       if (totalsLayer.childNodes.length) canvas.append(totalsLayer);
-    } else {
+    }
+    if (model.series.some((_, index) => seriesType(index) !== "bar")) {
       values.forEach((list3, k) => {
+        if (seriesType(k) === "bar") return;
         const series = model.series[k];
         const runs2 = [];
         let run = [];
         list3.forEach((value, i) => {
-          if (finite3(value)) run.push([xs[i], y(value)]);
+          const bottomValue = lower[k]?.[i];
+          if (finite3(value) && (!series.lowerValues || finite3(bottomValue))) run.push([xs[i], y(value), finite3(bottomValue) ? y(bottomValue) : base]);
           else if (run.length) {
             runs2.push(run);
             run = [];
           }
         });
         if (run.length) runs2.push(run);
-        if (type() === "area") {
+        if (seriesType(k) === "area") {
           const gradient = svg("linearGradient", { id: `${uid2}-fill-${k}`, x1: 0, x2: 0, y1: 0, y2: 1 });
           const stop2 = (offset, opacity) => {
             const element = svg("stop", { offset });
@@ -6559,8 +6706,10 @@ function createChart(root, initial = {}) {
           defs.append(gradient);
           for (const points of runs2) {
             if (points.length < 2) continue;
-            const d = `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join("L")}L${round(points[points.length - 1][0])},${round(base)}L${round(points[0][0])},${round(base)}Z`;
-            const area = svg("path", { d, "data-mk-part": "area" });
+            const upper = linePath(points, options.curve === "smooth");
+            const bottom2 = linePath([...points].reverse().map(([px, , py]) => [px, py]), options.curve === "smooth");
+            const d = `${upper}${bottom2.replace(/^M/, "L")}Z`;
+            const area = svg("path", { d, "data-mk-part": "area", "data-mk-series": k });
             area.style.fill = `url(#${uid2}-fill-${k})`;
             marks.append(area);
           }
@@ -6572,7 +6721,7 @@ function createChart(root, initial = {}) {
             marks.append(dot);
             continue;
           }
-          const line = svg("path", { d: `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join("L")}`, "data-mk-part": "line" });
+          const line = svg("path", { d: linePath(points, options.curve === "smooth"), "data-mk-part": "line" });
           line.style.stroke = series.color;
           const dotted = Boolean(series.dash) && Number(series.dash.trim().split(/[\s,]+/)[0]) <= 1;
           line.style.strokeWidth = dotted ? "2.5" : series.dash ? "1.5" : k === 0 ? "2.5" : "2";
@@ -6581,7 +6730,7 @@ function createChart(root, initial = {}) {
         }
       });
       const last2 = lastPoint(values[0]);
-      if (last2 >= 0 && !model.series[0].dash) {
+      if (last2 >= 0 && seriesType(0) !== "bar" && !model.series[0].dash) {
         const point = svg("circle", { cx: round(xs[last2]), cy: round(y(values[0][last2])), r: 5, "data-mk-part": "end" });
         point.style.fill = model.series[0].color;
         marks.append(point);
@@ -6607,6 +6756,11 @@ function createChart(root, initial = {}) {
     cursor.replaceChildren();
     if (band) band.style.display = "none";
     for (const mark of canvas.querySelectorAll("[data-mk-index]")) mark.removeAttribute("data-mk-dim");
+    for (const mark of canvas.querySelectorAll('[data-mk-part="bar"]')) {
+      const index = Number(mark.dataset.mkIndex);
+      mark.toggleAttribute("data-mk-active", index === selected);
+      if (options.barFill === "spotlight") mark.style.fill = index === (selected ?? model.labels.length - 1) ? mark.style.getPropertyValue("--mk-bar-fill") : `url(#${uid2}-hatch)`;
+    }
     if (selected === null || !hasData()) {
       if (!tooltip.hidden && !reduced()) {
         gsap.killTweensOf(tooltip, "opacity,scale");
@@ -6631,6 +6785,24 @@ function createChart(root, initial = {}) {
       for (const mark of canvas.querySelectorAll("[data-mk-index]")) if (mark.getAttribute("data-mk-index") !== String(i)) mark.setAttribute("data-mk-dim", "");
       const { up, down } = totals(i);
       anchorY = stacked() ? geometry.y(up || down) : Math.min(...model.series.map((series) => finite3(series.values[i]) ? geometry.y(series.values[i]) : geometry.bottom));
+      if (options.barStyle === "pill") {
+        const amount = stacked() ? up + down : model.series[0]?.values[i];
+        if (finite3(amount)) {
+          const label = format(amount), width = Math.max(40, label.length * 7 + 18);
+          const bx = Math.max(0, Math.min(geometry.width - width, x - width / 2));
+          const by = Math.max(0, anchorY - 32);
+          const group = svg("g", { "data-mk-part": "bar-value" });
+          group.append(svg("rect", { x: round(bx), y: round(by), width, height: 24, rx: 12 }));
+          const text = svg("text", { x: round(bx + width / 2), y: round(by + 12), "text-anchor": "middle", "dominant-baseline": "middle" });
+          text.textContent = label;
+          group.append(text);
+          cursor.append(group);
+          const marker = svg("circle", { cx: round(x), cy: round(anchorY), r: 4, "data-mk-part": "marker" });
+          marker.style.fill = model.series[0]?.color ?? "var(--mk-text)";
+          cursor.append(marker);
+          if (fresh && !reduced()) keep(gsap.fromTo(group, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.3, ease: EASE.pop }));
+        }
+      }
     } else {
       cursor.append(svg("line", { x1: round(x), x2: round(x), y1: geometry.top, y2: geometry.bottom, "data-mk-part": "guide" }));
       model.series.forEach((series) => {
@@ -6661,10 +6833,10 @@ function createChart(root, initial = {}) {
       const name = document.createElement("span");
       name.textContent = series.name;
       const amount = document.createElement("b");
-      amount.textContent = finite3(value) ? format(value) : "\u2014";
+      amount.textContent = rangeText(series, i);
       row.append(swatch, name, amount);
       tooltip.append(row);
-      rows.push(`${series.name ? `${series.name}: ` : ""}${finite3(value) ? format(value) : "sin dato"}`);
+      rows.push(`${series.name ? `${series.name}: ` : ""}${finite3(value) ? rangeText(series, i) : "sin dato"}`);
     }
     if (stacked()) {
       const { up, down } = totals(i);
@@ -6713,6 +6885,7 @@ function createChart(root, initial = {}) {
     glide?.kill();
     canvas.setAttribute("aria-label", describe());
     scope.attr(root, "data-mk-chart-type", type());
+    scope.attr(root, "data-mk-bar-style", options.barStyle ?? "rounded");
     renderTable();
     renderLegend();
     const ok = hasData();
@@ -6732,7 +6905,7 @@ function createChart(root, initial = {}) {
     const target = targetValues();
     const domain = domainOf(target);
     const finish = () => {
-      shown4 = { values: target, lo: domain.lo, hi: domain.hi, type: type(), stacked: stacked() };
+      shown4 = { values: target, lower: lowerValues(), lo: domain.lo, hi: domain.hi, type: type(), stacked: stacked() };
       paint(target, domain.lo, domain.hi, domain.step);
       paintSelection(false);
     };
@@ -6751,7 +6924,11 @@ function createChart(root, initial = {}) {
             const before = from.values[k][i];
             return finite3(value) && finite3(before) ? before + (value - before) * t : value;
           }));
-          paint(values, from.lo + (domain.lo - from.lo) * t, from.hi + (domain.hi - from.hi) * t, domain.step);
+          const lower = lowerValues().map((list3, k) => list3.map((value, i) => {
+            const before = from.lower[k]?.[i];
+            return finite3(value) && finite3(before) ? before + (value - before) * t : value;
+          }));
+          paint(values, from.lo + (domain.lo - from.lo) * t, from.hi + (domain.hi - from.hi) * t, domain.step, lower);
           paintSelection(false);
         },
         onComplete: () => {
@@ -6763,12 +6940,14 @@ function createChart(root, initial = {}) {
     }
     finish();
     if (type() === "bar") {
-      const state = { t: 0 };
+      const stagger = Math.min(0.045, 0.22 / Math.max(1, model.labels.length - 1));
+      const length = 0.7 + stagger * (model.labels.length - 1);
+      const state = { t: 0 }, ease = gsap.parseEase(EASE.swatch);
       glide = gsap.to(state, {
-        t: 1,
-        duration: 0.7,
-        ease: EASE.swatch,
-        onUpdate: () => paint(target.map((list3) => list3.map((value) => finite3(value) ? value * state.t : value)), domain.lo, domain.hi, domain.step),
+        t: length,
+        duration: length,
+        ease: "none",
+        onUpdate: () => paint(target.map((list3) => list3.map((value, i) => finite3(value) ? value * Math.max(0, ease(Math.min(1, Math.max(0, (state.t - i * stagger) / 0.7)))) : value)), domain.lo, domain.hi, domain.step),
         onComplete: () => {
           finish();
           settle();
@@ -7775,7 +7954,7 @@ function createImagePreview(root, options = {}) {
   registerMotion();
   const scope = createScope();
   const loop = options.loop ?? true;
-  const labels = { close: "Cerrar", prev: "Imagen anterior", next: "Imagen siguiente", dialog: "Vista de imagen", ...options.labels };
+  const labels = { close: "Cerrar", prev: "Imagen anterior", next: "Imagen siguiente", dialog: "Vista de imagen", strip: "Miniaturas", picture: "Imagen", ...options.labels };
   const pictures = () => [...root.querySelectorAll("[data-mk-image]")].map((thumb) => {
     const img = thumb.matches("img") ? thumb : thumb.querySelector("img");
     return {
@@ -7804,7 +7983,15 @@ function createImagePreview(root, options = {}) {
   const counter = document.createElement("span");
   counter.dataset.mkLightbox = "count";
   counter.setAttribute("aria-live", "polite");
-  dialog.append(backdrop, stage, prev, next, close, counter);
+  const strip = document.createElement("div");
+  strip.dataset.mkLightbox = "strip";
+  strip.setAttribute("role", "group");
+  strip.setAttribute("aria-label", labels.strip);
+  strip.hidden = true;
+  const ring = document.createElement("span");
+  ring.dataset.mkLightboxRing = "";
+  ring.setAttribute("aria-hidden", "true");
+  dialog.append(backdrop, stage, prev, next, close, counter, strip);
   root.append(dialog);
   scope.add(() => dialog.remove());
   scope.attr(root, "data-mk-ready", "");
@@ -7844,6 +8031,42 @@ function createImagePreview(root, options = {}) {
     next.disabled = !loop && i === list3.length - 1;
     prev.hidden = next.hidden = list3.length < 2;
   };
+  let ringShown = false;
+  const buildStrip = () => {
+    const show = options.strip !== false && list3.length > 1;
+    strip.hidden = !show;
+    dialog.toggleAttribute("data-mk-strip", show);
+    ringShown = false;
+    if (!show) return strip.replaceChildren();
+    strip.replaceChildren(
+      ring,
+      ...list3.map((picture, i) => {
+        const thumb = document.createElement("button");
+        thumb.type = "button";
+        thumb.dataset.mkLightboxThumb = String(i);
+        thumb.setAttribute("aria-label", `${labels.picture} ${i + 1} de ${list3.length}`);
+        const small = thumbImg(picture);
+        const img = document.createElement("img");
+        img.src = (small instanceof HTMLImageElement ? small.getAttribute("src") || small.currentSrc : "") || picture.src;
+        img.alt = "";
+        img.draggable = false;
+        thumb.append(img);
+        return thumb;
+      })
+    );
+  };
+  const paintStrip = () => {
+    if (strip.hidden) return;
+    const thumbs = [...strip.querySelectorAll("[data-mk-lightbox-thumb]")];
+    thumbs.forEach((thumb, i) => i === index ? thumb.setAttribute("aria-current", "true") : thumb.removeAttribute("aria-current"));
+    const active = thumbs[index];
+    if (!active) return;
+    const box = { x: active.offsetLeft, y: active.offsetTop, width: active.offsetWidth, height: active.offsetHeight };
+    if (!ringShown || reduced()) gsap.set(ring, box);
+    else keep(gsap.to(ring, { ...box, duration: 0.35, ease: EASE.swatch }));
+    ringShown = true;
+    if (typeof strip.scrollTo === "function") strip.scrollTo({ left: active.offsetLeft + active.offsetWidth / 2 - strip.clientWidth / 2, behavior: reduced() ? "auto" : "smooth" });
+  };
   const fromThumb = (picture) => {
     const small = thumbImg(picture).getBoundingClientRect();
     const big = image.getBoundingClientRect();
@@ -7871,16 +8094,18 @@ function createImagePreview(root, options = {}) {
     isOpen = true;
     index = target;
     counter.textContent = "";
+    buildStrip();
     write(target);
     if (typeof dialog.showModal === "function") dialog.showModal();
     else dialog.setAttribute("open", "");
+    paintStrip();
     close.focus({ preventScroll: true });
     const picture = list3[target];
     options.onOpenChange?.(true);
     root.dispatchEvent(new CustomEvent("mk:open", { bubbles: true, detail: { index } }));
     if (reduced()) return;
     keep(gsap.fromTo(backdrop, { opacity: 0 }, { opacity: 1, duration: 0.4, ease: "power2.out", clearProps: "opacity" }));
-    keep(gsap.fromTo([prev, next, close, counter, caption], { opacity: 0 }, { opacity: 1, duration: 0.3, delay: 0.3, clearProps: "opacity" }));
+    keep(gsap.fromTo([prev, next, close, counter, caption, strip], { opacity: 0 }, { opacity: 1, duration: 0.3, delay: 0.3, clearProps: "opacity" }));
     const grow = () => {
       const start = fromThumb(picture);
       if (!start) return void keep(gsap.fromTo(image, { opacity: 0, scale: 0.92 }, { opacity: 1, scale: 1, duration: 0.35, ease: EASE.pop, clearProps: "opacity,scale,transform" }));
@@ -7912,11 +8137,11 @@ function createImagePreview(root, options = {}) {
     gsap.set(image, { scale: 1, x: 0, y: 0 });
     const end = fromThumb(picture);
     keep(gsap.to(backdrop, { opacity: 0, duration: 0.35, ease: "power2.in" }));
-    keep(gsap.to([prev, next, close, counter, caption], { opacity: 0, duration: 0.15 }));
+    keep(gsap.to([prev, next, close, counter, caption, strip], { opacity: 0, duration: 0.15 }));
     if (!end) return void keep(gsap.to(image, { opacity: 0, scale: 0.92, duration: 0.25, ease: "power2.in", onComplete: finish }));
     thumbImg(picture).style.visibility = "hidden";
     keep(gsap.to(image, { ...end, duration: 0.5, ease: EASE.signature, onComplete: () => {
-      gsap.set([prev, next, close, counter, caption], { clearProps: "opacity" });
+      gsap.set([prev, next, close, counter, caption, strip], { clearProps: "opacity" });
       finish();
     } }));
   };
@@ -7932,12 +8157,41 @@ function createImagePreview(root, options = {}) {
     index = target;
     options.onChange?.(index);
     root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { index, previous: before } }));
-    if (reduced()) return write(target);
+    if (reduced()) {
+      write(target);
+      paintStrip();
+      return;
+    }
     gsap.killTweensOf(image);
-    keep(
-      gsap.timeline().to(image, { x: -60 * direction, opacity: 0, filter: "blur(12px)", duration: 0.18, ease: "power2.in" }).call(() => write(target)).fromTo(image, { x: 60 * direction, opacity: 0, filter: "blur(12px)" }, { x: 0, opacity: 1, filter: "blur(0px)", duration: 0.4, ease: EASE.signature, clearProps: "transform,opacity,filter" })
-    );
+    ghost?.remove();
+    const leaving = image.cloneNode();
+    leaving.dataset.mkLightbox = "ghost";
+    leaving.alt = "";
+    leaving.setAttribute("aria-hidden", "true");
+    Object.assign(leaving.style, { position: "absolute", left: `${image.offsetLeft}px`, top: `${image.offsetTop}px`, width: `${image.offsetWidth}px`, height: `${image.offsetHeight}px`, margin: "0" });
+    stage.append(leaving);
+    ghost = leaving;
+    write(target);
+    paintStrip();
+    gsap.set(image, { opacity: 0, x: 0, y: 0 });
+    keep(gsap.to(leaving, { xPercent: -28 * direction, scale: 0.86, opacity: 0, filter: "blur(10px)", duration: 0.45, ease: EASE.signature, onComplete: () => {
+      leaving.remove();
+      if (ghost === leaving) ghost = null;
+    } }));
+    const enter = () => {
+      if (!isOpen || index !== target) return;
+      keep(gsap.fromTo(image, { xPercent: 24 * direction, scale: 1.04, opacity: 0, filter: "blur(10px)" }, { xPercent: 0, scale: 1, opacity: 1, filter: "blur(0px)", duration: 0.5, ease: EASE.signature, clearProps: "transform,opacity,filter" }));
+    };
+    const decoded = typeof image.decode === "function" ? image.decode().catch(() => void 0) : Promise.resolve();
+    if (image.complete && image.naturalWidth) enter();
+    else void Promise.race([decoded, new Promise((done) => setTimeout(done, 250))]).then(enter);
   }
+  let ghost = null;
+  scope.add(() => ghost?.remove());
+  scope.on(strip, "click", (event) => {
+    const thumb = event.target?.closest("[data-mk-lightbox-thumb]");
+    if (thumb) go(Number(thumb.dataset.mkLightboxThumb));
+  });
   scope.on(root, "click", (event) => {
     const thumb = event.target?.closest("[data-mk-image]");
     if (!thumb || !root.contains(thumb) || dialog.contains(thumb)) return;
@@ -11710,7 +11964,7 @@ function createBreadcrumb(root, options = {}) {
     list3.replaceChildren(...nodes);
     nav.toggleAttribute("data-mk-expanded", expanded);
   };
-  const fold6 = (keepEnd) => {
+  const fold7 = (keepEnd) => {
     const end = Math.max(1, items.length - keepEnd);
     return Array.from({ length: Math.max(0, end - 1) }, (_, i) => i + 1);
   };
@@ -11722,7 +11976,7 @@ function createBreadcrumb(root, options = {}) {
       return;
     }
     if (maxItems !== "auto") {
-      hidden = items.length > maxItems ? fold6(maxItems - 1) : [];
+      hidden = items.length > maxItems ? fold7(maxItems - 1) : [];
       render();
       return;
     }
@@ -11730,7 +11984,7 @@ function createBreadcrumb(root, options = {}) {
     hidden = [];
     render();
     for (let keepEnd = items.length - 2; keepEnd >= 1 && !fits(); keepEnd--) {
-      hidden = fold6(keepEnd);
+      hidden = fold7(keepEnd);
       render();
     }
     nav.removeAttribute("data-mk-measuring");
@@ -13797,46 +14051,250 @@ function matchesFilter(record, filter, fields) {
       results.push(matchesFilter(record, node, fields));
       continue;
     }
-    const field = fields.find((candidate) => candidate.key === node.field);
-    if (!field || !isComplete(node, fields)) continue;
-    results.push(testRule(record, node, field));
-  }
-  if (!results.length) return true;
-  return filter.combinator === "and" ? results.every(Boolean) : results.some(Boolean);
-}
-function hasConditions(filter, fields) {
-  return filter.rules.some((node) => isGroup(node) ? hasConditions(node, fields) : isComplete(node, fields));
-}
-var shown2 = (field, value) => {
-  if (blank(value)) return "\u2026";
-  if (typeOf(field) === "select") return field.options?.find((option) => option.value === String(value))?.label ?? String(value);
-  if (typeOf(field) === "date") {
-    const date = toDate(value, new Date(Number.NaN));
-    if (!Number.isNaN(date.getTime())) return new Intl.DateTimeFormat("es", { day: "numeric", month: "short", year: "numeric" }).format(date);
-  }
-  return String(value);
-};
-function describeFilter(filter, fields, nested = false) {
-  const joiner = filter.combinator === "and" ? " y " : " o ";
-  const parts = [];
-  for (const node of filter.rules) {
-    if (isGroup(node)) {
-      const inner = describeFilter(node, fields, true);
-      if (inner) parts.push(inner);
-      continue;
+    const field = fields.find((candidate) => candidate.key === node.field);
+    if (!field || !isComplete(node, fields)) continue;
+    results.push(testRule(record, node, field));
+  }
+  if (!results.length) return true;
+  return filter.combinator === "and" ? results.every(Boolean) : results.some(Boolean);
+}
+function hasConditions(filter, fields) {
+  return filter.rules.some((node) => isGroup(node) ? hasConditions(node, fields) : isComplete(node, fields));
+}
+var shown2 = (field, value) => {
+  if (blank(value)) return "\u2026";
+  if (typeOf(field) === "select") return field.options?.find((option) => option.value === String(value))?.label ?? String(value);
+  if (typeOf(field) === "date") {
+    const date = toDate(value, new Date(Number.NaN));
+    if (!Number.isNaN(date.getTime())) return new Intl.DateTimeFormat("es", { day: "numeric", month: "short", year: "numeric" }).format(date);
+  }
+  return String(value);
+};
+function describeFilter(filter, fields, nested = false) {
+  const joiner = filter.combinator === "and" ? " y " : " o ";
+  const parts = [];
+  for (const node of filter.rules) {
+    if (isGroup(node)) {
+      const inner = describeFilter(node, fields, true);
+      if (inner) parts.push(inner);
+      continue;
+    }
+    const field = fields.find((candidate) => candidate.key === node.field);
+    if (!field || !isComplete(node, fields)) continue;
+    const operator = operatorOf(field, node.operator);
+    const [a, b] = Array.isArray(node.value) ? node.value : [node.value, null];
+    const values = operator.arity === 0 ? "" : operator.arity === 1 ? ` ${shown2(field, a)}` : ` ${shown2(field, a)} y ${shown2(field, b)}`;
+    parts.push(`${field.label} ${operator.label}${values}`);
+  }
+  if (!parts.length) return "";
+  const text = parts.join(joiner);
+  return nested && parts.length > 1 ? `(${text})` : text;
+}
+var cloneFilter = (filter) => JSON.parse(JSON.stringify(filter));
+
+// src/components/select/engine.ts
+var CHEVRON2 = '<svg aria-hidden="true" data-mk-select-chevron width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10l5 5 5-5"/></svg>';
+var CHECK4 = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+var fold4 = (text) => text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLocaleLowerCase();
+function fillSelect(select, list3) {
+  const groups = /* @__PURE__ */ new Map();
+  const nodes = [];
+  for (const choice of list3) {
+    const option = new Option(choice.label, choice.value);
+    option.disabled = Boolean(choice.disabled);
+    if (!choice.group) {
+      nodes.push(option);
+      continue;
+    }
+    let group = groups.get(choice.group);
+    if (!group) {
+      group = document.createElement("optgroup");
+      group.label = choice.group;
+      groups.set(choice.group, group);
+      nodes.push(group);
+    }
+    group.append(option);
+  }
+  select.replaceChildren(...nodes);
+}
+function createSelect(root, options = {}) {
+  if (!root) return inert({ setValue() {
+  }, setOptions() {
+  }, refresh() {
+  }, open() {
+  }, close() {
+  }, value: "" });
+  registerMotion();
+  const scope = createScope();
+  const made = [];
+  scope.add(() => made.forEach((element) => element.remove()));
+  let native = root.querySelector("select:not([multiple])");
+  if (!native) {
+    native = document.createElement("select");
+    if (options.name) native.name = options.name;
+    root.append(native);
+    made.push(native);
+  } else {
+    const select2 = native;
+    const children = [...select2.childNodes];
+    const value = select2.value;
+    scope.add(() => {
+      if (select2.childNodes.length !== children.length || children.some((node, i) => select2.childNodes[i] !== node)) select2.replaceChildren(...children);
+      select2.value = value;
+    });
+  }
+  const select = native;
+  if (options.options) fillSelect(select, options.options);
+  if (options.value !== void 0) select.value = options.value;
+  scope.attr(select, "hidden", "");
+  scope.attr(select, "tabindex", "-1");
+  scope.attr(select, "aria-hidden", "true");
+  const trigger = document.createElement("button");
+  trigger.type = "button";
+  trigger.dataset.mkSelectTrigger = "";
+  trigger.setAttribute("aria-haspopup", "menu");
+  trigger.setAttribute("aria-expanded", "false");
+  const valueText = document.createElement("span");
+  valueText.dataset.mkSelectValue = "";
+  trigger.append(valueText);
+  trigger.insertAdjacentHTML("beforeend", CHEVRON2);
+  select.after(trigger);
+  made.push(trigger);
+  const dialog = document.createElement("dialog");
+  dialog.className = "mk-dialog mk-menu mk-select-menu";
+  dialog.dataset.mkSelectMenu = "";
+  dialog.setAttribute("aria-label", options.label ?? "Opciones");
+  root.append(dialog);
+  made.push(dialog);
+  scope.attr(root, "data-mk-ready", "");
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (animation) => {
+    if (!animation) return;
+    effects.add(animation);
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+  const choices = () => [...select.options];
+  const buildItems = () => {
+    const nodes = [];
+    const item = (option) => {
+      const button2 = document.createElement("button");
+      button2.type = "button";
+      button2.dataset.mkItem = "";
+      button2.dataset.mkValue = option.value;
+      const text = document.createElement("span");
+      text.textContent = option.text;
+      button2.append(text);
+      button2.insertAdjacentHTML("beforeend", CHECK4);
+      if (option.disabled) button2.setAttribute("aria-disabled", "true");
+      return button2;
+    };
+    for (const child of select.children) {
+      if (child instanceof HTMLOptGroupElement) {
+        const heading = document.createElement("p");
+        heading.dataset.mkSelectGroup = "";
+        heading.setAttribute("aria-hidden", "true");
+        heading.textContent = child.label;
+        nodes.push(heading, ...[...child.children].filter((node) => node instanceof HTMLOptionElement).map(item));
+      } else if (child instanceof HTMLOptionElement) nodes.push(item(child));
+    }
+    dialog.replaceChildren(...nodes);
+  };
+  const placeholderText = () => options.placeholder ?? choices().find((option) => option.value === "")?.text ?? "Elige\u2026";
+  const markItems = () => {
+    for (const item of dialog.querySelectorAll("[data-mk-item]")) {
+      item.setAttribute("role", "menuitemradio");
+      item.setAttribute("aria-checked", String(item.dataset.mkValue === select.value));
+    }
+  };
+  const paint = () => {
+    const chosen = select.selectedOptions[0];
+    const empty = !chosen || chosen.value === "";
+    valueText.textContent = empty ? placeholderText() : chosen.text;
+    root.toggleAttribute("data-mk-placeholder", empty);
+    if (options.label) trigger.setAttribute("aria-label", `${options.label}: ${valueText.textContent}`);
+    trigger.disabled = Boolean(options.disabled) || select.disabled;
+    markItems();
+  };
+  scope.add(() => root.removeAttribute("data-mk-placeholder"));
+  const choose = (value, notify) => {
+    if (value === select.value) return;
+    const before = choices().findIndex((option) => option.value === select.value);
+    select.value = value;
+    if (select.value !== value) return;
+    const after = choices().findIndex((option) => option.value === value);
+    paint();
+    if (!reduced()) {
+      gsap.killTweensOf(valueText);
+      keep(gsap.fromTo(valueText, { y: after >= before ? 6 : -6, opacity: 0, filter: "blur(4px)" }, { y: 0, opacity: 1, filter: "blur(0px)", duration: 0.28, ease: EASE.pop, clearProps: "transform,opacity,filter" }));
     }
-    const field = fields.find((candidate) => candidate.key === node.field);
-    if (!field || !isComplete(node, fields)) continue;
-    const operator = operatorOf(field, node.operator);
-    const [a, b] = Array.isArray(node.value) ? node.value : [node.value, null];
-    const values = operator.arity === 0 ? "" : operator.arity === 1 ? ` ${shown2(field, a)}` : ` ${shown2(field, a)} y ${shown2(field, b)}`;
-    parts.push(`${field.label} ${operator.label}${values}`);
-  }
-  if (!parts.length) return "";
-  const text = parts.join(joiner);
-  return nested && parts.length > 1 ? `(${text})` : text;
+    if (!notify) return;
+    select.dispatchEvent(new Event("input", { bubbles: true }));
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    options.onChange?.(value);
+    root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value } }));
+  };
+  const menu = createMenu(dialog, {
+    triggers: false,
+    onOpen: markItems,
+    onClose: () => trigger.setAttribute("aria-expanded", "false"),
+    onSelect: (value) => choose(value, true)
+  });
+  scope.add(() => menu.destroy());
+  scope.on(dialog, "mk:select", (event) => event.stopPropagation());
+  const open = () => {
+    if (trigger.disabled || menu.isOpen) return;
+    trigger.setAttribute("aria-expanded", "true");
+    dialog.style.setProperty("--mk-select-width", `${trigger.offsetWidth}px`);
+    menu.open(trigger);
+  };
+  scope.on(trigger, "click", () => {
+    if (!reduced()) keep(press(trigger));
+    open();
+  });
+  scope.on(trigger, "keydown", (event) => {
+    const key2 = event;
+    if (key2.ctrlKey || key2.metaKey || key2.altKey) return;
+    if (["ArrowDown", "ArrowUp", "Enter", " "].includes(key2.key)) {
+      key2.preventDefault();
+      open();
+    } else if (key2.key.length === 1 && key2.key.trim()) {
+      const letter = fold4(key2.key);
+      const list3 = choices();
+      const from = list3.findIndex((option) => option.value === select.value);
+      for (let step = 1; step <= list3.length; step++) {
+        const option = list3[(from + step) % list3.length];
+        if (!option.disabled && option.value !== "" && fold4(option.text).startsWith(letter)) {
+          choose(option.value, true);
+          break;
+        }
+      }
+    }
+  });
+  const refresh = () => {
+    buildItems();
+    paint();
+  };
+  if (typeof MutationObserver === "function") scope.observe(new MutationObserver(() => !scope.disposed && refresh())).observe(select, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled", "label"] });
+  refresh();
+  return {
+    setValue: (value, notify = true) => choose(value, notify),
+    setOptions(next) {
+      fillSelect(select, next);
+      refresh();
+    },
+    refresh,
+    open,
+    close: () => menu.close(),
+    get value() {
+      return select.value;
+    },
+    destroy: () => scope.dispose()
+  };
 }
-var cloneFilter = (filter) => JSON.parse(JSON.stringify(filter));
 
 // src/components/filter-builder/engine.ts
 var CLOSE2 = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M7 7l10 10M17 7L7 17"/></svg>';
@@ -13894,6 +14352,24 @@ function createFilterBuilder(root, options = {}) {
     options.onChange?.(cloneFilter(model));
     root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value: cloneFilter(model), summary: describeFilter(model, fields) } }));
   };
+  const selects = /* @__PURE__ */ new Map();
+  const choice = (select, label) => {
+    const box = el4("span", { class: "mk-select", "data-mk-fb-select": "" });
+    box.append(select);
+    selects.set(box, createSelect(box, { label }));
+    return box;
+  };
+  const dropChoices = (container) => {
+    for (const [box, select] of selects) {
+      if (!container.contains(box)) continue;
+      select.destroy();
+      selects.delete(box);
+    }
+  };
+  scope.add(() => {
+    for (const select of selects.values()) select.destroy();
+    selects.clear();
+  });
   const valueControl = (rule, index) => {
     const field = fieldOf(rule.field);
     const type = typeOf(field);
@@ -13902,6 +14378,9 @@ function createFilterBuilder(root, options = {}) {
     if (type === "select") {
       control = el4("select");
       control.append(el4("option", { value: "" }, "Elige\u2026"), ...(field?.options ?? []).map((option) => el4("option", { value: option.value }, option.label)));
+      control.dataset.mkFbValue = String(index);
+      control.value = current3 === null || current3 === void 0 ? "" : String(current3);
+      return choice(control, index === 1 ? "Hasta" : operatorOf(field, rule.operator).arity === 2 ? "Desde" : "Valor");
     } else {
       control = el4("input");
       control.type = type === "number" ? "text" : type === "date" ? "date" : "text";
@@ -13916,6 +14395,7 @@ function createFilterBuilder(root, options = {}) {
   const fillValues = (row, rule) => {
     const host = row.querySelector("[data-mk-fb-values]");
     const { arity } = operatorOf(fieldOf(rule.field), rule.operator);
+    dropChoices(host);
     host.replaceChildren();
     if (arity === 0) return;
     host.append(valueControl(rule, 0));
@@ -13935,7 +14415,7 @@ function createFilterBuilder(root, options = {}) {
     const values = el4("span", { "data-mk-fb-values": "" });
     const remove = el4("button", { type: "button", "data-mk-fb-remove": "", "aria-label": "Quitar condici\xF3n" });
     remove.innerHTML = CLOSE2;
-    row.append(field, operator, values, remove);
+    row.append(choice(field, "Campo"), choice(operator, "Operador"), values, remove);
     fillOperators(row, rule);
     fillValues(row, rule);
     return row;
@@ -13977,6 +14457,7 @@ function createFilterBuilder(root, options = {}) {
     }
   };
   const render = () => {
+    dropChoices(tree);
     tree.replaceChildren(groupBox(model, 0));
     placeIndicators(true);
     describe();
@@ -14000,7 +14481,7 @@ function createFilterBuilder(root, options = {}) {
     parts.push(element);
     if (isGroup(node)) placeIndicators(true);
     keep(blurIn(parts, { from: "rise", stagger: 0.04 }));
-    element.querySelector("select, input")?.focus();
+    element.querySelector("[data-mk-select-trigger], input")?.focus();
     emit();
   };
   const removeNode = (id) => {
@@ -14014,6 +14495,7 @@ function createFilterBuilder(root, options = {}) {
     const box = boxOf(parent.id);
     const focusAfter = box.querySelector(":scope > [data-mk-fb-actions] button");
     const gone = () => {
+      dropChoices(element);
       element.remove();
       link?.remove();
     };
@@ -14067,6 +14549,7 @@ function createFilterBuilder(root, options = {}) {
     setCombinator(group, next);
     option.parentElement.querySelector(`[data-combinator="${next}"]`).focus();
   });
+  scope.on(tree, "mk:change", (event) => event.stopPropagation());
   scope.on(tree, "change", (event) => {
     const target = event.target;
     const row = target.closest("[data-mk-fb-rule]");
@@ -14763,15 +15246,15 @@ function toggleCheck(nodes, checked, id, value) {
   });
   return next;
 }
-var fold4 = foldText;
+var fold5 = foldText;
 function searchTree(nodes, query, text = (node) => node.label) {
-  const needle = fold4(query.trim());
+  const needle = fold5(query.trim());
   const matches = /* @__PURE__ */ new Set();
   const visible = /* @__PURE__ */ new Set();
   const open = /* @__PURE__ */ new Set();
   if (!needle) return { matches, visible, open, active: false };
   const visit = (node, ancestors) => {
-    if (fold4(text(node)).includes(needle)) {
+    if (fold5(text(node)).includes(needle)) {
       matches.add(node.id);
       visible.add(node.id);
       for (const ancestor of ancestors) {
@@ -14786,10 +15269,25 @@ function searchTree(nodes, query, text = (node) => node.label) {
 }
 
 // src/components/tree-view/engine.ts
-var CHEVRON2 = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>';
-var CHECK4 = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path data-mk-tree-tick d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/><path data-mk-tree-dash d="M6 12h12"/></svg>';
+var FOLDER = '<svg aria-hidden="true" viewBox="0 0 48 40"><path data-mk-tree-folder-back d="M2 6a4 4 0 0 1 4-4h11.6a4 4 0 0 1 2.9 1.2L23.4 6H42a4 4 0 0 1 4 4v24a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z"/><path data-mk-tree-folder-front d="M2 14a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z"/></svg>';
+var PAGE = '<svg aria-hidden="true" viewBox="0 0 40 48"><path data-mk-tree-sheet d="M7 2h18.5L37 13.5V42a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"/><path data-mk-tree-fold d="M25.5 2v8.5a3 3 0 0 0 3 3H37z"/></svg>';
+function moveTreeNode(nodes, id, into) {
+  let taken = null;
+  const without = (list3) => list3.filter((node) => {
+    if (node.id !== id) return true;
+    taken = node;
+    return false;
+  }).map((node) => node.children ? { ...node, children: without(node.children) } : node);
+  const rest = without(nodes);
+  const moved = taken;
+  if (!moved) return nodes;
+  const put = (list3) => list3.map((node) => node.id === into ? { ...node, children: [...node.children ?? [], moved] } : node.children ? { ...node, children: put(node.children) } : node);
+  return put(rest);
+}
+var CHEVRON3 = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>';
+var CHECK5 = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path data-mk-tree-tick d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/><path data-mk-tree-dash d="M6 12h12"/></svg>';
 var sequence18 = 0;
-var fold5 = foldText;
+var fold6 = foldText;
 function createTreeView(root, options = {}) {
   if (!root) return inert({ expand() {
   }, collapse() {
@@ -14903,12 +15401,12 @@ function createTreeView(root, options = {}) {
     line.style.setProperty("--mk-tree-depth", String(depth));
     const chevron2 = document.createElement("span");
     chevron2.dataset.mkTreeChevron = "";
-    if (branch) chevron2.innerHTML = CHEVRON2;
+    if (branch) chevron2.innerHTML = CHEVRON3;
     line.append(chevron2);
     if (options.checkable) {
       const check2 = document.createElement("span");
       check2.dataset.mkTreeCheck = "";
-      check2.innerHTML = CHECK4;
+      check2.innerHTML = CHECK5;
       line.append(check2);
     }
     if (node.icon) {
@@ -14917,6 +15415,12 @@ function createTreeView(root, options = {}) {
       icon2.setAttribute("aria-hidden", "true");
       icon2.textContent = node.icon;
       line.append(icon2);
+    } else if (options.icons) {
+      const icon2 = document.createElement("span");
+      if (branch) icon2.dataset.mkTreeFolder = "";
+      else icon2.dataset.mkTreePage = "";
+      icon2.innerHTML = branch ? FOLDER : PAGE;
+      line.append(icon2);
     }
     const label = document.createElement("span");
     label.dataset.mkTreeLabel = "";
@@ -14956,12 +15460,29 @@ function createTreeView(root, options = {}) {
     const target = focused && items.find((item) => item.dataset.id === focused) || selected && items.find((item) => item.dataset.id === selected) || items[0];
     for (const item of tree.querySelectorAll('[role="treeitem"]')) item.tabIndex = item === target ? 0 : -1;
   };
+  let known = null;
+  const allIds = (list3, into = /* @__PURE__ */ new Set()) => {
+    for (const node of list3) {
+      into.add(node.id);
+      if (node.children) allIds(node.children, into);
+    }
+    return into;
+  };
+  const welcome = () => {
+    const now2 = allIds(nodes);
+    const fresh = known ? [...now2].filter((id) => !known.has(id)) : [];
+    known = now2;
+    if (reduced() || !fresh.length) return;
+    const rows = fresh.map((id) => itemOf(id)?.querySelector(":scope > [data-mk-tree-row]")).filter((line) => !!line && visibleItems().includes(line.parentElement));
+    if (rows.length) keep(gsap.fromTo(rows, { opacity: 0, x: -8, filter: "blur(6px)" }, { opacity: 1, x: 0, filter: "blur(0px)", duration: 0.35, stagger: 0.03, ease: "power2.out", clearProps: "opacity,transform,filter" }));
+  };
   const render = () => {
     tree.replaceChildren(...nodes.map((node, i) => row(node, 0, i, nodes.length)));
     paintChecks(false);
     applySearch(false);
     roving();
     placePill(false);
+    welcome();
   };
   const animateGroup = (group, open) => {
     if (reduced()) {
@@ -15103,6 +15624,114 @@ function createTreeView(root, options = {}) {
       }
     });
   }
+  if (options.draggable) {
+    let drag = null;
+    let opening;
+    const clearOver = () => {
+      clearTimeout(opening);
+      drag?.over?.removeAttribute("data-mk-tree-over");
+      if (drag) drag.over = null;
+    };
+    const branchAt = (x, y) => {
+      const under = document.elementFromPoint(x, y)?.closest('[role="treeitem"]');
+      if (!under || !tree.contains(under) || !drag) return null;
+      const node = nodeOf(under.dataset.id);
+      const candidate = node && isBranch(node) ? under : under.parentElement?.closest('[role="treeitem"]') ?? null;
+      if (!candidate) return null;
+      const path = findNode(nodes, candidate.dataset.id)?.path.map((each) => each.id) ?? [];
+      const parent = findNode(nodes, drag.id)?.path.at(-2)?.id;
+      if (path.includes(drag.id) || candidate.dataset.id === parent) return null;
+      return candidate;
+    };
+    const lift = (id, x, y) => {
+      const node = nodeOf(id);
+      const card = document.createElement("div");
+      card.dataset.mkTreeDrag = "";
+      card.setAttribute("aria-hidden", "true");
+      if (options.icons) {
+        const icon2 = document.createElement("span");
+        if (isBranch(node)) icon2.dataset.mkTreeFolder = "";
+        else icon2.dataset.mkTreePage = "";
+        icon2.innerHTML = isBranch(node) ? FOLDER : PAGE;
+        card.append(icon2);
+      }
+      const text = document.createElement("span");
+      text.textContent = node.label;
+      card.append(text);
+      Object.assign(card.style, { left: "0px", top: "0px" });
+      root.append(card);
+      gsap.set(card, { x: x + 14, y: y + 10 });
+      if (!reduced()) keep(gsap.fromTo(card, { scale: 0.85, opacity: 0 }, { scale: 1.04, opacity: 1, duration: 0.3, ease: EASE.pop }));
+      itemOf(id)?.setAttribute("data-mk-tree-dragging", "");
+      return card;
+    };
+    const end = (drop) => {
+      if (!drag) return;
+      const { id, card, over } = drag;
+      clearOver();
+      drag = null;
+      itemOf(id)?.removeAttribute("data-mk-tree-dragging");
+      if (!card) return;
+      const into = drop && over ? over.dataset.id : null;
+      const fly = (to) => {
+        const box2 = to?.querySelector(":scope > [data-mk-tree-row]")?.getBoundingClientRect();
+        if (reduced() || !box2 || !box2.width) return card.remove();
+        keep(gsap.to(card, { x: box2.left + 24, y: box2.top + box2.height / 2 - 14, scale: 0.4, opacity: 0, duration: 0.32, ease: "power2.in", onComplete: () => card.remove() }));
+      };
+      if (!into) return fly(itemOf(id));
+      fly(over);
+      const node = nodeOf(id);
+      nodes = moveTreeNode(nodes, id, into);
+      expanded.add(into);
+      render();
+      const target = nodeOf(into);
+      options.onMove?.(nodeOf(id), target);
+      root.dispatchEvent(new CustomEvent("mk:move", { bubbles: true, detail: { node, into: target } }));
+    };
+    scope.on(tree, "pointerdown", (event) => {
+      const down = event;
+      const target = down.target;
+      const line = target.closest("[data-mk-tree-row]");
+      const item = line?.parentElement;
+      if (!line || !item || down.button !== 0 || target.closest("[data-mk-tree-chevron], [data-mk-tree-check]") || item.getAttribute("aria-disabled") === "true") return;
+      drag = { id: item.dataset.id, x: down.clientX, y: down.clientY, pointer: down.pointerId, card: null, over: null, lastX: down.clientX, lastT: performance.now() };
+    });
+    scope.on(window, "pointermove", (event) => {
+      const move = event;
+      if (!drag || move.pointerId !== drag.pointer) return;
+      if (!drag.card) {
+        if (Math.hypot(move.clientX - drag.x, move.clientY - drag.y) < 6) return;
+        drag.card = lift(drag.id, move.clientX, move.clientY);
+      }
+      const now2 = performance.now();
+      const speed = (move.clientX - drag.lastX) / Math.max(1, now2 - drag.lastT);
+      drag.lastX = move.clientX;
+      drag.lastT = now2;
+      gsap.set(drag.card, { x: move.clientX + 14, y: move.clientY + 10 });
+      if (!reduced()) keep(gsap.to(drag.card, { rotation: Math.max(-10, Math.min(10, speed * 12)), duration: 0.25, ease: "power2.out" }));
+      const over = branchAt(move.clientX, move.clientY);
+      if (over === drag.over) return;
+      clearOver();
+      if (!over) return;
+      drag.over = over;
+      over.setAttribute("data-mk-tree-over", "");
+      if (over.getAttribute("aria-expanded") === "false") opening = setTimeout(() => void setOpen(over.dataset.id, true), 600);
+    });
+    scope.on(window, "pointerup", (event) => {
+      if (drag && event.pointerId === drag.pointer) end(true);
+    });
+    scope.on(window, "pointercancel", () => end(false));
+    scope.on(document, "keydown", (event) => {
+      if (event.key === "Escape" && drag?.card) end(false);
+    });
+    scope.on(tree, "click", (event) => {
+      if (drag?.card) event.stopImmediatePropagation();
+    }, true);
+    scope.add(() => {
+      clearTimeout(opening);
+      drag?.card?.remove();
+    });
+  }
   scope.on(tree, "click", (event) => {
     const target = event.target;
     const item = target?.closest('[role="treeitem"]');
@@ -15184,9 +15813,9 @@ function createTreeView(root, options = {}) {
       const now2 = Date.now();
       typed = now2 - typedAt > 600 ? key2.key : typed + key2.key;
       typedAt = now2;
-      const needle = fold5(typed);
+      const needle = fold6(typed);
       const order = [...items.slice(index + (typed.length === 1 ? 1 : 0)), ...items.slice(0, index + (typed.length === 1 ? 1 : 0))];
-      const match = order.find((candidate) => fold5(nodeOf(candidate.dataset.id)?.label ?? "").startsWith(needle));
+      const match = order.find((candidate) => fold6(nodeOf(candidate.dataset.id)?.label ?? "").startsWith(needle));
       if (match) go(match);
     }
   });
@@ -15346,8 +15975,8 @@ var ICONS2 = {
   grid: SVG8('<rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/>')
 };
 var ARROW2 = '<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg>';
-var FOLDER = '<svg aria-hidden="true" viewBox="0 0 48 40"><path data-mk-fx-folder-back d="M2 6a4 4 0 0 1 4-4h11.6a4 4 0 0 1 2.9 1.2L23.4 6H42a4 4 0 0 1 4 4v24a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z"/><path data-mk-fx-folder-front d="M2 14a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z"/></svg>';
-var PAGE = '<svg aria-hidden="true" viewBox="0 0 40 48"><path data-mk-fx-page d="M7 2h18.5L37 13.5V42a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"/><path data-mk-fx-fold d="M25.5 2v8.5a3 3 0 0 0 3 3H37z"/></svg>';
+var FOLDER2 = '<svg aria-hidden="true" viewBox="0 0 48 40"><path data-mk-fx-folder-back d="M2 6a4 4 0 0 1 4-4h11.6a4 4 0 0 1 2.9 1.2L23.4 6H42a4 4 0 0 1 4 4v24a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z"/><path data-mk-fx-folder-front d="M2 14a4 4 0 0 1 4-4h36a4 4 0 0 1 4 4v20a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4z"/></svg>';
+var PAGE2 = '<svg aria-hidden="true" viewBox="0 0 40 48"><path data-mk-fx-page d="M7 2h18.5L37 13.5V42a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"/><path data-mk-fx-fold d="M25.5 2v8.5a3 3 0 0 0 3 3H37z"/></svg>';
 var SORT_LABEL = { name: "Nombre", size: "Tama\xF1o", modified: "Modificado" };
 var plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
 var sequence19 = 0;
@@ -15355,7 +15984,7 @@ function iconOf(entry) {
   const icon2 = document.createElement("span");
   icon2.dataset.mkFxIcon = "";
   icon2.dataset.family = fileFamily(entry);
-  icon2.innerHTML = isFolder(entry) ? FOLDER : PAGE;
+  icon2.innerHTML = isFolder(entry) ? FOLDER2 : PAGE2;
   const extension2 = isFolder(entry) ? "" : extensionOf(entry.name);
   if (extension2) {
     const tag = document.createElement("span");
@@ -16461,7 +17090,7 @@ function createFileExplorer(root, options = {}) {
 
 // src/components/json-viewer/engine.ts
 var COPY = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V6.5A2.5 2.5 0 0 0 13.5 4h-7A2.5 2.5 0 0 0 4 6.5v7A2.5 2.5 0 0 0 6.5 16H8"/></svg>';
-var CHECK5 = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+var CHECK6 = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
 var SVG9 = (paths) => `<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
 var EXPAND = SVG9('<path d="M7 9l5-5 5 5M7 15l5 5 5-5"/>');
 var COLLAPSE = SVG9('<path d="M7 4l5 5 5-5M7 20l5-5 5 5"/>');
@@ -16629,7 +17258,7 @@ function createJsonViewer(root, options = {}) {
   scope.attr(root, "data-mk-ready", "");
   const copied = (button2) => {
     if (!button2) return;
-    button2.innerHTML = CHECK5;
+    button2.innerHTML = CHECK6;
     button2.setAttribute("data-mk-copied", "");
     if (!reduced()) keep(gsap.fromTo(button2.firstElementChild, { scale: 0.3, rotation: -25 }, { scale: 1, rotation: 0, duration: 0.42, ease: EASE.pop, transformOrigin: "50% 50%", clearProps: "transform" }));
     scope.timeout(() => {
@@ -16713,8 +17342,14 @@ function createJsonViewer(root, options = {}) {
     },
     onSelect: (node) => {
       const meta = node.data;
+      const appearing = foot.hidden;
+      const moved = pathText.textContent !== meta.path;
       foot.hidden = false;
       pathText.textContent = meta.path;
+      if (!reduced()) {
+        if (appearing) keep(blurIn(foot, { from: "rise", duration: 0.32 }));
+        else if (moved) keep(blurIn(pathText, { from: "soft", duration: 0.28 }));
+      }
       options.onSelect?.(meta.path, meta.value);
       root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { path: meta.path, value: meta.value } }));
     }
@@ -17431,8 +18066,8 @@ function createVirtualList(root, options = {}) {
 }
 
 // src/components/resizable-panel/engine.ts
-var CHEVRON3 = (path) => `<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="${path}"/></svg>`;
-var ARROWS = { left: CHEVRON3("M15 6l-6 6 6 6"), right: CHEVRON3("M9 6l6 6-6 6"), up: CHEVRON3("M6 15l6-6 6 6"), down: CHEVRON3("M6 9l6 6 6-6") };
+var CHEVRON4 = (path) => `<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="${path}"/></svg>`;
+var ARROWS = { left: CHEVRON4("M15 6l-6 6 6 6"), right: CHEVRON4("M9 6l6 6-6 6"), up: CHEVRON4("M6 15l6-6 6 6"), down: CHEVRON4("M6 9l6 6 6-6") };
 var sequence21 = 0;
 var round3 = (n) => Math.round(n * 10) / 10;
 function normaliseSizes(sizes, count) {
@@ -17956,9 +18591,11 @@ var ICONS3 = {
   previous: SVG10('<path d="M15 6l-6 6 6 6"/>'),
   next: SVG10('<path d="M9 6l6 6-6 6"/>'),
   close: SVG10('<path d="M7 7l10 10M17 7L7 17"/>', 14),
-  arrow: SVG10('<path d="M12 19V5M6 11l6-6 6 6"/>', 12)
+  arrow: SVG10('<path d="M12 19V5M6 11l6-6 6 6"/>', 12),
+  chevron: SVG10('<path d="M7 10l5 5 5-5"/>', 14),
+  check: SVG10('<path d="M5 12.5l4.5 4.5L19 7.5"/>', 16)
 };
-var CHECK6 = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path data-mk-dt-tick d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/><path data-mk-dt-dash d="M6 12h12"/></svg>';
+var CHECK7 = '<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path data-mk-dt-tick d="M5.5 12l4 4L18.5 7.5" pathLength="1"/><path data-mk-dt-dash d="M6.5 12h11"/></svg>';
 var plural3 = (n, one, many) => `${n} ${n === 1 ? one : many}`;
 var sequence22 = 0;
 function createDataTable(root, options = {}) {
@@ -18169,21 +18806,18 @@ function createDataTable(root, options = {}) {
   emptyHost.hidden = true;
   const foot = el5("div", "data-mk-dt-foot");
   const range = el5("span", "data-mk-dt-range");
-  const sizeField = el5("label", "data-mk-dt-size");
+  const sizeField = el5("div", "data-mk-dt-size");
   sizeField.append(el5("span", void 0, "Filas"));
-  const sizeSelect = el5("select");
-  for (const size of pageSizes) {
-    const option = el5("option", void 0, String(size));
-    option.value = String(size);
-    sizeSelect.append(option);
-  }
-  if (!pageSizes.includes(pageSize) && pageSize) {
-    const option = el5("option", void 0, String(pageSize));
-    option.value = String(pageSize);
-    sizeSelect.prepend(option);
-  }
-  sizeSelect.value = String(pageSize);
-  sizeField.append(sizeSelect);
+  const sizeButton = el5("button", "data-mk-dt-size-button");
+  sizeButton.type = "button";
+  sizeButton.setAttribute("aria-haspopup", "menu");
+  sizeButton.setAttribute("aria-expanded", "false");
+  const sizeValue = el5("span", "data-mk-dt-size-value", String(pageSize));
+  sizeButton.append(sizeValue);
+  sizeButton.insertAdjacentHTML("beforeend", ICONS3.chevron);
+  sizeButton.setAttribute("aria-label", `Filas por p\xE1gina: ${pageSize}`);
+  sizeField.append(sizeButton);
+  const sizes = pageSize && !pageSizes.includes(pageSize) ? [pageSize, ...pageSizes] : [...pageSizes];
   const pager = el5("nav", "data-mk-dt-pager");
   pager.setAttribute("aria-label", "P\xE1ginas");
   const previous = el5("button", "data-mk-dt-previous");
@@ -18224,7 +18858,7 @@ function createDataTable(root, options = {}) {
   const status = el5("span");
   status.className = "mk-sr-only";
   status.setAttribute("role", "status");
-  root.append(bar, active, scroll, emptyHost, foot, bulk, status);
+  root.append(bar, bulk, active, scroll, emptyHost, foot, status);
   scope.attr(root, "data-mk-ready", "");
   scope.add(() => {
     for (const effect of effects) effect.kill();
@@ -18237,7 +18871,7 @@ function createDataTable(root, options = {}) {
     input.type = "checkbox";
     input.setAttribute("aria-label", label);
     box.append(input);
-    box.insertAdjacentHTML("beforeend", CHECK6);
+    box.insertAdjacentHTML("beforeend", CHECK7);
     return { box, input };
   };
   const paintCheck = (box, state, animate) => {
@@ -18423,14 +19057,16 @@ function createDataTable(root, options = {}) {
     gsap.killTweensOf(bulk);
     if (show) {
       bulk.hidden = false;
-      if (animate && !reduced()) keep(gsap.fromTo(bulk, { opacity: 0, y: 16, filter: "blur(8px)" }, { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.35, ease: EASE.pop, clearProps: "opacity,transform,filter" }));
+      if (animate && !reduced()) keep(gsap.fromTo(bulk, { opacity: 0, y: -8, filter: "blur(8px)" }, { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.35, ease: EASE.pop, clearProps: "opacity,transform,filter" }));
     } else if (animate && !reduced()) {
-      keep(gsap.to(bulk, { opacity: 0, y: 16, filter: "blur(6px)", duration: 0.22, ease: "power2.in", onComplete: () => {
+      keep(gsap.to(bulk, { opacity: 0, y: -8, filter: "blur(6px)", duration: 0.22, ease: "power2.in", onComplete: () => {
         bulk.hidden = true;
         gsap.set(bulk, { clearProps: "opacity,transform,filter" });
       } }));
     } else bulk.hidden = true;
   };
+  let slides = 0;
+  scope.add(() => scroll.style.removeProperty("overflow-x"));
   const render = (motion = "none") => {
     const all = loading ? [] : results();
     const pages = pageCount(all.length);
@@ -18456,7 +19092,25 @@ function createDataTable(root, options = {}) {
           })
         );
       } else if (motion === "forward" || motion === "back") {
-        keep(gsap.fromTo(fresh, { opacity: 0, x: motion === "forward" ? 24 : -24 }, { opacity: 1, x: 0, duration: 0.32, stagger: 0.015, ease: "power2.out", clearProps: "opacity,transform" }));
+        const fits = scroll.scrollWidth <= scroll.clientWidth + 1;
+        const token = ++slides;
+        if (fits) scroll.style.overflowX = "hidden";
+        const release = () => {
+          if (token === slides) scroll.style.removeProperty("overflow-x");
+        };
+        keep(
+          gsap.fromTo(fresh, fits ? { opacity: 0, x: motion === "forward" ? 24 : -24 } : { opacity: 0, y: 6 }, {
+            opacity: 1,
+            x: 0,
+            y: 0,
+            duration: 0.32,
+            stagger: 0.015,
+            ease: "power2.out",
+            clearProps: "opacity,transform",
+            onComplete: release,
+            onInterrupt: release
+          })
+        );
       } else if (wasLoading) keep(gsap.fromTo(fresh, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.35, stagger: 0.025, ease: "power2.out", clearProps: "opacity,transform" }));
     }
     options.onRender?.(body);
@@ -18596,11 +19250,6 @@ function createDataTable(root, options = {}) {
     keep(press(next));
     setPage(page + 1);
   });
-  scope.on(sizeSelect, "change", () => {
-    pageSize = Number(sizeSelect.value) || 0;
-    page = 0;
-    render("reflow");
-  });
   scope.on(clearButton, "click", clearAll);
   scope.on(bulkClose, "click", () => setSelection([]));
   scope.on(bulkAll, "click", () => setSelection(results().map(idOf)));
@@ -18621,11 +19270,55 @@ function createDataTable(root, options = {}) {
     scope.add(() => dialog.remove());
     return dialog;
   };
+  const sizeDialog = panelDialog("size", "Filas por p\xE1gina");
+  sizeDialog.className = "mk-dialog mk-menu mk-dt-panel mk-dt-menu";
+  const sizeItems = sizes.map((size) => {
+    const item = el5("button", "data-mk-item");
+    item.type = "button";
+    item.dataset.mkValue = String(size);
+    item.append(el5("span", void 0, String(size)));
+    item.insertAdjacentHTML("beforeend", ICONS3.check);
+    sizeDialog.append(item);
+    return item;
+  });
+  const paintSize = () => {
+    for (const item of sizeItems) {
+      const on = Number(item.dataset.mkValue) === pageSize;
+      item.setAttribute("role", "menuitemradio");
+      item.setAttribute("aria-checked", String(on));
+    }
+  };
+  const changePageSize = (size, animate) => {
+    const next2 = Math.max(0, Math.floor(size));
+    const text = String(next2);
+    if (animate && next2 !== pageSize && !reduced()) keep(rollDigits(sizeValue, text, next2 > pageSize ? 1 : -1, 0.3));
+    else sizeValue.textContent = text;
+    sizeButton.setAttribute("aria-label", `Filas por p\xE1gina: ${next2}`);
+    pageSize = next2;
+    page = 0;
+    paintSize();
+    render("reflow");
+  };
+  const sizeMenu = createMenu(sizeDialog, {
+    triggers: false,
+    // The menu marks every item a plain menuitem when it opens: these are a choice.
+    onOpen: paintSize,
+    onClose: () => sizeButton.setAttribute("aria-expanded", "false"),
+    onSelect: (value) => changePageSize(Number(value) || 0, true)
+  });
+  paintSize();
+  scope.on(sizeDialog, "mk:select", (event) => event.stopPropagation());
+  scope.add(() => sizeMenu.destroy());
+  scope.on(sizeButton, "click", () => {
+    keep(press(sizeButton));
+    sizeButton.setAttribute("aria-expanded", "true");
+    sizeMenu.open(sizeButton);
+  });
   let rowMenu = null;
   let menuRow = null;
   if (options.actions?.length) {
     const dialog = panelDialog("menu", "Acciones de la fila");
-    dialog.className = "mk-dialog mk-menu mk-dt-menu";
+    dialog.className = "mk-dialog mk-menu mk-dt-panel mk-dt-menu";
     for (const action of options.actions) {
       const item = el5("button", "data-mk-item", action.label);
       item.type = "button";
@@ -18794,10 +19487,7 @@ function createDataTable(root, options = {}) {
     sortBy,
     setPage,
     setPageSize(size) {
-      pageSize = Math.max(0, Math.floor(size));
-      sizeSelect.value = String(pageSize);
-      page = 0;
-      render("reflow");
+      changePageSize(size, false);
     },
     setQuery(next2) {
       query = next2;
@@ -19153,18 +19843,12 @@ function createEditableTable(root, options = {}) {
       setValue(id, column.key, !value);
       return;
     }
-    let editor;
     if (kind === "select") {
-      const select = document.createElement("select");
-      for (const option of column.options ?? []) {
-        const element = document.createElement("option");
-        element.value = option.value;
-        element.textContent = option.label;
-        select.append(element);
-      }
-      select.value = String(value ?? "");
-      editor = select;
-    } else {
+      openChoices(cell, id, column, String(value ?? ""));
+      return;
+    }
+    let editor;
+    {
       const input = document.createElement("input");
       input.type = kind === "number" ? "text" : kind === "date" ? "date" : "text";
       if (kind === "number") input.inputMode = "decimal";
@@ -19233,6 +19917,62 @@ function createEditableTable(root, options = {}) {
     });
   };
   const finishEdit = (save2) => editing?.done(save2);
+  const CHECK8 = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+  let choices = null;
+  let choosing = null;
+  const markChoices = (dialog) => {
+    for (const item of dialog.querySelectorAll("[data-mk-item]")) {
+      item.setAttribute("role", "menuitemradio");
+      item.setAttribute("aria-checked", String(item.dataset.mkValue === choosing?.value));
+    }
+  };
+  const choiceMenu = () => {
+    if (choices) return choices;
+    const dialog = document.createElement("dialog");
+    dialog.className = "mk-dialog mk-menu mk-select-menu";
+    dialog.dataset.mkEtChoices = "";
+    root.append(dialog);
+    scope.add(() => dialog.remove());
+    const menu = createMenu(dialog, {
+      triggers: false,
+      onOpen: () => markChoices(dialog),
+      onSelect: (value) => {
+        const target = choosing;
+        if (target && value !== target.value) setValue(target.id, target.key, value);
+      },
+      onClose: () => {
+        const target = choosing;
+        choosing = null;
+        const fresh = target ? cellOf(target.id, target.key) : null;
+        if (fresh) focusCell(fresh, false);
+      }
+    });
+    scope.on(dialog, "mk:select", (event) => event.stopPropagation());
+    scope.add(() => menu.destroy());
+    choices = { menu, dialog };
+    return choices;
+  };
+  const openChoices = (cell, id, column, value) => {
+    const { menu, dialog } = choiceMenu();
+    dialog.setAttribute("aria-label", column.label);
+    dialog.replaceChildren(
+      ...(column.options ?? []).map((option) => {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.dataset.mkItem = "";
+        item.dataset.mkValue = option.value;
+        const text = document.createElement("span");
+        text.textContent = option.label;
+        item.append(text);
+        item.insertAdjacentHTML("beforeend", CHECK8);
+        return item;
+      })
+    );
+    choosing = { id, key: column.key, value };
+    markChoices(dialog);
+    dialog.style.setProperty("--mk-select-width", `${cell.offsetWidth}px`);
+    menu.open(cell);
+  };
   const moveFrom = (cell, move) => {
     const { row, column, rows, cells } = positionOf(cell);
     if (move === "right" || move === "left") {
@@ -20117,6 +20857,369 @@ function createRichTextEditor(root, options = {}) {
   };
 }
 
+// src/components/add-to-cart/engine.ts
+var BOX = 56;
+var FLIGHT = 0.62;
+var resolve = (option, fallback) => option instanceof HTMLElement ? option : typeof option === "string" ? document.querySelector(option) : fallback();
+function createAddToCart(root, options = {}) {
+  const button2 = root ? root.matches("button") ? root : root.querySelector("button") : null;
+  if (!root || !button2) return inert({ add() {
+  }, setCount() {
+  }, count: 0 });
+  registerMotion();
+  const scope = createScope();
+  const quantity = Number.isFinite(options.quantity) && options.quantity > 0 ? Math.round(options.quantity) : 1;
+  const target = () => resolve(options.target, () => {
+    const all = [...document.querySelectorAll("[data-mk-cart-target]")];
+    return all.find((element) => {
+      const box = element.getBoundingClientRect();
+      return box.width > 0 && box.bottom > 0 && box.top < innerHeight;
+    }) ?? all[0] ?? null;
+  });
+  const image = () => resolve(options.image, () => button2.closest("[data-mk-cart-item]")?.querySelector("[data-mk-cart-image]") ?? null);
+  const counter = () => target()?.querySelector("[data-mk-cart-count]") ?? null;
+  const read = Number.parseInt(counter()?.textContent ?? "", 10);
+  let count = Number.isFinite(options.count) ? Math.max(0, Math.round(options.count)) : Number.isFinite(read) ? read : 0;
+  const status = document.createElement("span");
+  status.className = "mk-sr-only";
+  status.setAttribute("role", "status");
+  root.append(status);
+  scope.add(() => status.remove());
+  scope.attr(root, "data-mk-ready", "");
+  const boxes = /* @__PURE__ */ new Set();
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (animation) => {
+    if (!animation) return;
+    effects.add(animation);
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    for (const box of boxes) box.remove();
+    boxes.clear();
+  });
+  const land = (animate) => {
+    const cart = target();
+    const number2 = counter();
+    const text = String(count);
+    if (number2 && number2.textContent !== text) {
+      if (animate) keep(rollDigits(number2, text, 1, 0.35));
+      else number2.textContent = text;
+    }
+    if (cart && animate) {
+      keep(gsap.fromTo(cart, { scale: 1 }, { scale: 1.1, duration: 0.14, ease: "power2.out", yoyo: true, repeat: 1, clearProps: "transform" }));
+      keep(ringPulse(cart));
+    }
+    status.textContent = `${options.label ?? "A\xF1adido al carrito"}: ${count}`;
+    options.onLand?.(count);
+    root.dispatchEvent(new CustomEvent("mk:land", { bubbles: true, detail: { count } }));
+  };
+  const makeBox = (picture) => {
+    const box = document.createElement("div");
+    box.dataset.mkCartBox = "";
+    box.setAttribute("aria-hidden", "true");
+    let thumb = null;
+    const src = picture instanceof HTMLImageElement ? picture.currentSrc || picture.getAttribute("src") : null;
+    if (src) {
+      thumb = document.createElement("img");
+      thumb.src = src;
+      thumb.alt = "";
+      thumb.dataset.mkCartThumb = "";
+      box.append(thumb);
+    }
+    const front = document.createElement("span");
+    front.dataset.mkCartFront = "";
+    const tape = document.createElement("span");
+    tape.dataset.mkCartTape = "";
+    front.append(tape);
+    const left = document.createElement("span");
+    left.dataset.mkCartFlap = "left";
+    const right = document.createElement("span");
+    right.dataset.mkCartFlap = "right";
+    box.append(front, left, right);
+    return { box, thumb, front, tape, left, right };
+  };
+  const add = () => {
+    if (scope.disposed) return;
+    count += quantity;
+    options.onAdd?.(count);
+    root.dispatchEvent(new CustomEvent("mk:add", { bubbles: true, detail: { count } }));
+    if (reduced()) return land(false);
+    keep(press(button2));
+    const picture = image();
+    const from = (picture ?? button2).getBoundingClientRect();
+    const cart = target();
+    const to = cart?.getBoundingClientRect() ?? null;
+    const { box, thumb, front, tape, left, right } = makeBox(picture);
+    const startX = from.left + from.width / 2 - BOX / 2;
+    const startY = from.top + from.height / 2 - BOX / 2;
+    Object.assign(box.style, { left: `${startX}px`, top: `${startY}px`, width: `${BOX}px`, height: `${BOX}px` });
+    document.body.append(box);
+    boxes.add(box);
+    const gone = () => {
+      box.remove();
+      boxes.delete(box);
+    };
+    const timeline = gsap.timeline({
+      onComplete: () => {
+        gone();
+        land(true);
+      }
+    });
+    if (thumb) {
+      const scale = Math.max(from.width, from.height) / 40 || 1;
+      timeline.fromTo(thumb, { scale, y: 0, opacity: 1 }, { scale: 1, y: -14, duration: 0.32, ease: EASE.signature }, 0);
+      timeline.to(thumb, { y: 4, duration: 0.16, ease: "power2.in" }, 0.3);
+    }
+    timeline.fromTo(front, { scaleY: 0 }, { scaleY: 1, duration: 0.26, ease: EASE.pop }, 0.08);
+    timeline.fromTo([left, right], { opacity: 0 }, { opacity: 1, duration: 0.12 }, 0.12);
+    timeline.fromTo(left, { rotation: -70 }, { rotation: 0, duration: 0.3, ease: EASE.click }, 0.38);
+    timeline.fromTo(right, { rotation: 70 }, { rotation: 0, duration: 0.3, ease: EASE.click }, 0.43);
+    timeline.fromTo(tape, { scaleY: 0 }, { scaleY: 1, duration: 0.16, ease: EASE.wipe }, 0.62);
+    const start = 0.74;
+    if (to) {
+      const dx = to.left + to.width / 2 - (startX + BOX / 2);
+      const dy = to.top + to.height / 2 - (startY + BOX / 2);
+      const lift = Math.min(dy, 0) - 70;
+      timeline.to(box, { x: dx, duration: FLIGHT, ease: EASE.signature }, start);
+      timeline.to(box, { y: lift, duration: FLIGHT * 0.42, ease: "power2.out" }, start);
+      timeline.to(box, { y: dy, duration: FLIGHT * 0.58, ease: "power2.in" }, start + FLIGHT * 0.42);
+      timeline.fromTo(box, { rotation: 0 }, { rotation: 10, scale: 0.55, duration: FLIGHT, ease: "power1.inOut" }, start);
+      timeline.to(box, { scale: 0.15, opacity: 0, duration: 0.14, ease: "power2.in" }, start + FLIGHT - 0.04);
+    } else timeline.to(box, { y: -24, opacity: 0, scale: 0.8, filter: "blur(6px)", duration: 0.3, ease: "power2.in" }, start);
+    keep(timeline);
+  };
+  scope.on(button2, "click", add);
+  return {
+    add,
+    setCount(next) {
+      if (!Number.isFinite(next)) return;
+      count = Math.max(0, Math.round(next));
+      const number2 = counter();
+      if (number2) number2.textContent = String(count);
+    },
+    get count() {
+      return count;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/scroll-island/engine.ts
+var INSET = 6;
+var BAR_WIDTH = 4;
+var ISLAND_HEIGHT = 36;
+var MIN_BAR = 28;
+function createScrollIsland(root, options = {}) {
+  if (!root) return inert({ refresh() {
+  } });
+  registerMotion();
+  const scope = createScope();
+  const page = options.page ?? (root === document.documentElement || root === document.body);
+  const scroller = page ? document.scrollingElement ?? document.documentElement : root;
+  const reach = Number.isFinite(options.reach) ? Math.max(8, options.reach) : 56;
+  const idle2 = Number.isFinite(options.idle) ? Math.max(0, options.idle) : 900;
+  const marked3 = page ? document.documentElement : root;
+  scope.attr(marked3, "data-mk-scroll-island-host", "");
+  scope.attr(root, "data-mk-ready", "");
+  const island = document.createElement("div");
+  island.dataset.mkScrollIsland = "";
+  island.dataset.mkState = "hidden";
+  island.setAttribute("aria-hidden", "true");
+  const rail = document.createElement("span");
+  rail.dataset.mkIslandRail = "";
+  const thumb = document.createElement("div");
+  thumb.dataset.mkIslandThumb = "";
+  const content = document.createElement("span");
+  content.dataset.mkIslandContent = "";
+  const percent = document.createElement("span");
+  percent.dataset.mkIslandPercent = "";
+  const sectionText = document.createElement("span");
+  sectionText.dataset.mkIslandSection = "";
+  content.append(percent, sectionText);
+  thumb.append(content);
+  island.append(rail, thumb);
+  document.body.append(island);
+  scope.add(() => island.remove());
+  const effects = /* @__PURE__ */ new Set();
+  const keep = (animation) => {
+    if (!animation) return;
+    effects.add(animation);
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+  const frame = () => page ? { top: 0, left: 0, right: innerWidth, bottom: innerHeight, height: innerHeight } : root.getBoundingClientRect();
+  const track = () => {
+    const box = frame();
+    return { top: box.top + INSET, height: Math.max(0, box.height - INSET * 2), right: box.right, left: box.left, bottom: box.bottom };
+  };
+  const range = () => Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+  const scrollable = () => range() > 1;
+  const progress = () => range() ? Math.min(1, Math.max(0, scroller.scrollTop / range())) : 0;
+  let state = "hidden";
+  let section;
+  let hideTimer;
+  let dragging = null;
+  let scrollBehavior = null;
+  const restoreBehavior = () => {
+    if (!scrollBehavior) return;
+    const previous = scrollBehavior;
+    if (previous.value) scroller.style.setProperty("scroll-behavior", previous.value, previous.priority);
+    else scroller.style.removeProperty("scroll-behavior");
+    if (!previous.hadStyle && !scroller.getAttribute("style")) scroller.removeAttribute("style");
+    scrollBehavior = null;
+  };
+  scope.add(restoreBehavior);
+  scope.add(() => clearTimeout(hideTimer));
+  const headings = () => options.sections === false ? [] : [...(page ? document.body : root).querySelectorAll(options.sections ?? "h2, h3")];
+  const currentSection = () => {
+    const box = frame();
+    const line = box.top + scroller.clientHeight * 0.3;
+    let found = null;
+    for (const heading of headings()) if (heading.getBoundingClientRect().top <= line) found = heading;
+    return found?.textContent?.trim() || null;
+  };
+  const geometry = (as) => {
+    const { height } = track();
+    const size = as === "island" ? ISLAND_HEIGHT : Math.max(MIN_BAR, Math.min(height, height * (scroller.clientHeight / Math.max(1, scroller.scrollHeight))));
+    const top = (height - size) * progress();
+    if (as !== "island") return { top, height: size, width: BAR_WIDTH, borderRadius: BAR_WIDTH / 2 };
+    return { top, height: size, width: Math.min(Math.max(ISLAND_HEIGHT, track().right - track().left - INSET * 2), Math.max(ISLAND_HEIGHT, content.scrollWidth + 28)), borderRadius: size / 2 };
+  };
+  const place3 = () => {
+    const box = track();
+    Object.assign(island.style, { top: `${box.top}px`, height: `${box.height}px`, left: `${box.left}px`, width: `${Math.max(0, box.right - box.left - 4)}px` });
+  };
+  const paintText = () => {
+    percent.textContent = `${Math.round(progress() * 100)} %`;
+    const now2 = currentSection();
+    if (now2 !== section) {
+      const first = section === void 0;
+      section = now2;
+      sectionText.textContent = now2 ?? "";
+      sectionText.hidden = !now2;
+      if (!first && state === "island" && !reduced()) keep(blurIn(sectionText, { from: "soft", duration: 0.3 }));
+      options.onSection?.(now2);
+      root.dispatchEvent(new CustomEvent("mk:section", { bubbles: true, detail: { section: now2 } }));
+    }
+  };
+  const go = (next, follow = false) => {
+    if (!scrollable()) next = "hidden";
+    const changed = next !== state;
+    state = next;
+    island.dataset.mkState = next;
+    place3();
+    const shape = geometry(next === "hidden" ? "bar" : next);
+    if (follow || !changed || reduced()) {
+      gsap.killTweensOf(thumb);
+      gsap.set(thumb, shape);
+      return;
+    }
+    gsap.killTweensOf(thumb);
+    keep(gsap.to(thumb, { ...shape, duration: next === "island" ? 0.42 : 0.32, ease: next === "island" ? EASE.swatch : "power3.out" }));
+  };
+  const settleLater = () => {
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      if (state === "bar" && !dragging && !options.persistent) go("hidden");
+    }, idle2);
+  };
+  const onScroll = () => {
+    paintText();
+    if (state === "island" || dragging) go(state, true);
+    else {
+      go("bar", true);
+      settleLater();
+    }
+  };
+  scope.on(page ? window : root, "scroll", onScroll, { passive: true });
+  if (!page) scope.on(window, "scroll", () => state !== "hidden" && place3(), { passive: true, capture: true });
+  scope.on(window, "resize", () => go(state, true));
+  const near = (x, y) => {
+    const box = track();
+    return y >= box.top - INSET && y <= box.top + box.height + INSET && x <= box.right && box.right - x <= reach;
+  };
+  scope.on(window, "pointermove", (event) => {
+    const move = event;
+    if (move.pointerType === "touch") return;
+    if (dragging) {
+      if (move.pointerId !== dragging.id) return;
+      const box = track();
+      const shape = geometry("island");
+      const ratio = (move.clientY - box.top - dragging.offset) / Math.max(1, box.height - shape.height);
+      scroller.scrollTop = Math.min(1, Math.max(0, ratio)) * range();
+      onScroll();
+      return;
+    }
+    if (near(move.clientX, move.clientY)) {
+      if (state !== "island" && scrollable()) {
+        clearTimeout(hideTimer);
+        paintText();
+        go("island");
+      }
+    } else if (state === "island") {
+      const box = track();
+      if (box.right - move.clientX > reach + 24 || move.clientY < box.top - 24 || move.clientY > box.top + box.height + 24) {
+        go("bar");
+        settleLater();
+      }
+    }
+  });
+  scope.on(thumb, "pointerdown", (event) => {
+    const down = event;
+    if (state !== "island" || down.button !== 0) return;
+    down.preventDefault();
+    down.stopPropagation();
+    if (!scrollBehavior) scrollBehavior = { value: scroller.style.getPropertyValue("scroll-behavior"), priority: scroller.style.getPropertyPriority("scroll-behavior"), hadStyle: scroller.hasAttribute("style") };
+    scroller.style.setProperty("scroll-behavior", "auto", "important");
+    const box = thumb.getBoundingClientRect();
+    dragging = { id: down.pointerId, offset: down.clientY - box.top || ISLAND_HEIGHT / 2 };
+    island.setAttribute("data-mk-dragging", "");
+    try {
+      thumb.setPointerCapture(down.pointerId);
+    } catch {
+    }
+  });
+  const release = (event) => {
+    if (!dragging || event.pointerId !== dragging.id) return;
+    dragging = null;
+    restoreBehavior();
+    island.removeAttribute("data-mk-dragging");
+  };
+  scope.on(window, "pointerup", release);
+  scope.on(window, "pointercancel", release);
+  scope.on(rail, "pointerdown", (event) => {
+    const down = event;
+    if (state !== "island" || down.button !== 0) return;
+    down.preventDefault();
+    const box = track();
+    const size = geometry("island").height;
+    const ratio = (down.clientY - box.top - size / 2) / Math.max(1, box.height - size);
+    scroller.scrollTo({ top: Math.round(Math.min(1, Math.max(0, ratio)) * range()), behavior: reduced() ? "auto" : "smooth" });
+  });
+  paintText();
+  go(options.persistent ? "bar" : "hidden");
+  if (typeof ResizeObserver === "function") {
+    const observer = scope.observe(new ResizeObserver(() => {
+      paintText();
+      go(state, true);
+    }));
+    observer.observe(root);
+    for (const child of root.children) observer.observe(child);
+  }
+  return {
+    refresh: () => {
+      paintText();
+      go(state, true);
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
 export {
   PATHS,
   springPath,
@@ -20202,23 +21305,28 @@ export {
   createChatBackground,
   createSteps,
   createQuantity,
+  press,
+  blurIn,
+  blurOut,
+  collapse,
+  shake,
+  ringPulse,
+  burst,
+  rollDigits,
   createPagination,
   createHoverCard,
   createInputOtp,
   createStudioDock,
   createTrailer,
   toDate,
+  addDays,
+  startOfWeek,
   dayKey,
+  weekdayNames,
+  safeFormat,
+  capitalize,
   createCalendar,
   createSlotPicker,
-  press,
-  blurIn,
-  blurOut,
-  collapse,
-  shake,
-  ringPulse,
-  burst,
-  rollDigits,
   formatBytes,
   describeAccept,
   acceptsFile,
@@ -20305,6 +21413,7 @@ export {
   matchesFilter,
   hasConditions,
   describeFilter,
+  createSelect,
   createFilterBuilder,
   relativeTime,
   dayLabel,
@@ -20329,6 +21438,8 @@ export {
   createDataTable,
   createEditableTable,
   sanitizeHtml,
-  createRichTextEditor
+  createRichTextEditor,
+  createAddToCart,
+  createScrollIsland
 };
-//# sourceMappingURL=chunk-CU6SXW3E.js.map
+//# sourceMappingURL=chunk-SDQ776LG.js.map