@hfd-sdk/keyboard-kit 1.0.0 → 1.1.0

package/dist/ai-lighting/index.es.js

@@ -1,7 +1,8 @@
-import { c as Y, o as xe, w as ae, t as F, r as L, d as be, a as He, b as ee, e as te, f as X, g as ge, n as se, u as $, F as ve, h as fe, i as ke, j as oe, s as Ce, k as Ee, l as Me, m as _e, p as he, q as Ve, v as Ne, x as Pe } from "../runtime-core.es.js";
+import { d as Y, o as xe, w as ae, t as D, r as M, e as be, f as _e, g as ee, h as te, i as j, j as ge, n as se, u as $, F as ve, k as fe, l as Ce, m as oe, s as ke, c as Ee, p as Me, q as He, v as he, x as Ve, y as Ne, z as Pe } from "../runtime-core.es.js";
 import { serializePreset as Ke } from "../runtime.es.js";
-import { deserializePreset as Pt } from "../runtime.es.js";
-const me = 40, De = 0.1, qe = 3;
+import { deserializePreset as Mt } from "../runtime.es.js";
+import { c as qe, g as Be, b as Fe, a as De } from "../assert-hfd-device.js";
+const me = 40, We = 0.1, Oe = 3;
 function J(e) {
   return Math.round(e * 100) / 100;
 }
@@ -14,346 +15,303 @@ function ye(e) {
     rotation: J(e.rotation)
   };
 }
-const Be = {
+const $e = {
   "scale-se": { x: 1, y: 1 },
   "scale-sw": { x: -1, y: 1 },
   "scale-ne": { x: 1, y: -1 },
   "scale-nw": { x: -1, y: -1 }
-}, Fe = {
+}, je = {
   "resize-e": { x: -1, y: 0 },
   "resize-w": { x: 1, y: 0 },
   "resize-n": { x: 0, y: 1 },
   "resize-s": { x: 0, y: -1 }
-}, Oe = {
+}, Ge = {
   "scale-se": { x: -1, y: -1 },
   "scale-sw": { x: 1, y: -1 },
   "scale-ne": { x: -1, y: 1 },
   "scale-nw": { x: 1, y: 1 }
 };
-function We(e) {
-  const t = L({ x: 0, y: 0 }), a = L(1), o = L(1), n = L(0), c = L(!0), k = L(1), i = L({ width: 0, height: 0 }), f = Y(() => c.value ? a.value : o.value), m = Y(() => ({
+function Ue(e) {
+  const t = M({ x: 0, y: 0 }), a = M(1), i = M(1), s = M(0), d = M(!0), P = M(1), u = M({ width: 0, height: 0 }), y = Y(() => d.value ? a.value : i.value), k = Y(() => ({
     left: `${t.value.x}px`,
     top: `${t.value.y}px`,
-    transform: `translate(-50%, -50%) scale(${a.value}, ${f.value}) rotate(${n.value}deg)`,
+    transform: `translate(-50%, -50%) scale(${a.value}, ${y.value}) rotate(${s.value}deg)`,
     transformOrigin: "center center"
   }));
-  let d = null;
-  function w() {
+  let g = null;
+  function p() {
     return {
-      width: F(e.canvasWidth),
-      height: F(e.canvasHeight)
+      width: D(e.canvasWidth),
+      height: D(e.canvasHeight)
     };
   }
-  function y(r, s) {
-    const { width: l, height: v } = w();
-    return !r || !s ? 1 : Math.min((l - me * 2) / r, (v - me * 2) / s, 1);
+  function b(n, r) {
+    const { width: o, height: c } = p();
+    return !n || !r ? 1 : Math.min((o - me * 2) / n, (c - me * 2) / r, 1);
   }
-  function x(r) {
-    return Math.min(qe, Math.max(De, r));
+  function x(n) {
+    return Math.min(Oe, Math.max(We, n));
   }
-  function b(r, s) {
-    const { width: l, height: v } = w(), h = i.value.width * a.value / 2, g = i.value.height * f.value / 2;
+  function w(n, r) {
+    const { width: o, height: c } = p(), v = u.value.width * a.value / 2, f = u.value.height * y.value / 2;
     return {
-      x: Math.max(h, Math.min(l - h, r)),
-      y: Math.max(g, Math.min(v - g, s))
+      x: Math.max(v, Math.min(o - v, n)),
+      y: Math.max(f, Math.min(c - f, r))
     };
   }
-  function E() {
+  function L() {
     return ye({
       x: t.value.x,
       y: t.value.y,
-      width: i.value.width * a.value,
-      height: i.value.height * f.value,
-      rotation: n.value
+      width: u.value.width * a.value,
+      height: u.value.height * y.value,
+      rotation: s.value
     });
   }
-  function A(r) {
-    if (!i.value.width || !i.value.height) return;
-    const s = ye(r), l = x(s.width / i.value.width), v = x(s.height / i.value.height);
-    a.value = l, o.value = v, c.value = Math.abs(l - v) < 1e-3, n.value = s.rotation, t.value = b(s.x, s.y);
-  }
-  function H() {
-    var r;
-    (r = F(e.onLayoutChange)) == null || r(E());
-  }
-  function M() {
-    H();
-  }
-  async function K(r, s = !1) {
-    if (!r) return;
-    if (i.value = {
-      width: r.offsetWidth,
-      height: r.offsetHeight
-    }, !s) {
-      const g = F(e.initialLayout);
-      if (g) {
-        A(g);
+  function A(n) {
+    if (!u.value.width || !u.value.height) return;
+    const r = ye(n), o = x(r.width / u.value.width), c = x(r.height / u.value.height);
+    a.value = o, i.value = c, d.value = Math.abs(o - c) < 1e-3, s.value = r.rotation, t.value = w(r.x, r.y);
+  }
+  function _() {
+    var n;
+    (n = D(e.onLayoutChange)) == null || n(L());
+  }
+  function C() {
+    _();
+  }
+  async function K(n, r = !1) {
+    if (!n) return;
+    if (u.value = {
+      width: n.offsetWidth,
+      height: n.offsetHeight
+    }, !r) {
+      const f = D(e.initialLayout);
+      if (f) {
+        A(f);
         return;
       }
     }
-    const l = y(i.value.width, i.value.height);
-    k.value = l, a.value = l, o.value = l, n.value = 0, c.value = !0;
-    const { width: v, height: h } = w();
-    t.value = { x: v / 2, y: h / 2 };
+    const o = b(u.value.width, u.value.height);
+    P.value = o, a.value = o, i.value = o, s.value = 0, d.value = !0;
+    const { width: c, height: v } = p();
+    t.value = { x: c / 2, y: v / 2 };
   }
-  async function D(r) {
-    await K(r, !0), H();
+  async function q(n) {
+    await K(n, !0), _();
   }
-  function p() {
-    c.value = !c.value, c.value && (o.value = a.value);
+  function h() {
+    d.value = !d.value, d.value && (i.value = a.value);
   }
-  function S(r, s, l, v) {
-    const h = -n.value * Math.PI / 180, g = r - l, P = s - v;
+  function z(n, r, o, c) {
+    const v = -s.value * Math.PI / 180, f = n - o, E = r - c;
     return {
-      x: g * Math.cos(h) - P * Math.sin(h),
-      y: g * Math.sin(h) + P * Math.cos(h)
+      x: f * Math.cos(v) - E * Math.sin(v),
+      y: f * Math.sin(v) + E * Math.cos(v)
     };
   }
-  function V(r, s) {
-    var h;
-    const l = (h = e.getOverlayEl) == null ? void 0 : h.call(e);
-    if (!l) return { x: r, y: s };
-    const v = l.getBoundingClientRect();
-    return { x: r - v.left, y: s - v.top };
+  function V(n, r) {
+    var v;
+    const o = (v = e.getOverlayEl) == null ? void 0 : v.call(e);
+    if (!o) return { x: n, y: r };
+    const c = o.getBoundingClientRect();
+    return { x: n - c.left, y: r - c.top };
   }
-  function B(r, s, l, v) {
-    return Math.atan2(s - v, r - l) * 180 / Math.PI;
+  function F(n, r, o, c) {
+    return Math.atan2(r - c, n - o) * 180 / Math.PI;
   }
-  function C(r, s, l, v, h) {
-    const g = h * Math.PI / 180;
+  function m(n, r, o, c, v) {
+    const f = v * Math.PI / 180;
     return {
-      x: r + l * Math.cos(g) - v * Math.sin(g),
-      y: s + l * Math.sin(g) + v * Math.cos(g)
+      x: n + o * Math.cos(f) - c * Math.sin(f),
+      y: r + o * Math.sin(f) + c * Math.cos(f)
     };
   }
-  function O(r, s, l, v, h) {
-    const g = [
-      C(r, s, -l, -v, h),
-      C(r, s, l, -v, h),
-      C(r, s, -l, v, h),
-      C(r, s, l, v, h)
+  function W(n, r, o, c, v) {
+    const f = [
+      m(n, r, -o, -c, v),
+      m(n, r, o, -c, v),
+      m(n, r, -o, c, v),
+      m(n, r, o, c, v)
     ];
     return {
-      minX: Math.min(...g.map((P) => P.x)),
-      minY: Math.min(...g.map((P) => P.y)),
-      maxX: Math.max(...g.map((P) => P.x)),
-      maxY: Math.max(...g.map((P) => P.y))
+      minX: Math.min(...f.map((E) => E.x)),
+      minY: Math.min(...f.map((E) => E.y)),
+      maxX: Math.max(...f.map((E) => E.x)),
+      maxY: Math.max(...f.map((E) => E.y))
     };
   }
-  function j(r, s, l, v, h, g, P) {
-    const R = g * l / 2, _ = P * v / 2, T = C(r.x, r.y, -s.x * R, -s.y * _, h), z = O(T.x, T.y, R, _, h), { width: q, height: N } = w();
-    return z.minX >= 0 && z.minY >= 0 && z.maxX <= q && z.maxY <= N;
-  }
-  function le(r, s, l, v, h, g, P, R, _) {
-    if (j(r, s, h, g, P, R, _))
-      return { scale: h, scaleY: g };
-    if (!j(r, s, l, v, P, R, _))
-      return { scale: l, scaleY: v };
-    let T = 0, z = 1;
-    for (let q = 0; q < 20; q++) {
-      const N = (T + z) / 2, G = l + N * (h - l), Z = v + N * (g - v);
-      j(r, s, G, Z, P, R, _) ? T = N : z = N;
+  function G(n, r, o, c, v, f, E) {
+    const I = f * o / 2, H = E * c / 2, T = m(n.x, n.y, -r.x * I, -r.y * H, v), S = W(T.x, T.y, I, H, v), { width: B, height: N } = p();
+    return S.minX >= 0 && S.minY >= 0 && S.maxX <= B && S.maxY <= N;
+  }
+  function le(n, r, o, c, v, f, E, I, H) {
+    if (G(n, r, v, f, E, I, H))
+      return { scale: v, scaleY: f };
+    if (!G(n, r, o, c, E, I, H))
+      return { scale: o, scaleY: c };
+    let T = 0, S = 1;
+    for (let B = 0; B < 20; B++) {
+      const N = (T + S) / 2, U = o + N * (v - o), Z = c + N * (f - c);
+      G(n, r, U, Z, E, I, H) ? T = N : S = N;
     }
     return {
-      scale: l + T * (h - l),
-      scaleY: v + T * (g - v)
+      scale: o + T * (v - o),
+      scaleY: c + T * (f - c)
     };
   }
-  function ne(r, s, l, v, h, g, P, R) {
-    const _ = i.value.width || 1, T = i.value.height || 1, z = _ * g / 2, q = T * P / 2, N = C(
+  function ne(n, r, o, c, v, f, E, I) {
+    const H = u.value.width || 1, T = u.value.height || 1, S = H * f / 2, B = T * E / 2, N = m(
+      c,
       v,
-      h,
-      r.x * z,
-      r.y * q,
-      R
-    ), G = le(
+      n.x * S,
+      n.y * B,
+      I
+    ), U = le(
       N,
+      n,
+      f,
+      E,
       r,
-      g,
-      P,
-      s,
-      l,
-      R,
-      _,
+      o,
+      I,
+      H,
       T
-    ), Z = _ * G.scale / 2, Re = T * G.scaleY / 2, Ae = C(
+    ), Z = H * U.scale / 2, Ie = T * U.scaleY / 2, Ae = m(
       N.x,
       N.y,
-      -r.x * Z,
-      -r.y * Re,
-      R
+      -n.x * Z,
+      -n.y * Ie,
+      I
     );
-    a.value = G.scale, o.value = G.scaleY, t.value = Ae;
-  }
-  function ce(r, s, l, v, h, g, P) {
-    const R = Be[r], _ = Oe[r], T = i.value.width || 1, z = i.value.height || 1;
-    let q, N;
-    if (c.value) {
-      const G = Math.max(T, z), Z = (s.x * R.x + s.y * R.y) / 2;
-      q = x(h + Z / G), N = q;
+    a.value = U.scale, i.value = U.scaleY, t.value = Ae;
+  }
+  function ue(n, r, o, c, v, f, E) {
+    const I = $e[n], H = Ge[n], T = u.value.width || 1, S = u.value.height || 1;
+    let B, N;
+    if (d.value) {
+      const U = Math.max(T, S), Z = (r.x * I.x + r.y * I.y) / 2;
+      B = x(v + Z / U), N = B;
     } else
-      q = x(h + s.x * R.x / T), N = x(g + s.y * R.y / z);
-    ne(_, q, N, l, v, h, g, P);
-  }
-  function ue(r, s, l, v, h, g, P) {
-    const R = i.value.width || 1, _ = i.value.height || 1;
-    let T = h, z = g;
-    r === "resize-e" ? (T = x(h + s.x / R), c.value && (z = T)) : r === "resize-w" ? (T = x(h - s.x / R), c.value && (z = T)) : r === "resize-s" ? (z = x(g + s.y / _), c.value && (T = z)) : r === "resize-n" && (z = x(g - s.y / _), c.value && (T = z)), ne(
-      Fe[r],
+      B = x(v + r.x * I.x / T), N = x(f + r.y * I.y / S);
+    ne(H, B, N, o, c, v, f, E);
+  }
+  function ce(n, r, o, c, v, f, E) {
+    const I = u.value.width || 1, H = u.value.height || 1;
+    let T = v, S = f;
+    n === "resize-e" ? (T = x(v + r.x / I), d.value && (S = T)) : n === "resize-w" ? (T = x(v - r.x / I), d.value && (S = T)) : n === "resize-s" ? (S = x(f + r.y / H), d.value && (T = S)) : n === "resize-n" && (S = x(f - r.y / H), d.value && (T = S)), ne(
+      je[n],
       T,
-      z,
-      l,
+      S,
+      o,
+      c,
       v,
-      h,
-      g,
-      P
+      f,
+      E
     );
   }
-  function U(r, s) {
-    s.preventDefault(), s.stopPropagation();
-    const l = V(s.clientX, s.clientY), v = B(l.x, l.y, t.value.x, t.value.y);
-    d = {
-      mode: r,
-      startLocalX: l.x,
-      startLocalY: l.y,
+  function X(n, r) {
+    r.preventDefault(), r.stopPropagation();
+    const o = V(r.clientX, r.clientY), c = F(o.x, o.y, t.value.x, t.value.y);
+    g = {
+      mode: n,
+      startLocalX: o.x,
+      startLocalY: o.y,
       startPosX: t.value.x,
       startPosY: t.value.y,
       startScale: a.value,
-      startScaleY: o.value,
-      startRotation: n.value,
-      startAngle: v
+      startScaleY: i.value,
+      startRotation: s.value,
+      startAngle: c
     }, window.addEventListener("mousemove", re), window.addEventListener("mouseup", Q);
   }
-  function re(r) {
-    if (!d) return;
-    const s = V(r.clientX, r.clientY), { mode: l, startLocalX: v, startLocalY: h, startPosX: g, startPosY: P, startScale: R, startScaleY: _, startRotation: T, startAngle: z } = d;
-    if (l === "drag") {
-      t.value = b(g + (s.x - v), P + (s.y - h));
+  function re(n) {
+    if (!g) return;
+    const r = V(n.clientX, n.clientY), { mode: o, startLocalX: c, startLocalY: v, startPosX: f, startPosY: E, startScale: I, startScaleY: H, startRotation: T, startAngle: S } = g;
+    if (o === "drag") {
+      t.value = w(f + (r.x - c), E + (r.y - v));
       return;
     }
-    if (l.startsWith("rotate-")) {
-      const N = B(s.x, s.y, t.value.x, t.value.y);
-      n.value = T + (N - z);
+    if (o.startsWith("rotate-")) {
+      const N = F(r.x, r.y, t.value.x, t.value.y);
+      s.value = T + (N - S);
       return;
     }
-    const q = S(s.x, s.y, v, h);
-    if (l.startsWith("scale-")) {
-      ce(
-        l,
-        q,
-        g,
-        P,
-        R,
-        _,
+    const B = z(r.x, r.y, c, v);
+    if (o.startsWith("scale-")) {
+      ue(
+        o,
+        B,
+        f,
+        E,
+        I,
+        H,
         T
       );
       return;
     }
-    (l === "resize-e" || l === "resize-w" || l === "resize-n" || l === "resize-s") && ue(l, q, g, P, R, _, T);
+    (o === "resize-e" || o === "resize-w" || o === "resize-n" || o === "resize-s") && ce(o, B, f, E, I, H, T);
   }
   function Q() {
-    d && M(), d = null, window.removeEventListener("mousemove", re), window.removeEventListener("mouseup", Q);
+    g && C(), g = null, window.removeEventListener("mousemove", re), window.removeEventListener("mouseup", Q);
   }
-  function de(r) {
-    U("drag", r);
+  function de(n) {
+    X("drag", n);
   }
-  function u(r, s) {
-    U(r, s);
+  function l(n, r) {
+    X(n, r);
   }
-  function I(r, s) {
-    U(r, s);
+  function R(n, r) {
+    X(n, r);
   }
-  function W(r, s) {
-    U(r, s);
+  function O(n, r) {
+    X(n, r);
   }
   return xe(() => {
     Q();
   }), ae(
-    () => [F(e.canvasWidth), F(e.canvasHeight)],
+    () => [D(e.canvasWidth), D(e.canvasHeight)],
     () => {
-      t.value = b(t.value.x, t.value.y);
+      t.value = w(t.value.x, t.value.y);
     }
   ), {
-    lockAspectRatio: c,
-    rotation: n,
-    wrapperStyle: m,
+    lockAspectRatio: d,
+    rotation: s,
+    wrapperStyle: k,
     applyFitScale: K,
-    getLayout: E,
-    resetKeyboardLayout: D,
-    toggleLockAspectRatio: p,
+    getLayout: L,
+    resetKeyboardLayout: q,
+    toggleLockAspectRatio: h,
     onDragStart: de,
-    onResizeStart: u,
-    onScaleCornerStart: I,
-    onRotateStart: W
+    onResizeStart: l,
+    onScaleCornerStart: R,
+    onRotateStart: O
   };
 }
-function $e(e, t, a) {
-  var d, w;
-  const { keys: o, musicConfig: n } = e, c = o[t], k = c == null ? void 0 : c[a];
-  if (!k) return a;
-  let i = 0;
-  for (let y = 0; y < a; y++) {
-    const x = (d = n == null ? void 0 : n.keyOffset) == null ? void 0 : d.find((b) => {
-      var E;
-      return b.value === ((E = c[y]) == null ? void 0 : E.value);
-    });
-    x && (i += x.offsetX);
-  }
-  let f = a + i;
-  const m = (w = n == null ? void 0 : n.keyOffset) == null ? void 0 : w.find((y) => y.value === k.value);
-  return m && (f += m.offsetX), f;
-}
 function Xe(e) {
-  const { keys: t, musicConfig: a } = e, o = t.reduce((k, i) => Math.max(k, i.length), 0), n = (a == null ? void 0 : a.maxColOffset) || 0, c = o + n + 1;
-  return Array.from({ length: t.length }, () => Array.from({ length: c }, () => ({ r: 0, g: 0, b: 0 })));
-}
-function je(e, t) {
-  var k;
-  const { keys: a, musicConfig: o } = t, n = a.flatMap((i, f) => {
-    let m = 0;
-    return i.map((d, w) => {
-      let y = w + m;
-      if (o != null && o.keyOffset) {
-        const x = o.keyOffset.find((b) => b.value === d.value);
-        x && (y += x.offsetX, m += x.offsetX);
-      }
-      return {
-        row: f,
-        col: y,
-        value: d.value
-      };
-    });
-  }), c = new Array(n.length * 4).fill(0);
-  for (let i = 0; i < n.length; i++) {
-    const f = n[i], m = ((k = e[f.row]) == null ? void 0 : k[f.col]) ?? { r: 0, g: 0, b: 0 }, d = i * 4;
-    c[d] = f.value, c[d + 1] = m.r, c[d + 2] = m.g, c[d + 3] = m.b;
-  }
-  return c;
-}
-function Ge(e) {
   const t = e.length / 4;
   if (!t) return { r: 0, g: 0, b: 0 };
-  let a = 0, o = 0, n = 0;
-  for (let c = 0; c < e.length; c += 4)
-    a += e[c] ?? 0, o += e[c + 1] ?? 0, n += e[c + 2] ?? 0;
+  let a = 0, i = 0, s = 0;
+  for (let d = 0; d < e.length; d += 4)
+    a += e[d] ?? 0, i += e[d + 1] ?? 0, s += e[d + 2] ?? 0;
   return {
     r: Math.round(a / t),
-    g: Math.round(o / t),
-    b: Math.round(n / t)
+    g: Math.round(i / t),
+    b: Math.round(s / t)
   };
 }
-function Ue(e, t, a, o) {
-  const n = o.getBoundingClientRect(), c = t.width / a.width, k = t.height / a.height, i = (n.left - a.left) * c, f = (n.top - a.top) * k, m = i + n.width * c, d = f + n.height * k, w = Math.max(0, i), y = Math.max(0, f), x = Math.min(t.width, m), b = Math.min(t.height, d);
-  if (w >= x || y >= b)
+function Ye(e, t, a, i) {
+  const s = i.getBoundingClientRect(), d = t.width / a.width, P = t.height / a.height, u = (s.left - a.left) * d, y = (s.top - a.top) * P, k = u + s.width * d, g = y + s.height * P, p = Math.max(0, u), b = Math.max(0, y), x = Math.min(t.width, k), w = Math.min(t.height, g);
+  if (p >= x || b >= w)
     return { r: 0, g: 0, b: 0 };
-  const E = Math.floor(w), A = Math.floor(y), H = Math.max(1, Math.ceil(x - w)), M = Math.max(1, Math.ceil(b - y));
-  return Ge(e.getImageData(E, A, H, M).data);
+  const L = Math.floor(p), A = Math.floor(b), _ = Math.max(1, Math.ceil(x - p)), C = Math.max(1, Math.ceil(w - b));
+  return Xe(e.getImageData(L, A, _, C).data);
 }
 function Le(e) {
   const t = e.querySelector("slot");
   if (t instanceof HTMLSlotElement) {
     const a = t.assignedElements();
-    return a.length ? a.flatMap((o) => Le(o)) : [];
+    return a.length ? a.flatMap((i) => Le(i)) : [];
   }
   return [e];
 }
@@ -366,19 +324,19 @@ function Te(e) {
     }))
   );
 }
-function Ye(e) {
-  const { canvas: t, keyboardConfig: a, getKeyElements: o } = e, n = o();
-  if (!n.length) return null;
-  const c = t.getContext("2d", { willReadFrequently: !0 });
-  if (!c) return null;
-  const k = Xe(a), i = t.getBoundingClientRect();
-  return n.forEach(({ row: f, col: m, el: d }) => {
+function Qe(e) {
+  const { canvas: t, keyboardConfig: a, getKeyElements: i } = e, s = i();
+  if (!s.length) return null;
+  const d = t.getContext("2d", { willReadFrequently: !0 });
+  if (!d) return null;
+  const P = qe(a), u = t.getBoundingClientRect();
+  return s.forEach(({ row: y, col: k, el: g }) => {
     var x;
-    const w = $e(a, f, m), y = Ue(c, t, i, d);
-    (x = k[f]) != null && x[w] && (k[f][w] = y);
-  }), k;
+    const p = Be(a, y, k), b = Ye(d, t, u, g);
+    (x = P[y]) != null && x[p] && (P[y][p] = b);
+  }), P;
 }
-const Qe = { class: "relative" }, Ze = ["onMousedown"], Je = ["onMousedown"], et = ["onMousedown"], tt = /* @__PURE__ */ be({
+const Ze = { class: "relative" }, Je = ["onMousedown"], et = ["onMousedown"], tt = ["onMousedown"], at = /* @__PURE__ */ be({
   __name: "keyboard-overlay.ce",
   props: {
     canvasWidth: { default: 800, type: Number },
@@ -388,22 +346,22 @@ const Qe = { class: "relative" }, Ze = ["onMousedown"], Je = ["onMousedown"], et
     getKeyElements: { type: Function }
   },
   setup(e, { expose: t }) {
-    const a = e, o = L(null), n = L(null), {
-      lockAspectRatio: c,
-      rotation: k,
-      wrapperStyle: i,
-      applyFitScale: f,
-      getLayout: m,
-      resetKeyboardLayout: d,
-      toggleLockAspectRatio: w,
-      onDragStart: y,
+    const a = e, i = M(null), s = M(null), {
+      lockAspectRatio: d,
+      rotation: P,
+      wrapperStyle: u,
+      applyFitScale: y,
+      getLayout: k,
+      resetKeyboardLayout: g,
+      toggleLockAspectRatio: p,
+      onDragStart: b,
       onResizeStart: x,
-      onScaleCornerStart: b,
-      onRotateStart: E
-    } = We({
+      onScaleCornerStart: w,
+      onRotateStart: L
+    } = Ue({
       canvasWidth: () => a.canvasWidth,
       canvasHeight: () => a.canvasHeight,
-      getOverlayEl: () => o.value,
+      getOverlayEl: () => i.value,
       initialLayout: () => a.initialLayout,
       onLayoutChange: () => a.onLayoutChange
     }), A = [
@@ -411,111 +369,111 @@ const Qe = { class: "relative" }, Ze = ["onMousedown"], Je = ["onMousedown"], et
       { mode: "resize-s", baseAngle: 0, className: "resize-s" },
       { mode: "resize-w", baseAngle: 90, className: "resize-w" },
       { mode: "resize-e", baseAngle: 90, className: "resize-e" }
-    ], H = [
+    ], _ = [
       { mode: "scale-nw", baseAngle: 135, className: "corner-nw" },
       { mode: "scale-ne", baseAngle: 45, className: "corner-ne" },
       { mode: "scale-sw", baseAngle: 45, className: "corner-sw" },
       { mode: "scale-se", baseAngle: 135, className: "corner-se" }
-    ], M = [
+    ], C = [
       { mode: "rotate-nw", className: "rotate-nw" },
       { mode: "rotate-ne", className: "rotate-ne" },
       { mode: "rotate-sw", className: "rotate-sw" },
       { mode: "rotate-se", className: "rotate-se" }
     ], K = ["ns-resize", "nesw-resize", "ew-resize", "nwse-resize"];
-    function D(V) {
-      const B = ((V + k.value) % 360 + 360) % 360, C = Math.round(B / 45) % 4;
-      return K[C];
+    function q(V) {
+      const F = ((V + P.value) % 360 + 360) % 360, m = Math.round(F / 45) % 4;
+      return K[m];
     }
-    function p() {
+    function h() {
       if (a.getKeyElements) return a.getKeyElements();
-      const V = n.value;
+      const V = s.value;
       return V ? Te(V) : [];
     }
-    function S() {
-      d(n.value);
+    function z() {
+      g(s.value);
     }
-    return He(() => {
-      f(n.value);
+    return _e(() => {
+      y(s.value);
     }), ae(
       () => [a.canvasWidth, a.canvasHeight],
       () => {
-        f(n.value);
+        y(s.value);
       }
     ), t({
-      getMountEl: () => n.value,
-      getKeyElements: p,
-      getLayout: m,
-      resetLayout: S,
-      applyFitScale: () => f(n.value)
-    }), (V, B) => (ee(), te("div", {
+      getMountEl: () => s.value,
+      getKeyElements: h,
+      getLayout: k,
+      resetLayout: z,
+      applyFitScale: () => y(s.value)
+    }), (V, F) => (ee(), te("div", {
       ref_key: "overlayRef",
-      ref: o,
+      ref: i,
       class: "overlay-root",
       part: "overlay-root"
     }, [
-      X("div", {
+      j("div", {
         class: "transform-wrapper",
         part: "transform-wrapper",
-        style: oe($(i))
+        style: oe($(u))
       }, [
-        X("div", Qe, [
-          X("button", {
+        j("div", Ze, [
+          j("button", {
             type: "button",
             class: "lock-btn",
             part: "lock-button",
-            onMousedown: B[0] || (B[0] = ge(() => {
+            onMousedown: F[0] || (F[0] = ge(() => {
             }, ["stop"])),
-            onClick: B[1] || (B[1] = ge(
+            onClick: F[1] || (F[1] = ge(
               //@ts-ignore
-              (...C) => $(w) && $(w)(...C),
+              (...m) => $(p) && $(p)(...m),
               ["stop"]
             ))
           }, [
-            X("i", {
-              class: se(["lock-icon", $(c) ? "lock-icon--locked" : "lock-icon--open"])
+            j("i", {
+              class: se(["lock-icon", $(d) ? "lock-icon--locked" : "lock-icon--open"])
             }, null, 2)
           ], 32),
-          (ee(), te(ve, null, fe(M, (C) => X("div", {
-            key: C.mode,
-            class: se(["rotate-handle", C.className]),
+          (ee(), te(ve, null, fe(C, (m) => j("div", {
+            key: m.mode,
+            class: se(["rotate-handle", m.className]),
             part: "rotate-handle",
-            onMousedown: (O) => $(E)(C.mode, O)
-          }, null, 42, Ze)), 64)),
-          (ee(), te(ve, null, fe(A, (C) => X("div", {
-            key: C.mode,
-            class: se(["resize-handle", C.className]),
+            onMousedown: (W) => $(L)(m.mode, W)
+          }, null, 42, Je)), 64)),
+          (ee(), te(ve, null, fe(A, (m) => j("div", {
+            key: m.mode,
+            class: se(["resize-handle", m.className]),
             part: "resize-handle",
-            style: oe({ cursor: D(C.baseAngle) }),
-            onMousedown: (O) => $(x)(C.mode, O)
-          }, null, 46, Je)), 64)),
-          (ee(), te(ve, null, fe(H, (C) => X("div", {
-            key: C.mode,
-            class: se(["corner-handle", C.className]),
-            part: "corner-handle",
-            style: oe({ cursor: D(C.baseAngle) }),
-            onMousedown: (O) => $(b)(C.mode, O)
+            style: oe({ cursor: q(m.baseAngle) }),
+            onMousedown: (W) => $(x)(m.mode, W)
           }, null, 46, et)), 64)),
-          X("div", {
+          (ee(), te(ve, null, fe(_, (m) => j("div", {
+            key: m.mode,
+            class: se(["corner-handle", m.className]),
+            part: "corner-handle",
+            style: oe({ cursor: q(m.baseAngle) }),
+            onMousedown: (W) => $(w)(m.mode, W)
+          }, null, 46, tt)), 64)),
+          j("div", {
             ref_key: "mountRef",
-            ref: n,
+            ref: s,
             class: "keyboard-mount",
             part: "keyboard-mount",
-            onMousedown: B[2] || (B[2] = //@ts-ignore
-            (...C) => $(y) && $(y)(...C))
+            onMousedown: F[2] || (F[2] = //@ts-ignore
+            (...m) => $(b) && $(b)(...m))
           }, [
-            ke(V.$slots, "keyboard", {}, void 0)
+            Ce(V.$slots, "keyboard", {}, void 0)
           ], 544)
         ])
       ], 4)
     ], 512));
   }
-}), at = `.overlay-root[data-v-1403efc7]{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.transform-wrapper[data-v-1403efc7]{pointer-events:auto;position:absolute;-webkit-user-select:none;user-select:none}.lock-btn[data-v-1403efc7]{position:absolute;top:16px;right:-40px;z-index:20;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:9999px;border-style:none;--un-bg-opacity:1;background-color:rgb(22 22 22 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.lock-btn[data-v-1403efc7]:hover{--un-bg-opacity:1;background-color:rgb(32 128 240 / var(--un-bg-opacity))}.lock-icon[data-v-1403efc7]{pointer-events:none;display:inline-block;font-size:24px}.lock-icon--locked[data-v-1403efc7],.lock-icon--open[data-v-1403efc7]{width:1em;height:1em;background-color:currentColor;-webkit-mask:no-repeat center / 100% 100%;mask:no-repeat center / 100% 100%}.lock-icon--locked[data-v-1403efc7]{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z'/%3E%3C/svg%3E")}.lock-icon--open[data-v-1403efc7]{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 8h9V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6H7q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8m7.413 8.413Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 8h9V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6H7q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8m7.413 8.413Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587'/%3E%3C/svg%3E")}.rotate-handle[data-v-1403efc7]{position:absolute;z-index:20;width:32px;height:32px;cursor:grab;--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));background-color:currentColor;-webkit-mask:no-repeat center / 100% 100%;mask:no-repeat center / 100% 100%}.rotate-nw[data-v-1403efc7]{top:-40px;left:-40px;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M20.92 6.62a1 1 0 0 0-.21-.33l-3-3a1 1 0 0 0-1.42 1.42L17.59 6H9a3 3 0 0 0-3 3v8.59l-1.29-1.3a1 1 0 0 0-1.42 1.42l3 3a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l3-3a1 1 0 0 0-1.42-1.42L8 17.59V9a1 1 0 0 1 1-1h8.59l-1.3 1.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l3-3a1 1 0 0 0 .21-.33a1 1 0 0 0 0-.76'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M20.92 6.62a1 1 0 0 0-.21-.33l-3-3a1 1 0 0 0-1.42 1.42L17.59 6H9a3 3 0 0 0-3 3v8.59l-1.29-1.3a1 1 0 0 0-1.42 1.42l3 3a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l3-3a1 1 0 0 0-1.42-1.42L8 17.59V9a1 1 0 0 1 1-1h8.59l-1.3 1.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l3-3a1 1 0 0 0 .21-.33a1 1 0 0 0 0-.76'/%3E%3C/svg%3E")}.rotate-ne[data-v-1403efc7]{top:-40px;right:-40px;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M21.71 16.29a1 1 0 0 0-1.42 0L18 18.59V9a3 3 0 0 0-3-3H5.41l2.3-2.29a1 1 0 0 0-1.42-1.42l-4 4a1 1 0 0 0-.21.33a1 1 0 0 0 0 .76a1 1 0 0 0 .21.33l4 4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42L5.41 8H15a1 1 0 0 1 1 1v9.59l-2.29-2.3a1 1 0 0 0-1.42 1.42l4 4a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l4-4a1 1 0 0 0 0-1.42'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M21.71 16.29a1 1 0 0 0-1.42 0L18 18.59V9a3 3 0 0 0-3-3H5.41l2.3-2.29a1 1 0 0 0-1.42-1.42l-4 4a1 1 0 0 0-.21.33a1 1 0 0 0 0 .76a1 1 0 0 0 .21.33l4 4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42L5.41 8H15a1 1 0 0 1 1 1v9.59l-2.29-2.3a1 1 0 0 0-1.42 1.42l4 4a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l4-4a1 1 0 0 0 0-1.42'/%3E%3C/svg%3E")}.rotate-sw[data-v-1403efc7]{bottom:-40px;left:-40px;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m17 21l4-4l-4-4'/%3E%3Cpath d='M21 17H10a3 3 0 0 1-3-3V3'/%3E%3Cpath d='M11 7L7 3L3 7'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m17 21l4-4l-4-4'/%3E%3Cpath d='M21 17H10a3 3 0 0 1-3-3V3'/%3E%3Cpath d='M11 7L7 3L3 7'/%3E%3C/g%3E%3C/svg%3E")}.rotate-se[data-v-1403efc7]{bottom:-40px;right:-40px;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 7l-4-4l-4 4'/%3E%3Cpath d='M17 3v11a3 3 0 0 1-3 3H3'/%3E%3Cpath d='m7 13l-4 4l4 4'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 7l-4-4l-4 4'/%3E%3Cpath d='M17 3v11a3 3 0 0 1-3 3H3'/%3E%3Cpath d='m7 13l-4 4l4 4'/%3E%3C/g%3E%3C/svg%3E")}.resize-handle[data-v-1403efc7]{position:absolute;z-index:10}.resize-n[data-v-1403efc7]{top:-4px;left:12px;right:12px;height:4px}.resize-s[data-v-1403efc7]{bottom:-4px;left:12px;right:12px;height:4px}.resize-w[data-v-1403efc7]{left:-4px;top:12px;bottom:12px;width:4px}.resize-e[data-v-1403efc7]{right:-4px;top:12px;bottom:12px;width:4px}.corner-handle[data-v-1403efc7]{position:absolute;z-index:20;width:16px;height:16px;border-radius:9999px;--un-bg-opacity:1;background-color:rgb(156 163 175 / var(--un-bg-opacity))}.corner-nw[data-v-1403efc7]{top:-8px;left:-8px}.corner-ne[data-v-1403efc7]{top:-8px;right:-8px}.corner-sw[data-v-1403efc7]{bottom:-8px;left:-8px}.corner-se[data-v-1403efc7]{bottom:-8px;right:-8px}.keyboard-mount[data-v-1403efc7]{position:relative;width:fit-content;cursor:move}`, Se = (e, t) => {
+}), nt = `.overlay-root[data-v-1403efc7]{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.transform-wrapper[data-v-1403efc7]{pointer-events:auto;position:absolute;-webkit-user-select:none;user-select:none}.lock-btn[data-v-1403efc7]{position:absolute;top:16px;right:-40px;z-index:20;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:9999px;border-style:none;--un-bg-opacity:1;background-color:rgb(22 22 22 / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.lock-btn[data-v-1403efc7]:hover{--un-bg-opacity:1;background-color:rgb(32 128 240 / var(--un-bg-opacity))}.lock-icon[data-v-1403efc7]{pointer-events:none;display:inline-block;font-size:24px}.lock-icon--locked[data-v-1403efc7],.lock-icon--open[data-v-1403efc7]{width:1em;height:1em;background-color:currentColor;-webkit-mask:no-repeat center / 100% 100%;mask:no-repeat center / 100% 100%}.lock-icon--locked[data-v-1403efc7]{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z'/%3E%3C/svg%3E")}.lock-icon--open[data-v-1403efc7]{-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 8h9V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6H7q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8m7.413 8.413Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6 8h9V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6H7q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8m7.413 8.413Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587'/%3E%3C/svg%3E")}.rotate-handle[data-v-1403efc7]{position:absolute;z-index:20;width:32px;height:32px;cursor:grab;--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));background-color:currentColor;-webkit-mask:no-repeat center / 100% 100%;mask:no-repeat center / 100% 100%}.rotate-nw[data-v-1403efc7]{top:-40px;left:-40px;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M20.92 6.62a1 1 0 0 0-.21-.33l-3-3a1 1 0 0 0-1.42 1.42L17.59 6H9a3 3 0 0 0-3 3v8.59l-1.29-1.3a1 1 0 0 0-1.42 1.42l3 3a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l3-3a1 1 0 0 0-1.42-1.42L8 17.59V9a1 1 0 0 1 1-1h8.59l-1.3 1.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l3-3a1 1 0 0 0 .21-.33a1 1 0 0 0 0-.76'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M20.92 6.62a1 1 0 0 0-.21-.33l-3-3a1 1 0 0 0-1.42 1.42L17.59 6H9a3 3 0 0 0-3 3v8.59l-1.29-1.3a1 1 0 0 0-1.42 1.42l3 3a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l3-3a1 1 0 0 0-1.42-1.42L8 17.59V9a1 1 0 0 1 1-1h8.59l-1.3 1.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l3-3a1 1 0 0 0 .21-.33a1 1 0 0 0 0-.76'/%3E%3C/svg%3E")}.rotate-ne[data-v-1403efc7]{top:-40px;right:-40px;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M21.71 16.29a1 1 0 0 0-1.42 0L18 18.59V9a3 3 0 0 0-3-3H5.41l2.3-2.29a1 1 0 0 0-1.42-1.42l-4 4a1 1 0 0 0-.21.33a1 1 0 0 0 0 .76a1 1 0 0 0 .21.33l4 4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42L5.41 8H15a1 1 0 0 1 1 1v9.59l-2.29-2.3a1 1 0 0 0-1.42 1.42l4 4a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l4-4a1 1 0 0 0 0-1.42'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M21.71 16.29a1 1 0 0 0-1.42 0L18 18.59V9a3 3 0 0 0-3-3H5.41l2.3-2.29a1 1 0 0 0-1.42-1.42l-4 4a1 1 0 0 0-.21.33a1 1 0 0 0 0 .76a1 1 0 0 0 .21.33l4 4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42L5.41 8H15a1 1 0 0 1 1 1v9.59l-2.29-2.3a1 1 0 0 0-1.42 1.42l4 4a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l4-4a1 1 0 0 0 0-1.42'/%3E%3C/svg%3E")}.rotate-sw[data-v-1403efc7]{bottom:-40px;left:-40px;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m17 21l4-4l-4-4'/%3E%3Cpath d='M21 17H10a3 3 0 0 1-3-3V3'/%3E%3Cpath d='M11 7L7 3L3 7'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m17 21l4-4l-4-4'/%3E%3Cpath d='M21 17H10a3 3 0 0 1-3-3V3'/%3E%3Cpath d='M11 7L7 3L3 7'/%3E%3C/g%3E%3C/svg%3E")}.rotate-se[data-v-1403efc7]{bottom:-40px;right:-40px;-webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 7l-4-4l-4 4'/%3E%3Cpath d='M17 3v11a3 3 0 0 1-3 3H3'/%3E%3Cpath d='m7 13l-4 4l4 4'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 7l-4-4l-4 4'/%3E%3Cpath d='M17 3v11a3 3 0 0 1-3 3H3'/%3E%3Cpath d='m7 13l-4 4l4 4'/%3E%3C/g%3E%3C/svg%3E")}.resize-handle[data-v-1403efc7]{position:absolute;z-index:10}.resize-n[data-v-1403efc7]{top:-4px;left:12px;right:12px;height:4px}.resize-s[data-v-1403efc7]{bottom:-4px;left:12px;right:12px;height:4px}.resize-w[data-v-1403efc7]{left:-4px;top:12px;bottom:12px;width:4px}.resize-e[data-v-1403efc7]{right:-4px;top:12px;bottom:12px;width:4px}.corner-handle[data-v-1403efc7]{position:absolute;z-index:20;width:16px;height:16px;border-radius:9999px;--un-bg-opacity:1;background-color:rgb(156 163 175 / var(--un-bg-opacity))}.corner-nw[data-v-1403efc7]{top:-8px;left:-8px}.corner-ne[data-v-1403efc7]{top:-8px;right:-8px}.corner-sw[data-v-1403efc7]{bottom:-8px;left:-8px}.corner-se[data-v-1403efc7]{bottom:-8px;right:-8px}.keyboard-mount[data-v-1403efc7]{position:relative;width:fit-content;cursor:move}`, ze = (e, t) => {
   const a = e.__vccOpts || e;
-  for (const [o, n] of t)
-    a[o] = n;
+  for (const [i, s] of t)
+    a[i] = s;
   return a;
-}, ze = /* @__PURE__ */ Se(tt, [["styles", [at]], ["__scopeId", "data-v-1403efc7"]]);
-function nt(e) {
+}, Se = /* @__PURE__ */ ze(at, [["styles", [nt]], ["__scopeId", "data-v-1403efc7"]]);
+function rt(e) {
   var t, a;
   if (e.default !== void 0) return e.default;
   switch (e.type) {
@@ -529,265 +487,249 @@ function nt(e) {
       return 0;
   }
 }
-function Ie(e) {
-  return Object.fromEntries((e.params ?? []).map((t) => [t.key, nt(t)]));
+function Re(e) {
+  return Object.fromEntries((e.params ?? []).map((t) => [t.key, rt(t)]));
 }
 function ie(e, t = {}) {
   if (!e) return {};
-  const a = Ie(e);
-  for (const o of e.params ?? [])
-    o.key in t && t[o.key] !== void 0 && (a[o.key] = t[o.key]);
+  const a = Re(e);
+  for (const i of e.params ?? [])
+    i.key in t && t[i.key] !== void 0 && (a[i.key] = t[i.key]);
   return a;
 }
-const rt = 50;
+const st = 50;
 function pe(e, t, a) {
   e.setTransform(1, 0, 0, 1, 0, 0), e.globalAlpha = 1, e.globalCompositeOperation = "source-over", e.clearRect(0, 0, t, a);
 }
-function st(e, t, a) {
-  const o = e.getContext("2d");
-  if (!o) return null;
-  const n = {
-    canvas2d: o,
+function ot(e, t, a) {
+  const i = e.getContext("2d");
+  if (!i) return null;
+  const s = {
+    canvas2d: i,
     width: e.width,
     height: e.height
-  }, c = { ...Ie(t), ...a }, k = t.initialize(n, c);
-  let i = 0, f = 0, m = 0, d = 0;
-  const w = (D) => {
-    pe(o, e.width, e.height), d || (d = D);
-    const p = m ? D - m : 16, S = D - d;
-    m = D, t.render(n, k, { deltaTime: p, elapsedTime: S }, c);
-  }, y = () => {
-    i && (cancelAnimationFrame(i), i = 0);
+  }, d = { ...Re(t), ...a }, P = t.initialize(s, d);
+  let u = 0, y = 0, k = 0, g = 0;
+  const p = (q) => {
+    pe(i, e.width, e.height), g || (g = q);
+    const h = k ? q - k : 16, z = q - g;
+    k = q, t.render(s, P, { deltaTime: h, elapsedTime: z }, d);
+  }, b = () => {
+    u && (cancelAnimationFrame(u), u = 0);
   }, x = () => {
-    f && (Ee(f), f = 0);
-  }, b = (D) => {
-    w(D), i = requestAnimationFrame(b);
-  }, E = () => {
-    w(performance.now());
+    y && (Ee(y), y = 0);
+  }, w = (q) => {
+    p(q), u = requestAnimationFrame(w);
+  }, L = () => {
+    p(performance.now());
   }, A = () => {
-    x(), y(), i = requestAnimationFrame(b);
-  }, H = () => {
-    y(), x(), E(), f = Ce(E, rt);
-  }, M = () => {
-    document.visibilityState === "visible" ? A() : H();
+    x(), b(), u = requestAnimationFrame(w);
+  }, _ = () => {
+    b(), x(), L(), y = ke(L, st);
+  }, C = () => {
+    document.visibilityState === "visible" ? A() : _();
   }, K = () => {
-    M();
+    C();
   };
-  return document.addEventListener("visibilitychange", K), M(), () => {
-    document.removeEventListener("visibilitychange", K), y(), x(), t.shutdown(n, k), pe(o, e.width, e.height);
+  return document.addEventListener("visibilitychange", K), C(), () => {
+    document.removeEventListener("visibilitychange", K), b(), x(), t.shutdown(s, P), pe(i, e.width, e.height);
   };
 }
-function ot(e, t = {}) {
+function it(e, t = {}) {
   return ie(e, t);
 }
-function it(e) {
-  const t = L(null), a = Y(() => F(e.canvasRef) ?? t.value), o = L(null), n = L({}), c = L(!1), k = Y(() => {
-    var p;
-    return ((p = o.value) == null ? void 0 : p.params) ?? [];
+function lt(e) {
+  const t = M(null), a = Y(() => D(e.canvasRef) ?? t.value), i = M(null), s = M({}), d = M(!1), P = Y(() => {
+    var h;
+    return ((h = i.value) == null ? void 0 : h.params) ?? [];
   });
-  let i = null;
-  function f() {
-    const p = o.value, S = a.value;
-    if (!p || !S) return !1;
-    i == null || i(), i = null;
-    const V = st(S, p, n.value);
-    return V && (i = V, c.value = !0), !0;
+  let u = null;
+  function y() {
+    const h = i.value, z = a.value;
+    if (!h || !z) return !1;
+    u == null || u(), u = null;
+    const V = ot(z, h, s.value);
+    return V && (u = V, d.value = !0), !0;
   }
-  function m() {
-    o.value && (f() || Me(() => f()));
+  function k() {
+    i.value && (y() || Me(() => y()));
   }
-  function d(p, S) {
-    w(), o.value = p, S && (n.value = { ...S }), m();
+  function g(h, z) {
+    p(), i.value = h, z && (s.value = { ...z }), k();
   }
-  function w() {
-    i == null || i(), i = null, c.value = !1;
+  function p() {
+    u == null || u(), u = null, d.value = !1;
   }
-  function y(p) {
-    n.value = ie(o.value, { ...n.value, ...p }), m();
+  function b(h) {
+    s.value = ie(i.value, { ...s.value, ...h }), k();
   }
-  function x(p) {
-    return p.name ?? p.key;
+  function x(h) {
+    return h.name ?? h.key;
   }
-  function b(p) {
-    return Number(n.value[p] ?? 0);
+  function w(h) {
+    return Number(s.value[h] ?? 0);
   }
-  function E(p) {
-    return String(n.value[p] ?? "#000000");
+  function L(h) {
+    return String(s.value[h] ?? "#000000");
   }
-  function A(p) {
-    const S = n.value[p];
-    return typeof S == "number" || typeof S == "string" ? S : 0;
+  function A(h) {
+    const z = s.value[h];
+    return typeof z == "number" || typeof z == "string" ? z : 0;
   }
-  function H(p) {
-    return !!n.value[p];
+  function _(h) {
+    return !!s.value[h];
   }
-  function M(p) {
-    const S = Number(p ?? 0);
-    return Number.isInteger(S) ? String(S) : S.toFixed(2).replace(/\.?0+$/, "");
+  function C(h) {
+    const z = Number(h ?? 0);
+    return Number.isInteger(z) ? String(z) : z.toFixed(2).replace(/\.?0+$/, "");
   }
-  function K(p, S) {
-    y({ [p]: S });
+  function K(h, z) {
+    b({ [h]: z });
   }
-  function D() {
-    const p = F(e.preset) ?? null, S = F(e.params) ?? {};
-    if (!p) {
-      o.value = null, n.value = {}, w();
+  function q() {
+    const h = D(e.preset) ?? null, z = D(e.params) ?? {};
+    if (!h) {
+      i.value = null, s.value = {}, p();
       return;
     }
-    o.value = p, n.value = ot(p, S), m();
+    i.value = h, s.value = it(h, z), k();
   }
-  return ae(() => ({ preset: F(e.preset), params: F(e.params) }), D, {
+  return ae(() => ({ preset: D(e.preset), params: D(e.params) }), q, {
     immediate: !0,
     deep: !0,
     flush: "sync"
-  }), xe(w), {
+  }), xe(p), {
     internalCanvasRef: t,
     canvasRef: a,
-    currentPreset: o,
-    paramValues: n,
-    paramFields: k,
-    isRunning: c,
+    currentPreset: i,
+    paramValues: s,
+    paramFields: P,
+    isRunning: d,
     getParamLabel: x,
-    getSliderValue: b,
-    getColorValue: E,
+    getSliderValue: w,
+    getColorValue: L,
     getSelectValue: A,
-    getSwitchValue: H,
-    formatSliderValue: M,
+    getSwitchValue: _,
+    formatSliderValue: C,
     handleParamChange: K,
-    start: d,
-    stop: w,
-    updateParams: y
+    start: g,
+    stop: p,
+    updateParams: b
   };
 }
-const lt = 50;
+const ut = 50;
 function ct(e) {
-  const t = e.syncIntervalMs ?? lt;
-  let a = 0, o = !1, n = null;
-  function c() {
-    const d = e.getCanvas();
-    return d ? Ye({
-      canvas: d,
+  const t = e.syncIntervalMs ?? ut;
+  let a = 0, i = !1, s = null;
+  function d() {
+    const g = e.getCanvas();
+    return g ? Qe({
+      canvas: g,
       keyboardConfig: e.keyboardConfig,
       getKeyElements: e.getKeyElements
     }) : null;
   }
-  async function k(d) {
-    var w;
-    if ((w = e.onKeysRgbChange) == null || w.call(e, d), o) {
-      n = d;
+  async function P(g) {
+    var p;
+    if ((p = e.onKeysRgbChange) == null || p.call(e, g), i) {
+      s = g;
       return;
     }
-    o = !0;
+    i = !0;
     try {
-      const y = je(d, e.keyboardConfig);
-      await e.device.setMusicData(y, 0, e.isUSBDevice, e.lightingVersion);
+      const b = Fe(g, e.keyboardConfig);
+      await e.device.setMusicData(b, 0, e.isUSBDevice, e.lightingVersion);
     } catch {
     } finally {
-      if (o = !1, n) {
-        const y = n;
-        n = null, k(y);
+      if (i = !1, s) {
+        const b = s;
+        s = null, P(b);
       }
     }
   }
-  function i() {
+  function u() {
     if (e.enabled && !e.enabled.value) return;
-    const d = c();
-    d && k(d);
+    const g = d();
+    g && P(g);
   }
-  function f() {
-    a || (a = Ce(i, t));
+  function y() {
+    a || (a = ke(u, t));
   }
-  function m() {
+  function k() {
     a && (Ee(a), a = 0);
   }
   return e.enabled ? ae(
     e.enabled,
-    (d) => {
-      d ? f() : m();
+    (g) => {
+      g ? y() : k();
     },
     { immediate: !0 }
-  ) : f(), _e(m), {
-    syncKeyColors: i,
-    startKeySync: f,
-    stopKeySync: m
+  ) : y(), He(k), {
+    syncKeyColors: u,
+    startKeySync: y,
+    stopKeySync: k
   };
 }
-function ut(e) {
+function dt(e) {
   if (!e || typeof e != "object") return !1;
   const t = e;
   return !(typeof t.id != "string" || !t.id.trim() || typeof t.name != "string" || !t.name.trim() || typeof t.initialize != "function" || typeof t.render != "function" || typeof t.shutdown != "function" || t.params !== void 0 && (!Array.isArray(t.params) || !t.params.every((a) => a && typeof a == "object" && typeof a.key == "string")));
 }
-function dt(e) {
+function vt(e) {
   const t = new Function(`return (${e})`)();
-  if (!ut(t))
+  if (!dt(t))
     throw new Error("INVALID_PRESET");
   return t;
 }
 function we(e = {}) {
-  var y, x;
-  const t = e.initialPresets ?? [], a = he(e.initialImported ?? []), o = he([...t, ...a.value]), n = L(((y = t[0]) == null ? void 0 : y.id) ?? ((x = a.value[0]) == null ? void 0 : x.id) ?? ""), c = () => o.value.find((b) => b.id === n.value) ?? o.value[0] ?? null;
-  function k() {
-    o.value = [...t, ...a.value];
+  var b, x;
+  const t = e.initialPresets ?? [], a = he(e.initialImported ?? []), i = he([...t, ...a.value]), s = M(((b = t[0]) == null ? void 0 : b.id) ?? ((x = a.value[0]) == null ? void 0 : x.id) ?? ""), d = () => i.value.find((w) => w.id === s.value) ?? i.value[0] ?? null;
+  function P() {
+    i.value = [...t, ...a.value];
   }
-  function i() {
-    var b;
-    (b = e.onPresetsChange) == null || b.call(e, a.value.map((E) => Ke(E)));
+  function u() {
+    var w;
+    (w = e.onPresetsChange) == null || w.call(e, a.value.map((L) => Ke(L)));
   }
-  function f(b) {
-    o.value.some((E) => E.id === b) && (n.value = b);
+  function y(w) {
+    i.value.some((L) => L.id === w) && (s.value = w);
   }
-  function m(b) {
-    return t.some((E) => E.id === b);
+  function k(w) {
+    return t.some((L) => L.id === w);
   }
-  async function d(b) {
-    var E, A, H;
+  async function g(w) {
+    var L, A, _;
     try {
-      const M = dt(b);
-      return o.value.some((K) => K.id === M.id) ? ((E = e.onImportPreset) == null || E.call(e, {
+      const C = vt(w);
+      return i.value.some((K) => K.id === C.id) ? ((L = e.onImportPreset) == null || L.call(e, {
         code: 1,
         message: "Preset id already exists"
-      }), null) : (a.value = [...a.value, M], k(), i(), n.value = M.id, (A = e.onImportPreset) == null || A.call(e, {
+      }), null) : (a.value = [...a.value, C], P(), u(), s.value = C.id, (A = e.onImportPreset) == null || A.call(e, {
         code: 0,
         message: "Import success"
-      }), M);
+      }), C);
     } catch {
-      return (H = e.onImportPreset) == null || H.call(e, {
+      return (_ = e.onImportPreset) == null || _.call(e, {
         code: 2,
         message: "Invalid preset code"
       }), null;
     }
   }
-  async function w(b) {
-    var E;
-    m(b) || (a.value = a.value.filter((A) => A.id !== b), k(), i(), n.value === b && (n.value = ((E = o.value[0]) == null ? void 0 : E.id) ?? ""));
+  async function p(w) {
+    var L;
+    k(w) || (a.value = a.value.filter((A) => A.id !== w), P(), u(), s.value === w && (s.value = ((L = i.value[0]) == null ? void 0 : L.id) ?? ""));
   }
   return {
-    presetList: o,
-    selectedPresetId: n,
-    selectedPreset: c,
-    selectPreset: f,
-    isInitialPreset: m,
-    importPreset: d,
-    deleteImportedPreset: w
+    presetList: i,
+    selectedPresetId: s,
+    selectedPreset: d,
+    selectPreset: y,
+    isInitialPreset: k,
+    importPreset: g,
+    deleteImportedPreset: p
   };
 }
-const vt = ["setMusicData", "getDeviceId", "isConnected", "getDevice"];
-function ft(e) {
-  if (!e || typeof e != "object") return !1;
-  const t = e;
-  return vt.every((a) => typeof t[a] == "function");
-}
-async function ht(e) {
-  if (!e)
-    throw new Error("[keyboard-kit] init.device is required");
-  if (!ft(e))
-    throw new Error("[keyboard-kit] init.device must be an @hfd-sdk/keyboard-sdk HFDDevice instance");
-  const { HFDDevice: t } = await import("@hfd-sdk/keyboard-sdk");
-  if (!(e instanceof t))
-    throw new Error("[keyboard-kit] init.device must be created via new HFDDevice() from @hfd-sdk/keyboard-sdk");
-  return e;
-}
-const gt = ["width", "height"], mt = /* @__PURE__ */ be({
+const ft = ["width", "height"], ht = /* @__PURE__ */ be({
   __name: "hfd-ai-lighting.ce",
   props: {
     width: { default: 800, type: Number },
@@ -795,152 +737,152 @@ const gt = ["width", "height"], mt = /* @__PURE__ */ be({
   },
   emits: ["keys-rgb-change", "preset-change", "param-change", "presets-change", "layout-change", "keyboard-ready", "import-preset"],
   setup(e, { expose: t, emit: a }) {
-    const o = e, n = a, c = L(o.width), k = L(o.height), i = L(), f = L(), m = L(null), d = L(null), w = L(), y = L(), x = L(50), b = L(!0), E = L({}), A = L(null), H = L(null);
-    let M = he(we());
-    const K = Y(() => M.value.selectedPreset()), D = Y(() => ({
-      width: `${c.value}px`,
-      height: `${k.value}px`
-    })), { paramValues: p, handleParamChange: S } = it({
+    const i = e, s = a, d = M(i.width), P = M(i.height), u = M(), y = M(), k = M(null), g = M(null), p = M(), b = M(), x = M(50), w = M(!0), L = M({}), A = M(null), _ = M(null);
+    let C = he(we());
+    const K = Y(() => C.value.selectedPreset()), q = Y(() => ({
+      width: `${d.value}px`,
+      height: `${P.value}px`
+    })), { paramValues: h, handleParamChange: z } = lt({
       preset: () => K.value,
-      params: () => E.value,
+      params: () => L.value,
       canvasRef: () => A.value
     });
     function V() {
-      var I, W;
-      if (f.value) return f.value();
-      const u = (W = (I = H.value) == null ? void 0 : I.getMountEl) == null ? void 0 : W.call(I);
-      return u ? Te(u) : [];
+      var R, O;
+      if (y.value) return y.value();
+      const l = (O = (R = _.value) == null ? void 0 : R.getMountEl) == null ? void 0 : O.call(R);
+      return l ? Te(l) : [];
     }
-    function B(u) {
-      n("layout-change", { layout: u });
+    function F(l) {
+      s("layout-change", { layout: l });
     }
-    let C = null;
-    function O() {
-      if (C == null || C(), C = null, !m.value || !A.value || !d.value) return;
-      C = ct({
-        keyboardConfig: m.value,
+    let m = null;
+    function W() {
+      if (m == null || m(), m = null, !k.value || !A.value || !g.value) return;
+      m = ct({
+        keyboardConfig: k.value,
         getCanvas: () => A.value,
         getKeyElements: V,
-        device: d.value,
-        isUSBDevice: w.value,
-        lightingVersion: y.value,
+        device: g.value,
+        isUSBDevice: p.value,
+        lightingVersion: b.value,
         syncIntervalMs: x.value,
-        enabled: b,
-        onKeysRgbChange: (I) => {
-          n("keys-rgb-change", { keysRgb: I });
+        enabled: w,
+        onKeysRgbChange: (R) => {
+          s("keys-rgb-change", { keysRgb: R });
         }
       }).stopKeySync;
     }
-    function j(u) {
-      n("preset-change", {
-        presetId: u,
-        preset: M.value.selectedPreset()
+    function G(l) {
+      s("preset-change", {
+        presetId: l,
+        preset: C.value.selectedPreset()
       });
     }
-    async function le(u) {
-      var W, r, s, l;
-      const I = await ht(u.device);
-      c.value = u.canvasWidth ?? o.width, k.value = u.canvasHeight ?? o.height, i.value = u.initialLayout, f.value = u.getKeyElements, m.value = u.keyboardConfig, d.value = I, w.value = u.isUSBDevice, y.value = u.lightingVersion, x.value = u.syncIntervalMs ?? 50, E.value = u.defaultParams ?? {}, M.value = we({
-        initialPresets: u.presets ?? [],
-        initialImported: u.importedPresets ?? [],
-        onPresetsChange: (v) => n("presets-change", { importedSerialized: v }),
-        onImportPreset: (v) => n("import-preset", v)
-      }), u.selectedPresetId ? M.value.selectPreset(u.selectedPresetId) : (W = u.presets) != null && W[0] ? M.value.selectPreset(u.presets[0].id) : (r = u.importedPresets) != null && r[0] && M.value.selectPreset(u.importedPresets[0].id), await Me(), (l = (s = H.value) == null ? void 0 : s.applyFitScale) == null || l.call(s), O(), j(M.value.selectedPresetId.value), n("keyboard-ready");
+    async function le(l) {
+      var O, n, r, o;
+      const R = await De(l.device);
+      d.value = l.canvasWidth ?? i.width, P.value = l.canvasHeight ?? i.height, u.value = l.initialLayout, y.value = l.getKeyElements, k.value = l.keyboardConfig, g.value = R, p.value = l.isUSBDevice, b.value = l.lightingVersion, x.value = l.syncIntervalMs ?? 50, L.value = l.defaultParams ?? {}, C.value = we({
+        initialPresets: l.presets ?? [],
+        initialImported: l.importedPresets ?? [],
+        onPresetsChange: (c) => s("presets-change", { importedSerialized: c }),
+        onImportPreset: (c) => s("import-preset", c)
+      }), l.selectedPresetId ? C.value.selectPreset(l.selectedPresetId) : (O = l.presets) != null && O[0] ? C.value.selectPreset(l.presets[0].id) : (n = l.importedPresets) != null && n[0] && C.value.selectPreset(l.importedPresets[0].id), await Me(), (o = (r = _.value) == null ? void 0 : r.applyFitScale) == null || o.call(r), W(), G(C.value.selectedPresetId.value), s("keyboard-ready");
     }
-    function ne(u) {
-      M.value.selectPreset(u), j(u);
+    function ne(l) {
+      C.value.selectPreset(l), G(l);
     }
-    async function ce(u) {
-      await M.value.deleteImportedPreset(u), j(M.value.selectedPresetId.value);
+    async function ue(l) {
+      await C.value.deleteImportedPreset(l), G(C.value.selectedPresetId.value);
     }
-    async function ue(u) {
-      const I = await M.value.importPreset(u);
-      return I && j(I.id), I;
+    async function ce(l) {
+      const R = await C.value.importPreset(l);
+      return R && G(R.id), R;
     }
-    function U(u, I) {
-      S(u, I);
-      const W = K.value, r = {
-        key: u,
-        value: I,
-        params: ie(W, p.value)
+    function X(l, R) {
+      z(l, R);
+      const O = K.value, n = {
+        key: l,
+        value: R,
+        params: ie(O, h.value)
       };
-      n("param-change", r);
+      s("param-change", n);
     }
     function re() {
-      const u = M.value;
+      const l = C.value;
       return {
-        presetList: u.presetList,
-        selectedPresetId: u.selectedPresetId,
-        selectedPreset: u.selectedPreset,
-        isInitialPreset: u.isInitialPreset
+        presetList: l.presetList,
+        selectedPresetId: l.selectedPresetId,
+        selectedPreset: l.selectedPreset,
+        isInitialPreset: l.isInitialPreset
       };
     }
     function Q() {
-      return ie(K.value, p.value);
+      return ie(K.value, h.value);
     }
     function de() {
-      var u, I;
-      (I = (u = H.value) == null ? void 0 : u.resetLayout) == null || I.call(u);
+      var l, R;
+      (R = (l = _.value) == null ? void 0 : l.resetLayout) == null || R.call(l);
     }
     return ae(
-      () => [m.value, d.value, w.value, y.value],
-      () => O()
+      () => [k.value, g.value, p.value, b.value],
+      () => W()
     ), t({
       init: le,
       getPresetState: re,
       selectPreset: ne,
-      deletePreset: ce,
-      importPreset: ue,
-      setParam: U,
+      deletePreset: ue,
+      importPreset: ce,
+      setParam: X,
       getParamValues: Q,
       resetKeyboardLayout: de,
       getKeyElements: V
-    }), (u, I) => (ee(), te("div", {
+    }), (l, R) => (ee(), te("div", {
       class: "preview-wrap",
-      style: oe(D.value)
+      style: oe(q.value)
     }, [
-      X("canvas", {
+      j("canvas", {
         ref_key: "canvasEl",
         ref: A,
         class: "preview-canvas",
-        width: c.value,
-        height: k.value
-      }, null, 8, gt),
-      Ve(ze, {
+        width: d.value,
+        height: P.value
+      }, null, 8, ft),
+      Ve(Se, {
         ref_key: "overlayRef",
-        ref: H,
-        "canvas-width": c.value,
-        "canvas-height": k.value,
-        "initial-layout": i.value,
-        "on-layout-change": B,
+        ref: _,
+        "canvas-width": d.value,
+        "canvas-height": P.value,
+        "initial-layout": u.value,
+        "on-layout-change": F,
         "get-key-elements": V
       }, {
         keyboard: Ne(() => [
-          ke(u.$slots, "keyboard", {}, void 0, !0)
+          Ce(l.$slots, "keyboard", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["canvas-width", "canvas-height", "initial-layout"])
     ], 4));
   }
-}), yt = ".preview-wrap[data-v-ba92361e]{position:relative;flex-shrink:0;overflow:hidden;border-radius:8px;background:#000}.preview-canvas[data-v-ba92361e]{display:block;width:100%;height:100%}", pt = /* @__PURE__ */ Se(mt, [["styles", [yt]], ["__scopeId", "data-v-ba92361e"]]), wt = Pe(
-  pt
-), xt = Pe(
-  ze
+}), gt = ".preview-wrap[data-v-ba92361e]{position:relative;flex-shrink:0;overflow:hidden;border-radius:8px;background:#000}.preview-canvas[data-v-ba92361e]{display:block;width:100%;height:100%}", mt = /* @__PURE__ */ ze(ht, [["styles", [gt]], ["__scopeId", "data-v-ba92361e"]]), yt = Pe(
+  mt
+), pt = Pe(
+  Se
 );
-function bt() {
+function wt() {
   const e = [
-    ["hfd-ai-lighting", wt],
-    ["hfd-ai-lighting-keyboard-overlay", xt]
+    ["hfd-ai-lighting", yt],
+    ["hfd-ai-lighting-keyboard-overlay", pt]
   ];
   for (const [t, a] of e)
     customElements.get(t) || customElements.define(t, a);
 }
-bt();
+wt();
 export {
-  wt as HfdAiLightingElement,
-  xt as HfdAiLightingKeyboardOverlayElement,
-  Pt as deserializePreset,
-  bt as registerAiLightingElements,
+  yt as HfdAiLightingElement,
+  pt as HfdAiLightingKeyboardOverlayElement,
+  Mt as deserializePreset,
+  wt as registerAiLightingElements,
   Ke as serializePreset,
-  ut as validatePreset
+  dt as validatePreset
 };