maxmsp-gui
Version:
React component library for stylised Max MSP GUI.
997 lines (996 loc) • 42.3 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._bang_s45ht_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:24px;width:24px}._bang_s45ht_1:focus{outline:#b4b4b4 solid 3px;z-index:10}._bang_s45ht_1 svg{outline:0}._ezdac_qh7op_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:45px;width:45px}._ezdac_qh7op_1:focus{outline:#b4b4b4 solid 3px;z-index:10}._ezdac_qh7op_1 svg{outline:0}._message_3svzp_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:fit-content;min-height:24px;width:fit-content;min-width:29.5px;background:linear-gradient(to top,#333,#4c4c4c);border-radius:5px}._message_3svzp_1:focus{outline:#b4b4b4 solid 3px;z-index:10}._message_3svzp_1 p{margin:auto 0;line-height:14px;font-size:13px;color:#f7f7f7;outline:0}._object_1bmbv_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:fit-content;min-height:24px;width:fit-content;min-width:29.5px;max-width:100%}._object_1bmbv_1 svg{height:24px;margin:0;position:absolute;top:0;left:5px}._object_1bmbv_1 p{height:fit-content;min-height:14px;min-width:19.5px;margin:4px 0;padding:1px 5px;line-height:14px;font-size:13px;color:#f7f7f7}._playbar_1xeb7_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:20px;max-width:100%;background:#333}._playbar_1xeb7_1 hr{height:2px;width:calc(100% - 37px);margin:auto;position:absolute;top:0;bottom:0;left:26px;background:gray;border:0}._playbar_1xeb7_1>svg{height:20px;width:20px;margin:auto;position:absolute;top:0;bottom:0;pointer-events:none}._playbar_1xeb7_1>div:first-of-type{height:20px;width:20px;position:absolute;top:0;left:0;margin:0}._playbar_1xeb7_1>div:first-of-type:focus{outline:#b4b4b4 solid 3px;z-index:10}._playbar_1xeb7_1>div:first-of-type>div{height:inherit;width:inherit;outline:0}._playbar_1xeb7_1>div:first-of-type>div svg{height:inherit;width:inherit;pointer-events:none}._playbar_1xeb7_1>div:last-of-type{z-index:10;height:20px;margin:0;width:calc(100% - 25px);padding:0 5px 0 0;float:right}._playbar_1xeb7_1>div:last-of-type:focus{outline:#b4b4b4 solid 3px;z-index:10}._playbar_1xeb7_1>div:last-of-type div{height:inherit;width:100%;position:relative;padding:0;outline:0}._playbar_1xeb7_1>div:last-of-type div input{height:100%;width:100%;margin:0;appearance:none;background:inherit;outline:0}._playbar_1xeb7_1>div:last-of-type div input::-webkit-slider-thumb{height:20px;width:12px;appearance:none;background:none;border:0;opacity:0}._playbar_1xeb7_1>div:last-of-type div input::-moz-range-thumb{height:20px;width:12px;appearance:none;background:none;border:0;opacity:0}._radiogroup_11vaz_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:fit-content;width:fit-content;max-width:100%;background:unset}._radiogroup_11vaz_1:focus{outline:#b4b4b4 solid 3px;z-index:10}._radiogroup_11vaz_1>div{height:fit-content;width:fit-content;display:flex;float:right;clear:right}._radiogroup_11vaz_1>div:focus{outline:#b4b4b4 solid 3px;z-index:10}._radiogroup_11vaz_1>div p{height:inherit;width:fit-content;margin:0;float:right;text-align:right;vertical-align:middle;white-space:nowrap;font-size:16px;font-weight:700;color:#000;outline:0}._radiogroup_11vaz_1>div div{height:inherit;width:20.1px;display:grid;position:relative;background:#333;outline:0}._radiogroup_11vaz_1>div div svg{height:20px;width:20px;place-self:center}._slider_vkjco_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:24px;width:fit-content;max-width:100%;background:#393939}._slider_vkjco_1:focus{outline:#b4b4b4 solid 3px;z-index:10}._slider_vkjco_1 div{height:inherit;outline:0}._slider_vkjco_1 div input{height:inherit;max-width:calc(100% - 10px);margin:0 5px;appearance:none;border-radius:0;outline:0}._slider_vkjco_1 div input::-webkit-slider-thumb{height:20px;width:6px;appearance:none;background:none;border:0;opacity:0}._slider_vkjco_1 div input::-moz-range-thumb{height:20px;width:6px;appearance:none;background:none;border:0;opacity:0}._textbutton_yxdt1_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:24px;width:fit-content}._textbutton_yxdt1_1:focus{outline:#b4b4b4 solid 3px;z-index:10}._textbutton_yxdt1_1 p{height:100%;width:fit-content;min-width:80px;max-width:calc(100% - 20px);padding:0 10px;margin:0;overflow:hidden;line-height:24px;font-size:13.5px;text-align:center;text-overflow:ellipsis;white-space:nowrap;outline:0}._toggle_u7ou7_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:24px;width:24px}._toggle_u7ou7_1:focus{outline:#b4b4b4 solid 3px;z-index:10}._toggle_u7ou7_1 svg{outline:0}._umenu_11xdg_1{position:relative;font-family:Arial,sans-serif;text-size-adjust:100%;word-break:normal;overflow-wrap:anywhere;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:default;height:24px;max-width:100%;min-width:40px;text-align:left;font-size:13px;color:#f7f7f7;background:linear-gradient(to top,#333,#4c4c4c)}._umenu_11xdg_1:focus{outline:#b4b4b4 solid 3px;z-index:10}._umenu_11xdg_1>div{outline:0}._umenu_11xdg_1>div p{line-height:24px;margin:0;padding:0 22px 0 8px;text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._umenu_11xdg_1>div svg{height:24px;position:absolute;top:0;right:5px}._umenu_11xdg_1 ul{height:fit-content;margin:0;padding:0;position:absolute;top:24px;left:0;z-index:10;outline:0;list-style:none;overflow:hidden;background:#393939;border:1px solid black;border-radius:4px}._umenu_11xdg_1 ul li{min-height:13px;padding:5px 20px;word-break:normal;overflow-wrap:anywhere;text-align:justify;outline:0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { jsx as h, jsxs as z, Fragment as K } from "react/jsx-runtime";
import * as w from "react";
import { useRef as C, useState as E, useEffect as k, createElement as R, useMemo as U, useCallback as P } from "react";
const A = "_bang_s45ht_1", F = {
bang: A
}, W = (i) => /* @__PURE__ */ w.createElement("svg", { xmlSpace: "preserve", style: {
enableBackground: "new 0 0 96 96"
}, viewBox: "0 0 96 96", x: "0px", y: "0px", ...i }, /* @__PURE__ */ w.createElement("g", null, /* @__PURE__ */ w.createElement("path", { d: "M95.97,47.99c0,15.39-0.02,30.78,0.03,46.18C96,96,96,96,96,96c-30.87-0.07-65.13-0.05-96,0c0,0,0-0.36,0-1.7 C0.05,63.44,0.04,30.87,0,0c0,0,0.16,0,1.62,0c30.96,0.06,61.92,0.05,92.87,0.01C95.8,0.01,96,0,96,0 C95.96,15.47,95.97,32.52,95.97,47.99z M48.01,80.93c18.7-0.69,32.83-14.49,32.79-33c-0.05-18.45-14.08-32.62-32.67-32.72 c-18.37-0.09-32.86,13.9-32.91,32.73C15.16,66.47,29.34,80.25,48.01,80.93z", style: {
fill: "#333333"
} }), /* @__PURE__ */ w.createElement("path", { d: "M48.01,80.93c-18.67-0.68-32.85-14.46-32.79-32.99c0.05-18.83,14.54-32.82,32.91-32.73 c18.59,0.1,32.63,14.26,32.67,32.72C80.84,66.43,66.71,80.24,48.01,80.93z M72.95,48.07c-0.72-14.02-10.13-24.68-24.75-24.84 c-14.1-0.15-24.89,10.01-24.97,24.7c-0.07,14.02,9.97,24.66,24.59,24.84C61.85,72.94,72.19,62.67,72.95,48.07z", style: {
fill: "#595959"
} }), /* @__PURE__ */ w.createElement("path", { d: "M72.95,48.07c-0.76,14.6-11.09,24.87-25.13,24.7C33.2,72.59,23.15,61.95,23.23,47.93 c0.08-14.69,10.87-24.85,24.97-24.7C62.81,23.39,72.23,34.05,72.95,48.07z M48.1,62.45c8.32-0.57,14.23-6.08,14.21-14.49 c-0.02-8.67-6.25-14.32-14.29-14.32c-8.45,0.01-14.48,6.18-14.33,14.51C33.85,56.96,40.13,62.02,48.1,62.45z", style: {
fill: "#333333"
} }))), be = ({
ariaLabel: i = "bang",
ariaPressed: o = null,
onClick: f = () => {
}
}) => {
const r = C(null), p = () => {
c(!0), f();
}, [n, c] = E(!1);
return k(() => {
const l = () => {
c(!1);
}, a = (u) => {
u.cancelable && (u.preventDefault(), c(!0), f());
};
r.current && (window.addEventListener("mouseup", l), r.current.addEventListener("touchstart", a));
const t = r.current;
return () => {
t && (t.removeEventListener("touchstart", a), window.removeEventListener("mouseup", l));
};
}, [f]), /* @__PURE__ */ h(
"div",
{
"aria-label": i,
...o !== null && {
"aria-pressed": o
},
className: F.bang,
ref: r,
role: "button",
tabIndex: 0,
onKeyDown: (l) => {
(l.key === "Enter" || l.key === " ") && (l.preventDefault(), n || p());
},
onKeyUp: (l) => {
(l.key === "Enter" || l.key === " ") && n && (l.preventDefault(), c(!1));
},
onMouseDown: (l) => {
l.button === 0 && p();
},
onTouchCancel: () => {
c(!1);
},
onTouchEnd: () => {
c(!1);
},
children: /* @__PURE__ */ h(
W,
{
style: {
background: n ? "radial-gradient(10px circle at center, #cee5e8 50%, #333333 50%)" : "#333333"
},
tabIndex: -1
}
)
}
);
}, Y = "_ezdac_qh7op_1", j = {
ezdac: Y
}, O = (i) => /* @__PURE__ */ w.createElement("svg", { xmlSpace: "preserve", style: {
enableBackground: "new 0 0 180 180"
}, viewBox: "0 0 180 180", x: "0px", y: "0px", ...i }, /* @__PURE__ */ w.createElement("g", null, /* @__PURE__ */ w.createElement("path", { d: "M0.05,179.95c0-59.3,0.01-118.6-0.05-177.91C0,0.34,0.34,0,2.05,0c58.64,0.06,117.27,0.06,175.91,0 c1.71,0,2.05,0.34,2.05,2.05c-0.06,58.64-0.06,117.27,0,175.91c0,1.71-0.34,2.05-2.05,2.05C118.65,179.94,59.35,179.95,0.05,179.95 z M95.94,90.13c0.01,0,0.02,0,0.04,0c0-17.23,0.01-34.46-0.03-51.69c0-0.63,0.5-1.57-0.57-1.87c-0.79-0.22-1.37,0.21-1.95,0.77 c-2.2,2.11-4.44,4.19-6.71,6.22c-7.59,6.8-15.24,13.54-22.79,20.39c-0.98,0.89-1.92,1.12-3.1,1.12 c-6.24-0.01-12.49,0.06-18.73-0.03c-4.03-0.06-6.38,3.02-6.43,6.3c-0.18,12.4-0.06,24.8,0.07,37.2c0.04,4.03,2.7,6.38,6.74,6.39 c6.08,0.01,12.15,0.07,18.23,0.02c1.43-0.01,2.44,0.35,3.47,1.4c2.14,2.18,4.42,4.21,6.7,6.23c7.37,6.55,14.77,13.08,22.14,19.62 c0.74,0.66,1.41,1.66,2.51,1.11c0.88-0.44,0.38-1.49,0.38-2.24C95.95,124.09,95.94,107.11,95.94,90.13z M144.45,92.22 c0-2,0.29-4.05-0.05-5.99c-2.23-13.03-9.22-22.98-19.95-30.51c-1.26-0.88-1.95-0.68-2.65,0.33c-1.17,1.69-2.49,3.23-3.83,4.78 c-1.98,2.29-1.97,3.05,0.36,4.72c3.36,2.41,6.41,5.1,8.87,8.43c4.74,6.41,7.22,13.71,6.14,21.54c-1.14,8.28-5.35,15.23-12.08,20.47 c-1.36,1.06-2.61,2.26-3.91,3.38c-0.87,0.75-1.18,1.41-0.27,2.49c1.79,2.1,3.41,4.35,5.12,6.53c0.67,0.85,1.35,0.69,2.1,0 c1.02-0.95,2.1-1.83,3.19-2.7C138.31,117.15,144.38,106.21,144.45,92.22z M129.48,91.59c0.14-2.14-0.22-4.44-1.01-6.71 c-2.58-7.42-8.29-12.43-13.61-17.74c-1.06-1.06-2.2-0.91-2.93,0.25c-1.35,2.14-3.3,3.68-5.03,5.44c-1.06,1.08-1.21,1.88,0.01,2.83 c2.86,2.23,5.46,4.73,7.62,7.65c2.3,3.12,4.62,6.23,3.48,10.55c-1.18,4.46-3.93,7.85-7.44,10.56c-1.69,1.31-2.83,3.19-4.79,4.21 c-0.59,0.31-0.46,1.34,0.11,1.97c1.88,2.07,3.78,4.13,5.65,6.21c0.89,0.99,1.57,0.71,2.49-0.07c2.98-2.5,5.8-5.17,8.43-8.03 C126.83,103.96,129.65,98.51,129.48,91.59z M113.98,91.96c0.15-8.4-5.32-11.5-11.39-12.89c-2.79-0.64-3.04-0.25-3.09,2.61 c-0.01,0.74-0.28,1.46-0.35,2.16c-0.21,1.88-0.34,3.85,0,5.69c0.15,0.82,1.82,0.69,2.71,1.14c1,0.51,1.24,1.38,0.39,2.33 c-0.67,0.75-1.46,1.35-2.46,1.49c-1.09,0.15-1.43,0.83-1.26,1.74c0.52,2.72,1.02,5.45,0.96,8.23c-0.03,1.22,0.79,0.95,1.5,1.05 C106.61,106.29,114.79,98.38,113.98,91.96z", style: {
fill: "#333333"
} }))), we = ({
ariaLabel: i = "ezdac",
setValue: o = !1,
onClick: f = () => {
}
}) => {
const r = C(null), [p, n] = E(o);
k(() => {
n(o);
}, [o]);
const c = () => {
n(!p), f(p);
}, [l, a] = E(!1);
return k(() => {
const t = (x) => {
x.cancelable && (x.preventDefault(), c());
};
r.current?.addEventListener("touchstart", t);
const u = r.current;
return () => {
u?.removeEventListener("touchstart", t);
};
}), /* @__PURE__ */ h(
"div",
{
"aria-checked": p,
"aria-label": i,
className: j.ezdac,
ref: r,
role: "switch",
tabIndex: 0,
onKeyDown: (t) => {
(t.key === "Enter" || t.key === " ") && (t.preventDefault(), l || (a(!0), c()));
},
onKeyUp: (t) => {
(t.key === "Enter" || t.key === " ") && l && (t.preventDefault(), a(!1));
},
onMouseDown: (t) => {
t.button === 0 && c();
},
children: /* @__PURE__ */ h(
O,
{
style: {
background: p ? "radial-gradient(40px circle at center,#cee5e8 50%,#333333 50%)" : "#595959"
},
tabIndex: -1
}
)
}
);
}, X = "_message_3svzp_1", H = {
message: X
}, xe = ({
ariaLabel: i = "message",
ariaPressed: o = null,
text: f = "",
onClick: r = () => {
}
}) => {
const p = C(null), n = () => {
l(!0), r();
}, [c, l] = E(!1);
return k(() => {
const a = () => {
l(!1);
}, t = (x) => {
x.cancelable && (x.preventDefault(), l(!0), r());
};
p.current && (window.addEventListener("mouseup", a), p.current.addEventListener("touchstart", t));
const u = p.current;
return () => {
u && (u.removeEventListener("touchstart", t), window.removeEventListener("mouseup", a));
};
}, [r]), /* @__PURE__ */ h(
"div",
{
"aria-label": i,
...o !== null && {
"aria-pressed": o
},
className: H.message,
ref: p,
role: "button",
tabIndex: 0,
onKeyDown: (a) => {
(a.key === "Enter" || a.key === " ") && (a.preventDefault(), c || n());
},
onKeyUp: (a) => {
(a.key === "Enter" || a.key === " ") && c && (a.preventDefault(), l(!1));
},
onMouseDown: (a) => {
a.button === 0 && n();
},
onTouchCancel: () => {
l(!1);
},
onTouchEnd: () => {
l(!1);
},
children: /* @__PURE__ */ h(
"p",
{
style: {
padding: c ? "6px 4px 4px 6px" : "5px 5px"
},
tabIndex: -1,
children: f
}
)
}
);
}, G = (i) => /* @__PURE__ */ w.createElement("svg", { xmlSpace: "preserve", style: {
enableBackground: "new 0 0 135.69 441"
}, viewBox: "0 0 135.69 441", x: "0px", y: "0px", ...i }, /* @__PURE__ */ w.createElement("g", null, /* @__PURE__ */ w.createElement("path", { d: "M135.24,0c0,0,0,60.56-67.62,60.56S0,0,0,0s30.27,0,67.62,0S135.24,0,135.24,0z", style: {
fill: "#FDB7AA"
} }), /* @__PURE__ */ w.createElement("path", { d: "M116.27,0.2c0,0,0,43.53-48.42,43.53S19.42,0.2,19.42,0.2S41.16,0,67.9,0S116.27,0.2,116.27,0.2z", style: {
fill: "#333333"
} }))), q = "_object_1bmbv_1", J = {
object: q
}, me = ({ inactive: i = !1, text: o = "" }) => /* @__PURE__ */ z("div", { className: J.object, style: { background: i ? "#b49d7c" : "#808080" }, children: [
!i && o && /* @__PURE__ */ h(G, {}),
/* @__PURE__ */ h("p", { style: { background: i ? "#977e6d" : "#333333" }, children: o })
] }), Q = "_playbar_1xeb7_1", Z = {
playbar: Q
}, V = (i) => /* @__PURE__ */ w.createElement("svg", { xmlSpace: "preserve", style: {
enableBackground: "new 0 0 84 84"
}, viewBox: "0 0 84 84", x: "0px", y: "0px", ...i }, /* @__PURE__ */ w.createElement("g", null, /* @__PURE__ */ w.createElement("path", { d: "M38.52,42c0,6.82-0.07,16.17,0.05,22.98c0,0-0.68-0.01-2.58-0.01c-3.57,0.01-7.15-0.02-10.73-0.01 c-2.21,0-2.21,0-2.21,0c0.05-13.89,0-32.06,0-45.95c0,0,0,0,2.21,0.02c3.58,0.03,7.15,0,10.73-0.01c2.13-0.01,2.58-0.01,2.58-0.01 C38.44,25.84,38.52,35.18,38.52,42z" }), /* @__PURE__ */ w.createElement("path", { d: "M60.91,42c0,6.82-0.07,16.17,0.05,22.98c0,0-0.68-0.01-2.58-0.01c-3.57,0.01-7.15-0.02-10.73-0.01 c-2.21,0-2.21,0-2.21,0c0.05-13.89,0-32.06,0-45.95c0,0,0,0,2.21,0.02c3.58,0.03,7.15,0,10.73-0.01c2.13-0.01,2.58-0.01,2.58-0.01 C60.84,25.83,60.91,35.18,60.91,42z" }))), ee = (i) => /* @__PURE__ */ w.createElement("svg", { xmlSpace: "preserve", style: {
enableBackground: "new 0 0 84 84"
}, viewBox: "0 0 84 84", x: "0px", y: "0px", ...i }, /* @__PURE__ */ w.createElement("g", null, /* @__PURE__ */ w.createElement("path", { d: "M24.19,19.01C36.3,26.7,48.03,34.14,60.18,41.85c-12.19,7.83-23.89,15.34-35.99,23.11 C24.19,49.55,24.19,34.64,24.19,19.01z" }))), te = ({ ariaLabel: i, inactive: o, setPlaying: f, onPlay: r }) => {
const p = C(null), [n, c] = E(f);
k(() => {
c(f);
}, [f]);
const l = () => {
t(!0), o || (c(!n), r(!n));
}, [a, t] = E(!1);
return k(() => {
const u = () => {
t(!1);
}, x = (s) => {
s.cancelable && (s.preventDefault(), l());
};
p.current && (window.addEventListener("mouseup", u), p.current.addEventListener("touchstart", x));
const y = p.current;
return () => {
y && (window.removeEventListener("mouseup", u), y.removeEventListener("touchstart", x));
};
}), /* @__PURE__ */ h(
"div",
{
"aria-checked": n,
"aria-disabled": o,
"aria-label": `${i}: play button`,
className: "playbutton",
ref: p,
role: "switch",
style: {
fill: o ? "#808080" : "#cee5e8",
background: a ? "linear-gradient(to top, rgb(51, 51, 51) 0%, rgb(76, 76, 76) 100%)" : "inherit"
},
tabIndex: 0,
onKeyDown: (u) => {
(u.key === "Enter" || u.key === " ") && (u.preventDefault(), a || l());
},
onKeyUp: (u) => {
(u.key === "Enter" || u.key === " ") && a && t(!1);
},
onMouseDown: (u) => {
u.button === 0 && l();
},
onTouchCancel: () => {
t(!1);
},
onTouchEnd: () => {
t(!1);
},
children: /* @__PURE__ */ h("div", { tabIndex: -1, children: R(!o && n ? V : ee, {
tabIndex: -1
}) })
}
);
}, ne = ({ ariaLabel: i, inactive: o, setValue: f, width: r, onChange: p }) => {
const c = C(null), [l, a] = E(!1), [t, u] = E(o ? 0 : Math.max(Math.min(f, 1), 0) * 1e4);
k(() => {
u(o ? 0 : Math.max(Math.min(f, 1), 0) * 1e4);
}, [o, f]);
const [x, y] = E(r);
k(() => {
const e = () => {
c.current?.parentElement && y(Math.min(r, c.current.parentElement.getBoundingClientRect().width));
};
return window.addEventListener("resize", e), e(), () => {
window.removeEventListener("resize", e);
};
}, [r]), k(() => {
const e = () => {
a(!1);
};
return window.addEventListener("mouseup", e), () => {
window.removeEventListener("mouseup", e);
};
}, []);
const s = (e) => {
u(e), p(e / 1e4);
};
return /* @__PURE__ */ z(K, { children: [
/* @__PURE__ */ h("hr", {}),
/* @__PURE__ */ h(
"svg",
{
style: {
left: `${((x - 37) * (t / 1e4) + 16).toString()}px`
},
version: "1.1",
viewBox: "0 0 84 84",
xmlSpace: "preserve",
x: "0px",
y: "0px",
children: /* @__PURE__ */ z("g", { children: [
/* @__PURE__ */ h(
"path",
{
d: "M42.13,67.02C28.24,67.05,16.97,55.8,16.98,41.93C17,28.19,28.21,16.98,41.98,16.94 c13.89-0.03,25.17,11.22,25.15,25.08C67.1,55.78,55.89,66.99,42.13,67.02z M42.14,25.02c-9.35-0.03-17.07,7.62-17.07,16.94 c-0.01,9.23,7.57,16.91,16.77,16.99c9.37,0.08,17.14-7.51,17.2-16.81C59.1,32.78,51.47,25.05,42.14,25.02z",
style: {
fill: o ? "#808080" : "#cee5e8"
}
}
),
/* @__PURE__ */ h(
"path",
{
d: "M42.14,25.02c9.33,0.03,16.96,7.76,16.9,17.11c-0.06,9.3-7.83,16.9-17.2,16.81c-9.2-0.08-16.78-7.76-16.77-16.99 C25.08,32.64,32.8,24.98,42.14,25.02z",
style: {
fill: l ? o ? "#808080" : "#cee5e8" : "none",
opacity: 0.4
}
}
)
] })
}
),
/* @__PURE__ */ h(
"div",
{
"aria-disabled": o,
"aria-label": `${i}: slider`,
"aria-orientation": "horizontal",
"aria-valuemax": 1e4,
"aria-valuemin": 0,
"aria-valuenow": t,
ref: c,
role: "slider",
tabIndex: 0,
onKeyDown: (e) => {
switch (e.key) {
case "Up":
case "ArrowUp":
case "Right":
case "ArrowRight": {
e.preventDefault(), s(Math.min(Math.round(t + 1e4 / 100), 1e4));
break;
}
case "Down":
case "ArrowDown":
case "Left":
case "ArrowLeft":
e.preventDefault(), s(Math.max(Math.round(t - 1e4 / 100), 0));
break;
case "PageUp": {
e.preventDefault(), s(Math.min(Math.round(t + 1e4 / 10), 1e4));
break;
}
case "PageDown": {
e.preventDefault(), s(Math.max(Math.round(t - 1e4 / 10), 0));
break;
}
}
},
children: /* @__PURE__ */ h("div", { tabIndex: -1, children: /* @__PURE__ */ h(
"input",
{
"aria-disabled": o,
"aria-label": `${i}: slider`,
"aria-orientation": "horizontal",
"aria-valuemax": 1e4,
"aria-valuemin": 0,
"aria-valuenow": t,
max: 1e4,
min: "0",
tabIndex: -1,
type: "range",
value: t,
onChange: (e) => {
s(+e.target.value);
},
onMouseDown: () => {
a(!0);
},
onTouchCancel: () => {
a(!1);
},
onTouchEnd: () => {
a(!1);
},
onTouchMove: (e) => {
if (c.current && e.targetTouches[0]) {
const d = c.current.getBoundingClientRect();
s(
Math.max(
Math.min(
Math.round(
(e.targetTouches[0].clientX - (d.x + 5)) / ((d.width - 10) / 1e4)
),
1e4
),
0
)
);
}
},
onTouchStart: () => {
a(!0);
}
}
) })
}
)
] });
}, Ee = ({
ariaLabel: i = "playbar",
inactive: o = !1,
setPlaying: f = !1,
setValue: r = 0,
width: p = 200,
onChange: n = () => {
},
onPlay: c = () => {
}
}) => (p = Math.max(p, 100), /* @__PURE__ */ z("div", { className: Z.playbar, style: { width: p }, children: [
/* @__PURE__ */ h(te, { ariaLabel: i, inactive: o, setPlaying: f, onPlay: c }),
/* @__PURE__ */ h(ne, { ariaLabel: i, inactive: o, setValue: r, width: p, onChange: n })
] })), re = "_radiogroup_11vaz_1", ce = {
radiogroup: re
}, oe = (i) => /* @__PURE__ */ w.createElement("svg", { xmlSpace: "preserve", style: {
enableBackground: "new 0 0 72 72"
}, viewBox: "0 0 72 72", x: "0px", y: "0px", ...i }, /* @__PURE__ */ w.createElement("g", null, /* @__PURE__ */ w.createElement("path", { d: "M72,72c-24,0-48,0-72,0C0,48,0,24,0,0c24,0,48,0,72,0C72,24,72,48,72,72z M56.4,36.1 c0-11.5-8.9-20.7-20.4-20.7c-13.1,0-20.7,11-20.6,20.6c0,12.6,11.8,20.7,20.6,20.7C48.5,56.7,56.5,46.1,56.4,36.1z", style: {
fill: "#333333"
} }))), ke = ({
ariaLabel: i = "radiogroup",
items: o = ["", ""],
spacing: f = 20,
setValue: r = 0,
onClick: p = () => {
}
}) => {
const n = C(null), [c, l] = E(r);
k(() => {
l(r);
}, [r]);
const a = (e) => {
e = e === c ? 0 : e, l(e), p(e);
}, [t, u] = E(!1), [x, y] = E(r), s = (e) => {
y(e), (n.current?.childNodes[e]).focus();
};
return k(() => {
const e = (m) => {
if (m.cancelable && n.current && m.targetTouches[0]) {
m.preventDefault();
let D = null;
for (let S = 0; S < n.current.childNodes.length; S++) {
const $ = n.current.childNodes[S].getBoundingClientRect();
if (m.targetTouches[0].clientY > $.top && m.targetTouches[0].clientY < $.bottom) {
D = S + 1;
break;
}
}
D !== null && a(D);
}
};
n.current?.addEventListener("touchstart", e);
const d = n.current;
return () => {
d?.removeEventListener("touchstart", e);
};
}), /* @__PURE__ */ h("div", { "aria-label": i, className: ce.radiogroup, ref: n, role: "radiogroup", children: o.map((e, d) => (d++, /* @__PURE__ */ z(
"div",
{
"aria-checked": d === c,
"aria-label": e || `${i} button ${d.toString()}`,
role: "radio",
style: { height: f > 16 ? `${f.toString()}px` : "16px" },
tabIndex: d === Math.max(c, 1) ? 0 : -1,
onFocus: () => {
y(d - 1);
},
onKeyDown: (m) => {
switch (m.key) {
case "Enter":
case " ": {
m.preventDefault(), t || (u(!0), a(d));
break;
}
case "Up":
case "ArrowUp": {
m.preventDefault(), s(x < 1 ? o.length - 1 : x - 1);
break;
}
case "Down":
case "ArrowDown": {
m.preventDefault(), s((x + 1) % o.length);
break;
}
}
},
onKeyUp: (m) => {
(m.key === "Enter" || m.key === " ") && t && (m.preventDefault(), u(!1));
},
onMouseDown: (m) => {
m.button === 0 && a(d);
},
children: [
e && /* @__PURE__ */ h(
"p",
{
style: {
lineHeight: f > 16 ? `${f.toString()}px` : "16px",
paddingRight: e ? "10px" : 0
},
tabIndex: -1,
children: e
}
),
/* @__PURE__ */ h(
"div",
{
style: {
background: d === c ? "radial-gradient(18px circle at center,#cee5e8 50%,#333333 50%)" : "radial-gradient(18px circle at center,#595959 50%,#333333 50%)"
},
tabIndex: -1,
children: /* @__PURE__ */ h(oe, {})
}
)
]
},
d.toString()
))) });
}, ae = "_slider_vkjco_1", le = {
slider: ae
}, De = ({
ariaLabel: i = "slider",
setValue: o = 0,
width: f = 200,
onChange: r = () => {
}
}) => {
const n = C(null), c = U(() => ({
positive: "#cee5e8",
negative: "#595959",
off: "#818d8f"
}), []), l = P(
(s) => {
if (s !== 0) {
if (n.current) {
const d = (n.current.getBoundingClientRect().width - 10 - 6) * s / 1e4;
x(`linear-gradient(90deg,
${c.negative},
${c.negative} 0px,
${c.positive} 0px,
${c.positive} ${(d - 1).toString()}px,
${c.negative} ${(d - 1).toString()}px,
${c.negative} ${d.toString()}px,
${c.positive} ${d.toString()}px,
${c.positive} ${(d + 6).toString()}px,
${c.negative} ${(d + 6).toString()}px
)`), t(s);
}
} else
x(
`linear-gradient(90deg, ${c.off}, ${c.off} 6px, ${c.negative} 6px)`
), t(0);
},
[c]
), [a, t] = E(Math.max(Math.min(o, 1), 0) * 1e4);
k(() => {
l(Math.max(Math.min(o, 1), 0) * 1e4);
}, [o, l]);
const [u, x] = E(
`linear-gradient(90deg, ${c.off}, ${c.off} 6px, ${c.negative} 6px)`
);
k(() => {
const s = (d) => {
d.cancelable && (d.preventDefault(), y(d));
};
n.current?.addEventListener("touchstart", s);
const e = n.current;
return () => {
e?.removeEventListener("touchstart", s);
};
});
const y = (s) => {
if (n.current && s.targetTouches[0]) {
const e = n.current.getBoundingClientRect(), d = Math.max(
Math.min(Math.round((s.targetTouches[0].clientX - (e.x + 5)) / ((e.width - 10) / 1e4)), 1e4),
0
);
l(d), r(d / 1e4);
}
};
return /* @__PURE__ */ h(
"div",
{
className: le.slider,
"aria-label": i,
"aria-orientation": "horizontal",
"aria-valuemax": 1e4,
"aria-valuemin": 0,
"aria-valuenow": a,
ref: n,
role: "slider",
tabIndex: 0,
onKeyDown: (s) => {
let e;
switch (s.key) {
case "Up":
case "ArrowUp":
case "Right":
case "ArrowRight": {
s.preventDefault(), e = Math.min(Math.round(a + 1e4 / 100), 1e4), l(e), r(e / 1e4);
break;
}
case "Down":
case "ArrowDown":
case "Left":
case "ArrowLeft": {
s.preventDefault(), e = Math.max(Math.round(a - 1e4 / 100), 0), l(e), r(e / 1e4);
break;
}
case "PageUp": {
s.preventDefault(), e = Math.min(Math.round(a + 1e4 / 10), 1e4), l(e), r(e / 1e4);
break;
}
case "PageDown": {
s.preventDefault(), e = Math.max(Math.round(a - 1e4 / 10), 0), l(e), r(e / 1e4);
break;
}
}
},
children: /* @__PURE__ */ h("div", { tabIndex: -1, children: /* @__PURE__ */ h(
"input",
{
"aria-label": i,
"aria-orientation": "horizontal",
"aria-valuemax": 1e4,
"aria-valuemin": 0,
"aria-valuenow": a,
max: 1e4,
min: 0,
style: { background: u, width: f },
tabIndex: -1,
type: "range",
value: a,
onChange: (s) => {
const e = +s.target.value;
l(e), r(e / 1e4);
},
onTouchMove: (s) => {
y(s);
}
}
) })
}
);
}, se = "_textbutton_yxdt1_1", ie = {
textbutton: se
}, Me = ({
ariaLabel: i = "textbutton",
ariaPressed: o = null,
inactive: f = !1,
mode: r = !1,
setValue: p = !1,
text: n = "Button",
toggleText: c = "Button On",
onChange: l = () => {
},
onClick: a = () => {
}
}) => {
const t = C(null), u = {
clicked: "#96aaac",
inactive: "#afbabb",
neutral: "#cee5e8",
toggleOff: "#808080",
toggleOffClicked: "#6c6c6c",
toggleOffInactive: "#878787"
}, x = {
neutral: "linear-gradient(to top, rgb(51, 51, 51) 0%, rgb(76, 76, 76) 100%)",
hover: "linear-gradient(to top, rgb(51, 51, 51) 0%, rgb(81, 81, 81) 100%)",
inactive: "linear-gradient(to top, rgb(138, 138, 138) 0%, rgb(151, 151, 151) 100%)"
}, [y, s] = E(r && p);
k(() => {
s(r && p);
}, [r, p]);
const [e, d] = E(!1), [m, D] = E(!1), [S, $] = E(!1), g = (v) => {
f || (s(v), a(), r && l(v));
};
return k(() => {
const v = (b) => {
if (!f && t.current) {
const M = t.current.getBoundingClientRect();
b.clientX > M.left && b.clientX < M.right && b.clientY > M.top && b.clientY < M.bottom ? D(!0) : $(!0);
}
}, _ = () => {
$(!1), D(!1);
}, N = (b) => {
b.cancelable && (b.preventDefault(), d(!0), D(!0));
};
t.current && (window.addEventListener("mousedown", v), window.addEventListener("mouseup", _), t.current.addEventListener("touchstart", N));
const L = t.current;
return () => {
L && (window.removeEventListener("mousedown", v), window.removeEventListener("mouseup", _), L.removeEventListener("touchstart", N));
};
}), /* @__PURE__ */ h(
"div",
{
...r && !f && {
"aria-checked": y
},
...!(r || f) && o !== null && {
"aria-pressed": o
},
...!f && {
"aria-label": i,
role: r ? "switch" : "button",
tabIndex: 0,
onKeyDown: (v) => {
(v.key === "Enter" || v.key === " ") && (v.preventDefault(), m || (d(!0), D(!0)));
},
onKeyUp: (v) => {
(v.key === "Enter" || v.key === " ") && m && (v.preventDefault(), d(!1), D(!1), g(r && !y));
}
},
className: ie.textbutton,
ref: t,
style: {
background: f ? x.inactive : e && !S ? x.hover : x.neutral
},
onClick: () => {
g(r && !y);
},
onMouseEnter: () => {
f || d(!0);
},
onMouseLeave: () => {
f || d(!1);
},
onTouchEnd: (v) => {
v.preventDefault(), d(!1), D(!1), g(r && !y);
},
onTouchCancel: () => {
d(!1), D(!1);
},
children: /* @__PURE__ */ h(
"p",
{
style: {
color: f ? y ? u.inactive : r ? u.toggleOffInactive : u.inactive : m && e ? y && r ? u.toggleOffClicked : u.clicked : y ? u.neutral : r ? u.toggleOff : u.neutral
},
tabIndex: -1,
children: r ? y ? m && e ? n : c : m && e ? c : n : n
}
)
}
);
}, ue = "_toggle_u7ou7_1", de = {
toggle: ue
}, fe = (i) => /* @__PURE__ */ w.createElement("svg", { xmlSpace: "preserve", style: {
enableBackground: "new 0 0 96 96"
}, viewBox: "0 0 96 96", x: "0px", y: "0px", ...i }, /* @__PURE__ */ w.createElement("g", null, /* @__PURE__ */ w.createElement("path", { d: "M96,96c-32,0-64,0-96,0C0,64,0,32,0,0c32,0,64,0,96,0C96,32,96,64,96,96z M67.78,22.33C61.26,28.9,54.71,35.48,47.9,42.34 c-6.76-6.78-13.32-13.35-19.71-19.76c-1.98,1.88-3.87,3.69-6.14,5.85c6.66,6.61,13.25,13.16,20.31,20.16 c-6.61,6.58-13.19,13.13-19.61,19.51c1.7,1.73,3.49,3.55,5.45,5.54c6.53-6.55,13.09-13.12,19.92-19.97 c6.74,6.75,13.29,13.33,19.69,19.73c1.98-1.88,3.87-3.69,6.14-5.85c-6.66-6.62-13.25-13.16-20.31-20.16 c6.61-6.58,13.19-13.13,19.61-19.52C71.55,26.16,69.76,24.34,67.78,22.33z", style: {
fill: "#333333"
} }))), Ce = ({
ariaLabel: i = "toggle",
setValue: o = !1,
onClick: f = () => {
}
}) => {
const r = C(null), [p, n] = E(o);
k(() => {
n(o);
}, [o]);
const c = () => {
n(!p), f(p);
}, [l, a] = E(!1);
return k(() => {
const t = (x) => {
x.cancelable && (x.preventDefault(), c());
};
r.current?.addEventListener("touchstart", t);
const u = r.current;
return () => {
u?.removeEventListener("touchstart", t);
};
}), /* @__PURE__ */ h(
"div",
{
"aria-checked": p,
"aria-label": i,
className: de.toggle,
ref: r,
role: "switch",
tabIndex: 0,
onKeyDown: (t) => {
(t.key === "Enter" || t.key === " ") && (t.preventDefault(), l || (a(!0), c()));
},
onKeyUp: (t) => {
(t.key === "Enter" || t.key === " ") && l && (t.preventDefault(), a(!1));
},
onMouseDown: (t) => {
t.button === 0 && c();
},
children: /* @__PURE__ */ h(
fe,
{
style: {
background: p ? "radial-gradient(40px circle at center,#cee5e8 50%,#333333 50%)" : "#595959"
},
tabIndex: -1
}
)
}
);
}, pe = "_umenu_11xdg_1", ge = {
umenu: pe
}, he = (i) => /* @__PURE__ */ w.createElement("svg", { xmlSpace: "preserve", style: {
enableBackground: "new 0 0 44.5 88"
}, viewBox: "0 0 44 88", x: "0px", y: "0px", ...i }, /* @__PURE__ */ w.createElement("g", null, /* @__PURE__ */ w.createElement("path", { d: "M21.8,51.8c-5.27-5.3-10.92-10.99-16.48-16.59c10.98,0,22.31,0,33.15,0C32.98,40.67,27.27,46.35,21.8,51.8z", style: {
fill: "#F7F7F7"
} }))), Se = ({
ariaLabel: i = "umenu",
items: o = [],
width: f = 100,
setValue: r = 0,
onChange: p = () => {
}
}) => {
const n = C(null), [c, l] = E(r < o.length && r >= 0 ? r : 0);
k(() => {
l((g) => r < o.length && r >= 0 ? r : g);
}, [o, r]);
const [a, t] = E(!1), [u, x] = E("fit-content"), [y, s] = E(null), [e, d] = E(!1);
k(() => {
const g = (b) => {
if (b.cancelable && n.current) {
let M = null;
n.current.childNodes[1]?.childNodes.forEach((B, I) => {
const T = B.getBoundingClientRect();
b.targetTouches[0] && b.targetTouches[0].clientY > T.top && b.targetTouches[0].clientY < T.bottom && (M = I);
}), s(M);
}
}, v = (b) => {
b.cancelable && (b.preventDefault(), m(null));
}, _ = () => {
if (a && n.current) {
const b = n.current.getBoundingClientRect(), M = n.current.childNodes[1].getBoundingClientRect();
(b.top > window.innerHeight || M.bottom < 0 || b.left > window.innerWidth || Math.max(b.right, M.right) < 0) && (t(!1), s(null));
}
}, N = (b) => {
if (n.current) {
const M = n.current.getBoundingClientRect(), B = n.current.childNodes[1].getBoundingClientRect();
if (b.clientX > M.left && b.clientX < M.right && b.clientY > M.top && b.clientY < M.bottom)
return;
if (a) {
if (b.clientX > B.left && b.clientX < B.right && b.clientY > B.top && b.clientY < B.bottom)
return;
t(!1), s(null);
}
n.current.blur();
}
};
n.current && (n.current.childNodes[0].addEventListener("touchstart", v), n.current.childNodes[1].addEventListener("touchstart", g), window.addEventListener("resize", D), window.addEventListener("mousedown", N), window.addEventListener("scroll", _));
const L = n.current;
return () => {
L && (L.childNodes[0].removeEventListener("touchstart", v), L.childNodes[1].removeEventListener("touchstart", g), window.removeEventListener("mousedown", N), window.removeEventListener("resize", D), window.removeEventListener("scroll", _));
};
});
const m = (g) => {
t(!a), s(g), a && (D(), g !== null && (n.current?.childNodes[1]?.childNodes[g]).focus());
}, D = () => {
if (n.current) {
const g = n.current.parentNode.getBoundingClientRect().right - n.current.getBoundingClientRect().left;
x("fit-content"), g < n.current.childNodes[1].offsetWidth && x(`${(g - 2).toString()}px`);
}
}, S = (g) => {
if (y !== null)
s((y + o.length + g) % o.length), (n.current?.childNodes[1]?.childNodes[y]).focus();
else {
const v = g === -1 ? o.length - 1 : 0;
s(v), (n.current?.childNodes[1]?.childNodes[v]).focus();
}
}, $ = (g, v) => {
l(g), t(!1), p(g), v && n.current?.focus();
};
return /* @__PURE__ */ z(
"div",
{
className: ge.umenu,
ref: n,
style: { width: `${Math.max(50, f).toString()}px` },
...o.length > 0 && {
"aria-expanded": a,
"aria-haspopup": "listbox",
"aria-label": `${i}: ${o[c] ?? "nothing"} selected`,
role: "button",
tabIndex: 0,
onKeyDown: (g) => {
switch (g.key) {
case "Enter":
case " ": {
g.preventDefault(), e || (d(!0), a ? y !== null ? $(y, !0) : m(null) : m(0));
break;
}
case "Esc":
case "Escape": {
g.preventDefault(), t(!1), s(null), n.current?.focus();
break;
}
case "Home":
case "End": {
g.preventDefault(), s(g.key === "Home" ? 0 : o.length - 1), y !== null && (n.current?.childNodes[1]?.childNodes[y]).focus();
break;
}
case "Up":
case "ArrowUp": {
g.preventDefault(), a && S(-1);
break;
}
case "Down":
case "ArrowDown": {
g.preventDefault(), a && S(1);
break;
}
case "Tab": {
a && t(!1);
break;
}
}
},
onKeyUp: (g) => {
(g.key === "Enter" || g.key === " ") && e && (g.preventDefault(), d(!1));
}
},
children: [
/* @__PURE__ */ z(
"div",
{
tabIndex: -1,
onMouseDown: (g) => {
g.button === 0 && m(null);
},
children: [
/* @__PURE__ */ h("p", { children: o[c] }),
/* @__PURE__ */ h(he, {})
]
}
),
/* @__PURE__ */ h(
"ul",
{
"aria-label": `${i}: ${o[c] ?? "nothing"} selected`,
role: "listbox",
tabIndex: -1,
style: {
display: a && o.length > 0 ? "block" : "none",
width: u || "fit-content",
whiteSpace: u !== "fit-content" ? "normal" : "nowrap"
},
children: o.map((g, v) => /* @__PURE__ */ h(
"li",
{
"aria-selected": v === c,
role: "option",
style: {
background: y === v ? "#4c4c4c" : "inherit"
},
tabIndex: -1,
onMouseEnter: () => {
s(v);
},
onMouseLeave: () => {
s(null);
},
onClick: () => {
$(v, !1);
},
onTouchEnd: () => {
s(null);
},
children: g
},
v.toString()
))
}
)
]
}
);
};
export {
be as Bang,
we as Ezdac,
xe as Message,
me as Object,
Ee as Playbar,
ke as RadioGroup,
De as Slider,
Me as TextButton,
Ce as Toggle,
Se as Umenu
};