@cutoff/audio-ui-react 1.0.0-preview.20260123.1125

package/dist/index.js

@@ -0,0 +1,3197 @@
+import { jsx as b, jsxs as re, Fragment as rt } from "react/jsx-runtime";
+import I, { useMemo as C, useState as _e, useCallback as E, createContext as it, useLayoutEffect as Ge, useRef as de, useEffect as he, useContext as lt } from "react";
+import ne from "classnames";
+import { translateButtonRoundness as st, DEFAULT_ROUNDNESS as se, AudioParameterConverter as at, BooleanInteractionController as ct, AudioParameterFactory as qe, CLASSNAMES as ie, getSizeClassForComponent as Fe, getSizeStyleForComponent as We, clampNormalized as Ie, generateTransparencyVariant as Ke, calculateArcAngles as ut, calculateArcPath as dt, translateKnobThickness as ft, translateKnobRoundness as ht, DEFAULT_CONTINUOUS_SENSITIVITY as mt, ContinuousInteractionController as vt, DEFAULT_KEYBOARD_STEP as pt, TARGET_PIXELS_PER_STEP as yt, DiscreteInteractionController as wt, translateSliderRoundness as Be, calculateLinearPosition as Je, translateSliderThickness as gt, CSS_VARS as te, polarToCartesian as Me, NoteInteractionController as bt, WHITE_KEY_NAMES as $e, translateKeysRoundness as St, generateColorVariants as Ct, createNoteNumSet as xt, noteToNoteNum as Mt, DIATONIC_TO_CHROMATIC as He, WHITE_KEY_TO_CHROMATIC as ke, noteNumToNote as Ye, WHITE_KEY_POSITIONS as kt } from "@cutoff/audio-ui-core";
+export * from "@cutoff/audio-ui-core";
+import { DEFAULT_ROUNDNESS as so, DEFAULT_THICKNESS as ao, bipolarFormatter as co, calculateCenterValue as uo, combineFormatters as fo, createNoteNumSet as ho, frequencyFormatter as mo, isNoteOn as vo, midiBipolarFormatter as po, noteNumToNote as yo, noteToNoteNum as wo, percentageFormatter as go, withPrecision as bo, withUnit as So } from "@cutoff/audio-ui-core";
+function zn(e) {
+  return null;
+}
+function Tt({
+  normalizedValue: e,
+  threshold: t = 0.5,
+  roundness: n,
+  color: r,
+  // Prefixed with _ to indicate intentionally unused (kept for API compatibility)
+  className: l
+}) {
+  const o = C(() => e > t, [e, t]), i = C(() => typeof n == "string" ? n : st(n ?? se), [n]), s = C(
+    () => ({
+      stroke: o ? "var(--audioui-primary-50)" : "var(--audioui-primary-20)",
+      fill: o ? "var(--audioui-primary-color)" : "var(--audioui-primary-50)",
+      strokeWidth: "var(--audioui-button-stroke-width, 5px)"
+    }),
+    [o]
+  );
+  return /* @__PURE__ */ b(
+    "rect",
+    {
+      className: l,
+      style: {
+        stroke: s.stroke,
+        fill: s.fill,
+        strokeWidth: s.strokeWidth,
+        rx: i,
+        ry: i
+      },
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 40,
+      rx: typeof i == "number" ? i : 0,
+      ry: typeof i == "number" ? i : 0
+    }
+  );
+}
+const Pt = {
+  width: 100,
+  height: 60
+}, De = I.memo(Tt);
+De.viewBox = Pt;
+De.labelHeightUnits = 20;
+function Nt(e, t = 3) {
+  return !e || e.length <= t ? e : e.slice(0, t);
+}
+const Qe = it(null);
+function Le() {
+  const e = lt(Qe);
+  if (!e) throw new Error("AdaptiveBox subcomponents must be used within <AdaptiveBox>");
+  return e;
+}
+function Q({
+  className: e,
+  style: t,
+  displayMode: n = "scaleToFit",
+  labelMode: r = "visible",
+  labelHeightUnits: l,
+  labelOverflow: o = "auto",
+  viewBoxWidth: i,
+  viewBoxHeight: s,
+  minWidth: u,
+  minHeight: m,
+  debug: c = !1,
+  children: h
+}) {
+  const [v, a] = _e(null), [d, w] = _e(null), f = E((D) => {
+    a((V) => {
+      const L = {
+        hAlign: D.hAlign,
+        vAlign: D.vAlign
+      };
+      return !V || V.hAlign !== L.hAlign || V.vAlign !== L.vAlign ? { ...L } : V;
+    });
+  }, []), g = E((D) => {
+    w((V) => {
+      const L = {
+        position: D.position ?? "below",
+        align: D.align ?? "center"
+      };
+      return !V || V.position !== L.position || V.align !== L.align ? { ...L } : V;
+    });
+  }, []), y = l ?? 15, S = t?.justifySelf ?? "center", p = t?.alignSelf ?? "center", P = v?.hAlign ?? S, k = v?.vAlign ?? p, R = d?.position ?? "below", N = n === "fill", T = r !== "none", M = T && R === "above" ? "2 / 3" : "1 / 2", U = C(
+    () => ({
+      hasLabel: !!d,
+      labelPosition: d?.position ?? "below",
+      displayMode: n,
+      labelMode: r,
+      labelHeightUnits: y,
+      labelOverflow: o,
+      debug: c,
+      viewBoxWidth: i,
+      viewBoxHeight: s,
+      mainContentGridRow: M,
+      registerSvg: f,
+      registerLabel: g
+    }),
+    [
+      d,
+      n,
+      r,
+      y,
+      o,
+      c,
+      i,
+      s,
+      M,
+      f,
+      g
+    ]
+  ), B = y, x = T ? s + B : s;
+  let O = "1fr";
+  if (T) {
+    const D = s / x * 100, V = B / x * 100;
+    R === "above" ? O = `${V}% ${D}%` : O = `${D}% ${V}%`;
+  }
+  return /* @__PURE__ */ b(Qe.Provider, { value: U, children: /* @__PURE__ */ b(
+    "div",
+    {
+      "data-name": "Control+Label Wrapper",
+      className: e,
+      style: {
+        width: "100%",
+        height: "100%",
+        containerType: "size",
+        display: "grid",
+        justifyItems: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        minWidth: u,
+        minHeight: m,
+        ...t ?? {}
+      },
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          "data-name": "Aspect Scaler",
+          style: {
+            aspectRatio: `${i} / ${x}`,
+            width: N ? "100%" : `min(100%, calc(100cqh * ${i} / ${x}))`,
+            height: N ? "100%" : "auto",
+            display: "grid",
+            gridTemplateRows: O,
+            justifyItems: "center",
+            alignItems: "center",
+            justifySelf: P,
+            alignSelf: k,
+            minWidth: 0,
+            minHeight: 0,
+            containerType: "inline-size",
+            position: "relative",
+            border: c ? "2px solid hsl(41, 96%, 40%)" : void 0
+          },
+          children: h
+        }
+      )
+    }
+  ) });
+}
+function It({ vAlign: e, hAlign: t, className: n, style: r, children: l, onWheel: o, ...i }) {
+  const s = Le();
+  Ge(() => {
+    s.registerSvg({ hAlign: t, vAlign: e });
+  }, [t, e]);
+  const u = de(null);
+  he(() => {
+    if (!u.current || !o) return;
+    const c = u.current, h = (v) => {
+      o(v);
+    };
+    return c.addEventListener("wheel", h, { passive: !1 }), () => c.removeEventListener("wheel", h);
+  }, [o]);
+  const m = s.displayMode === "fill" ? "none" : "xMidYMid meet";
+  return /* @__PURE__ */ b(
+    "svg",
+    {
+      ref: u,
+      "data-name": "Main Component",
+      viewBox: `0 0 ${s.viewBoxWidth} ${s.viewBoxHeight}`,
+      preserveAspectRatio: m,
+      className: n,
+      style: {
+        display: "block",
+        width: "100%",
+        height: "100%",
+        // Position in main content grid row
+        gridRow: s.mainContentGridRow,
+        gridColumn: 1,
+        backgroundColor: s.debug ? "hsl(0, 100%, 50% / 0.06)" : void 0,
+        ...r ?? {}
+      },
+      ...i,
+      children: l
+    }
+  );
+}
+function Rt({ className: e, style: t, position: n = "below", align: r = "center", children: l }) {
+  const o = Le();
+  Ge(() => {
+    o.registerLabel({ position: n, align: r });
+  }, [n, r]);
+  const i = C(() => o.labelOverflow === "abbreviate" ? !0 : o.labelOverflow === "ellipsis" ? !1 : o.viewBoxWidth < o.viewBoxHeight, [o.labelOverflow, o.viewBoxWidth, o.viewBoxHeight]), s = C(() => i && typeof l == "string" && l.length > 5 ? Nt(l, 3) : l, [l, i]);
+  if (o.labelMode === "none") return null;
+  const u = o.labelMode === "hidden" ? "hidden" : "visible", m = o.labelPosition === "above" ? "1 / 2" : "2 / 3";
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      "data-name": "Label",
+      className: e,
+      style: {
+        width: "100%",
+        gridRow: m,
+        visibility: u,
+        containerType: "size",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: r,
+        ...t ?? {}
+      },
+      children: /* @__PURE__ */ b(
+        "span",
+        {
+          style: {
+            fontSize: "75cqh",
+            lineHeight: 1,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: i ? "clip" : "ellipsis"
+          },
+          children: s
+        }
+      )
+    }
+  );
+}
+function At({ className: e, style: t, pointerEvents: n = "none", children: r }) {
+  const l = Le();
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      "data-name": "HTML Overlay",
+      className: e,
+      style: {
+        // Same grid cell as Svg - CSS Grid stacks elements in DOM order
+        gridRow: l.mainContentGridRow,
+        gridColumn: 1,
+        // Override parent's centering to fill the entire grid cell
+        placeSelf: "stretch",
+        // Container query context for cqmin/cqmax units
+        containerType: "size",
+        // Center content within the overlay
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        // Pointer events (default: pass through to SVG below)
+        pointerEvents: n,
+        ...t ?? {}
+      },
+      children: r
+    }
+  );
+}
+Q.Svg = It;
+Q.Label = Rt;
+Q.HtmlOverlay = At;
+function Re(e, t, n, r, l, o) {
+  const i = C(() => new at(n), [n]), s = C(() => i.normalize(e), [e, i]), u = de(e);
+  u.current = e;
+  const m = E(
+    (f) => {
+      if (!t) return;
+      const g = i.normalize(f), y = i.toMidi(f);
+      t({
+        value: f,
+        normalizedValue: g,
+        midiValue: y,
+        parameter: n
+      });
+    },
+    [i, t, n]
+  ), c = E(
+    (f) => {
+      if (!t) return;
+      const g = Math.max(0, Math.min(1, f)), y = i.denormalize(g);
+      y !== u.current && (u.current = y, m(y));
+    },
+    [i, t, m]
+  ), h = E(
+    (f, g = 1e-3) => {
+      if (!t) return;
+      const y = u.current, S = i.normalize(y), p = Math.max(0, Math.min(1, S + f * g));
+      c(p);
+    },
+    [i, t, c]
+  ), v = C(() => {
+    if (r) {
+      const f = r(e, n);
+      if (f !== void 0)
+        return f;
+    }
+    return i.format(e);
+  }, [e, i, r, n]), a = C(() => o ? v : l ?? n.name, [o, v, l, n.name]), d = E(() => n.type === "continuous" ? n.defaultValue !== void 0 ? i.normalize(n.defaultValue) : n.bipolar === !0 ? 0.5 : 0 : 0, [i, n]), w = E(() => {
+    if (!t) return;
+    const f = d();
+    c(f);
+  }, [t, d, c]);
+  return {
+    normalizedValue: s,
+    formattedValue: v,
+    effectiveLabel: a,
+    converter: i,
+    setNormalizedValue: c,
+    adjustValue: h,
+    getDefaultNormalizedValue: d,
+    resetToDefault: w
+  };
+}
+function Et({
+  value: e,
+  mode: t,
+  onValueChange: n,
+  disabled: r = !1,
+  onMouseDown: l,
+  onMouseUp: o,
+  onTouchStart: i,
+  onTouchEnd: s,
+  onKeyDown: u,
+  onKeyUp: m
+}) {
+  const c = de(null), h = de(null), v = de(!1), a = de(!1);
+  c.current || (c.current = new ct({
+    value: e,
+    mode: t,
+    onValueChange: n,
+    disabled: r
+  })), he(() => {
+    c.current?.updateConfig({
+      value: e,
+      mode: t,
+      onValueChange: n,
+      disabled: r
+    });
+  }, [e, t, n, r]);
+  const d = E((x) => {
+    x.button === 0 && (a.current = !0, c.current?.handleGlobalPointerDown(!1));
+  }, []), w = E((x) => {
+    a.current = !0, c.current?.handleGlobalPointerDown(!1);
+  }, []), f = E(() => {
+    a.current = !1, c.current?.handleGlobalPointerUp();
+  }, []), g = E(() => {
+    a.current = !1, v.current = !1, c.current?.handleGlobalPointerUp();
+  }, []), y = E((x) => {
+    if (!c.current || !h.current || !a.current) return;
+    const O = c.current, D = h.current;
+    if (x.touches.length === 0) return;
+    const V = x.touches[0], L = document.elementFromPoint(V.clientX, V.clientY), W = L === D || D.contains(L);
+    W !== v.current && (v.current = W, W ? O.handleMouseEnter() : O.handleMouseLeave());
+  }, []);
+  he(() => {
+    if (!r)
+      return window.addEventListener("mousedown", d), window.addEventListener("mouseup", f), window.addEventListener("touchstart", w, { passive: !0 }), window.addEventListener("touchmove", y, { passive: !1 }), window.addEventListener("touchend", g), () => {
+        window.removeEventListener("mousedown", d), window.removeEventListener("mouseup", f), window.removeEventListener("touchstart", w), window.removeEventListener("touchmove", y), window.removeEventListener("touchend", g);
+      };
+  }, [
+    r,
+    d,
+    f,
+    w,
+    y,
+    g
+  ]);
+  const S = E(
+    (x) => {
+      l?.(x), x.defaultPrevented || (h.current = x.currentTarget, a.current = !0, c.current?.handleMouseDown(x.defaultPrevented));
+    },
+    [l]
+  ), p = E(
+    (x) => {
+      o?.(x), x.defaultPrevented || (a.current = !1, c.current?.handleMouseUp(x.defaultPrevented));
+    },
+    [o]
+  ), P = E((x) => {
+    c.current?.handleMouseEnter();
+  }, []), k = E((x) => {
+    c.current?.handleMouseLeave();
+  }, []), R = E((x) => {
+    h.current = x;
+  }, []), N = E(
+    (x) => {
+      i?.(x), x.defaultPrevented || (x.preventDefault(), h.current = x.currentTarget, v.current = !0, c.current?.handleMouseDown(!1));
+    },
+    [i]
+  ), T = E(
+    (x) => {
+      s?.(x), x.defaultPrevented || (x.preventDefault(), c.current?.handleMouseUp(!1), v.current = !1);
+    },
+    [s]
+  ), M = E((x) => {
+    x.preventDefault();
+  }, []), U = E(
+    (x) => {
+      x.defaultPrevented || c.current?.handleKeyDown(x.key) && x.preventDefault();
+    },
+    [u]
+  ), B = E(
+    (x) => {
+      x.defaultPrevented || c.current?.handleKeyUp(x.key) && x.preventDefault();
+    },
+    [m]
+  );
+  return {
+    handleMouseDown: S,
+    handleMouseUp: p,
+    handleMouseEnter: P,
+    handleMouseLeave: k,
+    handleTouchStart: N,
+    handleTouchEnd: T,
+    handleTouchMove: M,
+    setButtonElement: R,
+    handleKeyDown: U,
+    handleKeyUp: B
+  };
+}
+function $t({
+  parameter: e,
+  paramId: t,
+  label: n,
+  latch: r,
+  midiResolution: l = 7
+}) {
+  return C(() => {
+    let o;
+    return e ? o = e : (o = qe.createSwitch(n || "", r ? "toggle" : "momentary"), t !== void 0 && (o = {
+      ...o,
+      id: t
+    }), l !== void 0 && (o = {
+      ...o,
+      midiResolution: l
+    })), {
+      derivedParameter: o
+    };
+  }, [e, t, n, r, l]);
+}
+function Bt(e) {
+  const {
+    view: t,
+    viewProps: n,
+    htmlOverlay: r,
+    value: l,
+    onChange: o,
+    label: i,
+    paramId: s,
+    parameter: u,
+    latch: m,
+    displayMode: c,
+    labelMode: h,
+    labelPosition: v,
+    labelAlign: a,
+    labelOverflow: d,
+    viewBoxWidthUnits: w,
+    viewBoxHeightUnits: f,
+    labelHeightUnits: g,
+    className: y,
+    style: S,
+    onClick: p,
+    onMouseDown: P,
+    onMouseUp: k,
+    onMouseEnter: R,
+    onMouseLeave: N,
+    midiResolution: T
+  } = e, { derivedParameter: M } = $t({
+    parameter: u,
+    paramId: s,
+    label: i,
+    latch: m,
+    midiResolution: T
+  }), { normalizedValue: U, converter: B } = Re(l, o, M), x = E(
+    ($) => {
+      if (!o) return;
+      const Z = B.normalize($), le = B.toMidi($);
+      o({
+        value: $,
+        normalizedValue: Z,
+        midiValue: le,
+        parameter: M
+      });
+    },
+    [o, B, M]
+  ), {
+    handleMouseDown: O,
+    handleMouseUp: D,
+    handleMouseEnter: V,
+    handleMouseLeave: L,
+    handleTouchStart: W,
+    handleTouchEnd: j,
+    handleTouchMove: z,
+    setButtonElement: A,
+    handleKeyDown: Y,
+    handleKeyUp: K
+  } = Et({
+    value: l,
+    mode: M.mode ?? (m ? "toggle" : "momentary"),
+    onValueChange: x,
+    disabled: !o,
+    onMouseDown: P,
+    onMouseUp: k,
+    onKeyDown: void 0,
+    // BooleanControl doesn't have onKeyDown prop, only uses hook handler
+    onKeyUp: void 0
+    // BooleanControl doesn't have onKeyUp prop, only uses hook handler
+  }), X = E(
+    ($) => {
+      if (!o && p) {
+        $.preventDefault();
+        const Z = $.changedTouches[0];
+        if (Z) {
+          const le = {
+            ...$,
+            clientX: Z.clientX,
+            clientY: Z.clientY,
+            currentTarget: $.currentTarget,
+            type: "click"
+          };
+          p(le);
+        }
+      }
+    },
+    [o, p]
+  ), G = E(
+    ($) => {
+      !o && p && $.preventDefault();
+    },
+    [o, p]
+  ), _ = i ?? M.name, F = C(() => ne(y, ie.root, ie.container), [y]), H = C(() => o || p ? ie.highlight : "", [o, p]), ee = C(
+    () => ({
+      ...p || o ? { cursor: "var(--audioui-cursor-clickable)" } : {},
+      touchAction: "none"
+    }),
+    [p, o]
+  ), J = E(
+    ($) => {
+      A($.currentTarget), O($);
+    },
+    [A, O]
+  ), oe = E(
+    ($) => {
+      A($.currentTarget), W($);
+    },
+    [A, W]
+  );
+  return /* @__PURE__ */ re(
+    Q,
+    {
+      displayMode: c ?? "scaleToFit",
+      labelMode: h,
+      labelOverflow: d,
+      className: F,
+      style: S,
+      labelHeightUnits: g ?? t.labelHeightUnits ?? 20,
+      viewBoxWidth: w ?? t.viewBox.width,
+      viewBoxHeight: f ?? t.viewBox.height,
+      children: [
+        /* @__PURE__ */ b(
+          Q.Svg,
+          {
+            className: H,
+            style: ee,
+            onClick: p,
+            onMouseDown: o ? J : void 0,
+            onMouseUp: o ? D : void 0,
+            onMouseEnter: ($) => {
+              o && V($), R?.($);
+            },
+            onMouseLeave: ($) => {
+              o && L($), N?.($);
+            },
+            onTouchStart: o ? oe : p ? G : void 0,
+            onTouchEnd: o ? j : p ? X : void 0,
+            onTouchMove: o ? z : void 0,
+            onKeyDown: o ? Y : void 0,
+            onKeyUp: o ? K : void 0,
+            tabIndex: o || p ? 0 : void 0,
+            role: "button",
+            "aria-pressed": l,
+            "aria-label": _,
+            children: /* @__PURE__ */ b(t, { normalizedValue: U, ...n })
+          }
+        ),
+        r && /* @__PURE__ */ b(Q.HtmlOverlay, { children: r }),
+        _ && /* @__PURE__ */ b(Q.Label, { position: v, align: a ?? "center", children: _ })
+      ]
+    }
+  );
+}
+const Ue = I.memo(Bt);
+function ae(e = !1, t = "normal", n, r) {
+  return C(() => {
+    const l = e ? void 0 : r !== void 0 ? Fe(n, t, r) : Fe(n, t), o = e ? void 0 : r !== void 0 ? We(n, t, r) : We(n, t);
+    return {
+      sizeClassName: l,
+      sizeStyle: o
+    };
+  }, [e, t, n, r]);
+}
+function xe({ color: e, roundness: t, style: n }) {
+  return C(() => {
+    const r = {};
+    let l;
+    return t !== void 0 && (l = Ie(t), r["--audioui-roundness-base"] = l.toString(), r["--audioui-linecap-base"] = l === 0 ? "square" : "round"), e !== void 0 && (r["--audioui-primary-color"] = e, r["--audioui-primary-50"] = Ke(e, 50), r["--audioui-primary-20"] = Ke(e, 20)), {
+      style: { ...r, ...n },
+      clampedRoundness: l
+    };
+  }, [e, t, n]);
+}
+function Dt({
+  latch: e = !1,
+  value: t = !1,
+  onChange: n,
+  label: r,
+  adaptiveSize: l = !1,
+  size: o = "normal",
+  displayMode: i,
+  labelMode: s,
+  labelPosition: u,
+  labelAlign: m,
+  labelOverflow: c,
+  labelHeightUnits: h,
+  parameter: v,
+  paramId: a,
+  midiResolution: d,
+  color: w,
+  roundness: f,
+  onClick: g,
+  onMouseDown: y,
+  onMouseUp: S,
+  onMouseEnter: p,
+  onMouseLeave: P,
+  className: k,
+  style: R
+}) {
+  const { style: N } = xe({
+    color: w,
+    roundness: f,
+    style: R
+  }), { sizeClassName: T, sizeStyle: M } = ae(l, o, "button");
+  return /* @__PURE__ */ b(
+    Ue,
+    {
+      value: t,
+      onChange: n,
+      label: r,
+      displayMode: i,
+      labelMode: s,
+      labelPosition: u,
+      labelAlign: m,
+      labelOverflow: c,
+      labelHeightUnits: h,
+      className: ne(T, k),
+      style: { ...M, ...N },
+      parameter: v,
+      paramId: a,
+      latch: e,
+      midiResolution: d,
+      onClick: g,
+      onMouseDown: y,
+      onMouseUp: S,
+      onMouseEnter: p,
+      onMouseLeave: P,
+      view: De,
+      viewProps: {
+        threshold: 0.5,
+        roundness: f ?? "var(--audioui-roundness-button)",
+        color: w ?? "var(--audioui-primary-color)"
+      }
+    }
+  );
+}
+const On = I.memo(Dt);
+function Ze(e, t = 90, n = 0, r = !1, l) {
+  return C(() => ut(e, t, n, r, l), [e, t, n, r, l]);
+}
+function Lt({ startAngle: e, endAngle: t, style: n, cx: r, cy: l, radius: o, thickness: i, strokeLinecap: s }) {
+  const u = Math.abs(t - e) >= 360, m = C(() => {
+    if (!u)
+      return dt(r, l, e, t, o, "counter-clockwise");
+  }, [u, r, l, e, t, o]);
+  return u ? /* @__PURE__ */ b(
+    "circle",
+    {
+      cx: r,
+      cy: l,
+      r: o,
+      fill: "none",
+      strokeWidth: i,
+      style: {
+        ...n,
+        // @ts-expect-error - strokeLinecap accepts CSS variables (strings) but React types are strict
+        strokeLinecap: s
+      }
+    }
+  ) : m ? /* @__PURE__ */ b(
+    "path",
+    {
+      d: m,
+      fill: "none",
+      strokeWidth: i,
+      style: {
+        ...n,
+        // @ts-expect-error - strokeLinecap accepts CSS variables (strings) but React types are strict
+        strokeLinecap: s
+      }
+    }
+  ) : null;
+}
+const je = I.memo(Lt);
+function Ut({
+  cx: e,
+  cy: t,
+  radius: n,
+  normalizedValue: r,
+  bipolar: l = !1,
+  thickness: o = 6,
+  roundness: i,
+  openness: s = 90,
+  rotation: u = 0,
+  positions: m,
+  fgArcStyle: c,
+  bgArcStyle: h
+}) {
+  const { startAngle: v, endAngle: a, valueToAngle: d, valueStartAngle: w } = Ze(
+    r,
+    s,
+    u,
+    l,
+    m
+  ), f = C(() => typeof i == "string" ? i : i ? "round" : "square", [i]), g = C(() => Math.max(0, n - o / 2), [n, o]);
+  return /* @__PURE__ */ re(rt, { children: [
+    /* @__PURE__ */ b(
+      je,
+      {
+        startAngle: v,
+        endAngle: a,
+        style: h,
+        cx: e,
+        cy: t,
+        radius: g,
+        thickness: o,
+        strokeLinecap: f
+      }
+    ),
+    /* @__PURE__ */ b(
+      je,
+      {
+        startAngle: w,
+        endAngle: d,
+        style: c,
+        cx: e,
+        cy: t,
+        radius: g,
+        thickness: o,
+        strokeLinecap: f
+      }
+    )
+  ] });
+}
+const Vt = I.memo(Ut);
+function zt({ cx: e, cy: t, radius: n, imageHref: r, children: l, transform: o, className: i, style: s }) {
+  return /* @__PURE__ */ re("g", { className: i, style: s, transform: o, children: [
+    r && /* @__PURE__ */ b(
+      "image",
+      {
+        href: r,
+        x: e - n,
+        y: t - n,
+        width: n * 2,
+        height: n * 2,
+        preserveAspectRatio: "xMidYMid meet"
+      }
+    ),
+    l && /* @__PURE__ */ b(
+      "svg",
+      {
+        x: e - n,
+        y: t - n,
+        width: n * 2,
+        height: n * 2,
+        viewBox: `0 0 ${n * 2} ${n * 2}`,
+        style: { overflow: "visible", ...s?.color ? { color: s.color } : {} },
+        children: l
+      }
+    )
+  ] });
+}
+const et = I.memo(zt);
+function Ot({
+  cx: e,
+  cy: t,
+  radius: n,
+  normalizedValue: r,
+  bipolar: l = !1,
+  openness: o = 90,
+  imageHref: i,
+  children: s,
+  rotation: u = 0,
+  positions: m,
+  pivotX: c,
+  pivotY: h,
+  className: v,
+  style: a
+}) {
+  const { valueToAngle: d } = Ze(r, o, u, l, m);
+  return /* @__PURE__ */ b(
+    et,
+    {
+      cx: e,
+      cy: t,
+      radius: n,
+      imageHref: i,
+      transform: `rotate(${d}, ${c ?? e}, ${h ?? t})`,
+      className: v,
+      style: { ...a, willChange: "transform" },
+      children: s
+    }
+  );
+}
+const Ne = I.memo(Ot);
+function _t({
+  normalizedValue: e,
+  bipolar: t = !1,
+  variant: n = "abstract",
+  thickness: r,
+  roundness: l,
+  openness: o = 90,
+  rotation: i = 0,
+  color: s,
+  // Prefixed with _ to indicate intentionally unused (kept for API compatibility)
+  className: u,
+  svgOverlayRotary: m = !1,
+  svgOverlay: c
+}) {
+  const v = r ?? (n === "abstract" || n === "simplest" ? 0.4 : 0.2), a = C(() => ft(v), [v]), d = C(() => typeof l == "string" ? l === "var(--audioui-roundness-knob)" ? "var(--audioui-linecap-knob)" : "round" : ht(l ?? se) !== 0 ? "round" : "square", [l]), w = /* @__PURE__ */ b(
+    Vt,
+    {
+      cx: 50,
+      cy: 50,
+      radius: 50,
+      normalizedValue: e,
+      bipolar: t,
+      thickness: a,
+      roundness: d,
+      openness: o,
+      rotation: i,
+      fgArcStyle: { stroke: "var(--audioui-primary-color)" },
+      bgArcStyle: { stroke: "var(--audioui-primary-50)" }
+    }
+  ), f = d;
+  switch (n) {
+    case "plainCap":
+      return /* @__PURE__ */ re("g", { className: u, children: [
+        w,
+        /* @__PURE__ */ re(
+          Ne,
+          {
+            cx: 50,
+            cy: 50,
+            radius: 50 - a - 6,
+            normalizedValue: e,
+            openness: o,
+            rotation: i,
+            children: [
+              /* @__PURE__ */ b("circle", { cx: "50%", cy: "50%", r: "50%", fill: "var(--audioui-knob-cap-fill, #4a4d50)" }),
+              /* @__PURE__ */ b(
+                "line",
+                {
+                  x1: "50%",
+                  y1: "15%",
+                  x2: "50%",
+                  y2: "5%",
+                  stroke: "var(--audioui-nearwhite)",
+                  strokeWidth: (50 - a - 6) * 0.1,
+                  strokeLinecap: f
+                }
+              )
+            ]
+          }
+        )
+      ] });
+    case "iconCap": {
+      const g = (50 - a - 6) * 0.35, y = c ? m ? /* @__PURE__ */ b(
+        Ne,
+        {
+          cx: 50,
+          cy: 50,
+          radius: g,
+          normalizedValue: e,
+          openness: o,
+          rotation: i,
+          style: { color: "var(--audioui-nearwhite)" },
+          children: c
+        }
+      ) : /* @__PURE__ */ b(et, { cx: 50, cy: 50, radius: g, style: { color: "var(--audioui-nearwhite)" }, children: c }) : null;
+      return /* @__PURE__ */ re("g", { className: u, children: [
+        w,
+        /* @__PURE__ */ re(
+          Ne,
+          {
+            cx: 50,
+            cy: 50,
+            radius: 50 - a - 6,
+            normalizedValue: e,
+            openness: o,
+            rotation: i,
+            children: [
+              /* @__PURE__ */ b("circle", { cx: "50%", cy: "50%", r: "50%", fill: "var(--audioui-knob-cap-fill, #4a4d50)" }),
+              /* @__PURE__ */ b(
+                "line",
+                {
+                  x1: "50%",
+                  y1: "15%",
+                  x2: "50%",
+                  y2: "5%",
+                  stroke: "var(--audioui-nearwhite)",
+                  strokeWidth: (50 - a - 6) * 0.1,
+                  strokeLinecap: f
+                }
+              )
+            ]
+          }
+        ),
+        y
+      ] });
+    }
+    case "abstract":
+    case "simplest":
+    default:
+      return /* @__PURE__ */ b("g", { className: u, children: w });
+  }
+}
+const pe = I.memo(_t);
+pe.viewBox = { width: 100, height: 100 };
+pe.labelHeightUnits = 20;
+pe.interaction = { mode: "both", direction: "circular" };
+pe.title = "Knob";
+pe.description = "A rotary knob control with circular arc indicator";
+function Ft({
+  adjustValue: e,
+  keyboardStep: t = pt,
+  interactionMode: n = "both",
+  direction: r = "both",
+  sensitivity: l,
+  wheelSensitivity: o,
+  step: i,
+  min: s,
+  max: u,
+  paramStep: m,
+  disabled: c = !1,
+  editable: h = !0,
+  onDragStart: v,
+  onDragEnd: a,
+  resetToDefault: d,
+  onMouseDown: w,
+  onTouchStart: f,
+  onWheel: g,
+  onKeyDown: y,
+  onDoubleClick: S
+}) {
+  const p = C(() => {
+    if (i !== void 0) return i;
+    if (m !== void 0 && s !== void 0 && u !== void 0 && u !== s)
+      return m / Math.abs(u - s);
+  }, [i, s, u, m]), P = C(() => {
+    const T = l ?? mt;
+    if (p) {
+      const M = p / yt;
+      return Math.max(T, M);
+    }
+    return T;
+  }, [l, p]), k = de(null);
+  return k.current || (k.current = new vt({
+    adjustValue: e,
+    keyboardStep: t,
+    interactionMode: n,
+    direction: r,
+    sensitivity: P,
+    wheelSensitivity: o,
+    step: p,
+    disabled: c,
+    onDragStart: v,
+    onDragEnd: a
+  })), he(() => {
+    k.current?.updateConfig({
+      adjustValue: e,
+      keyboardStep: t,
+      interactionMode: n,
+      direction: r,
+      sensitivity: P,
+      wheelSensitivity: o,
+      step: p,
+      disabled: c,
+      onDragStart: v,
+      onDragEnd: a
+    });
+  }, [
+    e,
+    t,
+    n,
+    r,
+    P,
+    o,
+    p,
+    c,
+    v,
+    a
+  ]), he(() => () => {
+    k.current?.dispose();
+  }, []), {
+    ...C(() => {
+      const T = k.current;
+      return {
+        onMouseDown: (M) => {
+          w?.(M), M.defaultPrevented || T.handleMouseDown(M.clientX, M.clientY, M.currentTarget);
+        },
+        onTouchStart: (M) => {
+          if (!M.defaultPrevented) {
+            const U = M.touches[0];
+            T.handleTouchStart(U.clientX, U.clientY, M.currentTarget);
+          }
+        },
+        onWheel: (M) => {
+          M.defaultPrevented || T.handleWheel(M);
+        },
+        onKeyDown: (M) => {
+          M.defaultPrevented || T.handleKeyDown(M);
+        },
+        onDoubleClick: (M) => {
+          S?.(M), !M.defaultPrevented && d && h && !c && (M.preventDefault(), d());
+        }
+      };
+    }, [
+      w,
+      f,
+      g,
+      y,
+      S,
+      d,
+      h,
+      c
+    ]),
+    tabIndex: c ? -1 : 0,
+    role: "slider",
+    "aria-disabled": c,
+    style: {
+      cursor: c ? "var(--audioui-cursor-disabled)" : h ? n === "wheel" ? "var(--audioui-cursor-vertical)" : r === "horizontal" ? "var(--audioui-cursor-horizontal)" : r === "vertical" ? "var(--audioui-cursor-vertical)" : r === "both" ? "var(--audioui-cursor-bidirectional)" : r === "circular" ? "var(--audioui-cursor-circular)" : "var(--audioui-cursor-clickable)" : "var(--audioui-cursor-noneditable)",
+      touchAction: "none"
+    }
+  };
+}
+function tt({
+  parameter: e,
+  paramId: t,
+  label: n,
+  min: r,
+  max: l,
+  step: o,
+  bipolar: i,
+  unit: s,
+  scale: u,
+  midiResolution: m = 32,
+  defaultValue: c
+}) {
+  return C(() => {
+    let h;
+    return e ? h = e : h = qe.createControl({
+      id: t ?? "adhoc-continuous",
+      label: n,
+      min: r,
+      max: l,
+      step: o,
+      bipolar: i,
+      unit: s,
+      scale: u,
+      midiResolution: m,
+      defaultValue: c
+    }), {
+      derivedParameter: h
+    };
+  }, [e, t, n, r, l, o, i, s, u, m, c]);
+}
+function Wt(e) {
+  const {
+    view: t,
+    viewProps: n,
+    htmlOverlay: r,
+    min: l,
+    max: o,
+    step: i,
+    value: s,
+    label: u,
+    displayMode: m,
+    labelMode: c,
+    labelPosition: h,
+    labelAlign: v,
+    labelOverflow: a,
+    viewBoxWidthUnits: d,
+    viewBoxHeightUnits: w,
+    labelHeightUnits: f,
+    className: g,
+    style: y,
+    onChange: S,
+    paramId: p,
+    onClick: P,
+    onMouseDown: k,
+    onMouseUp: R,
+    onMouseEnter: N,
+    onMouseLeave: T,
+    parameter: M,
+    interactionMode: U,
+    interactionDirection: B,
+    interactionSensitivity: x,
+    unit: O,
+    scale: D,
+    valueFormatter: V,
+    valueAsLabel: L = "labelOnly",
+    midiResolution: W,
+    defaultValue: j
+  } = e, z = e.bipolar ?? !1, { derivedParameter: A } = tt({
+    parameter: M,
+    paramId: p,
+    label: u,
+    min: l,
+    max: o,
+    step: i,
+    bipolar: z,
+    unit: O,
+    scale: D,
+    midiResolution: W,
+    defaultValue: j
+  }), [Y, K] = I.useState(!1), [X, G] = I.useState(!1), _ = I.useRef(void 0), F = I.useCallback(() => {
+    K(!0), G(!0), _.current && window.clearTimeout(_.current);
+  }, []), H = I.useCallback(() => {
+    K(!1), _.current && window.clearTimeout(_.current), _.current = window.setTimeout(() => {
+      G(!1);
+    }, 1e3);
+  }, []), ee = I.useCallback(() => {
+    G(!0), _.current && window.clearTimeout(_.current), Y || (_.current = window.setTimeout(() => {
+      G(!1);
+    }, 1e3));
+  }, [Y]), J = L === "valueOnly" || L === "interactive" && (Y || X), { normalizedValue: oe, adjustValue: $, effectiveLabel: Z, resetToDefault: le } = Re(
+    s,
+    S,
+    A,
+    V,
+    u,
+    J
+  ), ue = I.useCallback(
+    (nt, ot) => {
+      L === "interactive" && S && ee(), $(nt, ot);
+    },
+    [$, L, ee, S]
+  ), fe = U ?? t.interaction.mode ?? "both", ce = B ?? t.interaction.direction ?? "both", q = Ft({
+    adjustValue: ue,
+    interactionMode: fe,
+    direction: ce,
+    sensitivity: x,
+    min: A.min,
+    max: A.max,
+    paramStep: A.step,
+    editable: !!S,
+    resetToDefault: S ? le : void 0,
+    onDragStart: L === "interactive" && S ? F : void 0,
+    onDragEnd: L === "interactive" && S ? H : void 0,
+    onMouseDown: k,
+    onTouchStart: void 0,
+    // ContinuousControl doesn't have onTouchStart prop
+    onWheel: void 0,
+    // ContinuousControl doesn't have onWheel prop
+    onKeyDown: void 0
+    // ContinuousControl doesn't have onKeyDown prop
+  }), ve = C(() => ne(g, ie.root, ie.container), [g]), we = C(() => S || P ? ie.highlight : "", [S, P]), ge = {
+    ...q.style ?? {},
+    // Override cursor for click-only controls
+    ...P && !S ? { cursor: "var(--audioui-cursor-clickable)" } : {}
+  };
+  return /* @__PURE__ */ re(
+    Q,
+    {
+      displayMode: m ?? "scaleToFit",
+      labelMode: c,
+      labelOverflow: a,
+      className: ve,
+      style: y,
+      labelHeightUnits: f ?? t.labelHeightUnits ?? 20,
+      viewBoxWidth: d ?? t.viewBox.width,
+      viewBoxHeight: w ?? t.viewBox.height,
+      children: [
+        /* @__PURE__ */ b(
+          Q.Svg,
+          {
+            className: we,
+            style: ge,
+            onWheel: q.onWheel,
+            onClick: P,
+            onMouseDown: q.onMouseDown,
+            onTouchStart: q.onTouchStart,
+            onKeyDown: q.onKeyDown,
+            onDoubleClick: q.onDoubleClick,
+            onMouseUp: R,
+            onMouseEnter: N,
+            onMouseLeave: T,
+            tabIndex: q.tabIndex,
+            role: q.role,
+            "aria-valuenow": s,
+            "aria-label": Z,
+            children: /* @__PURE__ */ b(t, { normalizedValue: oe, ...n })
+          }
+        ),
+        r && /* @__PURE__ */ b(Q.HtmlOverlay, { children: r }),
+        Z && /* @__PURE__ */ b(Q.Label, { position: h, align: v, children: Z })
+      ]
+    }
+  );
+}
+const Ae = I.memo(Wt), Kt = 90, Ht = 0;
+function Yt({
+  min: e,
+  max: t,
+  step: n,
+  bipolar: r = !1,
+  value: l,
+  onChange: o,
+  valueFormatter: i,
+  label: s,
+  adaptiveSize: u = !1,
+  size: m = "normal",
+  displayMode: c,
+  labelMode: h,
+  labelPosition: v,
+  labelAlign: a,
+  labelOverflow: d,
+  labelHeightUnits: w,
+  color: f,
+  roundness: g,
+  variant: y = "abstract",
+  thickness: S,
+  openness: p = Kt,
+  rotation: P = Ht,
+  parameter: k,
+  unit: R,
+  scale: N,
+  paramId: T,
+  interactionMode: M,
+  interactionDirection: U,
+  interactionSensitivity: B,
+  rotaryOverlay: x = !1,
+  children: O,
+  valueAsLabel: D = "labelOnly",
+  midiResolution: V,
+  defaultValue: L,
+  onClick: W,
+  onMouseDown: j,
+  onMouseUp: z,
+  onMouseEnter: A,
+  onMouseLeave: Y,
+  className: K,
+  style: X
+}) {
+  const { style: G } = xe({
+    color: f,
+    roundness: g,
+    style: X
+  }), _ = S !== void 0 ? Ie(S) : void 0, { derivedParameter: F } = tt({
+    parameter: k,
+    paramId: T ?? "adhoc-knob",
+    label: s,
+    min: e,
+    max: t,
+    step: n,
+    bipolar: r,
+    unit: R,
+    scale: N,
+    midiResolution: V,
+    defaultValue: L
+  }), { formattedValue: H } = Re(l, o, F, i), { sizeClassName: ee, sizeStyle: J } = ae(u, m, "knob"), oe = y === "abstract" ? /* @__PURE__ */ b(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "22cqmin",
+        fontWeight: "500",
+        color: "var(--audioui-text-color)",
+        cursor: "inherit"
+      },
+      children: H
+    }
+  ) : void 0;
+  return /* @__PURE__ */ b(
+    Ae,
+    {
+      min: e,
+      max: t,
+      step: n,
+      bipolar: r,
+      value: l,
+      label: s,
+      displayMode: c,
+      labelMode: h,
+      labelPosition: v,
+      labelAlign: a,
+      labelOverflow: d,
+      labelHeightUnits: w,
+      className: ne(ee, K),
+      style: { ...J, ...G },
+      onChange: o,
+      paramId: T,
+      onClick: W,
+      onMouseDown: j,
+      onMouseUp: z,
+      onMouseEnter: A,
+      onMouseLeave: Y,
+      parameter: k,
+      unit: R,
+      scale: N,
+      midiResolution: V,
+      defaultValue: L,
+      interactionMode: M,
+      interactionDirection: U,
+      interactionSensitivity: B,
+      valueFormatter: i,
+      valueAsLabel: D,
+      view: pe,
+      viewProps: {
+        color: f ?? "var(--audioui-primary-color)",
+        variant: y,
+        thickness: _,
+        roundness: g ?? "var(--audioui-roundness-knob)",
+        openness: p,
+        rotation: P,
+        svgOverlayRotary: x,
+        svgOverlay: O,
+        bipolar: r
+      },
+      htmlOverlay: oe
+    }
+  );
+}
+const _n = I.memo(Yt);
+function jt({
+  value: e,
+  options: t,
+  onValueChange: n,
+  disabled: r = !1,
+  onClick: l,
+  onMouseDown: o,
+  onKeyDown: i
+}) {
+  const s = de(null);
+  s.current || (s.current = new wt({
+    value: e,
+    options: t,
+    onValueChange: n,
+    disabled: r
+  })), he(() => {
+    s.current?.updateConfig({
+      value: e,
+      options: t,
+      onValueChange: n,
+      disabled: r
+    });
+  }, [e, t, n, r]);
+  const u = E(() => s.current?.cycleNext(), []), m = E(() => s.current?.stepNext(), []), c = E(() => s.current?.stepPrev(), []), h = E(
+    (d) => {
+      l?.(d), d.defaultPrevented || s.current?.handleClick(d.defaultPrevented);
+    },
+    [l]
+  ), v = E(
+    (d) => {
+      d.defaultPrevented || s.current?.handleKeyDown(d.key) && d.preventDefault();
+    },
+    [i]
+  );
+  return {
+    handleClick: h,
+    handleKeyDown: v,
+    handleMouseDown: o,
+    cycleNext: u,
+    stepNext: m,
+    stepPrev: c
+  };
+}
+function Ve({
+  children: e,
+  options: t,
+  paramId: n,
+  parameter: r,
+  defaultValue: l,
+  label: o,
+  midiResolution: i = 7,
+  midiMapping: s = "spread"
+}) {
+  return C(() => {
+    const u = I.Children.toArray(e).filter(
+      I.isValidElement
+    ), m = /* @__PURE__ */ new Map();
+    u.forEach((v, a) => {
+      const d = v.props.value !== void 0 ? v.props.value : a;
+      v.props.children && m.set(d, v.props.children);
+    });
+    let c, h;
+    if (r)
+      c = r, h = l !== void 0 ? l : r.defaultValue ?? r.options[0]?.value ?? "";
+    else if (t && t.length > 0)
+      h = l !== void 0 ? l : t[0].value, c = {
+        id: n ?? "adhoc-discrete",
+        type: "discrete",
+        name: o || "",
+        options: t,
+        defaultValue: h,
+        midiResolution: i,
+        midiMapping: s
+      };
+    else {
+      const v = (d, w) => d.props.label ? d.props.label : typeof d.props.children == "string" ? d.props.children : typeof d.props.children == "number" ? String(d.props.children) : String(w), a = u.map((d, w) => {
+        const f = d.props.value !== void 0 ? d.props.value : w;
+        return {
+          value: f,
+          label: v(d, f)
+        };
+      });
+      a.length === 0 && a.push({ value: 0, label: "None" }), h = l !== void 0 ? l : a[0].value, c = {
+        id: n ?? "adhoc-discrete",
+        type: "discrete",
+        name: o || "",
+        options: a,
+        defaultValue: h,
+        midiResolution: i,
+        midiMapping: s
+      };
+    }
+    return {
+      derivedParameter: c,
+      visualContentMap: m,
+      effectiveDefaultValue: h
+    };
+  }, [r, t, e, o, n, l, i, s]);
+}
+function Xt(e) {
+  const {
+    view: t,
+    viewProps: n,
+    htmlOverlay: r,
+    value: l,
+    defaultValue: o,
+    onChange: i,
+    children: s,
+    options: u,
+    label: m,
+    paramId: c,
+    parameter: h,
+    displayMode: v,
+    labelMode: a,
+    labelPosition: d,
+    labelAlign: w,
+    labelOverflow: f,
+    viewBoxWidthUnits: g,
+    viewBoxHeightUnits: y,
+    labelHeightUnits: S,
+    className: p,
+    style: P,
+    onClick: k,
+    onMouseDown: R,
+    onMouseUp: N,
+    onMouseEnter: T,
+    onMouseLeave: M,
+    midiResolution: U,
+    midiMapping: B
+  } = e, { derivedParameter: x, effectiveDefaultValue: O } = Ve({
+    children: s,
+    options: u,
+    paramId: c,
+    parameter: h,
+    defaultValue: o,
+    label: m,
+    midiResolution: U,
+    midiMapping: B
+  }), D = l !== void 0 ? l : O, { normalizedValue: V, setNormalizedValue: L, formattedValue: W, converter: j } = Re(
+    D,
+    i,
+    x
+  ), z = E(
+    (H) => {
+      L(j.normalize(H));
+    },
+    [L, j]
+  ), { handleClick: A, handleKeyDown: Y, handleMouseDown: K } = jt({
+    value: D,
+    options: x.options,
+    onValueChange: z,
+    disabled: !i,
+    // Type cast needed because onClick prop expects React.MouseEvent<SVGSVGElement>
+    // but hook accepts React.MouseEvent
+    onClick: k ? (H) => k(H) : void 0,
+    onMouseDown: R,
+    onKeyDown: void 0
+    // DiscreteControl doesn't have onKeyDown prop, only uses hook handler
+  }), X = m ?? x.name, G = C(() => ne(p, ie.root, ie.container), [p]), _ = C(() => i || k ? ie.highlight : "", [i, k]), F = C(
+    () => ({
+      ...k || i ? { cursor: "var(--audioui-cursor-clickable)" } : {}
+    }),
+    [k, i]
+  );
+  return /* @__PURE__ */ re(
+    Q,
+    {
+      displayMode: v ?? "scaleToFit",
+      labelMode: a,
+      labelOverflow: f,
+      className: G,
+      style: P,
+      labelHeightUnits: S ?? t.labelHeightUnits ?? 20,
+      viewBoxWidth: g ?? t.viewBox.width,
+      viewBoxHeight: y ?? t.viewBox.height,
+      children: [
+        /* @__PURE__ */ b(
+          Q.Svg,
+          {
+            className: _,
+            style: F,
+            onClick: A,
+            onMouseDown: K,
+            onKeyDown: Y,
+            onMouseUp: N,
+            onMouseEnter: T,
+            onMouseLeave: M,
+            tabIndex: 0,
+            role: "spinbutton",
+            "aria-valuenow": typeof D == "number" ? D : void 0,
+            "aria-valuetext": W,
+            "aria-label": X,
+            children: /* @__PURE__ */ b(t, { normalizedValue: V, ...n })
+          }
+        ),
+        r && /* @__PURE__ */ b(Q.HtmlOverlay, { children: r }),
+        X && /* @__PURE__ */ b(Q.Label, { position: d, align: w ?? "center", children: X })
+      ]
+    }
+  );
+}
+const ze = I.memo(Xt), Gt = 90, qt = 0, Jt = {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "22cqmin",
+  fontWeight: "500",
+  color: "var(--audioui-text-color)",
+  cursor: "inherit"
+}, Qt = {
+  width: "50cqmin",
+  height: "50cqmin"
+};
+function Zt({
+  value: e,
+  defaultValue: t,
+  onChange: n,
+  renderOption: r,
+  label: l,
+  adaptiveSize: o = !1,
+  size: i = "normal",
+  displayMode: s,
+  labelMode: u,
+  labelPosition: m,
+  labelAlign: c,
+  labelOverflow: h,
+  labelHeightUnits: v,
+  color: a,
+  roundness: d,
+  thickness: w = 0.4,
+  openness: f = Gt,
+  rotation: g = qt,
+  parameter: y,
+  paramId: S,
+  options: p,
+  midiResolution: P,
+  midiMapping: k,
+  onClick: R,
+  onMouseDown: N,
+  onMouseUp: T,
+  onMouseEnter: M,
+  onMouseLeave: U,
+  className: B,
+  style: x,
+  children: O
+}) {
+  const { style: D, clampedRoundness: V } = xe({
+    color: a,
+    roundness: d,
+    style: x
+  }), L = w !== void 0 ? Ie(w) : void 0, { visualContentMap: W, derivedParameter: j, effectiveDefaultValue: z } = Ve({
+    children: O,
+    options: p,
+    paramId: S,
+    parameter: y,
+    defaultValue: t,
+    label: l,
+    midiResolution: P,
+    midiMapping: k
+  }), A = e !== void 0 ? e : z, Y = C(() => j.options.find((F) => F.value === A)?.label ?? String(A), [j.options, A]), K = C(() => {
+    const _ = (F) => typeof F == "string" || typeof F == "number" ? F : /* @__PURE__ */ b("div", { className: ie.iconWrapper, style: Qt, children: F });
+    if (W && W.has(A))
+      return _(W.get(A));
+    if (r) {
+      const F = j.options.find((H) => H.value === A);
+      if (F) return _(r(F));
+    }
+    return Y;
+  }, [W, A, r, j.options, Y]), { sizeClassName: X, sizeStyle: G } = ae(o, i, "knob");
+  return /* @__PURE__ */ b(
+    ze,
+    {
+      value: e,
+      defaultValue: t,
+      onChange: n,
+      label: l,
+      paramId: S,
+      parameter: y,
+      options: p,
+      midiResolution: P,
+      midiMapping: k,
+      displayMode: s,
+      labelMode: u,
+      labelPosition: m,
+      labelAlign: c,
+      labelOverflow: h,
+      labelHeightUnits: v,
+      className: ne(X, B),
+      style: { ...G, ...D },
+      onClick: R,
+      onMouseDown: N,
+      onMouseUp: T,
+      onMouseEnter: M,
+      onMouseLeave: U,
+      view: pe,
+      viewProps: {
+        bipolar: !1,
+        thickness: L,
+        roundness: V ?? se,
+        openness: f,
+        rotation: g,
+        color: a ?? "var(--audioui-primary-color)"
+      },
+      htmlOverlay: /* @__PURE__ */ b("div", { style: Jt, children: K }),
+      children: O
+    }
+  );
+}
+const Fn = I.memo(Zt);
+function en({
+  cx: e,
+  cy: t,
+  length: n,
+  rotation: r = 0,
+  thickness: l,
+  roundness: o = se,
+  className: i,
+  style: s
+}) {
+  const u = C(() => {
+    if (typeof o == "string")
+      return o;
+    const v = Be(o ?? se);
+    return v === 0 ? 0 : v;
+  }, [o]), m = C(() => e - l / 2, [e, l]), c = C(() => t - n / 2, [t, n]), h = C(() => {
+    if (r !== 0)
+      return `rotate(${-r} ${e} ${t})`;
+  }, [r, e, t]);
+  return /* @__PURE__ */ b(
+    "rect",
+    {
+      style: {
+        ...s,
+        rx: u,
+        ry: u
+      },
+      x: m,
+      y: c,
+      width: l,
+      height: n,
+      rx: typeof u == "number" ? u : 0,
+      ry: typeof u == "number" ? u : 0,
+      transform: h,
+      className: i
+    }
+  );
+}
+const tn = I.memo(en);
+function nn({
+  cx: e,
+  cy: t,
+  length: n,
+  rotation: r = 0,
+  thickness: l,
+  roundness: o = se,
+  normalizedValue: i,
+  bipolar: s = !1,
+  className: u,
+  style: m
+}) {
+  const c = C(() => {
+    if (typeof o == "string")
+      return o;
+    const a = Be(o ?? se);
+    return a === 0 ? 0 : a;
+  }, [o]), h = C(() => {
+    const a = Je(t, n, i), d = e - l / 2, w = l;
+    let f, g;
+    return s ? (g = Math.abs(t - a), f = Math.min(t, a)) : (g = t + n / 2 - a, f = a), { x: d, y: f, width: w, height: g };
+  }, [e, t, n, l, i, s]), v = C(() => {
+    if (r !== 0)
+      return `rotate(${-r} ${e} ${t})`;
+  }, [r, e, t]);
+  return h.height <= 1e-3 ? null : /* @__PURE__ */ b(
+    "rect",
+    {
+      style: {
+        ...m,
+        rx: c,
+        ry: c
+      },
+      x: h.x,
+      y: h.y,
+      width: h.width,
+      height: h.height,
+      rx: typeof c == "number" ? c : 0,
+      ry: typeof c == "number" ? c : 0,
+      transform: v,
+      className: u
+    }
+  );
+}
+const on = I.memo(nn);
+function rn({
+  cx: e,
+  cy: t,
+  length: n,
+  rotation: r = 0,
+  normalizedValue: l,
+  width: o,
+  aspectRatio: i,
+  imageHref: s,
+  roundness: u = se,
+  className: m,
+  style: c
+}) {
+  const h = Je(t, n, l), v = C(() => o / i, [o, i]), a = C(() => {
+    if (typeof u == "string")
+      return u;
+    const y = Be(u ?? se);
+    return y === 0 ? 0 : y;
+  }, [u]), d = C(() => typeof u == "string" ? !1 : (u ?? se) >= 1, [u]), w = C(() => e - o / 2, [e, o]), f = h - v / 2, g = C(() => {
+    if (r !== 0)
+      return `rotate(${-r} ${e} ${t})`;
+  }, [r, e, t]);
+  return s ? /* @__PURE__ */ b(
+    "image",
+    {
+      href: s,
+      x: e - o / 2,
+      y: h - o / 2,
+      width: o,
+      height: o,
+      transform: g,
+      className: m,
+      style: c,
+      preserveAspectRatio: "xMidYMid meet"
+    }
+  ) : d ? /* @__PURE__ */ b(
+    "ellipse",
+    {
+      cx: e,
+      cy: h,
+      rx: o / 2,
+      ry: v / 2,
+      transform: g,
+      className: m,
+      style: c
+    }
+  ) : /* @__PURE__ */ b(
+    "rect",
+    {
+      x: w,
+      y: f,
+      width: o,
+      height: v,
+      rx: typeof a == "number" ? a : 0,
+      ry: typeof a == "number" ? a : 0,
+      transform: g,
+      className: m,
+      style: {
+        ...c,
+        rx: a,
+        ry: a
+      }
+    }
+  );
+}
+const ln = I.memo(rn), Xe = 30, sn = 30;
+function Ee({
+  normalizedValue: e,
+  bipolar: t = !1,
+  variant: n = "abstract",
+  orientation: r = "vertical",
+  thickness: l = 0.4,
+  roundness: o = se,
+  cursorSize: i,
+  cursorAspectRatio: s,
+  cursorRoundness: u,
+  cursorImageHref: m,
+  cursorClassName: c,
+  cursorStyle: h,
+  className: v
+}) {
+  const a = C(() => gt(l), [l]), { cx: d, cy: w, rotation: f } = C(() => r === "vertical" ? {
+    cx: 50,
+    cy: 150,
+    rotation: 0
+  } : {
+    cx: 150,
+    cy: 50,
+    rotation: -90
+  }, [r]), g = C(() => n === "trackfull" ? 25 * l + 5 : 0, [n, l]), y = C(() => {
+    if (i !== "None") {
+      if (i)
+        switch (i) {
+          case "Strip":
+            return n !== "stripless" ? a - g : a;
+          case "Track":
+            return a;
+          case "Tick":
+            return a + Xe;
+          case "Label":
+            return a + Xe + sn;
+          default:
+            return;
+        }
+      return n !== "abstract" ? a - g : void 0;
+    }
+  }, [i, a, g, n]), S = y !== void 0, p = u ?? o, P = C(() => !S || y === void 0 ? 0 : m ? y : y / (s ?? 1), [S, y, s, m]), k = C(() => 260 - P, [P]), R = C(() => 260 - g, [g]), N = C(
+    () => ({
+      fill: n === "abstract" ? `var(${te.primary20})` : `var(${te.sliderTrackColor})`
+    }),
+    [n]
+  ), T = C(
+    () => ({
+      fill: `var(${te.sliderStripColor})`
+    }),
+    []
+  ), M = C(
+    () => ({
+      fill: `var(${te.sliderCursorColor})`,
+      stroke: `var(${te.sliderCursorBorderColor})`,
+      strokeWidth: `var(${te.sliderCursorBorderWidth})`,
+      ...h
+    }),
+    [h]
+  );
+  return /* @__PURE__ */ re("g", { className: v, children: [
+    /* @__PURE__ */ b(
+      tn,
+      {
+        cx: d,
+        cy: w,
+        length: 260,
+        thickness: a,
+        rotation: f,
+        roundness: o,
+        style: N
+      }
+    ),
+    n !== "stripless" ? /* @__PURE__ */ b(
+      on,
+      {
+        cx: d,
+        cy: w,
+        length: R,
+        thickness: a - g,
+        rotation: f,
+        roundness: o,
+        normalizedValue: e,
+        bipolar: t,
+        style: T
+      }
+    ) : void 0,
+    S && y !== void 0 ? /* @__PURE__ */ b(
+      ln,
+      {
+        cx: d,
+        cy: w,
+        length: k,
+        rotation: f,
+        normalizedValue: e,
+        width: y,
+        aspectRatio: s ?? 1,
+        roundness: p,
+        imageHref: m,
+        className: c,
+        style: M
+      }
+    ) : void 0
+  ] });
+}
+const Oe = {
+  vertical: {
+    width: 100,
+    height: 300
+  },
+  horizontal: {
+    width: 300,
+    height: 100
+  }
+};
+Ee.viewBox = Oe;
+function an(e) {
+  return /* @__PURE__ */ b(Ee, { ...e, orientation: "vertical" });
+}
+const be = I.memo(an);
+be.viewBox = Oe.vertical;
+be.labelHeightUnits = 40;
+be.interaction = {
+  mode: "both",
+  direction: "vertical"
+};
+be.title = "Vertical Slider";
+be.description = "A vertical fader control with linear fill indicator";
+const cn = be;
+function un(e) {
+  return /* @__PURE__ */ b(Ee, { ...e, orientation: "horizontal" });
+}
+const Se = I.memo(un);
+Se.viewBox = Oe.horizontal;
+Se.labelHeightUnits = 40;
+Se.interaction = {
+  mode: "both",
+  direction: "horizontal"
+};
+Se.title = "Horizontal Slider";
+Se.description = "A horizontal fader control with linear fill indicator";
+const dn = Se, Wn = I.memo(Ee);
+function fn({
+  orientation: e = "vertical",
+  min: t,
+  max: n,
+  step: r,
+  bipolar: l = !1,
+  value: o,
+  onChange: i,
+  valueFormatter: s,
+  label: u,
+  adaptiveSize: m = !1,
+  size: c = "normal",
+  displayMode: h,
+  labelMode: v,
+  labelPosition: a,
+  labelAlign: d,
+  labelOverflow: w,
+  labelHeightUnits: f,
+  color: g,
+  roundness: y,
+  variant: S = "abstract",
+  thickness: p = 0.5,
+  parameter: P,
+  unit: k,
+  scale: R,
+  paramId: N,
+  interactionMode: T,
+  interactionDirection: M,
+  interactionSensitivity: U,
+  valueAsLabel: B = "labelOnly",
+  midiResolution: x,
+  defaultValue: O,
+  onClick: D,
+  onMouseDown: V,
+  onMouseUp: L,
+  onMouseEnter: W,
+  onMouseLeave: j,
+  className: z,
+  style: A,
+  cursorSize: Y,
+  cursorAspectRatio: K,
+  cursorRoundness: X,
+  cursorImageHref: G,
+  cursorClassName: _,
+  cursorStyle: F
+}) {
+  const { style: H } = xe({
+    color: g,
+    roundness: y,
+    style: A
+  }), ee = p !== void 0 ? Ie(p) : void 0, { sizeClassName: J, sizeStyle: oe } = ae(m, c, "slider", e), $ = ne(J, z), Z = e === "vertical" ? cn : dn;
+  return /* @__PURE__ */ b(
+    Ae,
+    {
+      min: t,
+      max: n,
+      step: r,
+      bipolar: l,
+      value: o,
+      label: u,
+      displayMode: h,
+      labelMode: v,
+      labelPosition: a,
+      labelAlign: d,
+      labelOverflow: w,
+      labelHeightUnits: f,
+      className: $,
+      style: { ...oe, ...H },
+      onChange: i,
+      paramId: N,
+      onClick: D,
+      onMouseDown: V,
+      onMouseUp: L,
+      onMouseEnter: W,
+      onMouseLeave: j,
+      parameter: P,
+      unit: k,
+      scale: R,
+      midiResolution: x,
+      defaultValue: O,
+      interactionMode: T,
+      interactionDirection: M,
+      interactionSensitivity: U,
+      valueFormatter: s,
+      valueAsLabel: B,
+      view: Z,
+      viewProps: {
+        color: g ?? "var(--audioui-primary-color)",
+        variant: S,
+        thickness: ee,
+        roundness: y ?? "var(--audioui-roundness-slider)",
+        bipolar: l,
+        cursorSize: Y,
+        cursorAspectRatio: K,
+        cursorRoundness: X,
+        cursorImageHref: G,
+        cursorClassName: _,
+        cursorStyle: F
+      }
+    }
+  );
+}
+const Kn = I.memo(fn);
+function hn({
+  x: e = 0,
+  y: t = 0,
+  frameWidth: n,
+  frameHeight: r,
+  frameCount: l,
+  normalizedValue: o,
+  imageHref: i,
+  orientation: s = "vertical",
+  frameRotation: u = 0,
+  invertValue: m = !1,
+  className: c,
+  style: h
+}) {
+  const v = m ? 1 - o : o, a = Math.max(0, Math.min(1, v)), d = Math.round(a * (l - 1)), w = s === "horizontal" ? n * l : n, f = s === "vertical" ? r * l : r, g = s === "horizontal" ? d * n : 0, y = s === "vertical" ? d * r : 0, S = e + n / 2, p = t + r / 2;
+  return /* @__PURE__ */ b("g", { className: c, style: h, transform: `rotate(${u}, ${S}, ${p})`, children: /* @__PURE__ */ b(
+    "svg",
+    {
+      x: e,
+      y: t,
+      width: n,
+      height: r,
+      viewBox: `0 0 ${n} ${r}`,
+      preserveAspectRatio: "none",
+      style: { overflow: "hidden" },
+      children: /* @__PURE__ */ b(
+        "image",
+        {
+          href: i,
+          width: w,
+          height: f,
+          preserveAspectRatio: "none",
+          style: {
+            transform: `translate(${-g}px, ${-y}px)`,
+            willChange: "transform"
+          }
+        }
+      )
+    }
+  ) });
+}
+const mn = I.memo(hn);
+function vn({
+  normalizedValue: e,
+  frameWidth: t,
+  frameHeight: n,
+  frameCount: r,
+  imageHref: l,
+  orientation: o = "vertical",
+  frameRotation: i = 0,
+  invertValue: s = !1,
+  className: u
+}) {
+  return /* @__PURE__ */ b(
+    mn,
+    {
+      x: 0,
+      y: 0,
+      frameWidth: t,
+      frameHeight: n,
+      frameCount: r,
+      normalizedValue: e,
+      imageHref: l,
+      orientation: o,
+      frameRotation: i,
+      invertValue: s,
+      className: u
+    }
+  );
+}
+const me = I.memo(vn);
+me.viewBox = { width: 100, height: 100 };
+me.labelHeightUnits = 20;
+me.interaction = {
+  mode: "both",
+  direction: "vertical"
+};
+me.title = "Filmstrip";
+me.description = "A filmstrip control that displays frames from a sprite sheet";
+function pn({
+  min: e,
+  max: t,
+  step: n,
+  bipolar: r = !1,
+  value: l,
+  onChange: o,
+  valueFormatter: i,
+  label: s,
+  adaptiveSize: u = !1,
+  size: m = "normal",
+  displayMode: c,
+  labelMode: h,
+  labelPosition: v,
+  labelAlign: a,
+  frameWidth: d,
+  frameHeight: w,
+  frameCount: f,
+  imageHref: g,
+  orientation: y = "vertical",
+  frameRotation: S = 0,
+  parameter: p,
+  unit: P,
+  scale: k,
+  paramId: R,
+  interactionMode: N,
+  interactionDirection: T,
+  interactionSensitivity: M,
+  valueAsLabel: U = "labelOnly",
+  midiResolution: B,
+  defaultValue: x,
+  invertValue: O = !1,
+  onClick: D,
+  onMouseDown: V,
+  onMouseUp: L,
+  onMouseEnter: W,
+  onMouseLeave: j,
+  className: z,
+  style: A
+}) {
+  const { sizeClassName: Y, sizeStyle: K } = ae(u, m, "knob");
+  return /* @__PURE__ */ b(
+    Ae,
+    {
+      min: e,
+      max: t,
+      step: n,
+      bipolar: r,
+      value: l,
+      label: s,
+      displayMode: c,
+      labelMode: h,
+      labelPosition: v,
+      labelAlign: a,
+      className: ne(Y, z),
+      style: { ...K, ...A },
+      onChange: o,
+      paramId: R,
+      onClick: D,
+      onMouseDown: V,
+      onMouseUp: L,
+      onMouseEnter: W,
+      onMouseLeave: j,
+      parameter: p,
+      unit: P,
+      scale: k,
+      midiResolution: B,
+      defaultValue: x,
+      interactionMode: N,
+      interactionDirection: T,
+      interactionSensitivity: M,
+      valueFormatter: i,
+      valueAsLabel: U,
+      viewBoxWidthUnits: d,
+      viewBoxHeightUnits: w,
+      view: me,
+      viewProps: {
+        frameWidth: d,
+        frameHeight: w,
+        frameCount: f,
+        imageHref: g,
+        orientation: y,
+        frameRotation: S,
+        invertValue: O
+      }
+    }
+  );
+}
+const Hn = I.memo(pn);
+function yn({
+  value: e,
+  defaultValue: t,
+  onChange: n,
+  label: r,
+  adaptiveSize: l = !1,
+  size: o = "normal",
+  displayMode: i,
+  labelMode: s,
+  labelPosition: u,
+  labelAlign: m,
+  frameWidth: c,
+  frameHeight: h,
+  frameCount: v,
+  imageHref: a,
+  orientation: d = "vertical",
+  frameRotation: w = 0,
+  parameter: f,
+  paramId: g,
+  options: y,
+  midiResolution: S,
+  midiMapping: p,
+  children: P,
+  onClick: k,
+  onMouseDown: R,
+  onMouseUp: N,
+  onMouseEnter: T,
+  onMouseLeave: M,
+  className: U,
+  style: B
+}) {
+  const { sizeClassName: x, sizeStyle: O } = ae(l, o, "knob");
+  return /* @__PURE__ */ b(
+    ze,
+    {
+      value: e,
+      defaultValue: t,
+      onChange: n,
+      label: r,
+      paramId: g,
+      parameter: f,
+      options: y,
+      midiResolution: S,
+      midiMapping: p,
+      displayMode: i,
+      labelMode: s,
+      labelPosition: u,
+      labelAlign: m,
+      className: ne(x, U),
+      style: { ...O, ...B },
+      onClick: k,
+      onMouseDown: R,
+      onMouseUp: N,
+      onMouseEnter: T,
+      onMouseLeave: M,
+      viewBoxWidthUnits: c,
+      viewBoxHeightUnits: h,
+      view: me,
+      viewProps: {
+        frameWidth: c,
+        frameHeight: h,
+        frameCount: v,
+        imageHref: a,
+        orientation: d,
+        frameRotation: w
+      },
+      children: P
+    }
+  );
+}
+const Yn = I.memo(yn);
+function wn({
+  latch: e = !1,
+  value: t = !1,
+  onChange: n,
+  label: r,
+  adaptiveSize: l = !1,
+  size: o = "normal",
+  displayMode: i,
+  labelMode: s,
+  labelPosition: u,
+  labelAlign: m,
+  frameWidth: c,
+  frameHeight: h,
+  frameCount: v,
+  imageHref: a,
+  orientation: d = "vertical",
+  frameRotation: w = 0,
+  invertValue: f = !1,
+  parameter: g,
+  paramId: y,
+  midiResolution: S,
+  onClick: p,
+  onMouseDown: P,
+  onMouseUp: k,
+  onMouseEnter: R,
+  onMouseLeave: N,
+  className: T,
+  style: M
+}) {
+  const { sizeClassName: U, sizeStyle: B } = ae(l, o, "button");
+  return /* @__PURE__ */ b(
+    Ue,
+    {
+      value: t,
+      onChange: n,
+      label: r,
+      displayMode: i,
+      labelMode: s,
+      labelPosition: u,
+      labelAlign: m,
+      className: ne(U, T),
+      style: { ...B, ...M },
+      parameter: g,
+      paramId: y,
+      latch: e,
+      midiResolution: S,
+      onClick: p,
+      onMouseDown: P,
+      onMouseUp: k,
+      onMouseEnter: R,
+      onMouseLeave: N,
+      viewBoxWidthUnits: c,
+      viewBoxHeightUnits: h,
+      view: me,
+      viewProps: {
+        frameWidth: c,
+        frameHeight: h,
+        frameCount: v,
+        imageHref: a,
+        orientation: d,
+        frameRotation: w,
+        invertValue: f
+      }
+    }
+  );
+}
+const jn = I.memo(wn);
+function gn({
+  normalizedValue: e,
+  frameWidth: t,
+  frameHeight: n,
+  imageHref: r,
+  rotation: l = 0,
+  openness: o = 90,
+  bipolar: i = !1,
+  positions: s,
+  className: u
+}) {
+  const m = t / 2, c = n / 2, h = Math.min(t, n) / 2;
+  return /* @__PURE__ */ b(
+    Ne,
+    {
+      cx: m,
+      cy: c,
+      radius: h,
+      normalizedValue: e,
+      imageHref: r,
+      rotation: l,
+      openness: o,
+      bipolar: i,
+      positions: s,
+      className: u
+    }
+  );
+}
+const ye = I.memo(gn);
+ye.viewBox = { width: 100, height: 100 };
+ye.labelHeightUnits = 20;
+ye.interaction = {
+  mode: "both",
+  direction: "circular"
+};
+ye.title = "Rotary Image";
+ye.description = "A rotary control that rotates an image based on value";
+function bn({
+  min: e,
+  max: t,
+  step: n,
+  bipolar: r = !1,
+  value: l,
+  onChange: o,
+  valueFormatter: i,
+  label: s,
+  adaptiveSize: u = !1,
+  size: m = "normal",
+  displayMode: c,
+  labelMode: h,
+  labelPosition: v,
+  labelAlign: a,
+  frameWidth: d,
+  frameHeight: w,
+  imageHref: f,
+  rotation: g = 0,
+  openness: y = 90,
+  parameter: S,
+  unit: p,
+  scale: P,
+  paramId: k,
+  interactionMode: R,
+  interactionDirection: N,
+  interactionSensitivity: T,
+  valueAsLabel: M = "labelOnly",
+  midiResolution: U,
+  defaultValue: B,
+  onClick: x,
+  onMouseDown: O,
+  onMouseUp: D,
+  onMouseEnter: V,
+  onMouseLeave: L,
+  className: W,
+  style: j
+}) {
+  const { sizeClassName: z, sizeStyle: A } = ae(u, m, "knob");
+  return /* @__PURE__ */ b(
+    Ae,
+    {
+      min: e,
+      max: t,
+      step: n,
+      bipolar: r,
+      value: l,
+      label: s,
+      displayMode: c,
+      labelMode: h,
+      labelPosition: v,
+      labelAlign: a,
+      className: ne(z, W),
+      style: { ...A, ...j },
+      onChange: o,
+      paramId: k,
+      onClick: x,
+      onMouseDown: O,
+      onMouseUp: D,
+      onMouseEnter: V,
+      onMouseLeave: L,
+      parameter: S,
+      unit: p,
+      scale: P,
+      midiResolution: U,
+      defaultValue: B,
+      interactionMode: R,
+      interactionDirection: N,
+      interactionSensitivity: T,
+      valueFormatter: i,
+      valueAsLabel: M,
+      viewBoxWidthUnits: d,
+      viewBoxHeightUnits: w,
+      view: ye,
+      viewProps: {
+        frameWidth: d,
+        frameHeight: w,
+        imageHref: f,
+        rotation: g,
+        openness: y,
+        bipolar: r
+      }
+    }
+  );
+}
+const Xn = I.memo(bn);
+function Sn({
+  value: e,
+  defaultValue: t,
+  onChange: n,
+  label: r,
+  adaptiveSize: l = !1,
+  size: o = "normal",
+  displayMode: i,
+  labelMode: s,
+  labelPosition: u,
+  labelAlign: m,
+  frameWidth: c,
+  frameHeight: h,
+  imageHref: v,
+  rotation: a = 0,
+  openness: d = 90,
+  parameter: w,
+  paramId: f,
+  options: g,
+  midiResolution: y,
+  midiMapping: S,
+  children: p,
+  onClick: P,
+  onMouseDown: k,
+  onMouseUp: R,
+  onMouseEnter: N,
+  onMouseLeave: T,
+  className: M,
+  style: U
+}) {
+  const { sizeClassName: B, sizeStyle: x } = ae(l, o, "knob"), { derivedParameter: O } = Ve({
+    children: p,
+    options: g,
+    paramId: f,
+    parameter: w,
+    defaultValue: t,
+    label: r,
+    midiResolution: y,
+    midiMapping: S
+  }), D = C(() => O.options.length, [O.options.length]);
+  return /* @__PURE__ */ b(
+    ze,
+    {
+      value: e,
+      defaultValue: t,
+      onChange: n,
+      label: r,
+      paramId: f,
+      parameter: w,
+      options: g,
+      midiResolution: y,
+      midiMapping: S,
+      displayMode: i,
+      labelMode: s,
+      labelPosition: u,
+      labelAlign: m,
+      className: ne(B, M),
+      style: { ...x, ...U },
+      onClick: P,
+      onMouseDown: k,
+      onMouseUp: R,
+      onMouseEnter: N,
+      onMouseLeave: T,
+      viewBoxWidthUnits: c,
+      viewBoxHeightUnits: h,
+      view: ye,
+      viewProps: {
+        frameWidth: c,
+        frameHeight: h,
+        imageHref: v,
+        rotation: a,
+        openness: d,
+        positions: D
+      },
+      children: p
+    }
+  );
+}
+const Gn = I.memo(Sn);
+function Cn({ x: e = 0, y: t = 0, width: n, height: r, imageHref: l, children: o, transform: i, className: s, style: u }) {
+  return /* @__PURE__ */ re("g", { className: s, style: u, transform: i, children: [
+    l && /* @__PURE__ */ b("image", { href: l, x: e, y: t, width: n, height: r, preserveAspectRatio: "xMidYMid meet" }),
+    o && /* @__PURE__ */ b(
+      "svg",
+      {
+        x: e,
+        y: t,
+        width: n,
+        height: r,
+        viewBox: `0 0 ${n} ${r}`,
+        style: { overflow: "visible", ...u?.color ? { color: u.color } : {} },
+        children: o
+      }
+    )
+  ] });
+}
+const xn = I.memo(Cn);
+function Mn({
+  normalizedValue: e,
+  frameWidth: t,
+  frameHeight: n,
+  imageHrefFalse: r,
+  imageHrefTrue: l,
+  className: o
+}) {
+  const i = e > 0.5 ? l : r;
+  return /* @__PURE__ */ b(xn, { x: 0, y: 0, width: t, height: n, imageHref: i, className: o });
+}
+const Ce = I.memo(Mn);
+Ce.viewBox = { width: 100, height: 100 };
+Ce.labelHeightUnits = 20;
+Ce.interaction = {
+  mode: "both",
+  direction: "vertical"
+};
+Ce.title = "Image Switch";
+Ce.description = "A boolean control that displays one of two images based on value";
+function kn({
+  latch: e = !1,
+  value: t = !1,
+  onChange: n,
+  label: r,
+  adaptiveSize: l = !1,
+  size: o = "normal",
+  displayMode: i,
+  labelMode: s,
+  labelPosition: u,
+  labelAlign: m,
+  frameWidth: c,
+  frameHeight: h,
+  imageHrefFalse: v,
+  imageHrefTrue: a,
+  parameter: d,
+  paramId: w,
+  midiResolution: f,
+  onClick: g,
+  onMouseDown: y,
+  onMouseUp: S,
+  onMouseEnter: p,
+  onMouseLeave: P,
+  className: k,
+  style: R
+}) {
+  const { sizeClassName: N, sizeStyle: T } = ae(l, o, "button");
+  return /* @__PURE__ */ b(
+    Ue,
+    {
+      value: t,
+      onChange: n,
+      label: r,
+      displayMode: i,
+      labelMode: s,
+      labelPosition: u,
+      labelAlign: m,
+      className: ne(N, k),
+      style: { ...T, ...R },
+      parameter: d,
+      paramId: w,
+      latch: e,
+      midiResolution: f,
+      onClick: g,
+      onMouseDown: y,
+      onMouseUp: S,
+      onMouseEnter: p,
+      onMouseLeave: P,
+      viewBoxWidthUnits: c,
+      viewBoxHeightUnits: h,
+      view: Ce,
+      viewProps: {
+        frameWidth: c,
+        frameHeight: h,
+        imageHrefFalse: v,
+        imageHrefTrue: a
+      }
+    }
+  );
+}
+const qn = I.memo(kn);
+function Tn({
+  cx: e,
+  cy: t,
+  radius: n,
+  children: r,
+  className: l,
+  style: o,
+  pointerEvents: i = "none"
+}) {
+  const s = n * 2, u = e - n, m = t - n;
+  return /* @__PURE__ */ b(
+    "foreignObject",
+    {
+      x: u,
+      y: m,
+      width: s,
+      height: s,
+      className: l,
+      style: {
+        pointerEvents: i,
+        ...o
+      },
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          xmlns: "http://www.w3.org/1999/xhtml",
+          style: {
+            // Use 100% to fill the foreignObject (which is sized in SVG user units)
+            // Do NOT use explicit pixels here, as that breaks SVG scaling (viewBox).
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center"
+          },
+          children: r
+        }
+      )
+    }
+  );
+}
+const Jn = I.memo(Tn);
+function Pn({ normalizedValue: e, resolution: t = 100, className: n, style: r, ...l }) {
+  const o = Math.max(0, Math.min(1, e)), i = Number(t), s = i * (1 - o);
+  return /* @__PURE__ */ b(
+    "path",
+    {
+      ...l,
+      className: n,
+      pathLength: i,
+      strokeDasharray: i,
+      strokeDashoffset: s,
+      style: r
+    }
+  );
+}
+const Qn = I.memo(Pn);
+function Nn({
+  cx: e,
+  cy: t,
+  radius: n,
+  thickness: r = 4,
+  openness: l = 90,
+  rotation: o = 0,
+  count: i,
+  step: s,
+  variant: u = "line",
+  renderTick: m,
+  className: c,
+  style: h
+}) {
+  const v = C(() => {
+    const w = Math.max(0, Math.min(360, l)), f = 180 + w / 2, g = 540 - w / 2, y = f - o, S = g - f;
+    let p = 0, P = 0;
+    const k = w <= 0.01;
+    if (i !== void 0 && i > 1 ? (p = i, k ? P = 360 / i : P = S / (i - 1)) : s !== void 0 && s > 0 ? (p = Math.floor(S / s) + 1, P = s) : i === 1 && (p = 1, P = 0), p <= 0) return [];
+    const R = [], N = (T) => Math.round(T * 1e4) / 1e4;
+    for (let T = 0; T < p; T++) {
+      const M = y + T * P, U = Me(e, t, n, M);
+      R.push({
+        x: N(U.x),
+        y: N(U.y),
+        angle: N(M),
+        // Keep precise angle for rotation transforms
+        index: T
+      });
+    }
+    return R;
+  }, [e, t, n, l, o, i, s]), a = C(() => {
+    if (m || v.length === 0) return "";
+    const w = [], f = (g) => Math.round(g * 1e4) / 1e4;
+    for (const g of v)
+      if (u === "dot") {
+        const y = Me(e, t, n - r / 2, g.angle), S = r / 2, p = r / 2;
+        w.push(
+          `M ${f(y.x - S)} ${f(y.y)} A ${f(S)} ${f(p)} 0 1 0 ${f(y.x + S)} ${f(y.y)} A ${f(S)} ${f(p)} 0 1 0 ${f(y.x - S)} ${f(y.y)}`
+        );
+      } else {
+        const y = Me(e, t, n, g.angle), S = Me(e, t, n - r, g.angle);
+        w.push(`M ${f(S.x)} ${f(S.y)} L ${f(y.x)} ${f(y.y)}`);
+      }
+    return w.join(" ");
+  }, [v, e, t, n, r, u, m]);
+  return m ? /* @__PURE__ */ b("g", { className: c, style: h, children: v.map((w) => /* @__PURE__ */ b(I.Fragment, { children: m(w) }, w.index)) }) : a ? /* @__PURE__ */ b(
+    "path",
+    {
+      d: a,
+      className: c,
+      style: { ...u === "dot" ? { fill: "currentColor", stroke: "none" } : { fill: "none", stroke: "currentColor", strokeLinecap: u === "pill" ? "round" : "butt" }, ...h },
+      strokeWidth: u === "dot" ? void 0 : h?.strokeWidth || 1
+    }
+  ) : null;
+}
+const In = I.memo(Nn);
+function Rn({
+  cx: e,
+  cy: t,
+  radius: n,
+  labels: r,
+  orientation: l = "upright",
+  openness: o = 90,
+  rotation: i = 0,
+  className: s,
+  style: u,
+  labelClassName: m,
+  labelStyle: c,
+  iconSize: h
+}) {
+  return /* @__PURE__ */ b(
+    In,
+    {
+      cx: e,
+      cy: t,
+      radius: n,
+      openness: o,
+      rotation: i,
+      count: r.length,
+      className: s,
+      style: u,
+      renderTick: ({ x: v, y: a, angle: d, index: w }) => {
+        const f = r[w];
+        if (f == null) return null;
+        const g = I.isValidElement(f);
+        let y;
+        if (l === "radial") {
+          let S = d + 90;
+          const p = (S % 360 + 360) % 360;
+          p > 90 && p < 270 && (S += 180), y = `rotate(${S}, ${v}, ${a})`;
+        }
+        if (g) {
+          const S = y ? y.match(/rotate\(([-\d.]+)/)?.[1] : 0;
+          let p = 0;
+          if (h !== void 0)
+            p = -h / 2;
+          else {
+            const P = f.props, k = P?.size ?? P?.width ?? P?.height, R = Number(k);
+            !isNaN(R) && R > 0 && (p = -R / 2);
+          }
+          return /* @__PURE__ */ b("g", { transform: `translate(${v}, ${a}) rotate(${S}) translate(${p}, ${p})`, children: f });
+        }
+        return /* @__PURE__ */ b(
+          "text",
+          {
+            x: v,
+            y: a,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            className: m,
+            style: c,
+            transform: y,
+            fill: "currentColor",
+            children: f
+          }
+        );
+      }
+    }
+  );
+}
+const Zn = I.memo(Rn);
+function An({
+  onNoteOn: e,
+  onNoteOff: t,
+  disabled: n = !1,
+  onPointerDown: r,
+  onPointerMove: l,
+  onPointerUp: o,
+  onPointerCancel: i
+}) {
+  const s = de(null);
+  s.current || (s.current = new bt({
+    onNoteOn: (a) => e(a),
+    onNoteOff: (a) => t(a),
+    disabled: n
+  })), he(() => {
+    s.current?.updateConfig({
+      onNoteOn: (a) => e(a),
+      onNoteOff: (a) => t(a),
+      disabled: n
+    });
+  }, [e, t, n]), he(() => () => {
+    s.current?.cancelAll();
+  }, []);
+  const u = E((a) => {
+    const d = document.elementFromPoint(a.clientX, a.clientY);
+    if (!d) return null;
+    const w = d.getAttribute("data-note");
+    return w ? parseInt(w, 10) : null;
+  }, []), m = E(
+    (a) => {
+      if (r?.(a), a.defaultPrevented || n) return;
+      a.currentTarget.setPointerCapture(a.pointerId);
+      const d = u(a);
+      s.current?.handlePointerDown(a.pointerId, d);
+    },
+    [r, n, u]
+  ), c = E(
+    (a) => {
+      if (l?.(a), a.defaultPrevented || n) return;
+      const d = u(a);
+      s.current?.handlePointerMove(a.pointerId, d);
+    },
+    [l, n, u]
+  ), h = E(
+    (a) => {
+      o?.(a), !(a.defaultPrevented || n) && s.current?.handlePointerUp(a.pointerId);
+    },
+    [o, n]
+  ), v = E(
+    (a) => {
+      i?.(a), !(a.defaultPrevented || n) && s.current?.handlePointerUp(a.pointerId);
+    },
+    [i, n]
+  );
+  return {
+    onPointerDown: m,
+    onPointerMove: c,
+    onPointerUp: h,
+    onPointerCancel: v,
+    style: {
+      touchAction: "none"
+    }
+  };
+}
+const Te = $e.length, Pe = (e, t) => (e % t + t) % t;
+function En({
+  nbKeys: e = 61,
+  startKey: t = e === 88 ? "A" : "C",
+  octaveShift: n = 0,
+  notesOn: r = [],
+  adaptiveSize: l = !1,
+  size: o = "normal",
+  displayMode: i,
+  keyStyle: s = "theme",
+  color: u,
+  roundness: m,
+  className: c = "",
+  style: h = {},
+  onChange: v,
+  onClick: a
+}) {
+  const d = Math.max(1, Math.min(128, e)), {
+    onPointerDown: w,
+    onPointerMove: f,
+    onPointerUp: g,
+    onPointerCancel: y,
+    style: S
+  } = An({
+    onNoteOn: (z) => {
+      v?.({
+        value: { note: z, active: !0 },
+        normalizedValue: z / 127,
+        midiValue: z
+      });
+    },
+    onNoteOff: (z) => {
+      v?.({
+        value: { note: z, active: !1 },
+        normalizedValue: z / 127,
+        midiValue: z
+      });
+    }
+  }), p = C(() => {
+    const z = Math.floor(d / 12), A = d % 12, Y = Math.ceil(A * 7 / 12), K = z * 7 + Y, X = $e.indexOf(t), G = Math.floor((K - 1) / 2), _ = Math.floor(G / 7), F = X >= 5 ? 1 : 0;
+    let H;
+    d <= 12 ? H = 4 - F : d >= 120 ? H = Math.max(0, 4 - _ - F) : H = 4 - _ - F;
+    const ee = 25, J = 150, oe = 13, $ = 18, Z = J / 3 * 2, le = 2, ue = 2, fe = ue / 2, ce = K * ee, q = parseInt(t, 36) - parseInt("C", 36), ve = [Pe(2 + q, 7), Pe(6 + q, 7)];
+    return {
+      nbWhite: K,
+      startKeyIndex: X,
+      startOctave: H,
+      whiteWidth: ee,
+      whiteHeight: J,
+      blackWidth: oe,
+      blackXShift: $,
+      blackHeight: Z,
+      outerStrokeWidth: le,
+      innerStrokeWidth: ue,
+      width: ce,
+      blackPass: ve,
+      halfInnerStrokeWidth: fe
+    };
+  }, [d, t]), { style: P } = xe({
+    color: u,
+    roundness: m,
+    style: h
+  }), k = C(() => typeof m == "string" ? m : m === void 0 ? "var(--audioui-roundness-keys)" : St(m), [m]), R = u ?? "var(--audioui-primary-color)", N = C(() => Ct(R, "luminosity"), [R]), T = C(() => s === "theme" ? null : s === "classic" ? {
+    whiteFill: `var(${te.keysIvory})`,
+    whiteStroke: `var(${te.keysIvoryStroke})`,
+    blackFill: `var(${te.keysEbony})`,
+    blackStroke: `var(${te.keysEbonyStroke})`
+  } : {
+    whiteFill: `var(${te.keysEbony})`,
+    whiteStroke: `var(${te.keysEbonyStroke})`,
+    blackFill: `var(${te.keysIvory})`,
+    blackStroke: `var(${te.keysIvoryStroke})`
+  }, [s]), M = C(() => xt(r || []), [r]), U = C(() => {
+    const z = $e.indexOf(t);
+    return [
+      Pe(2 - z, 7),
+      // E-F gap (no black key after E)
+      Pe(6 - z, 7)
+      // B-C gap (no black key after B)
+    ];
+  }, [t]), B = E(
+    (z) => {
+      const A = Mt(z);
+      return A !== -1 && M.has(A);
+    },
+    [M]
+  ), x = C(() => {
+    const { nbWhite: z, startKeyIndex: A, startOctave: Y, whiteWidth: K, whiteHeight: X, innerStrokeWidth: G, halfInnerStrokeWidth: _ } = p, F = He[t], H = (Y + 1) * 12 + F;
+    return Array.from({ length: z }, (ee, J) => {
+      const oe = (A + J) % Te, $ = Math.floor((A + J) / Te), le = ke[oe] - ke[A] + $ * 12, ue = H + le - n * 12, fe = Ye(ue);
+      let ce, q;
+      return s === "theme" ? (ce = N.primary50, q = B(fe) ? N.primary : "transparent") : T ? (ce = T.whiteStroke, q = B(fe) ? N.primary : T.whiteFill) : (ce = "#000", q = "transparent"), /* @__PURE__ */ b(
+        "rect",
+        {
+          "data-note": ue,
+          style: {
+            stroke: ce,
+            fill: q,
+            rx: k,
+            ry: k
+          },
+          strokeWidth: G,
+          x: J * K + _,
+          y: _,
+          width: K,
+          height: X,
+          rx: typeof k == "number" ? k : 0
+        },
+        `white-${J}-${fe}`
+      );
+    });
+  }, [p, n, B, k, N, T, s, t]), O = C(() => {
+    const {
+      nbWhite: z,
+      startKeyIndex: A,
+      startOctave: Y,
+      whiteWidth: K,
+      blackWidth: X,
+      blackXShift: G,
+      blackHeight: _,
+      innerStrokeWidth: F,
+      halfInnerStrokeWidth: H
+    } = p, ee = He[t], J = (Y + 1) * 12 + ee;
+    return Array.from({ length: z - 1 }, (oe, $) => {
+      const Z = $ % 7;
+      if (U.includes(Z)) return null;
+      const le = (A + $) % Te, ue = Math.floor((A + $) / Te), ce = ke[le] - ke[A] + ue * 12, q = J + ce + 1 - n * 12;
+      if (kt.has(q % 12)) return null;
+      const ve = Ye(q);
+      let we, ge;
+      return s === "theme" ? (we = N.primary50, ge = B(ve) ? N.primary : N.primary50) : T ? (we = T.blackStroke, ge = B(ve) ? N.primary : T.blackFill) : (we = "#000", ge = "#000"), /* @__PURE__ */ b(
+        "rect",
+        {
+          "data-note": q,
+          style: {
+            zIndex: 1,
+            stroke: we,
+            fill: ge,
+            rx: k,
+            ry: k
+          },
+          strokeWidth: F,
+          x: $ * K + G + H,
+          y: H,
+          width: X,
+          height: _,
+          rx: typeof k == "number" ? k : 0
+        },
+        `black-${$}-${ve}`
+      );
+    }).filter(Boolean);
+  }, [
+    p,
+    n,
+    B,
+    U,
+    k,
+    N,
+    T,
+    s,
+    t
+  ]), { sizeClassName: D, sizeStyle: V } = ae(l, o, "keys"), L = C(() => ne(D, ie.root, c), [D, c]), W = C(() => v || a ? ie.highlight : "", [v, a]), j = C(
+    () => ({
+      ...S ?? {},
+      ...a || v ? { cursor: "var(--audioui-cursor-clickable)" } : {}
+    }),
+    [S, a, v]
+  );
+  return /* @__PURE__ */ b(
+    Q,
+    {
+      displayMode: i ?? "scaleToFit",
+      labelMode: "none",
+      className: L,
+      style: { ...V, ...P },
+      viewBoxWidth: p.width + p.innerStrokeWidth,
+      viewBoxHeight: p.whiteHeight + p.innerStrokeWidth,
+      minWidth: 40,
+      minHeight: 40,
+      children: /* @__PURE__ */ re(
+        Q.Svg,
+        {
+          className: W,
+          style: j,
+          onClick: a,
+          onPointerDown: w,
+          onPointerMove: f,
+          onPointerUp: g,
+          onPointerCancel: y,
+          children: [
+            x,
+            O
+          ]
+        }
+      )
+    }
+  );
+}
+const eo = I.memo(En);
+function $n(e) {
+  typeof document < "u" && document.documentElement.style.setProperty("--audioui-primary-color", e);
+}
+function Bn(e) {
+  if (typeof document < "u") {
+    document.documentElement.style.setProperty("--audioui-roundness-base", e.toString());
+    const t = e === 0 ? "square" : "round";
+    document.documentElement.style.setProperty("--audioui-linecap-base", t);
+  }
+}
+function to(e) {
+  typeof document > "u" || (e.color !== void 0 && $n(e.color), e.roundness !== void 0 && Bn(e.roundness));
+}
+function no() {
+  return typeof document > "u" || typeof window > "u" ? null : window.getComputedStyle(document.documentElement).getPropertyValue("--audioui-primary-color").trim() || null;
+}
+function oo() {
+  if (typeof document > "u" || typeof window > "u") return null;
+  const e = window.getComputedStyle(document.documentElement).getPropertyValue("--audioui-roundness-base").trim();
+  return e ? parseFloat(e) : null;
+}
+export {
+  Q as AdaptiveBox,
+  Ue as BooleanControl,
+  On as Button,
+  De as ButtonView,
+  Ae as ContinuousControl,
+  Fn as CycleButton,
+  so as DEFAULT_ROUNDNESS,
+  ao as DEFAULT_THICKNESS,
+  ze as DiscreteControl,
+  jn as FilmStripBooleanControl,
+  Hn as FilmStripContinuousControl,
+  Yn as FilmStripDiscreteControl,
+  mn as FilmstripImage,
+  dn as HorizontalSliderView,
+  xn as Image,
+  Xn as ImageKnob,
+  Gn as ImageRotarySwitch,
+  qn as ImageSwitch,
+  eo as Keys,
+  _n as Knob,
+  pe as KnobView,
+  Zn as LabelRing,
+  ln as LinearCursor,
+  tn as LinearStrip,
+  zn as OptionView,
+  Jn as RadialHtmlOverlay,
+  et as RadialImage,
+  Qn as RevealingPath,
+  Ne as RotaryImage,
+  Kn as Slider,
+  Wn as SliderView,
+  In as TickRing,
+  Vt as ValueRing,
+  on as ValueStrip,
+  cn as VerticalSliderView,
+  co as bipolarFormatter,
+  uo as calculateCenterValue,
+  fo as combineFormatters,
+  ho as createNoteNumSet,
+  mo as frequencyFormatter,
+  no as getThemeColor,
+  oo as getThemeRoundness,
+  vo as isNoteOn,
+  po as midiBipolarFormatter,
+  yo as noteNumToNote,
+  wo as noteToNoteNum,
+  go as percentageFormatter,
+  to as setTheme,
+  $n as setThemeColor,
+  Bn as setThemeRoundness,
+  ae as useAdaptiveSize,
+  Re as useAudioParameter,
+  $t as useBooleanParameterResolution,
+  tt as useContinuousParameterResolution,
+  Ve as useDiscreteParameterResolution,
+  An as useNoteInteraction,
+  xe as useThemableProps,
+  bo as withPrecision,
+  So as withUnit
+};
+//# sourceMappingURL=index.js.map