hys-ui 0.4.0 → 0.6.0

package/dist/components/HysAnimatedNumber/NumberAnimationCanvas/NumberAnimationCanvas2.vue.js

@@ -0,0 +1,166 @@
+import { defineComponent as it, useTemplateRef as G, ref as ot, computed as z, watch as ct, onMounted as rt, onActivated as lt, onDeactivated as dt, onBeforeUnmount as pt, openBlock as ht, createElementBlock as ut, createElementVNode as J, toDisplayString as mt } from "vue";
+import { numberTokens as A, digitCount as ft } from "../../../composables/animatedNumberDigits.js";
+import { persistentDisplay as E } from "../animation/digital.js";
+import { glyph as O, clamp as gt, localProgress as xt } from "../animation/paint.js";
+import { paintNumberAnimation as vt } from "../animation/render.js";
+const yt = ["data-painted"], wt = { class: "hys-number-canvas-text" }, zt = /* @__PURE__ */ it({
+  __name: "NumberAnimationCanvas",
+  props: {
+    current: {},
+    start: {},
+    end: {},
+    glyphs: {},
+    context: {},
+    plans: {},
+    digitPlans: {},
+    intensity: {},
+    motion: { type: Boolean },
+    axis: {},
+    theme: {}
+  },
+  setup(K) {
+    const t = K, m = G("root"), R = G("canvas"), c = ot(!1), Q = z(
+      () => t.current.parts.map(({ value: a }) => a).join("")
+    ), X = z(
+      () => new Map(
+        A(t.start.parts, !0).map(({ key: a, text: i }) => [a, i])
+      )
+    ), Y = z(
+      () => new Map(
+        A(t.end.parts, !0).map(({ key: a, text: i }) => [a, i])
+      )
+    );
+    let r, f = !1;
+    function l() {
+      const a = R.value, i = m.value, d = ["playing", "paused"].includes(t.context.status) && t.context.progress < 1, g = ft(t.current.parts), Z = t.motion && t.intensity > 0 && g <= 48 && g > 0;
+      if (!f || !a || !i || !Z || typeof window.CanvasRenderingContext2D > "u") {
+        c.value = !1;
+        return;
+      }
+      const k = [
+        ...t.plans,
+        ...Object.values(t.digitPlans).flat()
+      ].some(
+        ({ entry: s }) => (s == null ? void 0 : s.category) === "digital" && E(s.variant)
+      );
+      if (!d && !k) {
+        c.value = !1;
+        return;
+      }
+      try {
+        const s = a.getContext("2d"), x = a.clientWidth, v = a.clientHeight;
+        if (!s || !x || !v) {
+          c.value = !1;
+          return;
+        }
+        const y = Math.min(3, window.devicePixelRatio || 1), N = Math.round(x * y), S = Math.round(v * y);
+        a.width !== N && (a.width = N), a.height !== S && (a.height = S), s.setTransform(y, 0, 0, y, 0, 0), s.clearRect(0, 0, x, v);
+        const o = getComputedStyle(i), D = Number.parseFloat(o.fontSize) || 16;
+        s.font = `${o.fontStyle} ${o.fontWeight} ${D}px ${o.fontFamily}`, s.textAlign = "center", s.textBaseline = "middle";
+        const I = o.color, tt = o.getPropertyValue("--hys-ui-theme-primary").trim() || I, et = Number.parseFloat(o.letterSpacing) || 0, F = A(t.current.parts, !0), st = Math.max(
+          ...t.glyphs.map((e) => s.measureText(e).width)
+        ), H = F.map(
+          ({ text: e, section: p }) => (p ? st : s.measureText(e).width) + et
+        ), M = H.reduce((e, p) => e + p, 0), w = M > i.clientWidth + 1 && i.clientWidth > 0 ? i.clientWidth / M : 1;
+        let j = (x - M * w) / 2, nt = 0;
+        F.forEach((e, p) => {
+          const _ = H[p], P = e.section ? nt++ : 0, L = ((e.section ? t.digitPlans[`${e.section}:${e.position}`] ?? t.digitPlans["*"] : void 0) ?? t.plans).filter(
+            ({ entry: n }) => e.section || (n == null ? void 0 : n.category) === "data" && [3, 4, 5].includes(n.variant)
+          ), W = X.value.get(e.key) ?? (e.section ? t.glyphs[0] : e.text), C = Y.value.get(e.key) ?? e.text, b = {
+            ctx: s,
+            from: W,
+            to: C,
+            digit: e.text,
+            section: e.section,
+            glyphs: t.glyphs,
+            fromIndex: Math.max(0, t.glyphs.indexOf(W)),
+            toIndex: Math.max(0, t.glyphs.indexOf(C)),
+            color: I,
+            accent: tt,
+            size: D,
+            width: _,
+            count: g,
+            index: P
+          };
+          s.save(), s.translate(j + _ * w / 2, v / 2), s.scale(w, 1);
+          const V = d ? L : L.filter(
+            ({ entry: n }) => (n == null ? void 0 : n.category) === "digital" && E(n.variant)
+          );
+          V.length || O(
+            {
+              ...b,
+              p: 1,
+              axis: t.axis ?? "vertical",
+              seed: 0,
+              strength: 1,
+              cycles: 1,
+              plan: {}
+            },
+            e.text
+          ), V.forEach((n, U) => {
+            var q;
+            const h = d ? gt(
+              n.stagger ? xt(
+                t.context.progress,
+                P,
+                g,
+                n.stagger
+              ) : t.context.easedProgress
+            ) : 1, u = Math.min(2, (n.strength ?? 1) * t.intensity), at = ((q = n.entry) == null ? void 0 : q.category) === "digital" && E(n.entry.variant), T = {
+              ...b,
+              p: h,
+              strength: u,
+              plan: n,
+              cycles: n.cycles ?? 1,
+              seed: (n.seed ?? 37) + P * 97,
+              axis: n.axis ?? t.axis ?? "vertical",
+              to: d ? b.to : e.text,
+              toIndex: d ? b.toIndex : Math.max(0, t.glyphs.indexOf(e.text))
+            };
+            s.save(), s.globalAlpha *= U === 0 ? 1 : 0.62, U === 0 && u < 1 && O(T, e.text, { alpha: 1 - u }), s.globalAlpha *= Math.min(1, u), u > 0 && (h > 0 && h < 1 || at) ? vt(T) : O(T, h === 0 ? W : h === 1 ? C : e.text), s.restore();
+          }), s.restore(), j += _ * w;
+        }), c.value = !0;
+      } catch {
+        c.value = !1;
+      }
+    }
+    function $() {
+      var a;
+      f || (f = !0, m.value && typeof ResizeObserver < "u" && (r = new ResizeObserver(l), r.observe(m.value)), window.addEventListener("resize", l), (a = document.fonts) == null || a.ready.then(l), l());
+    }
+    function B() {
+      f = !1, r == null || r.disconnect(), r = void 0, window.removeEventListener("resize", l);
+    }
+    return ct(
+      () => [
+        t.current,
+        t.start,
+        t.end,
+        t.context,
+        t.plans,
+        t.digitPlans,
+        t.motion,
+        t.intensity,
+        t.axis,
+        t.theme
+      ],
+      l,
+      { flush: "post" }
+    ), rt($), lt($), dt(B), pt(B), (a, i) => (ht(), ut("span", {
+      ref_key: "root",
+      ref: m,
+      class: "hys-number-canvas",
+      "data-painted": c.value ? "" : void 0
+    }, [
+      J("span", wt, mt(Q.value), 1),
+      J("canvas", {
+        ref_key: "canvas",
+        ref: R,
+        "aria-hidden": "true"
+      }, null, 512)
+    ], 8, yt));
+  }
+});
+export {
+  zt as default
+};

package/dist/components/HysAnimatedNumber/NumberDigits/NumberDigits.vue.js

@@ -0,0 +1,7 @@
+import o from "./NumberDigits2.vue.js";
+/* empty css                  */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c4e6dfff"]]);
+export {
+  e as default
+};

package/dist/components/HysAnimatedNumber/NumberDigits/NumberDigits2.vue.js

@@ -0,0 +1,105 @@
+import { defineComponent as z, useSlots as A, computed as l, openBlock as r, createElementBlock as c, Fragment as b, renderList as I, normalizeStyle as L, renderSlot as j, mergeProps as w, createElementVNode as P, toDisplayString as g, normalizeClass as G } from "vue";
+import { digitCount as v, numberTokens as R, createDigitTracks as V, digitMotion as X } from "../../../composables/animatedNumberDigits.js";
+import { bounded as u } from "../../../composables/animatedNumberFormat.js";
+const $ = ["role", "aria-label", "data-effect", "data-axis", "data-timer-motion"], q = { class: "hys-number-face hys-number-face-first" }, H = { class: "hys-number-face hys-number-face-second" }, Q = /* @__PURE__ */ z({
+  __name: "NumberDigits",
+  props: {
+    current: {},
+    start: {},
+    end: {},
+    glyphs: {},
+    context: {},
+    effect: {},
+    axis: {},
+    order: {},
+    stagger: {},
+    duration: {},
+    digitDuration: {},
+    motion: { type: Boolean },
+    timer: { type: Boolean },
+    accessible: { type: Boolean },
+    split: { type: Boolean }
+  },
+  setup(s) {
+    const e = s, p = A(), x = l(
+      () => e.motion && !e.timer && e.context.progress < 1 && ["delayed", "playing", "paused"].includes(e.context.status)
+    ), S = l(
+      () => e.effect === "appear" || e.effect === "disappear"
+    ), C = l(
+      () => v(e.start.parts) > v(e.end.parts) ? e.start : e.end
+    ), B = l(() => {
+      const n = x.value && S.value && !p.digit ? C.value : e.current;
+      return R(
+        n.parts,
+        v(n.parts) <= 48 && (!!e.effect || !!p.digit || e.split)
+      );
+    }), D = l(
+      () => e.effect && !e.timer && V(e.start, e.end, e.glyphs)
+    ), F = l(() => {
+      const n = B.value.filter((t) => t.section).length;
+      let E = 0;
+      return B.value.map((t) => {
+        if (!t.section) return { token: t };
+        const o = E++, y = e.order === "low-to-high" ? n - 1 - o : o, i = u(e.duration, 650, 1, Number.MAX_SAFE_INTEGER), m = u(e.stagger, 0, 0, i / Math.max(1, n)), h = y * m, M = u(
+          e.digitDuration,
+          i - h,
+          1,
+          i - h
+        ), N = e.context.progress, f = m || e.digitDuration !== void 0 ? u((N * i - h) / M, 0, 0, 1) : u(e.context.easedProgress, N, 0, 1), d = x.value && D.value ? D.value(t) : void 0, a = d && (f < 1 || S.value) && e.effect ? X(e.effect, d, f, o, e.glyphs) : void 0, T = {
+          ...e.context,
+          digit: t.text,
+          index: o,
+          position: t.position,
+          section: t.section,
+          digitProgress: f
+        };
+        return {
+          token: t,
+          context: T,
+          face: d && f === 1 && d.toPresent ? e.glyphs[d.destination] : t.text,
+          track: a != null && a.changed ? a : void 0,
+          style: a ? {
+            "--number-phase": a.phase,
+            "--number-direction": a.direction
+          } : void 0
+        };
+      });
+    });
+    return (n, E) => (r(), c("span", {
+      class: "hys-number-digits",
+      role: s.accessible ? "img" : void 0,
+      "aria-label": s.accessible ? s.current.parts.map(({ value: t }) => t).join("") : void 0,
+      "data-effect": s.effect,
+      "data-axis": s.axis,
+      "data-timer-motion": s.timer && s.motion && s.effect ? "" : void 0
+    }, [
+      (r(!0), c(b, null, I(F.value, ({ token: t, context: o, face: y, track: i, style: m }) => (r(), c(b, {
+        key: t.key
+      }, [
+        o ? (r(), c("span", {
+          key: 0,
+          class: "hys-ui-motion-number-digit",
+          style: L(m)
+        }, [
+          p.digit ? j(n.$slots, "digit", w({ ref_for: !0 }, o), void 0, !0, 0) : i ? (r(), c(b, { key: 1 }, [
+            P("span", q, g(i.first), 1),
+            P("span", H, g(i.second), 1)
+          ], 64)) : (r(), c("span", {
+            key: s.timer ? t.text : void 0,
+            class: "hys-number-face hys-number-timer-face"
+          }, g(y), 1))
+        ], 4)) : (r(), c("span", {
+          key: 1,
+          class: G({
+            "hys-ui-motion-number-separator": t.type === "group" || t.type === "decimal",
+            "hys-ui-motion-number-currency": t.type === "currency",
+            "hys-ui-motion-number-sign": t.type === "plusSign" || t.type === "minusSign"
+          })
+        }, g(t.text), 3))
+      ], 64))), 128))
+    ], 8, $));
+  }
+});
+export {
+  Q as default
+};

package/dist/components/HysAnimatedNumber/animation/digital.js

@@ -0,0 +1,186 @@
+import { rollingGlyph as I, noise as k, glyph as d, rectangle as S, wave as W, smooth as _ } from "./paint.js";
+import { glyphMask as C } from "./particles.js";
+import { tracePath as E, digitPath as R } from "./paths.js";
+const Z = [
+  "abcdef",
+  "bc",
+  "abged",
+  "abgcd",
+  "fgbc",
+  "afgcd",
+  "afgecd",
+  "abc",
+  "abcdefg",
+  "abfgcd"
+], j = {
+  a: [-0.2, -0.41, 0.2, -0.41],
+  b: [0.22, -0.37, 0.22, -0.04],
+  c: [0.22, 0.04, 0.22, 0.37],
+  d: [-0.2, 0.41, 0.2, 0.41],
+  e: [-0.22, 0.04, -0.22, 0.37],
+  f: [-0.22, -0.37, -0.22, -0.04],
+  g: [-0.2, 0, 0.2, 0]
+};
+function q(s, l, e) {
+  const { ctx: o, size: h, color: p, accent: f } = s;
+  o.save(), o.lineWidth = (e === 3 ? 0.045 : 0.075) * h, o.lineCap = e === 3 ? "butt" : "round";
+  const c = Z[l] ?? "";
+  for (const [b, [t, y, r, u]] of Object.entries(j))
+    o.globalAlpha = c.includes(b) ? 1 : 0.14, o.strokeStyle = e === 3 ? p : f, o.beginPath(), o.moveTo(t * h, y * h), e === 1 && y === u && (o.lineTo(-0.022 * h, u * h), o.moveTo(0.022 * h, u * h)), o.lineTo(r * h, u * h), o.stroke();
+  e === 1 && (o.lineWidth = 0.035 * h, [
+    [-0.18, -0.35, -0.025, -0.05],
+    [0.18, -0.35, 0.025, -0.05],
+    [-0.18, 0.35, -0.025, 0.05],
+    [0.18, 0.35, 0.025, 0.05],
+    [0, -0.37, 0, -0.05],
+    [0, 0.05, 0, 0.37]
+  ].forEach(([t, y, r, u], n) => {
+    o.globalAlpha = (l + n) % 4 === 0 ? 0.65 : 0.12, o.beginPath(), o.moveTo(t * h, y * h), o.lineTo(r * h, u * h), o.stroke();
+  })), o.restore();
+}
+function B(s, l, e) {
+  const { p: o, width: h, size: p, ctx: f, accent: c } = s, b = h / p / 2;
+  d(s, e, {
+    alpha: l === 14 ? 0.78 : 0.9,
+    color: l === 14 ? c : void 0
+  });
+  for (let t = 0; t < (l === 20 ? 12 : 8); t++) {
+    const y = -0.54 + t * (l === 20 ? 0.09 : 0.135);
+    (l !== 20 || Math.floor(o * 12) > t) && S(
+      s,
+      -b,
+      y,
+      b * 2,
+      0.035,
+      () => d(s, e, { color: c, alpha: 0.55, glow: 0.09 })
+    );
+  }
+  S(
+    s,
+    -b,
+    -0.58 + o * 1.16,
+    b * 2,
+    0.05,
+    () => d(s, e, { color: c, glow: 0.2 })
+  ), l === 19 && (f.save(), f.strokeStyle = c, f.globalAlpha *= 0.7 * W(o), f.lineWidth = 0.025 * p, f.beginPath(), f.arc(0, 0, 0.43 * p, 0, o * Math.PI * 2), f.stroke(), f.restore());
+}
+function X(s, l) {
+  const {
+    ctx: e,
+    p: o,
+    from: h,
+    to: p,
+    toIndex: f,
+    size: c,
+    width: b,
+    accent: t,
+    color: y,
+    seed: r,
+    strength: u
+  } = s, n = W(o) * u, w = o > 0.85 ? 1 : Math.floor(o * 28), T = Math.floor(k(r, w) * 10), P = o >= 0.84 ? p : I(s, T);
+  if (l <= 3) {
+    const x = o === 1 ? f : o < 0.24 ? s.fromIndex : o < 0.68 ? T : f;
+    if (l !== 2) q(s, x, l);
+    else {
+      e.save(), e.fillStyle = t;
+      for (const [g, i] of C(
+        I(s, x),
+        e.font,
+        c,
+        5
+      ))
+        e.beginPath(), e.arc(g * c, i * c, c * 0.038, 0, Math.PI * 2), e.fill();
+      e.restore();
+    }
+    return;
+  }
+  if ([6, 7, 8, 9, 22, 23, 24, 25].includes(l)) {
+    const g = {
+      6: "0101ヲヌ",
+      7: "01",
+      8: "ABCDEF0123456789",
+      9: "#@?&XYZ",
+      22: "9876543210",
+      23: "01Zフォ",
+      24: ">_0123456789",
+      25: "_"
+    }[l], i = g[Math.floor(k(r + 6, w) * g.length)], M = o < (l === 24 ? 0.58 : 0.84) ? i : p;
+    (l === 23 || l === 22 || l === 6) && d(s, i, {
+      y: -0.5 + o * 0.55,
+      alpha: 0.35 * n,
+      color: t
+    }), d(s, M, {
+      color: t,
+      glow: 0.08 * n,
+      x: l === 22 ? -0.35 * (1 - o) : 0
+    }), l === 25 && w % 2 === 0 && d(s, "_", { x: 0.32, y: 0.04, alpha: n, color: t });
+    return;
+  }
+  if ([5, 13, 14, 19, 20, 21, 26, 29].includes(l)) {
+    if (B(s, l, o < 0.28 ? h : p), l === 5 && d(s, p, {
+      y: -0.08 * n,
+      sx: 0.92,
+      alpha: 0.45 * n,
+      color: t,
+      glow: 0.13
+    }), l === 21 || l === 29) {
+      e.save(), e.fillStyle = t, e.globalAlpha *= 0.24 * n;
+      const x = b / c / 5;
+      for (let g = 0; g < 8; g++)
+        for (let i = 0; i < 5; i++) {
+          const M = l === 21 ? g / 8 + i * 0.025 < o : k(r + i, g) < o, z = l === 29 ? (k(r + g, i) - 0.5) * 0.7 * (1 - o) : 0, D = l === 29 ? (k(r + i + 9, g) - 0.5) * 0.8 * (1 - o) : 0;
+          M && e.fillRect(
+            ((i - 2.5) * x + z) * c,
+            ((g - 4) * 0.13 + D) * c,
+            x * c - 1,
+            0.13 * c - 1
+          );
+        }
+      e.restore();
+    }
+    l === 26 && (e.save(), e.strokeStyle = t, e.lineWidth = 0.018 * c, e.globalAlpha *= 0.6, e.strokeRect(-b * 0.5, -0.54 * c, b, 1.08 * c), e.restore());
+    return;
+  }
+  if ([10, 11, 12].includes(l)) {
+    d(s, P);
+    const x = (k(r, w) - 0.5) * n * 0.35;
+    if (l === 12)
+      d(s, P, { color: "#ff416b", x: -n * 0.09, alpha: 0.66 * n }), d(s, P, { color: "#04b7ff", x: n * 0.09, alpha: 0.7 * n });
+    else {
+      const g = b / c;
+      for (let i = 0; i < 4; i++)
+        S(s, -g, -0.46 + i * 0.24, g * 2, 0.1, () => {
+          d(s, l === 10 ? P : p, {
+            color: t,
+            alpha: 0.75 * n,
+            x: x * (i % 2 ? 1 : -1)
+          });
+        });
+    }
+    return;
+  }
+  (l === 28 || l === 16) && E(s, R(f), _(o), {
+    color: t,
+    alpha: 0.8 * n,
+    width: l === 28 ? 0.023 : 0.036
+  });
+  const A = l === 17 ? o : l === 18 ? 1 - o : n;
+  d(s, h, { alpha: (1 - o) ** 3 }), d(s, p, {
+    alpha: 0.4 + 0.6 * o,
+    color: l === 4 ? t : y,
+    glow: (l === 4 ? 0.18 : 0.28 * A) * u
+  }), [15, 17, 18, 27].includes(l) && (e.save(), e.strokeStyle = t, e.globalAlpha *= 0.65 * n, e.lineWidth = 0.021 * c, e.beginPath(), e.ellipse(
+    0,
+    0,
+    (0.25 + 0.23 * A) * c,
+    (0.37 + 0.25 * A) * c,
+    0,
+    0,
+    Math.PI * 2 * (l === 27 ? 1 : A)
+  ), e.stroke(), e.restore());
+}
+const Y = (s) => [0, 1, 2, 3, 4, 14, 26].includes(s);
+export {
+  X as paintDigital,
+  Y as persistentDisplay
+};

package/dist/components/HysAnimatedNumber/animation/morph.js

@@ -0,0 +1,110 @@
+import { mix as d, noise as I, glyph as i, clamp as P, smooth as B, wave as z } from "./paint.js";
+import { digitPath as _, tracePath as x } from "./paths.js";
+function E(c, n) {
+  const { fromIndex: j, toIndex: k, from: g, to: w, p: o, strength: q, ctx: p, size: m, seed: y } = c, h = [8, 9, 16].includes(n) ? B(o) : o, t = z(h) * q, A = _(j), b = _(k), a = A.map(([u, M], r) => {
+    const s = d(u, b[r][0], h), e = d(M, b[r][1], h), f = I(y, r) - 0.5;
+    switch (n) {
+      case 3:
+        return [s + f * t * 0.25, e + (r % 3 - 1) * t * 0.1];
+      case 4:
+        return [s * (1 - t * 0.75), e];
+      case 5:
+        return [
+          s + Math.sin(e * 10 - h * 8) * 0.17 * t,
+          e + Math.cos(s * 8 + h * 6) * 0.12 * t
+        ];
+      case 6:
+        return [
+          s * (1 + t * 0.45),
+          e * (1 - t * 0.3) + Math.sin(r * 0.5) * 0.055 * t
+        ];
+      case 7:
+        return [s * (1 + t * 0.25), e + (e + 0.4) ** 2 * t * 0.52];
+      case 8:
+        return [s * (1 - t * 0.22), e * (1 + t * 0.55)];
+      case 9:
+        return [s * (1 + t * 0.43), e * (1 - t * 0.52)];
+      case 10:
+        return [s + Math.sin(e * 6) * 0.36 * t, e - s * 0.2 * t];
+      case 11:
+        return [
+          s * Math.cos(t) - e * Math.sin(t),
+          s * Math.sin(t) + e * Math.cos(t)
+        ];
+      case 12:
+        return [
+          s + 0.8 * f * t,
+          e + 0.5 * (I(y + 1, r) - 0.5) * t
+        ];
+      case 13:
+        return [
+          d(s, Math.round(s * 4) / 4, t),
+          d(e, Math.round(e * 4) / 4, t)
+        ];
+      case 14:
+        return [s + 0.06 * (r % 2 ? -1 : 1) * t, e];
+      case 15:
+        return [
+          s + e ** 2 * t * 0.85,
+          e + Math.sin(s * 10) * 0.1 * t
+        ];
+      case 16:
+        return [
+          s + Math.sin(r * 0.24) * t * 0.035,
+          e + Math.cos(r * 0.24) * t * 0.035
+        ];
+      case 17:
+        return [s + Math.sign(s) * t * 0.26, e];
+      case 19:
+        return [
+          s + Math.sin(r / 3 - h * 15) * 0.08 * t,
+          e + Math.cos(r / 3 - h * 15) * 0.08 * t
+        ];
+      default:
+        return [s, e];
+    }
+  }), l = Math.min(1, z(o) * 4);
+  if (i(c, g, { alpha: P(1 - o * 5) }), i(c, w, { alpha: P((o - 0.8) * 5) }), n === 12 || n === 3) {
+    for (let u = 0; u < a.length - 2; u += 3)
+      x(c, a.slice(u, u + 3), 1, {
+        alpha: l,
+        width: 0.065
+      });
+    return;
+  }
+  if (n === 18) {
+    i(c, g, {
+      alpha: (1 - o) * l,
+      sx: 1 + t * 0.15,
+      color: c.accent,
+      blur: 0.035 * t
+    }), i(c, w, {
+      alpha: o * l,
+      sy: 1 - t * 0.25,
+      blur: 0.025 * t
+    });
+    return;
+  }
+  if (n === 2 || n === 19) {
+    p.save(), p.translate(0.035 * m, 0), x(c, a, 1, {
+      alpha: l,
+      width: 0.035,
+      color: c.accent,
+      smooth: !0
+    }), p.translate(-0.07 * m, 0), x(c, a, 1, { alpha: l, width: 0.035, smooth: !0 }), p.restore();
+    return;
+  }
+  x(
+    c,
+    n === 14 ? a.filter((u, M) => M % 4 === 0 || M === a.length - 1) : a,
+    1,
+    {
+      alpha: l,
+      width: n === 4 ? 0.035 : n === 6 ? 0.18 : n === 1 ? 0.075 : 0.11,
+      smooth: ![1, 13, 14].includes(n)
+    }
+  );
+}
+export {
+  E as paintMorph
+};

package/dist/components/HysAnimatedNumber/animation/paint.js

@@ -0,0 +1,34 @@
+const s = (t) => Math.min(1, Math.max(0, t)), M = (t, l, n) => t + (l - t) * n, p = (t) => Math.sin(Math.PI * s(t)), y = (t) => s(t) ** 2 * (3 - 2 * s(t)), b = (t, l) => ((Math.imul(l + 13, 2246822507) ^ Math.imul(t + 37, 3266489909)) >>> 0) / 4294967296;
+function d(t, l, n = {}) {
+  const { ctx: o, color: r, size: a } = t, {
+    x: e = 0,
+    y: i = 0,
+    sx: c = 1,
+    sy: h = 1,
+    angle: u = 0,
+    alpha: x = 1,
+    blur: f = 0,
+    stroke: g = 0,
+    glow: m = 0
+  } = n;
+  !l || x <= 0 || c <= 0 || h <= 0 || (o.save(), o.globalAlpha *= s(x), o.translate(e * a, i * a), u && o.rotate(u), o.scale(c, h), o.fillStyle = o.strokeStyle = n.color ?? r, f && (o.filter = `blur(${a * f}px)`), m && (o.shadowBlur = a * m, o.shadowColor = n.color ?? r), g ? (o.lineJoin = "round", o.lineWidth = a * g, o.strokeText(l, 0, 0)) : o.fillText(l, 0, 0), o.restore());
+}
+function w(t, l, n, o, r, a) {
+  const { ctx: e, size: i } = t;
+  e.save(), e.beginPath(), e.rect(l * i, n * i, Math.max(0, o) * i, Math.max(0, r) * i), e.clip(), a(), e.restore();
+}
+function k(t, l, n, o) {
+  return s((t - l / Math.max(1, n - 1) * o) / (1 - o));
+}
+const v = (t, l) => t.glyphs[(l % 10 + 10) % 10] ?? t.digit;
+export {
+  s as clamp,
+  d as glyph,
+  k as localProgress,
+  M as mix,
+  b as noise,
+  w as rectangle,
+  v as rollingGlyph,
+  y as smooth,
+  p as wave
+};

package/dist/components/HysAnimatedNumber/animation/particles.js

@@ -0,0 +1,51 @@
+import { glyph as S, clamp as P, mix as q, wave as D, noise as I, smooth as H } from "./paint.js";
+const u = /* @__PURE__ */ new Map();
+function E(i, t, d, p = 3) {
+  const o = t.replace(/\d+(?:\.\d+)?px/, "40px"), s = `${i}/${o}/${p}`, x = u.get(s);
+  if (x) return x;
+  const c = document.createElement("canvas");
+  c.width = c.height = 60;
+  const e = c.getContext("2d", { willReadFrequently: !0 });
+  if (!e || !d) return [];
+  e.font = o, e.textAlign = "center", e.textBaseline = "middle", e.fillText(i, 30, 30);
+  const f = e.getImageData(0, 0, 60, 60).data, a = [];
+  for (let g = 2; g < 59; g += p)
+    for (let n = 2; n < 59; n += p)
+      f[(g * 60 + n) * 4 + 3] > 110 && a.push([(n - 30) / 40, (g - 30) / 40]);
+  return u.size >= 128 && u.delete(u.keys().next().value), u.set(s, a), a;
+}
+function K(i, t) {
+  const { from: d, to: p, p: o, size: s, strength: x, seed: c, ctx: e, accent: f, color: a } = i, n = ![1, 4, 6, 9, 14, 18, 19].includes(t), T = n ? o : 1 - o, h = (1 - H(T)) * x, W = n ? p : d, m = [3, 4, 5, 6, 7].includes(t), z = [10, 11, 12, 13, 14, 15].includes(t), A = [16, 17, 18, 19].includes(t);
+  S(i, d, {
+    alpha: n ? (1 - o) ** 4 : P(1 - o * 5),
+    blur: t === 10 ? 0.07 : 0
+  }), S(i, p, { alpha: n ? P((o - 0.63) / 0.37) : o ** 3 });
+  const $ = E(
+    W,
+    e.font,
+    s,
+    t === 5 ? 7 : m ? 5 : 3
+  ), j = P(D(o) * 2.5), B = [2, 5, 15].includes(t) ? E(d, e.font, s, m ? 5 : 3) : [];
+  for (let l = 0; l < $.length; l++) {
+    const [w, k] = $[l], b = I(c + t * 31, l) * 2 * Math.PI, C = 0.28 + I(c + 79, l) * 0.73, G = t === 9 ? 0.94 * o ** 2 : t === 8 ? -0.62 * h : 0, y = z ? Math.sin(w * 11 + k * 4 + o * 8) * h * 0.28 : 0, M = B[l % B.length], F = M ? q(M[0], w, o) + y : w + Math.cos(b) * C * h * (t === 19 ? 1.8 : 1) + y, R = M ? q(M[1], k, o) - y : k + Math.sin(b) * C * h + G - y, r = m ? t === 5 ? 0.09 : 0.057 : z ? 0.034 + 0.025 * h : 0.02 + I(c + 11, l) * 0.024;
+    e.save(), e.globalAlpha *= j * (t === 17 ? 0.55 + 0.45 * Math.sin(o * 16 + l) ** 2 : 1), e.fillStyle = A || l % 6 === 0 ? f : a, A && (e.shadowColor = f, e.shadowBlur = s * 0.11), m ? (e.translate(F * s, R * s), (t === 6 || t === 7) && e.rotate(b * h), e.fillRect(-r * s / 2, -r * s / 2, r * s, r * s)) : (e.beginPath(), e.ellipse(
+      F * s,
+      R * s,
+      r * s,
+      r * s * (t === 13 ? 2 : 1),
+      0,
+      0,
+      Math.PI * 2
+    ), e.fill()), e.restore();
+  }
+  if (t === 11 || t === 19) {
+    e.save(), e.strokeStyle = f, e.globalAlpha *= 0.5 * D(o), e.lineWidth = 0.018 * s;
+    for (let l = 0; l < (t === 11 ? 3 : 1); l++)
+      e.beginPath(), e.arc(0, 0, (0.1 + o * (0.63 + l * 0.21)) * s, 0, Math.PI * 2), e.stroke();
+    e.restore();
+  }
+}
+export {
+  E as glyphMask,
+  K as paintParticles
+};