@telemetryos/sdk 1.7.1 → 1.7.3

package/dist/react.js

@@ -1,6 +1,6 @@
-import oe, { useEffect as w, useState as y } from "react";
+import oe, { useEffect as _, useState as E } from "react";
 import { environment as C } from "./index.js";
-var R = { exports: {} }, v = {};
+var R = { exports: {} }, k = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -10,29 +10,29 @@ var R = { exports: {} }, v = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var V;
+var D;
 function ae() {
-  if (V) return v;
-  V = 1;
-  var n = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
-  function u(l, s, c) {
+  if (D) return k;
+  D = 1;
+  var n = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function d(c, i, l) {
     var f = null;
-    if (c !== void 0 && (f = "" + c), s.key !== void 0 && (f = "" + s.key), "key" in s) {
-      c = {};
-      for (var g in s)
-        g !== "key" && (c[g] = s[g]);
-    } else c = s;
-    return s = c.ref, {
+    if (l !== void 0 && (f = "" + l), i.key !== void 0 && (f = "" + i.key), "key" in i) {
+      l = {};
+      for (var g in i)
+        g !== "key" && (l[g] = i[g]);
+    } else l = i;
+    return i = l.ref, {
       $$typeof: n,
-      type: l,
+      type: c,
       key: f,
-      ref: s !== void 0 ? s : null,
-      props: c
+      ref: i !== void 0 ? i : null,
+      props: l
     };
   }
-  return v.Fragment = i, v.jsx = u, v.jsxs = u, v;
+  return k.Fragment = t, k.jsx = d, k.jsxs = d, k;
 }
-var k = {};
+var y = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -88,27 +88,27 @@ function se() {
         }
       return null;
     }
-    function i(e) {
+    function t(e) {
       return "" + e;
     }
-    function u(e) {
+    function d(e) {
       try {
-        i(e);
+        t(e);
         var r = !1;
       } catch {
         r = !0;
       }
       if (r) {
         r = console;
-        var t = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return t.call(
+        var o = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          o
-        ), i(e);
+          a
+        ), t(e);
       }
     }
-    function l(e) {
+    function c(e) {
       if (e === T) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === j)
         return "<...>";
@@ -119,11 +119,11 @@ function se() {
         return "<...>";
       }
     }
-    function s() {
+    function i() {
       var e = A.A;
       return e === null ? null : e.getOwner();
     }
-    function c() {
+    function l() {
       return Error("react-stack-top-frame");
     }
     function f(e) {
@@ -134,34 +134,34 @@ function se() {
       return e.key !== void 0;
     }
     function g(e, r) {
-      function t() {
-        Y || (Y = !0, console.error(
+      function o() {
+        z || (z = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
       }
-      t.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: t,
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
         configurable: !0
       });
     }
-    function _() {
+    function x() {
       var e = n(this.type);
       return I[e] || (I[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function S(e, r, t, o, E, N) {
-      var a = t.ref;
+    function S(e, r, o, a, w, O) {
+      var s = o.ref;
       return e = {
         $$typeof: F,
         type: e,
         key: r,
-        props: t,
-        _owner: o
-      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
+        props: o,
+        _owner: a
+      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: _
+        get: x
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -176,69 +176,69 @@ function se() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: E
+        value: w
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: N
+        value: O
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function p(e, r, t, o, E, N) {
-      var a = r.children;
-      if (a !== void 0)
-        if (o)
-          if (re(a)) {
-            for (o = 0; o < a.length; o++)
-              x(a[o]);
-            Object.freeze && Object.freeze(a);
+    function p(e, r, o, a, w, O) {
+      var s = r.children;
+      if (s !== void 0)
+        if (a)
+          if (re(s)) {
+            for (a = 0; a < s.length; a++)
+              v(s[a]);
+            Object.freeze && Object.freeze(s);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else x(a);
+        else v(s);
       if (L.call(r, "key")) {
-        a = n(e);
+        s = n(e);
         var h = Object.keys(r).filter(function(te) {
           return te !== "key";
         });
-        o = 0 < h.length ? "{key: someKey, " + h.join(": ..., ") + ": ...}" : "{key: someKey}", D[a + o] || (h = 0 < h.length ? "{" + h.join(": ..., ") + ": ...}" : "{}", console.error(
+        a = 0 < h.length ? "{key: someKey, " + h.join(": ..., ") + ": ...}" : "{key: someKey}", U[s + a] || (h = 0 < h.length ? "{" + h.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          o,
           a,
+          s,
           h,
-          a
-        ), D[a + o] = !0);
+          s
+        ), U[s + a] = !0);
       }
-      if (a = null, t !== void 0 && (u(t), a = "" + t), f(r) && (u(r.key), a = "" + r.key), "key" in r) {
-        t = {};
+      if (s = null, o !== void 0 && (d(o), s = "" + o), f(r) && (d(r.key), s = "" + r.key), "key" in r) {
+        o = {};
         for (var P in r)
-          P !== "key" && (t[P] = r[P]);
-      } else t = r;
-      return a && g(
-        t,
+          P !== "key" && (o[P] = r[P]);
+      } else o = r;
+      return s && g(
+        o,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), S(
         e,
-        a,
-        t,
-        s(),
-        E,
-        N
+        s,
+        o,
+        i(),
+        w,
+        O
       );
     }
-    function x(e) {
+    function v(e) {
       m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === j && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
     function m(e) {
       return typeof e == "object" && e !== null && e.$$typeof === F;
     }
-    var b = oe, F = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), B = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Q = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), A = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, re = Array.isArray, O = console.createTask ? console.createTask : function() {
+    var b = oe, F = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), B = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Q = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), A = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, re = Array.isArray, N = console.createTask ? console.createTask : function() {
       return null;
     };
     b = {
@@ -246,38 +246,38 @@ React keys must be passed directly to JSX without using spread:
         return e();
       }
     };
-    var Y, I = {}, $ = b.react_stack_bottom_frame.bind(
+    var z, I = {}, Y = b.react_stack_bottom_frame.bind(
       b,
-      c
-    )(), z = O(l(c)), D = {};
-    k.Fragment = T, k.jsx = function(e, r, t) {
-      var o = 1e4 > A.recentlyCreatedOwnerStacks++;
+      l
+    )(), $ = N(c(l)), U = {};
+    y.Fragment = T, y.jsx = function(e, r, o) {
+      var a = 1e4 > A.recentlyCreatedOwnerStacks++;
       return p(
         e,
         r,
-        t,
+        o,
         !1,
-        o ? Error("react-stack-top-frame") : $,
-        o ? O(l(e)) : z
+        a ? Error("react-stack-top-frame") : Y,
+        a ? N(c(e)) : $
       );
-    }, k.jsxs = function(e, r, t) {
-      var o = 1e4 > A.recentlyCreatedOwnerStacks++;
+    }, y.jsxs = function(e, r, o) {
+      var a = 1e4 > A.recentlyCreatedOwnerStacks++;
       return p(
         e,
         r,
-        t,
+        o,
         !0,
-        o ? Error("react-stack-top-frame") : $,
-        o ? O(l(e)) : z
+        a ? Error("react-stack-top-frame") : Y,
+        a ? N(c(e)) : $
       );
     };
-  })()), k;
+  })()), y;
 }
-var U;
+var W;
 function ie() {
-  return U || (U = 1, process.env.NODE_ENV === "production" ? R.exports = ae() : R.exports = se()), R.exports;
+  return W || (W = 1, process.env.NODE_ENV === "production" ? R.exports = ae() : R.exports = se()), R.exports;
 }
-var d = ie();
+var u = ie();
 const ce = `:root {
   --background: 0 0% 100%;
   --foreground: 222.2 84% 4.9%;
@@ -338,14 +338,40 @@ const ce = `:root {
   --radius: 0.5rem;
 }
 
+/* =============================================================================
+   Container & Layout
+   ============================================================================= */
+
 .settings__container {
   padding: 16px;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   font-family: 'Rubik', sans-serif;
   font-feature-settings: "rlig" 1, "calt" 1;
+  flex-grow: 1;
 }
 
+.settings__box {
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.settings__box:last-child {
+  margin-bottom: 0;
+}
+
+.settings__divider {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 16px 0;
+}
+
+/* =============================================================================
+   Field Structure
+   ============================================================================= */
+
 .settings__field {
   margin-bottom: 24px;
 }
@@ -357,7 +383,11 @@ const ce = `:root {
   color: hsl(var(--foreground));
 }
 
-.settings__input-frame > * {
+/* =============================================================================
+   Text Inputs
+   ============================================================================= */
+
+.settings__input-frame>* {
   height: 40px;
   width: 100%;
   font-size: 14px;
@@ -368,17 +398,45 @@ const ce = `:root {
   color: hsl(var(--foreground));
 }
 
-.settings__input-frame > *:focus {
+.settings__input-frame>*:focus {
+  outline: 1px solid hsl(var(--primary));
+  outline-offset: 0;
+}
+
+.settings__input-frame>*::placeholder {
+  color: hsl(var(--muted-foreground));
+  opacity: 1;
+}
+
+.settings__textarea-frame>textarea {
+  width: 100%;
+  min-height: 80px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.4em;
+  padding: 8px 12px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  resize: vertical;
+}
+
+.settings__textarea-frame>textarea:focus {
   outline: 1px solid hsl(var(--primary));
   outline-offset: 0;
 }
 
-.settings__input-frame > *::placeholder {
+.settings__textarea-frame>textarea::placeholder {
   color: hsl(var(--muted-foreground));
   opacity: 1;
 }
 
-.settings__select-frame > select {
+/* =============================================================================
+   Selection Inputs
+   ============================================================================= */
+
+.settings__select-frame>select {
   appearance: none;
   height: 40px;
   width: 100%;
@@ -394,39 +452,67 @@ const ce = `:root {
   cursor: pointer;
 }
 
-.settings__select-frame > select:hover {
+.settings__select-frame>select:hover {
   background-color: hsl(var(--accent));
 }
 
-.settings__select-frame > select:focus {
+.settings__select-frame>select:focus {
   outline: 1px solid hsl(var(--primary));
   outline-offset: 0;
 }
 
-.settings__textarea-frame > textarea {
-  width: 100%;
-  min-height: 80px;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.4em;
-  padding: 8px 12px;
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius);
+.settings__slider-frame {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.settings__slider-frame>input[type="range"] {
+  flex: 1;
+  height: 8px;
+  background: hsl(var(--secondary));
+  border-radius: 9999px;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.settings__slider-frame>input[type="range"]:focus,
+.settings__slider-frame>input[type="range"]:active {
+  background: hsl(var(--primary));
+}
+
+.settings__slider-frame>input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
   background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  resize: vertical;
+  border: 2px solid hsl(var(--primary));
+  border-radius: 50%;
+  cursor: pointer;
 }
 
-.settings__textarea-frame > textarea:focus {
-  outline: 1px solid hsl(var(--primary));
-  outline-offset: 0;
+.settings__slider-frame>input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: hsl(var(--background));
+  border: 2px solid hsl(var(--primary));
+  border-radius: 50%;
+  cursor: pointer;
 }
 
-.settings__textarea-frame > textarea::placeholder {
+.settings__slider-frame>span {
+  min-width: 4ch;
+  text-align: right;
+  font-size: 14px;
   color: hsl(var(--muted-foreground));
-  opacity: 1;
 }
 
+/* =============================================================================
+   Toggle Inputs
+   ============================================================================= */
+
 .settings__switch-frame {
   display: flex;
   align-items: center;
@@ -435,7 +521,7 @@ const ce = `:root {
   cursor: pointer;
 }
 
-.settings__switch-frame > input[type="checkbox"] {
+.settings__switch-frame>input[type="checkbox"] {
   appearance: none;
   width: 44px;
   height: 24px;
@@ -447,7 +533,7 @@ const ce = `:root {
   flex-shrink: 0;
 }
 
-.settings__switch-frame > input[type="checkbox"]::after {
+.settings__switch-frame>input[type="checkbox"]::after {
   content: '';
   position: absolute;
   top: 2px;
@@ -456,15 +542,15 @@ const ce = `:root {
   height: 20px;
   background: hsl(var(--background));
   border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transition: transform 0.2s;
 }
 
-.settings__switch-frame > input[type="checkbox"]:checked {
+.settings__switch-frame>input[type="checkbox"]:checked {
   background: hsl(var(--primary));
 }
 
-.settings__switch-frame > input[type="checkbox"]:checked::after {
+.settings__switch-frame>input[type="checkbox"]:checked::after {
   transform: translateX(20px);
 }
 
@@ -481,7 +567,7 @@ const ce = `:root {
   cursor: pointer;
 }
 
-.settings__checkbox-frame > input[type="checkbox"] {
+.settings__checkbox-frame>input[type="checkbox"] {
   appearance: none;
   width: 16px;
   height: 16px;
@@ -492,11 +578,11 @@ const ce = `:root {
   position: relative;
 }
 
-.settings__checkbox-frame > input[type="checkbox"]:checked {
+.settings__checkbox-frame>input[type="checkbox"]:checked {
   background: hsl(var(--primary));
 }
 
-.settings__checkbox-frame > input[type="checkbox"]:checked::after {
+.settings__checkbox-frame>input[type="checkbox"]:checked::after {
   content: '';
   position: absolute;
   top: 1px;
@@ -521,7 +607,7 @@ const ce = `:root {
   cursor: pointer;
 }
 
-.settings__radio-frame > input[type="radio"] {
+.settings__radio-frame>input[type="radio"] {
   appearance: none;
   width: 16px;
   height: 16px;
@@ -532,11 +618,11 @@ const ce = `:root {
   position: relative;
 }
 
-.settings__radio-frame > input[type="radio"]:checked {
+.settings__radio-frame>input[type="radio"]:checked {
   background: hsl(var(--primary));
 }
 
-.settings__radio-frame > input[type="radio"]:checked::after {
+.settings__radio-frame>input[type="radio"]:checked::after {
   content: '';
   position: absolute;
   top: 4px;
@@ -551,105 +637,170 @@ const ce = `:root {
   flex: 1;
   color: hsl(var(--foreground));
 }
+
+/* =============================================================================
+   Actions
+   ============================================================================= */
+
+.settings__button-frame>button {
+  padding: 8px 16px;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  color: hsl(var(--foreground));
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.settings__button-frame>button:hover {
+  background: hsl(var(--accent));
+}
+
+.settings__button-frame>button.active,
+.settings__button-frame>button[data-active="true"] {
+  background: hsl(var(--primary));
+  border-color: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
 `;
-let W = !1;
+let V = !1;
 function ue() {
-  if (W || typeof document > "u")
+  if (V || typeof document > "u")
     return;
   const n = document.createElement("style");
-  n.setAttribute("data-telemetryos-sdk", ""), n.textContent = ce, document.head.appendChild(n), W = !0;
+  n.setAttribute("data-telemetryos-sdk", ""), n.textContent = ce, document.head.appendChild(n), V = !0;
 }
 ue();
 function pe({ children: n }) {
-  return w(() => {
-    const i = window.matchMedia("(prefers-color-scheme: dark)"), u = (c) => {
+  return _(() => {
+    const t = window.matchMedia("(prefers-color-scheme: dark)"), d = (l) => {
       let f;
-      c === "system" ? f = i.matches : f = c !== "light", f ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark");
-    }, l = C().subscribeColorScheme(u);
-    l.catch(console.error);
-    const s = () => {
-      C().getColorScheme().then(u).catch(console.error);
+      l === "system" ? f = t.matches : f = l !== "light", f ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark");
+    }, c = C().subscribeColorScheme(d);
+    c.catch(console.error);
+    const i = () => {
+      C().getColorScheme().then(d).catch(console.error);
     };
-    return i.addEventListener("change", s), () => {
-      l.then(() => C().unsubscribeColorScheme(u)).catch(console.error), i.removeEventListener("change", s);
+    return t.addEventListener("change", i), () => {
+      c.then(() => C().unsubscribeColorScheme(d)).catch(console.error), t.removeEventListener("change", i);
     };
-  }, []), d.jsx("div", { className: "settings__container", children: n });
+  }, []), u.jsx("div", { className: "settings__container", children: n });
 }
 function me({ children: n }) {
-  return d.jsx("div", { className: "settings__field", children: n });
+  return u.jsx("div", { className: "settings__box", children: n });
 }
-function ge({ children: n }) {
-  return d.jsx("div", { className: "settings__label", children: n });
+function ge() {
+  return u.jsx("hr", { className: "settings__divider" });
 }
 function be({ children: n }) {
-  return d.jsx("div", { className: "settings__input-frame", children: n });
+  return u.jsx("div", { className: "settings__field", children: n });
 }
 function he({ children: n }) {
-  return d.jsx("div", { className: "settings__select-frame", children: n });
+  return u.jsx("div", { className: "settings__label", children: n });
 }
 function _e({ children: n }) {
-  return d.jsx("div", { className: "settings__textarea-frame", children: n });
+  return u.jsx("div", { className: "settings__input-frame", children: n });
 }
 function xe({ children: n }) {
-  return d.jsx("label", { className: "settings__switch-frame", children: n });
+  return u.jsx("div", { className: "settings__textarea-frame", children: n });
 }
 function ve({ children: n }) {
-  return d.jsx("span", { className: "settings__switch-label", children: n });
+  return u.jsx("div", { className: "settings__select-frame", children: n });
 }
 function ke({ children: n }) {
-  return d.jsx("label", { className: "settings__checkbox-frame", children: n });
+  return u.jsx("div", { className: "settings__slider-frame", children: n });
+}
+function ye({ children: n }) {
+  return u.jsx("label", { className: "settings__switch-frame", children: n });
 }
 function Ee({ children: n }) {
-  return d.jsx("span", { className: "settings__checkbox-label", children: n });
+  return u.jsx("span", { className: "settings__switch-label", children: n });
 }
-function ye({ children: n }) {
-  return d.jsx("label", { className: "settings__radio-frame", children: n });
+function we({ children: n }) {
+  return u.jsx("label", { className: "settings__checkbox-frame", children: n });
 }
 function Re({ children: n }) {
-  return d.jsx("span", { className: "settings__radio-label", children: n });
+  return u.jsx("span", { className: "settings__checkbox-label", children: n });
+}
+function Se({ children: n }) {
+  return u.jsx("label", { className: "settings__radio-frame", children: n });
 }
-function le(n, i, u, l = 0) {
-  var s;
-  const [c, f] = y(!0), [g] = y(u), [_, S] = y(void 0), [p, x] = y(void 0);
-  return w(() => {
+function Te({ children: n }) {
+  return u.jsx("span", { className: "settings__radio-label", children: n });
+}
+function je({ children: n }) {
+  return u.jsx("div", { className: "settings__button-frame", children: n });
+}
+function le(n, t, d, c = 0) {
+  var i;
+  const [l, f] = E(!0), [g] = E(d), [x, S] = E(void 0), [p, v] = E(void 0);
+  return _(() => {
     const m = (b) => {
       S(b), f(!1);
     };
-    return n.subscribe(i, m).catch(console.error), () => {
-      n.unsubscribe(i, m).catch(console.error);
+    return n.subscribe(t, m).catch(console.error), () => {
+      n.unsubscribe(t, m).catch(console.error);
     };
-  }, [n, i]), w(() => {
+  }, [n, t]), _(() => {
     if (typeof p < "u") {
       const m = setTimeout(() => {
-        n.set(i, p);
-      }, l);
+        n.set(t, p);
+      }, c);
       return () => clearTimeout(m);
     }
-  }, [p, n, i, l]), w(() => {
-    if (JSON.stringify(p) === JSON.stringify(_)) {
+  }, [p, n, t, c]), _(() => {
+    if (JSON.stringify(p) === JSON.stringify(x)) {
       const m = setTimeout(() => {
-        x(void 0);
+        v(void 0);
       }, 500);
       return () => clearTimeout(m);
     }
-  }, [p, _]), [c, (s = p ?? _) !== null && s !== void 0 ? s : g, x];
+  }, [p, x]), [l, (i = p ?? x) !== null && i !== void 0 ? i : g, v];
+}
+function Ae(n, t) {
+  return (d, c = 0) => le(d, n, t, c);
+}
+function Ne(n) {
+  _(() => {
+    document.documentElement.style.fontSize = `calc(1vmax * ${n})`;
+  }, [n]);
+}
+function Oe() {
+  const [n, t] = E(() => window.innerWidth / window.innerHeight);
+  return _(() => {
+    const c = () => {
+      t(window.innerWidth / window.innerHeight);
+    };
+    return window.addEventListener("resize", c), () => window.removeEventListener("resize", c);
+  }, []), n;
 }
-function we(n, i) {
-  return (u, l = 0) => le(u, n, i, l);
+function Pe(n, t) {
+  return {
+    uiWidthFactor: Math.min(t, 1) / n,
+    uiHeightFactor: Math.max(t, 1) / n
+  };
 }
 export {
-  ke as SettingsCheckboxFrame,
-  Ee as SettingsCheckboxLabel,
+  me as SettingsBox,
+  je as SettingsButtonFrame,
+  we as SettingsCheckboxFrame,
+  Re as SettingsCheckboxLabel,
   pe as SettingsContainer,
-  me as SettingsField,
-  be as SettingsInputFrame,
-  ge as SettingsLabel,
-  ye as SettingsRadioFrame,
-  Re as SettingsRadioLabel,
-  he as SettingsSelectFrame,
-  xe as SettingsSwitchFrame,
-  ve as SettingsSwitchLabel,
-  _e as SettingsTextAreaFrame,
-  we as createUseStoreState,
-  le as useStoreState
+  ge as SettingsDivider,
+  be as SettingsField,
+  _e as SettingsInputFrame,
+  he as SettingsLabel,
+  Se as SettingsRadioFrame,
+  Te as SettingsRadioLabel,
+  ve as SettingsSelectFrame,
+  ke as SettingsSliderFrame,
+  ye as SettingsSwitchFrame,
+  Ee as SettingsSwitchLabel,
+  xe as SettingsTextAreaFrame,
+  Ae as createUseStoreState,
+  le as useStoreState,
+  Oe as useUiAspectRatio,
+  Pe as useUiResponsiveFactors,
+  Ne as useUiScaleToSetRem
 };