@yewdiel21/motion-kit 0.15.0 → 0.17.0

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

@@ -2578,9 +2578,9 @@ function createSteps(root, options = {}) {
   registerMotion();
   const scope = createScope();
   const { duration = TIMING.onboarding.step, animateFirst = true, target = "[data-mk-flow-item]" } = options;
-  const clamp4 = (value) => Math.min(steps.length - 1, Math.max(0, Math.round(value)));
+  const clamp5 = (value) => Math.min(steps.length - 1, Math.max(0, Math.round(value)));
   const marked3 = steps.findIndex((step) => step.hasAttribute("data-mk-current"));
-  let index = clamp4(options.index ?? (marked3 >= 0 ? marked3 : 0));
+  let index = clamp5(options.index ?? (marked3 >= 0 ? marked3 : 0));
   let wanted = index;
   let running2 = null;
   let stopCounter = () => {
@@ -2633,7 +2633,7 @@ function createSteps(root, options = {}) {
     }
   };
   const goTo = (to) => {
-    wanted = clamp4(to);
+    wanted = clamp5(to);
     if (wanted === index && !running2) return Promise.resolve();
     running2 ??= change();
     return running2;
@@ -2700,7 +2700,7 @@ function createQuantity(root, options = {}) {
   const step = Number.isFinite(options.step) && options.step > 0 ? options.step : 1;
   const steps = Math.floor((max - min) / step + 1e-9);
   const upper = Math.min(max, Number((min + steps * step).toFixed(10)));
-  const normalize = (n) => Math.max(min, Math.min(upper, Number((min + Math.round((n - min) / step) * step).toFixed(10))));
+  const normalize2 = (n) => Math.max(min, Math.min(upper, Number((min + Math.round((n - min) / step) * step).toFixed(10))));
   const original = input.value;
   const disabled = options.disabled ?? input.disabled;
   const decrease = root.querySelector("[data-mk-quantity-decrease]");
@@ -2711,13 +2711,13 @@ function createQuantity(root, options = {}) {
   scope.attr(input, "disabled", disabled ? "" : null);
   scope.attr(root, "data-mk-ready", "");
   const initial = input.value.trim() ? Number(input.value) : NaN;
-  let value = normalize(Number.isFinite(options.value) ? options.value : Number.isFinite(initial) ? initial : min);
+  let value = normalize2(Number.isFinite(options.value) ? options.value : Number.isFinite(initial) ? initial : min);
   let pendingReset = null;
   const typed = () => input.value.trim() && Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : NaN;
   const render = (syncInput = true) => {
     if (pendingReset) {
       if (pendingReset.eventPhase !== 0) return;
-      if (!pendingReset.defaultPrevented) value = normalize(Number.isFinite(typed()) ? typed() : min);
+      if (!pendingReset.defaultPrevented) value = normalize2(Number.isFinite(typed()) ? typed() : min);
       pendingReset = null;
     }
     if (syncInput) input.value = String(value);
@@ -2728,7 +2728,7 @@ function createQuantity(root, options = {}) {
     if (scope.disposed || !Number.isFinite(next)) return;
     if (pendingReset?.eventPhase === 0) pendingReset = null;
     const previous = value;
-    value = normalize(next);
+    value = normalize2(next);
     render(syncInput);
     if (notify && value !== previous) {
       options.onChange?.(value);
@@ -2744,7 +2744,7 @@ function createQuantity(root, options = {}) {
   });
   scope.on(input, "input", () => {
     const n = typed();
-    if (Number.isFinite(n) && normalize(n) === n) commit(n, true, false);
+    if (Number.isFinite(n) && normalize2(n) === n) commit(n, true, false);
   });
   scope.on(input, "change", () => {
     if (Number.isFinite(typed())) setValue(typed());
@@ -5905,8 +5905,8 @@ function createProgress(root, options = {}) {
   const max = finite(options.max) && options.max > min ? options.max : Math.max(min + 1, 100);
   const variant = options.variant === "ring" ? "ring" : "linear";
   const duration = finite(options.duration) ? Math.max(0, options.duration) : 0.7;
-  const clamp4 = (n) => Math.min(max, Math.max(min, n));
-  let value = options.value === null ? null : clamp4(finite(options.value) ? options.value : min);
+  const clamp5 = (n) => Math.min(max, Math.max(min, n));
+  let value = options.value === null ? null : clamp5(finite(options.value) ? options.value : min);
   const visual = document.createElement("span");
   visual.dataset.mkProgressVisual = "";
   visual.setAttribute("aria-hidden", "true");
@@ -6007,7 +6007,7 @@ function createProgress(root, options = {}) {
       if (scope.disposed) return;
       const previous = value;
       if (next === null) value = null;
-      else if (finite(next)) value = clamp4(next);
+      else if (finite(next)) value = clamp5(next);
       else return;
       render(previous, true);
     },
@@ -6055,13 +6055,13 @@ function createRangeSlider(root, options = {}) {
   const places = Math.min(10, Math.max(decimals(step), decimals(min)));
   const fix = (n) => Number(n.toFixed(places));
   const upper = Math.min(max, fix(min + Math.floor((max - min) / step + 1e-9) * step));
-  const normalize = (n) => Math.max(min, Math.min(upper, fix(min + Math.round((n - min) / step) * step)));
+  const normalize2 = (n) => Math.max(min, Math.min(upper, fix(min + Math.round((n - min) / step) * step)));
   const disabled = options.disabled ?? inputs.some((input) => input.disabled);
   const output = root.querySelector("[data-mk-range-output]");
   const format = (n) => options.formatValue ? options.formatValue(n) : String(n);
   const originals = inputs.map((input) => input.value);
   const ordered = (list3) => pair ? [...list3].sort((a, b) => a - b) : list3;
-  const read = () => inputs.map((input) => input.value.trim() !== "" && Number.isFinite(Number(input.value)) ? normalize(Number(input.value)) : NaN);
+  const read = () => inputs.map((input) => input.value.trim() !== "" && Number.isFinite(Number(input.value)) ? normalize2(Number(input.value)) : NaN);
   const authored = () => {
     const current4 = read();
     return inputs.map((input, i) => {
@@ -6069,7 +6069,7 @@ function createRangeSlider(root, options = {}) {
       if (written === void 0) return current4[i];
       const low = attrNumber(input, "min") ?? 0;
       const high = Math.max(low, attrNumber(input, "max") ?? 100);
-      return Number(input.value) === Math.min(high, Math.max(low, written)) ? normalize(written) : current4[i];
+      return Number(input.value) === Math.min(high, Math.max(low, written)) ? normalize2(written) : current4[i];
     });
   };
   const initial = (() => {
@@ -6078,7 +6078,7 @@ function createRangeSlider(root, options = {}) {
     const fromInputs = authored();
     return inputs.map((_, i) => {
       const candidate = fromOption?.[i];
-      if (finite2(candidate)) return normalize(candidate);
+      if (finite2(candidate)) return normalize2(candidate);
       return Number.isFinite(fromInputs[i]) ? fromInputs[i] : i === 0 ? min : upper;
     });
   })();
@@ -6188,7 +6188,7 @@ function createRangeSlider(root, options = {}) {
   };
   const take = (i) => {
     const raw = inputs[i].value;
-    const n = raw.trim() !== "" && Number.isFinite(Number(raw)) ? normalize(Number(raw)) : NaN;
+    const n = raw.trim() !== "" && Number.isFinite(Number(raw)) ? normalize2(Number(raw)) : NaN;
     if (!Number.isFinite(n)) return false;
     let next = n;
     if (pair) next = i === 0 ? Math.min(next, values[1]) : Math.max(next, values[0]);
@@ -6257,7 +6257,7 @@ function createRangeSlider(root, options = {}) {
     setValue(next, notify = true) {
       if (scope.disposed) return;
       const list3 = Array.isArray(next) ? next : [next, next];
-      const candidate = inputs.map((_, i) => finite2(list3[i]) ? normalize(list3[i]) : values[i]);
+      const candidate = inputs.map((_, i) => finite2(list3[i]) ? normalize2(list3[i]) : values[i]);
       values = ordered(candidate);
       render(dragging >= 0 ? "drag" : "glide");
       if (notify) commit(true);
@@ -6288,13 +6288,29 @@ function niceStep(raw) {
   const fraction = raw / power;
   return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10) * power;
 }
-function barPath(x, width, base, end, rounded) {
+function barPath(x, width, base, end, rounded2) {
   const height = Math.abs(base - end);
-  const r = rounded ? Math.min(END_RADIUS, width / 2, height) : 0;
+  const r = rounded2 ? Math.min(END_RADIUS, width / 2, height) : 0;
   const dir = end < base ? 1 : -1;
   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);
@@ -6532,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) });
@@ -6570,10 +6587,53 @@ function createChart(root, initial = {}) {
     if (bar) {
       const barIndices = model.series.flatMap((_, index) => seriesType(index) === "bar" ? [index] : []);
       const groups = stacked() ? 1 : barIndices.length;
-      const barWidth = Math.max(2, Math.min(BAR_MAX, (slot * 0.62 - GAP3 * (groups - 1)) / groups));
+      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 };
@@ -6592,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) {
@@ -6607,10 +6668,11 @@ function createChart(root, initial = {}) {
           values.forEach((list3, k) => {
             if (seriesType(k) !== "bar") return;
             const value = list3[i];
-            if (!finite3(value) || value === 0) return;
             const x = xs[i] - groupWidth / 2 + barIndices.indexOf(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;
+            addTrack(x);
+            if (!finite3(value) || value === 0) return;
+            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);
           });
         }
@@ -6644,7 +6706,9 @@ 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${[...points].reverse().map(([px, , py]) => `${round(px)},${round(py)}`).join("L")}Z`;
+            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);
@@ -6657,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";
@@ -6692,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");
@@ -6716,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) => {
@@ -6798,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();
@@ -6852,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();
@@ -8892,8 +8982,8 @@ function createStarRating(root, options = {}) {
   const scope = createScope();
   const max = Math.max(1, Math.min(10, Math.round(Number.isFinite(options.max) ? options.max : 5)));
   const texts = options.labels ?? (max === 5 ? LABELS2 : []);
-  const clamp4 = (n) => Math.max(0, Math.min(max, n));
-  let value = clamp4(Number.isFinite(options.value) ? options.value : 0);
+  const clamp5 = (n) => Math.max(0, Math.min(max, n));
+  let value = clamp5(Number.isFinite(options.value) ? options.value : 0);
   const name = options.name ?? `rating-${++sequence10}`;
   const group = document.createElement("div");
   group.dataset.mkStars = "";
@@ -8981,7 +9071,7 @@ function createStarRating(root, options = {}) {
   };
   const choose = (next, notify, animate) => {
     if (scope.disposed) return;
-    const target = clamp4(Math.round(next));
+    const target = clamp5(Math.round(next));
     if (target === value) return;
     value = target;
     paint();
@@ -13688,8 +13778,8 @@ function createDateTimePicker(root, options = {}) {
   const segmentsOf2 = (date) => {
     if (!date) return { day: null, month: null, year: null, hour: null, minute: null, dayPeriod: null };
     const hour = date.getHours();
-    const clock = twelve ? to12(hour) : { hour, period: null };
-    return { day: date.getDate(), month: date.getMonth() + 1, year: date.getFullYear(), hour: clock.hour, minute: date.getMinutes(), dayPeriod: clock.period };
+    const clock2 = twelve ? to12(hour) : { hour, period: null };
+    return { day: date.getDate(), month: date.getMonth() + 1, year: date.getFullYear(), hour: clock2.hour, minute: date.getMinutes(), dayPeriod: clock2.period };
   };
   const dateOf2 = (values) => {
     const { day: day2, month, year, hour, minute } = values;
@@ -13738,18 +13828,18 @@ function createDateTimePicker(root, options = {}) {
   scope.on(box, "focusout", (event) => {
     if (!box.contains(event.relatedTarget) && field.element.hasAttribute("aria-invalid")) keep(shake(box));
   });
-  const rounded = (date) => {
+  const rounded2 = (date) => {
     const result = new Date(date.getTime());
     result.setSeconds(0, 0);
     result.setMinutes(Math.round(result.getMinutes() / step) * step);
     return result;
   };
-  const clamp4 = (date) => min && date < min ? new Date(min.getTime()) : max && date > max ? new Date(max.getTime()) : date;
+  const clamp5 = (date) => min && date < min ? new Date(min.getTime()) : max && date > max ? new Date(max.getTime()) : date;
   const timeOfDay = () => {
     if (value) return { hour: value.getHours(), minute: value.getMinutes() };
     const time2 = timeField.value?.split(":").map(Number);
     if (time2 && time2.length >= 2) return { hour: time2[0], minute: time2[1] };
-    const current3 = rounded(/* @__PURE__ */ new Date());
+    const current3 = rounded2(/* @__PURE__ */ new Date());
     return { hour: current3.getHours(), minute: current3.getMinutes() };
   };
   const calendar = createRangeCalendar(calendarHost, {
@@ -13765,7 +13855,7 @@ function createDateTimePicker(root, options = {}) {
       const { hour, minute } = timeOfDay();
       const next = new Date(range.start.getTime());
       next.setHours(hour, minute, 0, 0);
-      commit(clamp4(next), true);
+      commit(clamp5(next), true);
     }
   });
   scope.add(() => calendar.destroy());
@@ -13781,7 +13871,7 @@ function createDateTimePicker(root, options = {}) {
       const base = value ?? toDate(options.today ?? /* @__PURE__ */ new Date());
       const next = new Date(base.getTime());
       next.setHours(hour, minute, 0, 0);
-      commit(clamp4(next), true);
+      commit(clamp5(next), true);
     }
   });
   scope.add(() => timeField.destroy());
@@ -13815,7 +13905,7 @@ function createDateTimePicker(root, options = {}) {
   });
   scope.on(now2, "click", () => {
     keep(press(now2));
-    const current3 = rounded(/* @__PURE__ */ new Date());
+    const current3 = rounded2(/* @__PURE__ */ new Date());
     commit(problem(current3) ? value : current3, true);
     calendar.focusDay(current3, false);
   });
@@ -15303,15 +15393,15 @@ function createTreeView(root, options = {}) {
     item.setAttribute("aria-posinset", String(index + 1));
     item.tabIndex = -1;
     if (node.disabled) item.setAttribute("aria-disabled", "true");
-    const branch = isBranch(node);
-    if (branch) item.setAttribute("aria-expanded", String(expanded.has(node.id)));
+    const branch2 = isBranch(node);
+    if (branch2) item.setAttribute("aria-expanded", String(expanded.has(node.id)));
     if (!options.checkable && selected === node.id) item.setAttribute("aria-selected", "true");
     const line = document.createElement("div");
     line.dataset.mkTreeRow = "";
     line.style.setProperty("--mk-tree-depth", String(depth));
     const chevron2 = document.createElement("span");
     chevron2.dataset.mkTreeChevron = "";
-    if (branch) chevron2.innerHTML = CHEVRON3;
+    if (branch2) chevron2.innerHTML = CHEVRON3;
     line.append(chevron2);
     if (options.checkable) {
       const check2 = document.createElement("span");
@@ -15327,9 +15417,9 @@ function createTreeView(root, options = {}) {
       line.append(icon2);
     } else if (options.icons) {
       const icon2 = document.createElement("span");
-      if (branch) icon2.dataset.mkTreeFolder = "";
+      if (branch2) icon2.dataset.mkTreeFolder = "";
       else icon2.dataset.mkTreePage = "";
-      icon2.innerHTML = branch ? FOLDER : PAGE;
+      icon2.innerHTML = branch2 ? FOLDER : PAGE;
       line.append(icon2);
     }
     const label = document.createElement("span");
@@ -15337,7 +15427,7 @@ function createTreeView(root, options = {}) {
     fillLabel(node, label);
     line.append(label);
     item.append(line);
-    if (branch) {
+    if (branch2) {
       const group = document.createElement("ul");
       group.setAttribute("role", "group");
       group.hidden = !expanded.has(node.id);
@@ -20932,6 +21022,7 @@ function createScrollIsland(root, options = {}) {
   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";
@@ -20973,6 +21064,16 @@ function createScrollIsland(root, options = {}) {
   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 = () => {
@@ -20987,7 +21088,7 @@ function createScrollIsland(root, options = {}) {
     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.max(ISLAND_HEIGHT, content.scrollWidth + 28), borderRadius: size / 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();
@@ -21024,7 +21125,7 @@ function createScrollIsland(root, options = {}) {
   const settleLater = () => {
     clearTimeout(hideTimer);
     hideTimer = setTimeout(() => {
-      if (state === "bar" && !dragging) go("hidden");
+      if (state === "bar" && !dragging && !options.persistent) go("hidden");
     }, idle2);
   };
   const onScroll = () => {
@@ -21073,6 +21174,8 @@ function createScrollIsland(root, options = {}) {
     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", "");
@@ -21084,6 +21187,7 @@ function createScrollIsland(root, options = {}) {
   const release = (event) => {
     if (!dragging || event.pointerId !== dragging.id) return;
     dragging = null;
+    restoreBehavior();
     island.removeAttribute("data-mk-dragging");
   };
   scope.on(window, "pointerup", release);
@@ -21098,7 +21202,15 @@ function createScrollIsland(root, options = {}) {
     scroller.scrollTo({ top: Math.round(Math.min(1, Math.max(0, ratio)) * range()), behavior: reduced() ? "auto" : "smooth" });
   });
   paintText();
-  go("hidden");
+  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();
@@ -21108,6 +21220,1377 @@ function createScrollIsland(root, options = {}) {
   };
 }
 
+// src/components/signature-pad/engine.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MAX_STROKES = 500;
+var MAX_POINTS = 5e4;
+var emptyData = () => ({ version: 1, strokes: [] });
+var cloneStrokes = (strokes) => strokes.map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) }));
+var sameStrokes = (left, right) => left.length === right.length && left.every((stroke, index) => {
+  const other = right[index];
+  return stroke.color === other.color && stroke.width === other.width && stroke.points.length === other.points.length && stroke.points.every((point, index2) => point.x === other.points[index2].x && point.y === other.points[index2].y);
+});
+var finite5 = (value) => typeof value === "number" && Number.isFinite(value);
+var clamp4 = (value, min, max) => Math.min(max, Math.max(min, value));
+function validColor(value) {
+  if (typeof value !== "string" || value.length > 100) return false;
+  if (/^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.test(value)) return true;
+  if (!/^(?:rgba?|hsla?)\([\d\s.,%/+\-degratun]+\)$/i.test(value) && !/^[a-z]+$/i.test(value)) return false;
+  if (/^(?:inherit|initial|unset|revert|revertlayer|currentcolor)$/i.test(value)) return false;
+  if (typeof document === "undefined") return /^(?:black|white|transparent)$/i.test(value);
+  const probe = document.createElement("span");
+  probe.style.color = value;
+  return probe.style.color !== "";
+}
+function validatedData(value) {
+  if (!value || typeof value !== "object") return null;
+  const data = value;
+  if (data.version !== 1 || !Array.isArray(data.strokes) || data.strokes.length > MAX_STROKES) return null;
+  const strokes = [];
+  let count = 0;
+  for (const candidate of data.strokes) {
+    if (!candidate || typeof candidate !== "object") return null;
+    const stroke = candidate;
+    if (!validColor(stroke.color) || !finite5(stroke.width) || stroke.width < 0.1 || stroke.width > 64 || !Array.isArray(stroke.points) || !stroke.points.length) return null;
+    count += stroke.points.length;
+    if (count > MAX_POINTS) return null;
+    const points = [];
+    for (const candidate2 of stroke.points) {
+      if (!candidate2 || typeof candidate2 !== "object") return null;
+      const point = candidate2;
+      if (!finite5(point.x) || !finite5(point.y) || point.x < 0 || point.x > 1 || point.y < 0 || point.y > 1) return null;
+      points.push({ x: point.x, y: point.y });
+    }
+    strokes.push({ color: stroke.color, width: stroke.width, points });
+  }
+  return { version: 1, strokes };
+}
+var rounded = (value) => Number(value.toFixed(3));
+function strokePath(points, width, height) {
+  const coordinates = points.map((point) => [rounded(point.x * width), rounded(point.y * height)]);
+  const first = coordinates[0];
+  let path = `M ${first[0]} ${first[1]}`;
+  if (coordinates.length === 1) return `${path} l 0.001 0`;
+  for (let i = 1; i < coordinates.length - 1; i++) {
+    const current3 = coordinates[i];
+    const next = coordinates[i + 1];
+    path += ` Q ${current3[0]} ${current3[1]} ${rounded((current3[0] + next[0]) / 2)} ${rounded((current3[1] + next[1]) / 2)}`;
+  }
+  const last = coordinates[coordinates.length - 1];
+  return `${path} L ${last[0]} ${last[1]}`;
+}
+function makePath(stroke, width, height) {
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", strokePath(stroke.points, width, height));
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", stroke.color);
+  path.setAttribute("stroke-width", String(stroke.width));
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("stroke-linejoin", "round");
+  return path;
+}
+var nextId2 = 0;
+function createSignaturePad(root, options = {}) {
+  if (!root) return inert({
+    data: emptyData(),
+    isEmpty: true,
+    canUndo: false,
+    canRedo: false,
+    undo() {
+    },
+    redo() {
+    },
+    clear() {
+    },
+    importData: () => false,
+    exportData: emptyData,
+    exportSVG: () => "",
+    exportPNG: async () => null,
+    setDisabled() {
+    },
+    setReadOnly() {
+    }
+  });
+  registerMotion();
+  const scope = createScope();
+  let strokes = validatedData(options.data)?.strokes ?? [];
+  const initialStrokes = cloneStrokes(strokes);
+  let disabled = Boolean(options.disabled);
+  let readOnly = Boolean(options.readOnly);
+  let undoStack = [];
+  let redoStack = [];
+  const historyLimit = finite5(options.historyLimit) ? clamp4(Math.floor(options.historyLimit), 1, 100) : 50;
+  const inkWidth = finite5(options.width) ? clamp4(options.width, 0.1, 64) : 2.4;
+  const exportData = () => ({ version: 1, strokes: cloneStrokes(strokes) });
+  const wrapper = document.createElement("div");
+  wrapper.dataset.mkSignatureBody = "";
+  const surface = document.createElement("div");
+  surface.dataset.mkSignatureSurface = "";
+  const svg2 = document.createElementNS(SVG_NS, "svg");
+  svg2.dataset.mkSignatureDrawing = "";
+  svg2.setAttribute("role", "img");
+  svg2.setAttribute("aria-label", options.label ?? "\xC1rea de firma");
+  svg2.setAttribute("preserveAspectRatio", "none");
+  const placeholder2 = document.createElement("span");
+  placeholder2.dataset.mkSignaturePlaceholder = "";
+  placeholder2.setAttribute("aria-hidden", "true");
+  placeholder2.textContent = options.placeholder ?? "Firma aqu\xED";
+  surface.append(svg2, placeholder2);
+  const footer = document.createElement("div");
+  footer.dataset.mkSignatureFooter = "";
+  const toolbar = document.createElement("div");
+  toolbar.dataset.mkSignatureToolbar = "";
+  toolbar.setAttribute("role", "group");
+  toolbar.setAttribute("aria-label", "Herramientas de firma");
+  const makeButton = (action, text) => {
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.dataset.mkSignatureAction = action;
+    button2.textContent = text;
+    toolbar.append(button2);
+    return button2;
+  };
+  const undoButton = makeButton("undo", "Deshacer");
+  const redoButton = makeButton("redo", "Rehacer");
+  const clearButton = makeButton("clear", "Limpiar");
+  if (options.toolbar !== false) footer.append(toolbar);
+  const status = document.createElement("span");
+  status.dataset.mkSignatureStatus = "";
+  status.setAttribute("role", "status");
+  status.setAttribute("aria-live", "polite");
+  footer.append(status);
+  const hint = document.createElement("p");
+  hint.dataset.mkSignatureHint = "";
+  hint.id = `mk-signature-hint-${++nextId2}`;
+  hint.textContent = options.hint ?? "Dibuja con el rat\xF3n, el dedo o un l\xE1piz. Puedes deshacer cada trazo.";
+  svg2.setAttribute("aria-describedby", hint.id);
+  wrapper.append(surface, footer, hint);
+  let hidden = null;
+  if (options.name) {
+    hidden = document.createElement("input");
+    hidden.type = "hidden";
+    hidden.name = options.name;
+    wrapper.append(hidden);
+  }
+  root.append(wrapper);
+  scope.add(() => wrapper.remove());
+  for (const name of ["data-mk-disabled", "data-mk-readonly", "data-mk-drawing", "data-mk-empty"]) scope.attr(root, name, null);
+  scope.attr(root, "data-mk-ready", "");
+  let dimensions = { width: 640, height: 240 };
+  let active = null;
+  let feedback = null;
+  const locked = () => disabled || readOnly;
+  const update = () => {
+    root.toggleAttribute("data-mk-empty", !strokes.length && !active);
+    root.toggleAttribute("data-mk-disabled", disabled);
+    root.toggleAttribute("data-mk-readonly", readOnly);
+    svg2.setAttribute("aria-disabled", String(disabled));
+    placeholder2.hidden = strokes.length > 0 || active !== null;
+    undoButton.disabled = locked() || !undoStack.length;
+    redoButton.disabled = locked() || !redoStack.length;
+    clearButton.disabled = locked() || !strokes.length;
+    status.textContent = strokes.length ? `${strokes.length} ${strokes.length === 1 ? "trazo" : "trazos"} \xB7 ${readOnly ? "Solo lectura" : "Firma capturada"}` : "Sin firma";
+    if (hidden) {
+      hidden.disabled = disabled;
+      hidden.value = JSON.stringify(exportData());
+    }
+  };
+  const render = () => {
+    const rect = surface.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) dimensions = { width: rect.width, height: rect.height };
+    svg2.setAttribute("viewBox", `0 0 ${dimensions.width} ${dimensions.height}`);
+    svg2.replaceChildren(...strokes.map((stroke) => makePath(stroke, dimensions.width, dimensions.height)));
+    if (active) {
+      active.path = makePath(active.stroke, dimensions.width, dimensions.height);
+      svg2.append(active.path);
+    }
+  };
+  const emit = (reason) => {
+    const detail = { data: exportData(), reason, isEmpty: !strokes.length, canUndo: !!undoStack.length, canRedo: !!redoStack.length };
+    options.onChange?.(exportData(), { ...detail, data: exportData() });
+    if (scope.disposed) return;
+    root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail }));
+  };
+  const release = (pointerId) => {
+    try {
+      surface.releasePointerCapture?.(pointerId);
+    } catch {
+    }
+  };
+  const cancel = () => {
+    if (!active) return;
+    const pointerId = active.pointerId;
+    active = null;
+    root.removeAttribute("data-mk-drawing");
+    release(pointerId);
+    render();
+    update();
+  };
+  const remember = () => {
+    undoStack.push(strokes);
+    if (undoStack.length > historyLimit) undoStack.shift();
+    redoStack = [];
+  };
+  const pulse = (button2) => {
+    feedback?.progress(1).kill();
+    if (reduced()) return;
+    feedback = gsap.fromTo(button2, { scale: 0.95 }, { scale: 1, duration: 0.24, ease: EASE.click });
+  };
+  const undo = () => {
+    if (scope.disposed) return;
+    cancel();
+    if (!undoStack.length) return;
+    redoStack.push(strokes);
+    strokes = undoStack.pop();
+    render();
+    update();
+    emit("undo");
+  };
+  const redo = () => {
+    if (scope.disposed) return;
+    cancel();
+    if (!redoStack.length) return;
+    undoStack.push(strokes);
+    strokes = redoStack.pop();
+    render();
+    update();
+    emit("redo");
+  };
+  const clear = () => {
+    if (scope.disposed) return;
+    cancel();
+    if (!strokes.length) return;
+    remember();
+    strokes = [];
+    render();
+    update();
+    emit("clear");
+  };
+  const form = hidden?.form;
+  if (form) scope.on(form, "reset", (event) => {
+    scope.timeout(() => {
+      if (scope.disposed || event.defaultPrevented || hidden?.form !== form) return;
+      const changed = !sameStrokes(strokes, initialStrokes);
+      cancel();
+      strokes = cloneStrokes(initialStrokes);
+      undoStack = [];
+      redoStack = [];
+      render();
+      update();
+      if (changed) emit("reset");
+    }, 0);
+  });
+  const pointFrom = (event) => {
+    const rect = surface.getBoundingClientRect();
+    if (!rect.width || !rect.height || !finite5(event.clientX) || !finite5(event.clientY)) return null;
+    return { x: clamp4((event.clientX - rect.left) / rect.width, 0, 1), y: clamp4((event.clientY - rect.top) / rect.height, 0, 1) };
+  };
+  const addPoint = (event) => {
+    if (!active) return;
+    const point = pointFrom(event);
+    if (!point || active.stroke.points.length >= MAX_POINTS - strokes.reduce((sum, stroke) => sum + stroke.points.length, 0)) return;
+    const last = active.stroke.points[active.stroke.points.length - 1];
+    if (point.x === last.x && point.y === last.y) return;
+    active.stroke.points.push(point);
+    active.path.setAttribute("d", strokePath(active.stroke.points, dimensions.width, dimensions.height));
+  };
+  scope.on(surface, "pointerdown", (event) => {
+    const pointer2 = event;
+    if (locked() || active || pointer2.button !== 0 || pointer2.isPrimary === false || strokes.length >= MAX_STROKES || strokes.reduce((sum, stroke2) => sum + stroke2.points.length, 0) >= MAX_POINTS) return;
+    const point = pointFrom(pointer2);
+    if (!point) return;
+    pointer2.preventDefault();
+    const themed = getComputedStyle(root).getPropertyValue("--mk-signature-ink").trim() || getComputedStyle(root).color;
+    const color = validColor(options.color) ? options.color : validColor(themed) ? themed : "#252735";
+    const stroke = { points: [point], color, width: inkWidth };
+    active = { pointerId: pointer2.pointerId, stroke, path: makePath(stroke, dimensions.width, dimensions.height) };
+    render();
+    update();
+    root.setAttribute("data-mk-drawing", "");
+    try {
+      surface.setPointerCapture?.(pointer2.pointerId);
+    } catch {
+    }
+  });
+  scope.on(window, "pointermove", (event) => {
+    const pointer2 = event;
+    if (!active || pointer2.pointerId !== active.pointerId) return;
+    pointer2.preventDefault();
+    const samples = typeof pointer2.getCoalescedEvents === "function" ? pointer2.getCoalescedEvents() : [];
+    for (const sample of samples) addPoint(sample);
+    addPoint(pointer2);
+  }, { passive: false });
+  scope.on(window, "pointerup", (event) => {
+    const pointer2 = event;
+    if (!active || pointer2.pointerId !== active.pointerId) return;
+    addPoint(pointer2);
+    const completed = active;
+    active = null;
+    root.removeAttribute("data-mk-drawing");
+    release(completed.pointerId);
+    remember();
+    strokes = [...strokes, completed.stroke];
+    update();
+    emit("draw");
+  });
+  for (const type of ["pointercancel", "lostpointercapture"]) scope.on(type === "pointercancel" ? window : surface, type, (event) => {
+    if (active?.pointerId === event.pointerId) cancel();
+  });
+  scope.on(window, "blur", cancel);
+  scope.on(document, "visibilitychange", () => {
+    if (document.hidden) cancel();
+  });
+  for (const [button2, action] of [[undoButton, undo], [redoButton, redo], [clearButton, clear]]) scope.on(button2, "click", () => {
+    if (locked() || button2.disabled) return;
+    pulse(button2);
+    action();
+  });
+  if (typeof ResizeObserver === "function") scope.observe(new ResizeObserver(render)).observe(surface);
+  scope.on(window, "resize", render);
+  scope.add(() => {
+    cancel();
+    feedback?.kill();
+  });
+  render();
+  update();
+  const exportSVG = (settings = {}) => {
+    const width = finite5(settings.width) ? clamp4(settings.width, 1, 4096) : dimensions.width;
+    const height = finite5(settings.height) ? clamp4(settings.height, 1, 4096) : dimensions.height;
+    const output = document.createElementNS(SVG_NS, "svg");
+    output.setAttribute("width", String(rounded(width)));
+    output.setAttribute("height", String(rounded(height)));
+    output.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    if (validColor(settings.background)) {
+      const background = document.createElementNS(SVG_NS, "rect");
+      background.setAttribute("width", "100%");
+      background.setAttribute("height", "100%");
+      background.setAttribute("fill", settings.background);
+      output.append(background);
+    }
+    output.append(...strokes.map((stroke) => makePath(stroke, width, height)));
+    return new XMLSerializer().serializeToString(output);
+  };
+  const pending = /* @__PURE__ */ new Set();
+  scope.add(() => {
+    for (const cancelExport of pending) cancelExport();
+    pending.clear();
+  });
+  return {
+    get data() {
+      return exportData();
+    },
+    get isEmpty() {
+      return !strokes.length;
+    },
+    get canUndo() {
+      return !!undoStack.length;
+    },
+    get canRedo() {
+      return !!redoStack.length;
+    },
+    undo,
+    redo,
+    clear,
+    exportData,
+    importData(value, notify = true) {
+      if (scope.disposed) return false;
+      const next = validatedData(value);
+      if (!next) return false;
+      if (sameStrokes(next.strokes, strokes)) return true;
+      cancel();
+      strokes = next.strokes;
+      undoStack = [];
+      redoStack = [];
+      render();
+      update();
+      if (notify) emit("import");
+      return true;
+    },
+    exportSVG: (settings) => scope.disposed ? "" : exportSVG(settings),
+    exportPNG(settings = {}) {
+      if (scope.disposed) return Promise.resolve(null);
+      const canvas = document.createElement("canvas");
+      let context;
+      try {
+        context = canvas.getContext("2d");
+      } catch {
+        return Promise.resolve(null);
+      }
+      if (!context || typeof canvas.toBlob !== "function") return Promise.resolve(null);
+      const scale = finite5(settings.scale) ? clamp4(settings.scale, 1, 4) : 2;
+      canvas.width = Math.round((finite5(settings.width) ? clamp4(settings.width, 1, 4096) : dimensions.width) * scale);
+      canvas.height = Math.round((finite5(settings.height) ? clamp4(settings.height, 1, 4096) : dimensions.height) * scale);
+      return new Promise((resolve2) => {
+        const image = new Image();
+        let finished = false;
+        const done = (blob) => {
+          if (finished) return;
+          finished = true;
+          image.onload = null;
+          image.onerror = null;
+          pending.delete(cancelExport);
+          clearTimeout(timer2);
+          resolve2(scope.disposed ? null : blob);
+        };
+        const cancelExport = () => {
+          done(null);
+          image.src = "";
+        };
+        const timer2 = setTimeout(cancelExport, 1e4);
+        pending.add(cancelExport);
+        image.onerror = () => done(null);
+        image.onload = () => {
+          try {
+            context.drawImage(image, 0, 0, canvas.width, canvas.height);
+            canvas.toBlob(done, "image/png");
+          } catch {
+            done(null);
+          }
+        };
+        image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(exportSVG(settings))}`;
+      });
+    },
+    setDisabled(value) {
+      if (!scope.disposed) {
+        cancel();
+        disabled = Boolean(value);
+        update();
+      }
+    },
+    setReadOnly(value) {
+      if (!scope.disposed) {
+        cancel();
+        readOnly = Boolean(value);
+        update();
+      }
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/waveform-player/engine.ts
+var initialState = () => ({ status: "idle", currentTime: 0, duration: 0, playbackRate: 1, error: null });
+var finite6 = (n) => Number.isFinite(n) && n >= 0;
+var clock = (n) => `${Math.floor(n / 60)}:${String(Math.floor(n % 60)).padStart(2, "0")}`;
+var playIcon = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 9 6-9 6Z"/></svg>';
+var pauseIcon = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 6v12M16 6v12"/></svg>';
+function createWaveformPlayer(root, options = {}) {
+  if (!root) return inert({ play: async () => false, pause() {
+  }, seek() {
+  }, update() {
+  }, state: initialState(), audio: null });
+  registerMotion();
+  const scope = createScope();
+  let opts = { ...options };
+  let state = initialState();
+  let source = "";
+  let request = 0;
+  let requested = false;
+  let pending = null;
+  const make = (tag, part3, parent = root) => {
+    const el5 = document.createElement(tag);
+    el5.setAttribute(`data-mk-wave-${part3}`, "");
+    parent.append(el5);
+    return el5;
+  };
+  const container = make("div", "content");
+  scope.add(() => container.remove());
+  const audio = make("audio", "audio", container);
+  audio.preload = "metadata";
+  audio.hidden = true;
+  const toggle = make("button", "toggle", container);
+  toggle.type = "button";
+  const body = make("div", "body", container);
+  const track = make("div", "track", body);
+  const bars = make("div", "bars", track);
+  bars.setAttribute("aria-hidden", "true");
+  const range = make("input", "seek", track);
+  range.type = "range";
+  range.min = "0";
+  range.max = "0";
+  range.step = "0.1";
+  const footer = make("div", "footer", body);
+  const time2 = make("span", "time", footer);
+  const rate = make("button", "rate", footer);
+  rate.type = "button";
+  const message = make("span", "message", container);
+  message.setAttribute("role", "status");
+  message.setAttribute("aria-live", "polite");
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "data-mk-wave-state", "idle");
+  let barNodes = [];
+  let effect;
+  const snapshot = () => ({ ...state });
+  const rates = () => {
+    const values = opts.playbackRates === false ? [] : opts.playbackRates ?? [1, 1.5, 2];
+    return Array.isArray(values) ? [...new Set(values.filter((n) => typeof n === "number" && Number.isFinite(n) && n >= 0.25 && n <= 4))] : [];
+  };
+  const paint = () => {
+    const playing = state.status === "playing";
+    toggle.innerHTML = playing || requested ? pauseIcon : playIcon;
+    toggle.setAttribute("aria-label", `${playing || requested ? "Pausar" : "Reproducir"} ${opts.label ?? "audio"}`);
+    toggle.disabled = !!opts.disabled || !source;
+    range.disabled = !!opts.disabled || !state.duration;
+    range.max = String(state.duration);
+    range.value = String(state.currentTime);
+    range.setAttribute("aria-label", `Posici\xF3n de ${opts.label ?? "audio"}`);
+    range.setAttribute("aria-valuetext", `${clock(state.currentTime)} de ${clock(state.duration)}`);
+    time2.textContent = `${clock(state.currentTime)} / ${clock(state.duration)}`;
+    rate.hidden = rates().length < 2;
+    rate.disabled = !!opts.disabled;
+    rate.textContent = `${state.playbackRate}\xD7`;
+    rate.setAttribute("aria-label", `Velocidad ${state.playbackRate}\xD7. Cambiar velocidad`);
+    const progress = state.duration ? state.currentTime / state.duration : 0;
+    barNodes.forEach((bar, i) => bar.toggleAttribute("data-mk-played", (i + 0.5) / barNodes.length <= progress));
+    root.setAttribute("data-mk-wave-state", state.status);
+    message.textContent = state.error ?? (state.status === "loading" ? "Cargando audio\u2026" : state.status === "ended" ? "Audio finalizado" : "");
+  };
+  const emit = (patch, event) => {
+    if (scope.disposed) return;
+    const previous = state.status;
+    state = { ...state, ...patch };
+    paint();
+    const next = snapshot();
+    if (event === "timeupdate") opts.onTimeUpdate?.(next);
+    if (previous !== state.status) opts.onStateChange?.(snapshot());
+    if (event === "play") opts.onPlay?.(snapshot());
+    if (event === "pause") opts.onPause?.(snapshot());
+    if (event === "ended") opts.onEnded?.(snapshot());
+    if (event === "error") opts.onError?.(snapshot());
+    if (previous !== state.status) root.dispatchEvent(new CustomEvent("mk:audio-statechange", { bubbles: true, detail: snapshot() }));
+    if (event) root.dispatchEvent(new CustomEvent(`mk:audio-${event}`, { bubbles: true, detail: snapshot() }));
+  };
+  const bounce = (target) => {
+    if (reduced()) return;
+    effect?.progress(1);
+    effect?.kill();
+    effect = gsap.fromTo(target, { scale: 0.88 }, { scale: 1, duration: 0.4, ease: EASE.swatch, clearProps: "transform" });
+  };
+  const fail = (message2) => {
+    requested = false;
+    emit({ status: "error", error: message2 }, "error");
+  };
+  const pause = () => {
+    if (scope.disposed) return;
+    request++;
+    requested = false;
+    pending = null;
+    audio.pause();
+    if (state.status !== "idle" && state.status !== "error" && state.status !== "ended" && state.status !== "paused") emit({ status: "paused" }, "pause");
+    else paint();
+  };
+  const seek = (seconds) => {
+    if (scope.disposed || !state.duration || !Number.isFinite(seconds)) return;
+    const next = Math.max(0, Math.min(state.duration, seconds));
+    try {
+      audio.currentTime = next;
+    } catch {
+      return;
+    }
+    emit({ currentTime: next, ...state.status === "ended" && next < state.duration ? { status: "paused" } : {} }, "timeupdate");
+  };
+  const play = () => {
+    if (scope.disposed || opts.disabled || !source) return Promise.resolve(false);
+    if (pending) return pending;
+    if (state.status === "playing") return Promise.resolve(true);
+    if (state.status === "ended") seek(0);
+    const token = ++request;
+    requested = true;
+    emit({ status: "loading", error: null });
+    let started;
+    try {
+      started = Promise.resolve(audio.play());
+    } catch (error) {
+      started = Promise.reject(error);
+    }
+    const result = started.then(() => {
+      if (scope.disposed || token !== request) return false;
+      requested = false;
+      if (audio.paused) {
+        emit({ status: "paused" });
+        return false;
+      }
+      if (state.status !== "playing") emit({ status: "playing", error: null }, "play");
+      return true;
+    }).catch((error) => {
+      if (!scope.disposed && token === request) {
+        requested = false;
+        if (error instanceof Error && error.name === "AbortError") emit({ status: "paused" });
+        else fail("No se pudo reproducir el audio. Vuelve a intentarlo.");
+      }
+      return false;
+    }).finally(() => {
+      if (token === request) pending = null;
+    });
+    pending = result;
+    return result;
+  };
+  const renderPeaks = () => {
+    const supplied = Array.isArray(opts.peaks) ? opts.peaks : [];
+    const values = supplied.length ? supplied : Array(48).fill(0.24);
+    bars.replaceChildren();
+    barNodes = values.slice(0, 256).map((value) => {
+      const bar = make("i", "bar", bars);
+      const peak = typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;
+      bar.style.height = `${8 + peak * 92}%`;
+      return bar;
+    });
+  };
+  const update = (next) => {
+    if (scope.disposed) return;
+    const previousPeaks = opts.peaks;
+    opts = { ...opts, ...next };
+    const nextSource = typeof opts.src === "string" ? opts.src : "";
+    if (source !== nextSource) {
+      request++;
+      pending = null;
+      requested = false;
+      audio.pause();
+      source = nextSource;
+      if (source) audio.setAttribute("src", source);
+      else audio.removeAttribute("src");
+      audio.load();
+      audio.playbackRate = state.playbackRate;
+      emit({ ...initialState(), playbackRate: state.playbackRate, status: source ? "loading" : "idle" });
+    }
+    if (opts.disabled && (requested || state.status === "playing")) pause();
+    if (previousPeaks !== opts.peaks || !barNodes.length) renderPeaks();
+    paint();
+  };
+  scope.on(toggle, "click", () => {
+    bounce(toggle);
+    if (requested || state.status === "playing") pause();
+    else void play();
+  });
+  scope.on(range, "input", () => seek(Number(range.value)));
+  scope.on(rate, "click", () => {
+    const available = rates();
+    const index = available.indexOf(state.playbackRate);
+    const next = available[(index + 1) % available.length];
+    if (next === void 0) return;
+    audio.playbackRate = next;
+    emit({ playbackRate: next });
+    bounce(rate);
+  });
+  const metadata = () => {
+    const duration = finite6(audio.duration) ? audio.duration : 0;
+    emit({
+      duration,
+      currentTime: duration ? Math.min(duration, Math.max(0, audio.currentTime || 0)) : 0,
+      ...state.status === "loading" && !requested ? { status: "ready" } : {}
+    });
+  };
+  scope.on(audio, "loadedmetadata", metadata);
+  scope.on(audio, "durationchange", metadata);
+  scope.on(audio, "timeupdate", () => emit({ currentTime: finite6(audio.currentTime) ? audio.currentTime : 0 }, "timeupdate"));
+  scope.on(audio, "playing", () => {
+    if (!source || opts.disabled || !requested && state.status !== "playing") {
+      audio.pause();
+      return;
+    }
+    requested = false;
+    if (state.status !== "playing") emit({ status: "playing", error: null }, "play");
+  });
+  scope.on(audio, "pause", () => {
+    if (state.status === "playing" || requested) {
+      requested = false;
+      emit({ status: "paused" }, "pause");
+    }
+  });
+  scope.on(audio, "waiting", () => {
+    if (state.status === "playing") {
+      requested = true;
+      emit({ status: "loading" });
+    }
+  });
+  scope.on(audio, "ended", () => {
+    request++;
+    pending = null;
+    requested = false;
+    emit({ status: "ended", currentTime: state.duration || state.currentTime }, "ended");
+  });
+  scope.on(audio, "error", () => {
+    request++;
+    pending = null;
+    fail("No se pudo cargar el audio. Comprueba el archivo.");
+  });
+  scope.on(audio, "ratechange", () => {
+    if (audio.playbackRate !== state.playbackRate) emit({ playbackRate: audio.playbackRate });
+  });
+  scope.add(() => {
+    request++;
+    requested = false;
+    pending = null;
+    effect?.kill();
+    audio.pause();
+    audio.removeAttribute("src");
+    audio.load();
+  });
+  update(options);
+  return { play, pause, seek, update, get state() {
+    return snapshot();
+  }, get audio() {
+    return scope.disposed ? null : audio;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/components/voice-message-bubble/engine.ts
+var statusLabels = { sending: "Enviando", sent: "Enviado", delivered: "Entregado", read: "Le\xEDdo", failed: "No enviado" };
+function createVoiceMessageBubble(root, options = {}) {
+  if (!root) return createWaveformPlayer(null, options);
+  const scope = createScope();
+  let opts = { ...options };
+  const content = document.createElement("div");
+  content.setAttribute("data-mk-voice-message-content", "");
+  const header = document.createElement("div");
+  header.setAttribute("data-mk-voice-message-header", "");
+  const author = document.createElement("span");
+  author.setAttribute("data-mk-voice-message-author", "");
+  const caption = document.createElement("span");
+  caption.setAttribute("data-mk-voice-message-caption", "");
+  caption.textContent = "Mensaje de voz";
+  header.append(author, caption);
+  const playerRoot = document.createElement("div");
+  playerRoot.className = "mk-waveform-player";
+  const footer = document.createElement("div");
+  footer.setAttribute("data-mk-voice-message-footer", "");
+  const timestamp = document.createElement("time");
+  const status = document.createElement("span");
+  status.setAttribute("data-mk-voice-message-status", "");
+  footer.append(timestamp, status);
+  content.append(header, playerRoot, footer);
+  root.append(content);
+  scope.add(() => content.remove());
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "data-mk-direction", "incoming");
+  const player = createWaveformPlayer(playerRoot);
+  scope.add(() => player.destroy());
+  const update = (next) => {
+    if (scope.disposed) return;
+    opts = { ...opts, ...next };
+    author.textContent = opts.author ?? "";
+    author.hidden = !opts.author;
+    timestamp.textContent = opts.timestamp ?? "";
+    timestamp.hidden = !opts.timestamp;
+    if (opts.dateTime) timestamp.dateTime = opts.dateTime;
+    else timestamp.removeAttribute("datetime");
+    status.textContent = opts.status && statusLabels[opts.status] || "";
+    status.hidden = !status.textContent;
+    root.setAttribute("data-mk-direction", opts.direction === "outgoing" ? "outgoing" : "incoming");
+    const { direction: _direction, author: _author, timestamp: _timestamp, dateTime: _dateTime, status: _status, ...audio } = opts;
+    player.update({ ...audio, label: opts.label ?? (opts.author ? `mensaje de voz de ${opts.author}` : "mensaje de voz") });
+  };
+  update(options);
+  return {
+    play: () => player.play(),
+    pause: () => player.pause(),
+    seek: (n) => player.seek(n),
+    update,
+    get state() {
+      return player.state;
+    },
+    get audio() {
+      return player.audio;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/drilldown-menu/engine.ts
+var CHEVRON5 = '<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg>';
+var sequence24 = 0;
+var samePath = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+var branch = (item) => Array.isArray(item.children);
+var copyItems = (items) => items.map((item) => ({ ...item, ...branch(item) ? { children: copyItems(item.children) } : {} }));
+function createDrilldownMenu(root, options = {}) {
+  if (!root) return inert({ open: () => false, back: () => false, root() {
+  }, reset() {
+  }, setPath() {
+  }, setItems() {
+  }, update() {
+  }, focusItem() {
+  }, path: [], items: [], element: null });
+  registerMotion();
+  const scope = createScope();
+  const uid2 = `mk-drilldown-${++sequence24}`;
+  const authored = [...root.childNodes];
+  const holder = document.createDocumentFragment();
+  holder.append(...authored);
+  let config = { ...options };
+  let data = copyItems(options.items ?? []);
+  let path = [];
+  let focused = null;
+  const remembered = /* @__PURE__ */ new Map();
+  let animation = null;
+  const header = document.createElement("div");
+  header.dataset.mkDrilldownHeader = "";
+  const backButton = document.createElement("button");
+  backButton.type = "button";
+  backButton.dataset.mkDrilldownBack = "";
+  backButton.innerHTML = CHEVRON5;
+  const heading = document.createElement("span");
+  heading.id = `${uid2}-heading`;
+  heading.dataset.mkDrilldownHeading = "";
+  header.append(backButton, heading);
+  const breadcrumb = document.createElement("nav");
+  breadcrumb.dataset.mkDrilldownBreadcrumb = "";
+  const crumbs = document.createElement("ol");
+  breadcrumb.append(crumbs);
+  const viewport = document.createElement("div");
+  viewport.dataset.mkDrilldownViewport = "";
+  const menu = document.createElement("div");
+  menu.dataset.mkDrilldownLevel = "";
+  menu.id = `${uid2}-level`;
+  menu.setAttribute("role", "menu");
+  menu.setAttribute("aria-labelledby", heading.id);
+  const empty = document.createElement("p");
+  empty.dataset.mkDrilldownEmpty = "";
+  empty.setAttribute("role", "status");
+  viewport.append(menu, empty);
+  backButton.setAttribute("aria-controls", menu.id);
+  root.append(header, breadcrumb, viewport);
+  scope.attr(root, "data-mk-ready", "");
+  const levelAt = (requested) => {
+    const valid2 = [];
+    const ancestors = [];
+    let items = data;
+    for (const id of requested) {
+      const item = items.find((entry) => entry.id === id);
+      if (!item || item.disabled || !branch(item)) break;
+      valid2.push(id);
+      ancestors.push(item);
+      items = item.children;
+    }
+    return { valid: valid2, ancestors, items };
+  };
+  const level = () => levelAt(path);
+  const enabled = () => [...menu.querySelectorAll("[data-mk-drilldown-item]")].filter((item) => !item.disabled);
+  const buttonOf = (id) => enabled().find((item) => item.dataset.mkDrilldownItem === id);
+  const cancelMotion = () => {
+    animation?.kill();
+    animation = null;
+    gsap.set(menu, { clearProps: "transform,opacity,filter" });
+    gsap.set(viewport, { clearProps: "height" });
+  };
+  const roving = (id, focus = false) => {
+    const items = enabled();
+    const target = items.find((item) => item.dataset.mkDrilldownItem === id) ?? items[0];
+    focused = target?.dataset.mkDrilldownItem ?? null;
+    for (const item of menu.querySelectorAll("[data-mk-drilldown-item]")) item.tabIndex = item === target ? 0 : -1;
+    menu.tabIndex = target ? -1 : 0;
+    if (focused) remembered.set(JSON.stringify(path), focused);
+    if (focus) (target ?? menu).focus({ preventScroll: true });
+  };
+  const notifyPath = () => {
+    const next = [...path];
+    root.dispatchEvent(new CustomEvent("mk:path-change", { bubbles: true, detail: { path: [...next] } }));
+    config.onPathChange?.(next);
+  };
+  const render = (direction, focus, preferred) => {
+    const oldHeight = viewport.getBoundingClientRect().height;
+    cancelMotion();
+    const current3 = level();
+    const label = config.label ?? "Actions";
+    const title = current3.ancestors.at(-1)?.label ?? label;
+    heading.textContent = title;
+    backButton.hidden = path.length === 0;
+    backButton.setAttribute("aria-label", config.backLabel ?? "Back");
+    breadcrumb.setAttribute("aria-label", `${label} path`);
+    const labels = [label, ...current3.ancestors.map((item) => item.label)];
+    crumbs.replaceChildren(...labels.map((text, index) => {
+      const li = document.createElement("li");
+      if (index === labels.length - 1) {
+        const span = document.createElement("span");
+        span.setAttribute("aria-current", "location");
+        span.textContent = text;
+        li.append(span);
+      } else {
+        const button2 = document.createElement("button");
+        button2.type = "button";
+        button2.dataset.mkDrilldownCrumb = String(index);
+        button2.textContent = text;
+        button2.setAttribute("aria-controls", menu.id);
+        li.append(button2);
+      }
+      return li;
+    }));
+    menu.replaceChildren(...current3.items.map((item, index) => {
+      const button2 = document.createElement("button");
+      button2.type = "button";
+      button2.dataset.mkDrilldownItem = item.id;
+      button2.setAttribute("role", "menuitem");
+      button2.disabled = Boolean(item.disabled);
+      if (item.disabled) button2.setAttribute("aria-disabled", "true");
+      const text = document.createElement("span");
+      text.dataset.mkDrilldownText = "";
+      const name = document.createElement("span");
+      name.id = `${uid2}-item-${index}`;
+      name.dataset.mkDrilldownLabel = "";
+      name.textContent = item.label;
+      button2.setAttribute("aria-labelledby", name.id);
+      text.append(name);
+      if (item.description) {
+        const description = document.createElement("span");
+        description.id = `${uid2}-description-${index}`;
+        description.dataset.mkDrilldownDescription = "";
+        description.textContent = item.description;
+        button2.setAttribute("aria-describedby", description.id);
+        text.append(description);
+      }
+      button2.append(text);
+      if (branch(item)) {
+        button2.setAttribute("aria-haspopup", "menu");
+        const arrow = document.createElement("span");
+        arrow.dataset.mkDrilldownArrow = "";
+        arrow.innerHTML = CHEVRON5;
+        button2.append(arrow);
+      }
+      return button2;
+    }));
+    empty.textContent = config.emptyText ?? "No actions available";
+    empty.hidden = current3.items.length !== 0;
+    roving(preferred ?? remembered.get(JSON.stringify(path)) ?? null);
+    if (direction && !reduced()) {
+      animation = gsap.timeline({ onComplete: () => {
+        animation = null;
+      } }).fromTo(menu, { x: 28 * direction, opacity: 0, filter: "blur(6px)" }, { x: 0, opacity: 1, filter: "blur(0px)", duration: 0.36, ease: EASE.signature, clearProps: "transform,opacity,filter" });
+      const nextHeight = viewport.getBoundingClientRect().height;
+      if (oldHeight > 0 && nextHeight > 0 && oldHeight !== nextHeight) {
+        animation.fromTo(viewport, { height: oldHeight }, { height: nextHeight, duration: 0.36, ease: EASE.signature, clearProps: "height" }, 0);
+      }
+    }
+    if (focus) roving(focused, true);
+  };
+  const navigate = (requested, notify, focus, preferred) => {
+    if (scope.disposed) return false;
+    const next = levelAt(requested).valid;
+    if (samePath(path, next)) return false;
+    const previous = path;
+    if (focused) remembered.set(JSON.stringify(previous), focused);
+    const direction = next.length > path.length ? 1 : -1;
+    path = next;
+    render(direction, focus, preferred);
+    if (notify) notifyPath();
+    return true;
+  };
+  const open = (id) => {
+    if (scope.disposed) return false;
+    const item = level().items.find((entry) => entry.id === id);
+    if (!item || item.disabled || !branch(item)) return false;
+    return navigate([...path, id], true, true);
+  };
+  const back = () => path.length ? navigate(path.slice(0, -1), true, true, path.at(-1)) : false;
+  const reset = () => navigate([], true, root.contains(document.activeElement), path[0]);
+  const activate = (id) => {
+    const item = level().items.find((entry) => entry.id === id);
+    if (!item || item.disabled) return;
+    if (branch(item)) return void open(id);
+    const selected = copyItems([item])[0];
+    const selectedPath = [...path, item.id];
+    root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { item: selected, path: [...selectedPath] } }));
+    config.onSelect?.(copyItems([item])[0], [...selectedPath]);
+  };
+  scope.on(menu, "click", (event) => {
+    const button2 = event.target?.closest("[data-mk-drilldown-item]");
+    if (!button2 || !menu.contains(button2) || button2.disabled) return;
+    roving(button2.dataset.mkDrilldownItem, false);
+    activate(button2.dataset.mkDrilldownItem);
+  });
+  scope.on(menu, "focusin", (event) => {
+    const button2 = event.target?.closest("[data-mk-drilldown-item]");
+    if (button2 && !button2.disabled) roving(button2.dataset.mkDrilldownItem, false);
+  });
+  scope.on(root, "keydown", (event) => {
+    const key2 = event.key;
+    if ((key2 === "ArrowLeft" || key2 === "Escape") && path.length) {
+      event.preventDefault();
+      event.stopPropagation();
+      back();
+      return;
+    }
+    if (!menu.contains(event.target)) return;
+    const items = enabled();
+    const at = items.indexOf(document.activeElement);
+    const moves = { ArrowDown: (at + 1) % items.length, ArrowUp: at < 0 ? items.length - 1 : (at - 1 + items.length) % items.length, Home: 0, End: items.length - 1 };
+    if (key2 in moves && items.length) {
+      event.preventDefault();
+      roving(items[moves[key2]].dataset.mkDrilldownItem, true);
+      return;
+    }
+    const button2 = event.target?.closest("[data-mk-drilldown-item]");
+    if (!button2 || button2.disabled || !menu.contains(button2)) return;
+    if (key2 === "Enter" || key2 === " " || key2 === "ArrowRight") {
+      const item = level().items.find((entry) => entry.id === button2.dataset.mkDrilldownItem);
+      if (key2 === "ArrowRight" && (!item || !branch(item))) return;
+      event.preventDefault();
+      activate(button2.dataset.mkDrilldownItem);
+    }
+  });
+  scope.on(backButton, "click", () => back());
+  scope.on(breadcrumb, "click", (event) => {
+    const button2 = event.target?.closest("[data-mk-drilldown-crumb]");
+    if (!button2 || !breadcrumb.contains(button2)) return;
+    const depth = Number(button2.dataset.mkDrilldownCrumb);
+    navigate(path.slice(0, depth), true, true, path[depth]);
+  });
+  scope.add(() => {
+    cancelMotion();
+    remembered.clear();
+    header.remove();
+    breadcrumb.remove();
+    viewport.remove();
+    root.append(holder);
+  });
+  path = levelAt(options.path ?? []).valid;
+  render(0, false);
+  const update = (next) => {
+    if (scope.disposed) return;
+    const active = document.activeElement;
+    const hadFocus = root.contains(active);
+    const backFocused = active === backButton;
+    const crumbFocused = active?.dataset.mkDrilldownCrumb;
+    const previousPath = path;
+    const previousFocus = focused;
+    config = { ...config, ...next };
+    if (next.items !== void 0) data = copyItems(next.items);
+    path = levelAt(next.path ?? path).valid;
+    const changed = !samePath(previousPath, path);
+    const preferred = changed ? previousPath[path.length] : previousFocus;
+    render(0, hadFocus, preferred);
+    if (hadFocus && !changed) {
+      if (backFocused && !backButton.hidden) backButton.focus({ preventScroll: true });
+      else if (crumbFocused !== void 0) {
+        [...crumbs.querySelectorAll("[data-mk-drilldown-crumb]")].find((button2) => button2.dataset.mkDrilldownCrumb === crumbFocused)?.focus({ preventScroll: true });
+      }
+    }
+    if (changed && next.path === void 0) notifyPath();
+  };
+  return {
+    open,
+    back,
+    root: reset,
+    reset,
+    setPath: (next, notify = false) => {
+      navigate(next, notify, root.contains(document.activeElement));
+    },
+    setItems: (items) => update({ items }),
+    update,
+    focusItem(id) {
+      if (!scope.disposed && buttonOf(id)) roving(id, true);
+    },
+    get path() {
+      return [...path];
+    },
+    get items() {
+      return copyItems(level().items);
+    },
+    element: root,
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/wheel-picker/engine.ts
+var sequence25 = 0;
+function normalize(items) {
+  const seen = /* @__PURE__ */ new Set();
+  return items.flatMap((item) => {
+    const row = typeof item === "string" ? { value: item, label: item } : item;
+    if (!row || typeof row !== "object" || row.value == null) return [];
+    const value = String(row.value);
+    if (seen.has(value)) return [];
+    seen.add(value);
+    return [{ value, label: String(row.label ?? value), disabled: Boolean(row.disabled) }];
+  });
+}
+function createWheelPicker(root, options = {}) {
+  if (!root) return inert({ setValue() {
+  }, setItems() {
+  }, value: "" });
+  const scope = createScope(), uid2 = `mk-wheel-${++sequence25}`;
+  let items = normalize(Array.isArray(options.items) ? options.items : []);
+  const rawRows = Number.isFinite(options.visibleItems) ? Math.round(options.visibleItems) : 5;
+  const rows = Math.min(9, Math.max(3, rawRows % 2 ? rawRows : rawRows + 1));
+  const height = Number.isFinite(options.itemHeight) ? Math.max(44, Math.min(96, options.itemHeight)) : 44;
+  const disabled = Boolean(options.disabled);
+  const originalStyle = root.getAttribute("style");
+  root.style.setProperty("--mk-wheel-row", `${height}px`);
+  root.style.setProperty("--mk-wheel-rows", String(rows));
+  scope.add(() => {
+    if (originalStyle === null) root.removeAttribute("style");
+    else root.setAttribute("style", originalStyle);
+  });
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(root, "data-mk-disabled", disabled ? "" : null);
+  const label = document.createElement("span");
+  label.id = `${uid2}-label`;
+  label.dataset.mkWheelLabel = "";
+  label.textContent = options.label ?? root.getAttribute("aria-label") ?? "Seleccionar";
+  const frame = document.createElement("div");
+  frame.dataset.mkWheelFrame = "";
+  const highlight = document.createElement("span");
+  highlight.dataset.mkWheelHighlight = "";
+  highlight.setAttribute("aria-hidden", "true");
+  const viewport = document.createElement("div");
+  viewport.dataset.mkWheelViewport = "";
+  viewport.setAttribute("role", "listbox");
+  viewport.setAttribute("aria-labelledby", label.id);
+  viewport.setAttribute("aria-orientation", "vertical");
+  viewport.setAttribute("aria-disabled", String(disabled));
+  viewport.tabIndex = disabled ? -1 : 0;
+  const list3 = document.createElement("div");
+  list3.dataset.mkWheelList = "";
+  viewport.append(list3);
+  frame.append(highlight, viewport);
+  const input = document.createElement("input");
+  input.type = "hidden";
+  if (options.name) input.name = options.name;
+  input.disabled = disabled;
+  const status = document.createElement("span");
+  status.className = "mk-sr-only";
+  status.setAttribute("role", "status");
+  root.append(label, frame, input, status);
+  scope.add(() => {
+    label.remove();
+    frame.remove();
+    input.remove();
+    status.remove();
+  });
+  const enabled = () => items.flatMap((item, index) => item.disabled ? [] : [index]);
+  const find = (value) => items.findIndex((item) => value !== void 0 && item.value === String(value) && !item.disabled);
+  let current3 = find(options.value);
+  if (current3 < 0) current3 = enabled()[0] ?? -1;
+  const initial = items[current3]?.value ?? "";
+  let committed = initial;
+  let nodes = [];
+  let timer2;
+  let typing;
+  let prefix = "";
+  let programmatic = null;
+  let dragging = null;
+  let suppressClick = false;
+  scope.add(() => {
+    clearTimeout(timer2);
+    clearTimeout(typing);
+  });
+  const paint = () => {
+    const offset = viewport.scrollTop / height;
+    nodes.forEach((node, index) => {
+      const distance = Math.max(-3, Math.min(3, index - offset));
+      node.style.transform = reduced() ? "" : `perspective(600px) rotateX(${-distance * 14}deg) scale(${1 - Math.abs(distance) * 0.055})`;
+      node.setAttribute("aria-selected", String(index === current3));
+    });
+    input.value = items[current3]?.value ?? "";
+    if (current3 >= 0) viewport.setAttribute("aria-activedescendant", `${uid2}-${current3}`);
+    else viewport.removeAttribute("aria-activedescendant");
+  };
+  const announce = (kind) => {
+    const value = items[current3]?.value ?? "";
+    if (kind === "input") options.onInput?.(value);
+    else {
+      options.onChange?.(value);
+      status.textContent = items[current3]?.label ?? "";
+    }
+    input.dispatchEvent(new Event(kind, { bubbles: true }));
+    root.dispatchEvent(new CustomEvent(`mk:${kind}`, { bubbles: true, detail: { value, item: current3 >= 0 ? { ...items[current3] } : null } }));
+  };
+  const align = (animate) => {
+    const top = Math.max(0, current3) * height;
+    if (animate && !reduced() && typeof viewport.scrollTo === "function") {
+      programmatic = top;
+      viewport.scrollTo({ top, behavior: "smooth" });
+    } else {
+      programmatic = null;
+      viewport.scrollTop = top;
+      paint();
+    }
+  };
+  const select = (index, notify, animate = true) => {
+    if (scope.disposed || index < 0 || index >= items.length || items[index].disabled) return;
+    const previous = items[current3]?.value ?? "";
+    current3 = index;
+    paint();
+    align(animate);
+    const value = items[current3].value;
+    committed = value;
+    if (notify && value !== previous) {
+      announce("input");
+      announce("change");
+    }
+  };
+  const nearest = () => {
+    const at = viewport.scrollTop / height;
+    return enabled().reduce((best, index) => best < 0 || Math.abs(index - at) < Math.abs(best - at) ? index : best, -1);
+  };
+  const settle = () => {
+    if (scope.disposed || dragging) return;
+    clearTimeout(timer2);
+    if (programmatic !== null) {
+      programmatic = null;
+      viewport.scrollTop = Math.max(0, current3) * height;
+      paint();
+      return;
+    }
+    const index = nearest();
+    if (index < 0) return;
+    current3 = index;
+    align(false);
+    paint();
+    const value = items[current3].value;
+    if (value !== committed) {
+      committed = value;
+      announce("change");
+    }
+  };
+  const build = () => {
+    list3.replaceChildren();
+    nodes = items.map((item, index) => {
+      const node = document.createElement("div");
+      node.id = `${uid2}-${index}`;
+      node.dataset.mkWheelOption = String(index);
+      node.setAttribute("role", "option");
+      node.setAttribute("aria-disabled", String(item.disabled));
+      node.textContent = item.label;
+      list3.append(node);
+      return node;
+    });
+    if (!items.length) {
+      const empty = document.createElement("span");
+      empty.dataset.mkWheelEmpty = "";
+      empty.textContent = "Sin opciones";
+      list3.append(empty);
+    }
+    align(false);
+    paint();
+  };
+  const interrupt = () => {
+    if (programmatic !== null && typeof viewport.scrollTo === "function") viewport.scrollTo({ top: viewport.scrollTop, behavior: "instant" });
+    programmatic = null;
+  };
+  scope.on(viewport, "pointerdown", (event) => {
+    interrupt();
+    const pointer2 = event;
+    if (disabled || pointer2.pointerType === "touch" || pointer2.button !== 0) return;
+    dragging = { id: pointer2.pointerId, y: pointer2.clientY, top: viewport.scrollTop, moved: false };
+    viewport.focus({ preventScroll: true });
+  });
+  scope.on(window, "pointermove", (event) => {
+    const pointer2 = event;
+    if (!dragging || pointer2.pointerId !== dragging.id) return;
+    const delta = pointer2.clientY - dragging.y;
+    if (Math.abs(delta) > 4 && !dragging.moved) {
+      dragging.moved = true;
+      viewport.style.scrollSnapType = "none";
+      try {
+        viewport.setPointerCapture(pointer2.pointerId);
+      } catch {
+      }
+    }
+    if (!dragging.moved) return;
+    event.preventDefault();
+    viewport.scrollTop = Math.max(0, Math.min(Math.max(0, (items.length - 1) * height), dragging.top - delta));
+  });
+  const release = (event) => {
+    if (!dragging || dragging.id !== event.pointerId) return;
+    suppressClick = dragging.moved;
+    dragging = null;
+    viewport.style.removeProperty("scroll-snap-type");
+    if (suppressClick) {
+      settle();
+      clearTimeout(timer2);
+      timer2 = setTimeout(() => {
+        suppressClick = false;
+      }, 0);
+    }
+  };
+  scope.on(window, "pointerup", release);
+  scope.on(window, "pointercancel", release);
+  scope.on(viewport, "lostpointercapture", release);
+  scope.on(viewport, "wheel", interrupt, { passive: true });
+  scope.on(viewport, "scroll", () => {
+    if (disabled) return;
+    if (programmatic === null) {
+      const index = nearest();
+      if (index >= 0 && index !== current3) {
+        current3 = index;
+        paint();
+        announce("input");
+      }
+    }
+    paint();
+    clearTimeout(timer2);
+    timer2 = setTimeout(settle, 100);
+  }, { passive: true });
+  scope.on(viewport, "scrollend", settle);
+  scope.on(viewport, "click", (event) => {
+    if (disabled) return;
+    if (suppressClick) {
+      event.preventDefault();
+      suppressClick = false;
+      return;
+    }
+    const row = event.target.closest("[data-mk-wheel-option]");
+    if (!row || !list3.contains(row)) return;
+    select(Number(row.dataset.mkWheelOption), true);
+    viewport.focus({ preventScroll: true });
+  });
+  scope.on(viewport, "keydown", (event) => {
+    if (disabled) return;
+    const key2 = event.key, choices = enabled(), at = choices.indexOf(current3);
+    if (key2 === "Enter" || key2 === " ") {
+      event.preventDefault();
+      return;
+    }
+    const move = key2 === "ArrowDown" ? 1 : key2 === "ArrowUp" ? -1 : key2 === "PageDown" ? rows - 1 : key2 === "PageUp" ? 1 - rows : 0;
+    let next = key2 === "Home" ? choices[0] : key2 === "End" ? choices.at(-1) : move ? choices[Math.min(choices.length - 1, Math.max(0, at + move))] : void 0;
+    if (next === void 0 && key2.length === 1 && !event.ctrlKey && !event.metaKey) {
+      prefix += key2.toLocaleLowerCase();
+      clearTimeout(typing);
+      typing = setTimeout(() => {
+        prefix = "";
+      }, 600);
+      next = choices.find((index) => items[index].label.toLocaleLowerCase().startsWith(prefix));
+    }
+    if (next === void 0) return;
+    event.preventDefault();
+    interrupt();
+    select(next, true);
+  });
+  const form = root.closest("form");
+  if (form) scope.on(form, "reset", (event) => queueMicrotask(() => {
+    if (scope.disposed || event.defaultPrevented) return;
+    const index = find(initial);
+    select(index >= 0 ? index : enabled()[0] ?? -1, true, false);
+    paint();
+  }));
+  build();
+  input.defaultValue = initial;
+  return {
+    setValue(value, notify = false) {
+      const next = find(value);
+      if (next !== current3) select(next, notify);
+    },
+    setItems(next, notify = false) {
+      if (scope.disposed) return;
+      clearTimeout(timer2);
+      programmatic = null;
+      const before = items[current3]?.value ?? "";
+      items = normalize(Array.isArray(next) ? next : []);
+      current3 = find(before);
+      if (current3 < 0) current3 = enabled()[0] ?? -1;
+      build();
+      committed = items[current3]?.value ?? "";
+      if (notify && committed !== before) {
+        announce("input");
+        announce("change");
+      }
+    },
+    get value() {
+      return items[current3]?.value ?? "";
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
 export {
   PATHS,
   springPath,
@@ -21328,6 +22811,11 @@ export {
   sanitizeHtml,
   createRichTextEditor,
   createAddToCart,
-  createScrollIsland
+  createScrollIsland,
+  createSignaturePad,
+  createWaveformPlayer,
+  createVoiceMessageBubble,
+  createDrilldownMenu,
+  createWheelPicker
 };
-//# sourceMappingURL=chunk-A6QQCF6V.js.map
+//# sourceMappingURL=chunk-7IQTMF7Y.js.map