@hfd-sdk/keyboard-kit 1.0.0

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

@@ -0,0 +1,946 @@
+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 { serializePreset as Ke } from "../runtime.es.js";
+import { deserializePreset as Pt } from "../runtime.es.js";
+const me = 40, De = 0.1, qe = 3;
+function J(e) {
+  return Math.round(e * 100) / 100;
+}
+function ye(e) {
+  return {
+    x: J(e.x),
+    y: J(e.y),
+    width: J(e.width),
+    height: J(e.height),
+    rotation: J(e.rotation)
+  };
+}
+const Be = {
+  "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 = {
+  "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 = {
+  "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(() => ({
+    left: `${t.value.x}px`,
+    top: `${t.value.y}px`,
+    transform: `translate(-50%, -50%) scale(${a.value}, ${f.value}) rotate(${n.value}deg)`,
+    transformOrigin: "center center"
+  }));
+  let d = null;
+  function w() {
+    return {
+      width: F(e.canvasWidth),
+      height: F(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 x(r) {
+    return Math.min(qe, Math.max(De, r));
+  }
+  function b(r, s) {
+    const { width: l, height: v } = w(), h = i.value.width * a.value / 2, g = i.value.height * f.value / 2;
+    return {
+      x: Math.max(h, Math.min(l - h, r)),
+      y: Math.max(g, Math.min(v - g, s))
+    };
+  }
+  function E() {
+    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
+    });
+  }
+  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);
+        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 };
+  }
+  async function D(r) {
+    await K(r, !0), H();
+  }
+  function p() {
+    c.value = !c.value, c.value && (o.value = a.value);
+  }
+  function S(r, s, l, v) {
+    const h = -n.value * Math.PI / 180, g = r - l, P = s - v;
+    return {
+      x: g * Math.cos(h) - P * Math.sin(h),
+      y: g * Math.sin(h) + P * Math.cos(h)
+    };
+  }
+  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 B(r, s, l, v) {
+    return Math.atan2(s - v, r - l) * 180 / Math.PI;
+  }
+  function C(r, s, l, v, h) {
+    const g = h * Math.PI / 180;
+    return {
+      x: r + l * Math.cos(g) - v * Math.sin(g),
+      y: s + l * Math.sin(g) + v * Math.cos(g)
+    };
+  }
+  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)
+    ];
+    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))
+    };
+  }
+  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;
+    }
+    return {
+      scale: l + T * (h - l),
+      scaleY: v + T * (g - v)
+    };
+  }
+  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(
+      v,
+      h,
+      r.x * z,
+      r.y * q,
+      R
+    ), G = le(
+      N,
+      r,
+      g,
+      P,
+      s,
+      l,
+      R,
+      _,
+      T
+    ), Z = _ * G.scale / 2, Re = T * G.scaleY / 2, Ae = C(
+      N.x,
+      N.y,
+      -r.x * Z,
+      -r.y * Re,
+      R
+    );
+    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;
+    } 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],
+      T,
+      z,
+      l,
+      v,
+      h,
+      g,
+      P
+    );
+  }
+  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,
+      startPosX: t.value.x,
+      startPosY: t.value.y,
+      startScale: a.value,
+      startScaleY: o.value,
+      startRotation: n.value,
+      startAngle: v
+    }, 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));
+      return;
+    }
+    if (l.startsWith("rotate-")) {
+      const N = B(s.x, s.y, t.value.x, t.value.y);
+      n.value = T + (N - z);
+      return;
+    }
+    const q = S(s.x, s.y, v, h);
+    if (l.startsWith("scale-")) {
+      ce(
+        l,
+        q,
+        g,
+        P,
+        R,
+        _,
+        T
+      );
+      return;
+    }
+    (l === "resize-e" || l === "resize-w" || l === "resize-n" || l === "resize-s") && ue(l, q, g, P, R, _, T);
+  }
+  function Q() {
+    d && M(), d = null, window.removeEventListener("mousemove", re), window.removeEventListener("mouseup", Q);
+  }
+  function de(r) {
+    U("drag", r);
+  }
+  function u(r, s) {
+    U(r, s);
+  }
+  function I(r, s) {
+    U(r, s);
+  }
+  function W(r, s) {
+    U(r, s);
+  }
+  return xe(() => {
+    Q();
+  }), ae(
+    () => [F(e.canvasWidth), F(e.canvasHeight)],
+    () => {
+      t.value = b(t.value.x, t.value.y);
+    }
+  ), {
+    lockAspectRatio: c,
+    rotation: n,
+    wrapperStyle: m,
+    applyFitScale: K,
+    getLayout: E,
+    resetKeyboardLayout: D,
+    toggleLockAspectRatio: p,
+    onDragStart: de,
+    onResizeStart: u,
+    onScaleCornerStart: I,
+    onRotateStart: W
+  };
+}
+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;
+  return {
+    r: Math.round(a / t),
+    g: Math.round(o / t),
+    b: Math.round(n / 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)
+    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);
+}
+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 [e];
+}
+function Te(e) {
+  return Le(e).flatMap(
+    (t) => Array.from(t.querySelectorAll("[data-row][data-col]")).map((a) => ({
+      row: Number(a.dataset.row),
+      col: Number(a.dataset.col),
+      el: a
+    }))
+  );
+}
+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 }) => {
+    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 Qe = { class: "relative" }, Ze = ["onMousedown"], Je = ["onMousedown"], et = ["onMousedown"], tt = /* @__PURE__ */ be({
+  __name: "keyboard-overlay.ce",
+  props: {
+    canvasWidth: { default: 800, type: Number },
+    canvasHeight: { default: 480, type: Number },
+    initialLayout: { type: [Object, null] },
+    onLayoutChange: { type: Function },
+    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,
+      onResizeStart: x,
+      onScaleCornerStart: b,
+      onRotateStart: E
+    } = We({
+      canvasWidth: () => a.canvasWidth,
+      canvasHeight: () => a.canvasHeight,
+      getOverlayEl: () => o.value,
+      initialLayout: () => a.initialLayout,
+      onLayoutChange: () => a.onLayoutChange
+    }), A = [
+      { mode: "resize-n", baseAngle: 0, className: "resize-n" },
+      { 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 = [
+      { 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 p() {
+      if (a.getKeyElements) return a.getKeyElements();
+      const V = n.value;
+      return V ? Te(V) : [];
+    }
+    function S() {
+      d(n.value);
+    }
+    return He(() => {
+      f(n.value);
+    }), ae(
+      () => [a.canvasWidth, a.canvasHeight],
+      () => {
+        f(n.value);
+      }
+    ), t({
+      getMountEl: () => n.value,
+      getKeyElements: p,
+      getLayout: m,
+      resetLayout: S,
+      applyFitScale: () => f(n.value)
+    }), (V, B) => (ee(), te("div", {
+      ref_key: "overlayRef",
+      ref: o,
+      class: "overlay-root",
+      part: "overlay-root"
+    }, [
+      X("div", {
+        class: "transform-wrapper",
+        part: "transform-wrapper",
+        style: oe($(i))
+      }, [
+        X("div", Qe, [
+          X("button", {
+            type: "button",
+            class: "lock-btn",
+            part: "lock-button",
+            onMousedown: B[0] || (B[0] = ge(() => {
+            }, ["stop"])),
+            onClick: B[1] || (B[1] = ge(
+              //@ts-ignore
+              (...C) => $(w) && $(w)(...C),
+              ["stop"]
+            ))
+          }, [
+            X("i", {
+              class: se(["lock-icon", $(c) ? "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]),
+            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]),
+            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)
+          }, null, 46, et)), 64)),
+          X("div", {
+            ref_key: "mountRef",
+            ref: n,
+            class: "keyboard-mount",
+            part: "keyboard-mount",
+            onMousedown: B[2] || (B[2] = //@ts-ignore
+            (...C) => $(y) && $(y)(...C))
+          }, [
+            ke(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) => {
+  const a = e.__vccOpts || e;
+  for (const [o, n] of t)
+    a[o] = n;
+  return a;
+}, ze = /* @__PURE__ */ Se(tt, [["styles", [at]], ["__scopeId", "data-v-1403efc7"]]);
+function nt(e) {
+  var t, a;
+  if (e.default !== void 0) return e.default;
+  switch (e.type) {
+    case "color":
+      return "#000000";
+    case "switch":
+      return !1;
+    case "select":
+      return ((a = (t = e.options) == null ? void 0 : t[0]) == null ? void 0 : a.value) ?? 0;
+    default:
+      return 0;
+  }
+}
+function Ie(e) {
+  return Object.fromEntries((e.params ?? []).map((t) => [t.key, nt(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]);
+  return a;
+}
+const rt = 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,
+    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);
+  }, x = () => {
+    f && (Ee(f), f = 0);
+  }, b = (D) => {
+    w(D), i = requestAnimationFrame(b);
+  }, E = () => {
+    w(performance.now());
+  }, A = () => {
+    x(), y(), i = requestAnimationFrame(b);
+  }, H = () => {
+    y(), x(), E(), f = Ce(E, rt);
+  }, M = () => {
+    document.visibilityState === "visible" ? A() : H();
+  }, K = () => {
+    M();
+  };
+  return document.addEventListener("visibilitychange", K), M(), () => {
+    document.removeEventListener("visibilitychange", K), y(), x(), t.shutdown(n, k), pe(o, e.width, e.height);
+  };
+}
+function ot(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) ?? [];
+  });
+  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;
+  }
+  function m() {
+    o.value && (f() || Me(() => f()));
+  }
+  function d(p, S) {
+    w(), o.value = p, S && (n.value = { ...S }), m();
+  }
+  function w() {
+    i == null || i(), i = null, c.value = !1;
+  }
+  function y(p) {
+    n.value = ie(o.value, { ...n.value, ...p }), m();
+  }
+  function x(p) {
+    return p.name ?? p.key;
+  }
+  function b(p) {
+    return Number(n.value[p] ?? 0);
+  }
+  function E(p) {
+    return String(n.value[p] ?? "#000000");
+  }
+  function A(p) {
+    const S = n.value[p];
+    return typeof S == "number" || typeof S == "string" ? S : 0;
+  }
+  function H(p) {
+    return !!n.value[p];
+  }
+  function M(p) {
+    const S = Number(p ?? 0);
+    return Number.isInteger(S) ? String(S) : S.toFixed(2).replace(/\.?0+$/, "");
+  }
+  function K(p, S) {
+    y({ [p]: S });
+  }
+  function D() {
+    const p = F(e.preset) ?? null, S = F(e.params) ?? {};
+    if (!p) {
+      o.value = null, n.value = {}, w();
+      return;
+    }
+    o.value = p, n.value = ot(p, S), m();
+  }
+  return ae(() => ({ preset: F(e.preset), params: F(e.params) }), D, {
+    immediate: !0,
+    deep: !0,
+    flush: "sync"
+  }), xe(w), {
+    internalCanvasRef: t,
+    canvasRef: a,
+    currentPreset: o,
+    paramValues: n,
+    paramFields: k,
+    isRunning: c,
+    getParamLabel: x,
+    getSliderValue: b,
+    getColorValue: E,
+    getSelectValue: A,
+    getSwitchValue: H,
+    formatSliderValue: M,
+    handleParamChange: K,
+    start: d,
+    stop: w,
+    updateParams: y
+  };
+}
+const lt = 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,
+      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;
+      return;
+    }
+    o = !0;
+    try {
+      const y = je(d, e.keyboardConfig);
+      await e.device.setMusicData(y, 0, e.isUSBDevice, e.lightingVersion);
+    } catch {
+    } finally {
+      if (o = !1, n) {
+        const y = n;
+        n = null, k(y);
+      }
+    }
+  }
+  function i() {
+    if (e.enabled && !e.enabled.value) return;
+    const d = c();
+    d && k(d);
+  }
+  function f() {
+    a || (a = Ce(i, t));
+  }
+  function m() {
+    a && (Ee(a), a = 0);
+  }
+  return e.enabled ? ae(
+    e.enabled,
+    (d) => {
+      d ? f() : m();
+    },
+    { immediate: !0 }
+  ) : f(), _e(m), {
+    syncKeyColors: i,
+    startKeySync: f,
+    stopKeySync: m
+  };
+}
+function ut(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) {
+  const t = new Function(`return (${e})`)();
+  if (!ut(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];
+  }
+  function i() {
+    var b;
+    (b = e.onPresetsChange) == null || b.call(e, a.value.map((E) => Ke(E)));
+  }
+  function f(b) {
+    o.value.some((E) => E.id === b) && (n.value = b);
+  }
+  function m(b) {
+    return t.some((E) => E.id === b);
+  }
+  async function d(b) {
+    var E, A, H;
+    try {
+      const M = dt(b);
+      return o.value.some((K) => K.id === M.id) ? ((E = e.onImportPreset) == null || E.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, {
+        code: 0,
+        message: "Import success"
+      }), M);
+    } catch {
+      return (H = e.onImportPreset) == null || H.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) ?? ""));
+  }
+  return {
+    presetList: o,
+    selectedPresetId: n,
+    selectedPreset: c,
+    selectPreset: f,
+    isInitialPreset: m,
+    importPreset: d,
+    deleteImportedPreset: w
+  };
+}
+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({
+  __name: "hfd-ai-lighting.ce",
+  props: {
+    width: { default: 800, type: Number },
+    height: { default: 480, type: Number }
+  },
+  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({
+      preset: () => K.value,
+      params: () => E.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) : [];
+    }
+    function B(u) {
+      n("layout-change", { layout: u });
+    }
+    let C = null;
+    function O() {
+      if (C == null || C(), C = null, !m.value || !A.value || !d.value) return;
+      C = ct({
+        keyboardConfig: m.value,
+        getCanvas: () => A.value,
+        getKeyElements: V,
+        device: d.value,
+        isUSBDevice: w.value,
+        lightingVersion: y.value,
+        syncIntervalMs: x.value,
+        enabled: b,
+        onKeysRgbChange: (I) => {
+          n("keys-rgb-change", { keysRgb: I });
+        }
+      }).stopKeySync;
+    }
+    function j(u) {
+      n("preset-change", {
+        presetId: u,
+        preset: M.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");
+    }
+    function ne(u) {
+      M.value.selectPreset(u), j(u);
+    }
+    async function ce(u) {
+      await M.value.deleteImportedPreset(u), j(M.value.selectedPresetId.value);
+    }
+    async function ue(u) {
+      const I = await M.value.importPreset(u);
+      return I && j(I.id), I;
+    }
+    function U(u, I) {
+      S(u, I);
+      const W = K.value, r = {
+        key: u,
+        value: I,
+        params: ie(W, p.value)
+      };
+      n("param-change", r);
+    }
+    function re() {
+      const u = M.value;
+      return {
+        presetList: u.presetList,
+        selectedPresetId: u.selectedPresetId,
+        selectedPreset: u.selectedPreset,
+        isInitialPreset: u.isInitialPreset
+      };
+    }
+    function Q() {
+      return ie(K.value, p.value);
+    }
+    function de() {
+      var u, I;
+      (I = (u = H.value) == null ? void 0 : u.resetLayout) == null || I.call(u);
+    }
+    return ae(
+      () => [m.value, d.value, w.value, y.value],
+      () => O()
+    ), t({
+      init: le,
+      getPresetState: re,
+      selectPreset: ne,
+      deletePreset: ce,
+      importPreset: ue,
+      setParam: U,
+      getParamValues: Q,
+      resetKeyboardLayout: de,
+      getKeyElements: V
+    }), (u, I) => (ee(), te("div", {
+      class: "preview-wrap",
+      style: oe(D.value)
+    }, [
+      X("canvas", {
+        ref_key: "canvasEl",
+        ref: A,
+        class: "preview-canvas",
+        width: c.value,
+        height: k.value
+      }, null, 8, gt),
+      Ve(ze, {
+        ref_key: "overlayRef",
+        ref: H,
+        "canvas-width": c.value,
+        "canvas-height": k.value,
+        "initial-layout": i.value,
+        "on-layout-change": B,
+        "get-key-elements": V
+      }, {
+        keyboard: Ne(() => [
+          ke(u.$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
+);
+function bt() {
+  const e = [
+    ["hfd-ai-lighting", wt],
+    ["hfd-ai-lighting-keyboard-overlay", xt]
+  ];
+  for (const [t, a] of e)
+    customElements.get(t) || customElements.define(t, a);
+}
+bt();
+export {
+  wt as HfdAiLightingElement,
+  xt as HfdAiLightingKeyboardOverlayElement,
+  Pt as deserializePreset,
+  bt as registerAiLightingElements,
+  Ke as serializePreset,
+  ut as validatePreset
+};