@microblink/camera-manager 7.1.0 → 7.2.0

package/dist/camera-manager.js

@@ -1,53 +1,76 @@
-(function(){"use strict";(r=>{window.__mbCameraManagerCssCode=r})("._dialogPositioner_worsp_1{position:fixed;top:calc(var(--mb-size)*0rem);left:calc(var(--mb-size)*0rem);display:grid;height:100vh;width:100%;padding:calc(var(--mb-size)*2rem)}@supports (height:100dvh){._dialogPositioner_worsp_1{height:100dvh}}._dialogBackdrop_worsp_5{position:absolute;top:calc(var(--mb-size)*0rem);left:calc(var(--mb-size)*0rem);width:100%;height:100%;--un-bg-opacity:1;background-color:rgb(var(--color-black-rgb-value) / var(--un-bg-opacity));--un-bg-opacity:.5;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}._dialogContent_worsp_9{position:relative;max-height:calc(100dvh - 4rem);max-width:28rem;display:flex;flex-direction:column;place-self:center;border-radius:.5rem;--un-bg-opacity:1;background-color:rgb(var(--color-white-rgb-value) / var(--un-bg-opacity));padding-left:min(8%,3rem);padding-right:min(8%,3rem);padding-top:min(8%,1.5rem);padding-bottom:min(8%,1.5rem);--un-text-opacity:1;color:rgb(15 15 15 / var(--un-text-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}._dialogContent_worsp_9._large_worsp_13{padding-left:min(8%,4rem);padding-right:min(8%,4rem);padding-top:min(8%,3rem);padding-bottom:min(8%,3rem)}._dialogContent_worsp_9._compact_worsp_16{padding:min(8%,1.5rem)}@media (min-width: 640px){._dialogContent_worsp_9{max-width:36rem}}@media (min-width: 1024px){._dialogContent_worsp_9{max-width:28rem}}._dialogTitle_worsp_30{text-align:center;font-size:calc(var(--mb-size)*1.5rem);line-height:calc(var(--mb-size)*2rem);font-weight:700}._contentOut_worsp_34{overflow-y:auto}._closeButton_worsp_38{position:absolute;top:.625rem;right:.625rem;width:calc(var(--mb-size)*2rem);height:calc(var(--mb-size)*2rem);display:flex;align-items:center;justify-content:center;border-radius:9999px;border-style:none;background-color:transparent;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.1s}._closeButton_worsp_38:hover{--un-bg-opacity:1;background-color:rgb(var(--color-gray-100-rgb-value) / var(--un-bg-opacity))}._closeButton_worsp_38:active{--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity))}._closeButtonInner_worsp_44{display:flex;--un-translate-y:-2px;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));align-items:center;justify-content:center;font-size:calc(var(--mb-size)*1.875rem);line-height:calc(var(--mb-size)*2.25rem);--un-text-opacity:1;color:rgb(var(--color-black-rgb-value) / var(--un-text-opacity));font-weight:200;line-height:1}._primaryActionButton_worsp_49{height:2.5rem;-webkit-appearance:none;appearance:none;border-radius:calc(var(--mb-size)*2.5rem);border-style:none;--un-bg-opacity:1;background-color:rgb(var(--color-primary) / var(--un-bg-opacity));padding-left:calc(var(--mb-size)*1.25rem);padding-right:calc(var(--mb-size)*1.25rem);padding-top:calc(var(--mb-size)*.25rem);padding-bottom:calc(var(--mb-size)*.25rem);text-wrap:nowrap;font-size:calc(var(--mb-size)*.875rem);line-height:calc(var(--mb-size)*1.25rem);--un-text-opacity:1;color:rgb(var(--color-white-rgb-value) / var(--un-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.1s}._primaryActionButton_worsp_49[disabled]{cursor:not-allowed;--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity));--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}._primaryActionButton_worsp_49[disabled]:hover{--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity))}._primaryActionButton_worsp_49:hover{--un-bg-opacity:1;background-color:rgb(var(--color-accent-700-rgb-value) / var(--un-bg-opacity))}._primaryActionButton_worsp_49:active{--un-bg-opacity:1;background-color:rgb(var(--color-accent-800-rgb-value) / var(--un-bg-opacity))}._primaryActionButton_worsp_49:focus{outline-width:2px;--un-outline-color-opacity:1;outline-color:rgb(var(--color-accent-400-rgb-value) / var(--un-outline-color-opacity));outline-offset:4px;outline-style:solid}._secondaryActionButton_worsp_53{height:2.5rem;-webkit-appearance:none;appearance:none;border-radius:calc(var(--mb-size)*2.5rem);border-style:none;background-color:transparent;padding-left:calc(var(--mb-size)*1.25rem);padding-right:calc(var(--mb-size)*1.25rem);padding-top:calc(var(--mb-size)*.25rem);padding-bottom:calc(var(--mb-size)*.25rem);text-wrap:nowrap;font-size:calc(var(--mb-size)*.875rem);line-height:calc(var(--mb-size)*1.25rem);--un-text-opacity:1;color:rgb(var(--color-primary) / var(--un-text-opacity));--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgb(var(--color-primary) / var(--un-ring-opacity)) ;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.1s}._secondaryActionButton_worsp_53[disabled]{cursor:not-allowed;--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity));--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}._secondaryActionButton_worsp_53[disabled]:hover{--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity))}._secondaryActionButton_worsp_53:hover{--un-bg-opacity:1;background-color:rgb(var(--color-accent-25-rgb-value) / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(var(--color-accent-700-rgb-value) / var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgb(var(--color-accent-700-rgb-value) / var(--un-ring-opacity)) }._secondaryActionButton_worsp_53:active{--un-bg-opacity:1;background-color:rgb(var(--color-accent-50-rgb-value) / var(--un-bg-opacity));--un-text-opacity:1;color:rgb(var(--color-accent-800-rgb-value) / var(--un-text-opacity));--un-ring-opacity:1;--un-ring-color:rgb(var(--color-accent-800-rgb-value) / var(--un-ring-opacity)) }._secondaryActionButton_worsp_53:focus{outline-width:2px;--un-outline-color-opacity:1;outline-color:rgb(var(--color-accent-400-rgb-value) / var(--un-outline-color-opacity));outline-offset:4px;outline-style:solid}._actions_worsp_57{display:flex;gap:calc(var(--mb-size)*1rem)}._actions_worsp_57 ._primaryActionButton_worsp_49,._actions_worsp_57 ._secondaryActionButton_worsp_53{width:50%}._alertTitle_worsp_64{font-size:calc(var(--mb-size)*1.125rem);line-height:calc(var(--mb-size)*1.75rem);--un-text-opacity:1;color:rgb(var(--color-gray-700-rgb-value) / var(--un-text-opacity));font-weight:400}._alertText_worsp_68{margin-top:calc(var(--mb-size)*1rem);margin-bottom:calc(var(--mb-size)*2rem);padding-left:calc(var(--mb-size)*.5rem);padding-right:calc(var(--mb-size)*.5rem);text-align:center;text-wrap:pretty;--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity));font-weight:300;line-height:1.5}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.left-0{left:calc(var(--mb-size)*0rem)}.right-0{right:calc(var(--mb-size)*0rem)}.right-4{right:calc(var(--mb-size)*1rem)}.top-\\[-1px\\]{top:-1px}.top-0{top:calc(var(--mb-size)*0rem)}.has-\\[\\[data-scope\\]\\]\\:z-2:has([data-scope]),.z-2{z-index:2}.z-1{z-index:1}.grid{display:grid}.auto-cols-auto{grid-auto-columns:auto}.grid-cols-\\[1fr_auto_1fr\\]{grid-template-columns:1fr auto 1fr}.block{display:block}.size-12{width:calc(var(--mb-size)*3rem);height:calc(var(--mb-size)*3rem)}.size-6{width:calc(var(--mb-size)*1.5rem);height:calc(var(--mb-size)*1.5rem)}.size-full{width:100%;height:100%}.h-\\[1px\\]{height:1px}.h-full{height:100%}.h-vh{height:100vh}.max-w-\\[100\\%\\]{max-width:100%}.min-h-\\[300px\\]{min-height:300px}.min-w-0{min-width:calc(var(--mb-size)*0rem)}.w-full{width:100%}.flex{display:flex}.shrink-0{flex-shrink:0}.flex-nowrap{flex-wrap:nowrap}.data-\\[state\\=open\\]\\:scale-y-\\[-1\\][data-state=open]{--un-scale-y:-1;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.select-none{-webkit-user-select:none;user-select:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;appearance:none}.place-items-center{place-items:center}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.gap-\\[1px\\]{gap:1px}.gap-2{gap:calc(var(--mb-size)*.5rem)}.gap-4{gap:calc(var(--mb-size)*1rem)}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded-4{border-radius:calc(var(--mb-size)*1rem)}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.border-none{border-style:none}.bg-dark-100\\/50{background-color:#3c3c3c80}.bg-dark-500{--un-bg-opacity:1;background-color:rgb(31 31 31 / var(--un-bg-opacity))}.bg-white{--un-bg-opacity:1;background-color:rgb(var(--color-white-rgb-value) / var(--un-bg-opacity))}.data-\\[highlighted\\]\\:bg-gray-500\\/50[data-highlighted]{background-color:rgb(var(--color-gray-500-rgb-value) / .5)}.bg-opacity-50{--un-bg-opacity:.5}.p-2{padding:calc(var(--mb-size)*.5rem)}.px-4{padding-left:calc(var(--mb-size)*1rem);padding-right:calc(var(--mb-size)*1rem)}.py-2{padding-top:calc(var(--mb-size)*.5rem);padding-bottom:calc(var(--mb-size)*.5rem)}.py-3{padding-top:calc(var(--mb-size)*.75rem);padding-bottom:calc(var(--mb-size)*.75rem)}.py-4{padding-top:calc(var(--mb-size)*1rem);padding-bottom:calc(var(--mb-size)*1rem)}.pl-4{padding-left:calc(var(--mb-size)*1rem)}.pr-12{padding-right:calc(var(--mb-size)*3rem)}.text-align-center{text-align:center}.text-base{font-size:calc(var(--mb-size)*1rem);line-height:calc(var(--mb-size)*1.5rem)}.text-sm{font-size:calc(var(--mb-size)*.875rem);line-height:calc(var(--mb-size)*1.25rem)}.color-white{--un-text-opacity:1;color:rgb(var(--color-white-rgb-value) / var(--un-text-opacity))}.font-500{font-weight:500}.disabled\\:opacity-50:disabled{opacity:.5}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.backdrop-blur{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}.backdrop-blur-xl{--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}.drop-shadow-md{--un-drop-shadow:drop-shadow(0 4px 3px var(--un-drop-shadow-color, rgb(0 0 0 / .07))) drop-shadow(0 2px 2px var(--un-drop-shadow-color, rgb(0 0 0 / .06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.lerp\\:px-3\\@xs\\,8\\@lg{padding-inline:clamp(calc(var(--mb-size)*.75rem),calc(var(--mb-size)*.75rem) + (100vw - 380px) * .031055900621118012,calc(var(--mb-size)*2rem))}@supports (height:100dvh){.supports-\\[\\(height\\:100dvh\\)\\]\\:h-dvh{height:100dvh}}")})();
-import { subscribeWithSelector as he } from "zustand/middleware";
-import { createStore as me } from "zustand/vanilla";
-import { createComponent as s, use as O, template as S, spread as D, mergeProps as K, insert as w, memo as ge, isServer as Be, delegateEvents as Ve, effect as H, className as V, Portal as fe, Dynamic as Ue, render as je } from "solid-js/web";
-import { createContext as be, onCleanup as ie, useContext as pe, onMount as Q, createSignal as z, Show as E, Index as qe, createRoot as He, getOwner as ve, splitProps as We, createEffect as Ge } from "solid-js";
-import { createWithSignal as we } from "solid-zustand";
-import { createStore as Xe } from "solid-js/store";
-import { EnvironmentProvider as Ke } from "@ark-ui/solid/environment";
-import { Dialog as $ } from "@ark-ui/solid/dialog";
-import { Select as A, createListCollection as Qe } from "@ark-ui/solid/select";
-import { Tooltip as G } from "@ark-ui/solid/tooltip";
-typeof HTMLVideoElement < "u" && !("requestVideoFrameCallback" in HTMLVideoElement.prototype) && "getVideoPlaybackQuality" in HTMLVideoElement.prototype && (HTMLVideoElement.prototype._rvfcpolyfillmap = {}, HTMLVideoElement.prototype.requestVideoFrameCallback = function(r) {
-  const e = performance.now(), t = this.getVideoPlaybackQuality(), a = this.mozPresentedFrames || this.mozPaintedFrames || t.totalVideoFrames - t.droppedVideoFrames, n = (o, i) => {
-    const l = this.getVideoPlaybackQuality(), c = this.mozPresentedFrames || this.mozPaintedFrames || l.totalVideoFrames - l.droppedVideoFrames;
-    if (c > a) {
-      const f = this.mozFrameDelay || l.totalFrameDelay - t.totalFrameDelay || 0, g = i - o;
-      r(i, {
-        presentationTime: i + f * 1e3,
-        expectedDisplayTime: i + g,
-        width: this.videoWidth,
-        height: this.videoHeight,
-        mediaTime: Math.max(0, this.currentTime || 0) + g / 1e3,
-        presentedFrames: c,
-        processingDuration: f
-      }), delete this._rvfcpolyfillmap[e];
-    } else
-      this._rvfcpolyfillmap[e] = requestAnimationFrame((f) => n(i, f));
+(function() {
+  "use strict";
+  ((cssCode) => {
+    window.__mbCameraManagerCssCode = cssCode;
+  })("._dialogPositioner_worsp_1 {\n  position:fixed;top:calc(var(--mb-size)*0rem);left:calc(var(--mb-size)*0rem);display:grid;height:100vh;width:100%;padding:calc(var(--mb-size)*2rem);\n}@supports (height:100dvh){._dialogPositioner_worsp_1{height:100dvh;}}\n\n._dialogBackdrop_worsp_5 {\n  position:absolute;top:calc(var(--mb-size)*0rem);left:calc(var(--mb-size)*0rem);width:100%;height:100%;--un-bg-opacity:1;background-color:rgb(var(--color-black-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-black-rgb-value) / <alpha-value>) */;--un-bg-opacity:0.5;--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);\n}\n\n._dialogContent_worsp_9 {\n  position:relative;max-height:calc(100dvh - 4rem);max-width:28rem;display:flex;flex-direction:column;place-self:center;border-radius:0.5rem;--un-bg-opacity:1;background-color:rgb(var(--color-white-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-white-rgb-value) / <alpha-value>) */;padding-left:min(8%,3rem);padding-right:min(8%,3rem);padding-top:min(8%,1.5rem);padding-bottom:min(8%,1.5rem);--un-text-opacity:1;color:rgb(15 15 15 / var(--un-text-opacity)) /* #0f0f0f */;--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);\n}\n._dialogContent_worsp_9._large_worsp_13 {\n  padding-left:min(8%,4rem);padding-right:min(8%,4rem);padding-top:min(8%,3rem);padding-bottom:min(8%,3rem);\n}\n._dialogContent_worsp_9._compact_worsp_16 {\n  padding:min(8%,1.5rem);\n}\n@media (min-width: 640px){\n  ._dialogContent_worsp_9 {\n    max-width:36rem;\n  }\n}\n@media (min-width: 1024px){\n  ._dialogContent_worsp_9 {\n    max-width:28rem;\n  }\n}\n\n._dialogTitle_worsp_30 {\n  text-align:center;font-size:calc(var(--mb-size)*1.5rem);line-height:calc(var(--mb-size)*2rem);font-weight:700;\n}\n\n._contentOut_worsp_34 {\n  overflow-y:auto;\n}\n\n._closeButton_worsp_38 {\n  position:absolute;top:0.625rem;right:0.625rem;width:calc(var(--mb-size)*2rem);height:calc(var(--mb-size)*2rem);display:flex;align-items:center;justify-content:center;border-radius:9999px;border-style:none;background-color:transparent /* transparent */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:100ms;\n}._closeButton_worsp_38:hover{--un-bg-opacity:1;background-color:rgb(var(--color-gray-100-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-gray-100-rgb-value) / <alpha-value>) */;}._closeButton_worsp_38:active{--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-gray-200-rgb-value) / <alpha-value>) */;}\n\n._closeButtonInner_worsp_44 {\n  display:flex;--un-translate-y:-2px;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));align-items:center;justify-content:center;font-size:calc(var(--mb-size)*1.875rem);line-height:calc(var(--mb-size)*2.25rem);--un-text-opacity:1;color:rgb(var(--color-black-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-black-rgb-value) / <alpha-value>) */;font-weight:200;line-height:1;\n}\n\n._primaryActionButton_worsp_49 {\n  height:2.5rem;-webkit-appearance:none;appearance:none;border-radius:calc(var(--mb-size)*2.5rem);border-style:none;--un-bg-opacity:1;background-color:rgb(var(--color-primary) / var(--un-bg-opacity)) /* rgb(var(--color-primary) / <alpha-value>) */;padding-left:calc(var(--mb-size)*1.25rem);padding-right:calc(var(--mb-size)*1.25rem);padding-top:calc(var(--mb-size)*0.25rem);padding-bottom:calc(var(--mb-size)*0.25rem);text-wrap:nowrap;font-size:calc(var(--mb-size)*0.875rem);line-height:calc(var(--mb-size)*1.25rem);--un-text-opacity:1;color:rgb(var(--color-white-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-white-rgb-value) / <alpha-value>) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:100ms;\n}._primaryActionButton_worsp_49[disabled]{cursor:not-allowed;--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-gray-200-rgb-value) / <alpha-value>) */;--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-gray-500-rgb-value) / <alpha-value>) */;--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}._primaryActionButton_worsp_49[disabled]:hover{--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-gray-200-rgb-value) / <alpha-value>) */;--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-gray-500-rgb-value) / <alpha-value>) */;}._primaryActionButton_worsp_49:hover{--un-bg-opacity:1;background-color:rgb(var(--color-accent-700-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-accent-700-rgb-value) / <alpha-value>) */;}._primaryActionButton_worsp_49:active{--un-bg-opacity:1;background-color:rgb(var(--color-accent-800-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-accent-800-rgb-value) / <alpha-value>) */;}._primaryActionButton_worsp_49:focus{outline-width:2px;--un-outline-color-opacity:1;outline-color:rgb(var(--color-accent-400-rgb-value) / var(--un-outline-color-opacity)) /* rgb(var(--color-accent-400-rgb-value) / <alpha-value>) */;outline-offset:4px;outline-style:solid;}\n\n._secondaryActionButton_worsp_53 {\n  height:2.5rem;-webkit-appearance:none;appearance:none;border-radius:calc(var(--mb-size)*2.5rem);border-style:none;background-color:transparent /* transparent */;padding-left:calc(var(--mb-size)*1.25rem);padding-right:calc(var(--mb-size)*1.25rem);padding-top:calc(var(--mb-size)*0.25rem);padding-bottom:calc(var(--mb-size)*0.25rem);text-wrap:nowrap;font-size:calc(var(--mb-size)*0.875rem);line-height:calc(var(--mb-size)*1.25rem);--un-text-opacity:1;color:rgb(var(--color-primary) / var(--un-text-opacity)) /* rgb(var(--color-primary) / <alpha-value>) */;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgb(var(--color-primary) / var(--un-ring-opacity)) /* rgb(var(--color-primary) / <alpha-value>) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:100ms;\n}._secondaryActionButton_worsp_53[disabled]{cursor:not-allowed;--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-gray-200-rgb-value) / <alpha-value>) */;--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-gray-500-rgb-value) / <alpha-value>) */;--un-ring-width:0px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}._secondaryActionButton_worsp_53[disabled]:hover{--un-bg-opacity:1;background-color:rgb(var(--color-gray-200-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-gray-200-rgb-value) / <alpha-value>) */;--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-gray-500-rgb-value) / <alpha-value>) */;}._secondaryActionButton_worsp_53:hover{--un-bg-opacity:1;background-color:rgb(var(--color-accent-25-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-accent-25-rgb-value) / <alpha-value>) */;--un-text-opacity:1;color:rgb(var(--color-accent-700-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-accent-700-rgb-value) / <alpha-value>) */;--un-ring-opacity:1;--un-ring-color:rgb(var(--color-accent-700-rgb-value) / var(--un-ring-opacity)) /* rgb(var(--color-accent-700-rgb-value) / <alpha-value>) */;}._secondaryActionButton_worsp_53:active{--un-bg-opacity:1;background-color:rgb(var(--color-accent-50-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-accent-50-rgb-value) / <alpha-value>) */;--un-text-opacity:1;color:rgb(var(--color-accent-800-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-accent-800-rgb-value) / <alpha-value>) */;--un-ring-opacity:1;--un-ring-color:rgb(var(--color-accent-800-rgb-value) / var(--un-ring-opacity)) /* rgb(var(--color-accent-800-rgb-value) / <alpha-value>) */;}._secondaryActionButton_worsp_53:focus{outline-width:2px;--un-outline-color-opacity:1;outline-color:rgb(var(--color-accent-400-rgb-value) / var(--un-outline-color-opacity)) /* rgb(var(--color-accent-400-rgb-value) / <alpha-value>) */;outline-offset:4px;outline-style:solid;}\n\n._actions_worsp_57 {\n  display:flex;gap:calc(var(--mb-size)*1rem);\n}\n._actions_worsp_57 ._primaryActionButton_worsp_49, ._actions_worsp_57 ._secondaryActionButton_worsp_53 {\n  width:50%;\n}\n\n._alertTitle_worsp_64 {\n  font-size:calc(var(--mb-size)*1.125rem);line-height:calc(var(--mb-size)*1.75rem);--un-text-opacity:1;color:rgb(var(--color-gray-700-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-gray-700-rgb-value) / <alpha-value>) */;font-weight:400;\n}\n\n._alertText_worsp_68 {\n  margin-top:calc(var(--mb-size)*1rem);margin-bottom:calc(var(--mb-size)*2rem);padding-left:calc(var(--mb-size)*0.5rem);padding-right:calc(var(--mb-size)*0.5rem);text-align:center;text-wrap:pretty;--un-text-opacity:1;color:rgb(var(--color-gray-500-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-gray-500-rgb-value) / <alpha-value>) */;font-weight:300;line-height:1.5;\n} *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.pointer-events-none{pointer-events:none;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.left-0{left:calc(var(--mb-size)*0rem);}.right-0{right:calc(var(--mb-size)*0rem);}.right-4{right:calc(var(--mb-size)*1rem);}.top-\\[-1px\\]{top:-1px;}.top-0{top:calc(var(--mb-size)*0rem);}.z-1{z-index:1;}.has-\\[\\[data-scope\\]\\]\\:z-2:has([data-scope]),.z-2{z-index:2;}.grid{display:grid;}.auto-cols-auto{grid-auto-columns:auto;}.grid-cols-\\[1fr_auto_1fr\\]{grid-template-columns:1fr auto 1fr;}.block{display:block;}.size-12{width:calc(var(--mb-size)*3rem);height:calc(var(--mb-size)*3rem);}.size-6{width:calc(var(--mb-size)*1.5rem);height:calc(var(--mb-size)*1.5rem);}.size-full{width:100%;height:100%;}.h-\\[1px\\]{height:1px;}.h-full{height:100%;}.h-vh{height:100vh;}.max-w-\\[100\\%\\]{max-width:100%;}.min-h-\\[300px\\]{min-height:300px;}.min-w-0{min-width:calc(var(--mb-size)*0rem);}.w-full{width:100%;}.flex{display:flex;}.shrink-0{flex-shrink:0;}.flex-nowrap{flex-wrap:nowrap;}.data-\\[state\\=open\\]\\:scale-y-\\[-1\\][data-state=open]{--un-scale-y:-1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.cursor-pointer{cursor:pointer;}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed;}.select-none{-webkit-user-select:none;user-select:none;}.resize{resize:both;}.appearance-none{-webkit-appearance:none;appearance:none;}.place-items-center{place-items:center;}.items-center{align-items:center;}.justify-between{justify-content:space-between;}.justify-self-start{justify-self:start;}.justify-self-end{justify-self:end;}.justify-self-center{justify-self:center;}.gap-\\[1px\\]{gap:1px;}.gap-2{gap:calc(var(--mb-size)*0.5rem);}.gap-4{gap:calc(var(--mb-size)*1rem);}.overflow-hidden{overflow:hidden;}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.whitespace-nowrap{white-space:nowrap;}.rounded-4{border-radius:calc(var(--mb-size)*1rem);}.rounded-full{border-radius:9999px;}.rounded-md{border-radius:0.375rem;}.border-none{border-style:none;}.bg-dark-100\\/50{background-color:rgb(60 60 60 / 0.5) /* #3c3c3c */;}.bg-dark-500{--un-bg-opacity:1;background-color:rgb(31 31 31 / var(--un-bg-opacity)) /* #1f1f1f */;}.data-\\[highlighted\\]\\:bg-gray-500\\/50[data-highlighted]{background-color:rgb(var(--color-gray-500-rgb-value) / 0.5) /* rgb(var(--color-gray-500-rgb-value) / <alpha-value>) */;}.bg-white{--un-bg-opacity:1;background-color:rgb(var(--color-white-rgb-value) / var(--un-bg-opacity)) /* rgb(var(--color-white-rgb-value) / <alpha-value>) */;}.bg-opacity-50{--un-bg-opacity:0.5;}.p-2{padding:calc(var(--mb-size)*0.5rem);}.px-4{padding-left:calc(var(--mb-size)*1rem);padding-right:calc(var(--mb-size)*1rem);}.py-2{padding-top:calc(var(--mb-size)*0.5rem);padding-bottom:calc(var(--mb-size)*0.5rem);}.py-3{padding-top:calc(var(--mb-size)*0.75rem);padding-bottom:calc(var(--mb-size)*0.75rem);}.py-4{padding-top:calc(var(--mb-size)*1rem);padding-bottom:calc(var(--mb-size)*1rem);}.pl-4{padding-left:calc(var(--mb-size)*1rem);}.pr-12{padding-right:calc(var(--mb-size)*3rem);}.text-align-center{text-align:center;}.text-base{font-size:calc(var(--mb-size)*1rem);line-height:calc(var(--mb-size)*1.5rem);}.text-sm{font-size:calc(var(--mb-size)*0.875rem);line-height:calc(var(--mb-size)*1.25rem);}.color-white{--un-text-opacity:1;color:rgb(var(--color-white-rgb-value) / var(--un-text-opacity)) /* rgb(var(--color-white-rgb-value) / <alpha-value>) */;}.font-500{font-weight:500;}.disabled\\:opacity-50:disabled{opacity:0.5;}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.backdrop-blur{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}.backdrop-blur-xl{--un-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}.drop-shadow-md{--un-drop-shadow:drop-shadow(0 4px 3px var(--un-drop-shadow-color, rgb(0 0 0 / 0.07))) drop-shadow(0 2px 2px var(--un-drop-shadow-color, rgb(0 0 0 / 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.duration-300{transition-duration:300ms;}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}@keyframes __un_qm{0%{box-shadow:inset 4px 4px #ff1e90, inset -4px -4px #ff1e90}100%{box-shadow:inset 8px 8px #3399ff, inset -8px -8px #3399ff}} .\\?{animation:__un_qm 0.5s ease-in-out alternate infinite;}.lerp\\:px-3\\@xs\\,8\\@lg{padding-inline:clamp(calc(var(--mb-size)*0.75rem), calc(var(--mb-size)*0.75rem) + (100vw - 380px) * 0.031055900621118012, calc(var(--mb-size)*2rem));}@supports (height:100dvh){.supports-\\[\\(height\\:100dvh\\)\\]\\:h-dvh{height:100dvh;}}");
+})();
+import { subscribeWithSelector } from "zustand/middleware";
+import { createStore } from "zustand/vanilla";
+import { createComponent, use, template, spread, mergeProps, insert, memo, isServer, delegateEvents, effect, className, Portal, Dynamic, render } from "solid-js/web";
+import { createContext, onCleanup, useContext, onMount, createSignal, Show, Index, createRoot, getOwner, splitProps, createEffect } from "solid-js";
+import { createWithSignal } from "solid-zustand";
+import { createStore as createStore$1 } from "solid-js/store";
+import { EnvironmentProvider } from "@ark-ui/solid/environment";
+import { Dialog } from "@ark-ui/solid/dialog";
+import { Select, createListCollection } from "@ark-ui/solid/select";
+import { Tooltip } from "@ark-ui/solid/tooltip";
+if (typeof HTMLVideoElement !== "undefined" && !("requestVideoFrameCallback" in HTMLVideoElement.prototype) && "getVideoPlaybackQuality" in HTMLVideoElement.prototype) {
+  HTMLVideoElement.prototype._rvfcpolyfillmap = {};
+  HTMLVideoElement.prototype.requestVideoFrameCallback = function(callback) {
+    const handle = performance.now();
+    const quality = this.getVideoPlaybackQuality();
+    const baseline = this.mozPresentedFrames || this.mozPaintedFrames || quality.totalVideoFrames - quality.droppedVideoFrames;
+    const check = (old, now) => {
+      const newquality = this.getVideoPlaybackQuality();
+      const presentedFrames = this.mozPresentedFrames || this.mozPaintedFrames || newquality.totalVideoFrames - newquality.droppedVideoFrames;
+      if (presentedFrames > baseline) {
+        const processingDuration = this.mozFrameDelay || newquality.totalFrameDelay - quality.totalFrameDelay || 0;
+        const timediff = now - old;
+        callback(now, {
+          presentationTime: now + processingDuration * 1e3,
+          expectedDisplayTime: now + timediff,
+          width: this.videoWidth,
+          height: this.videoHeight,
+          mediaTime: Math.max(0, this.currentTime || 0) + timediff / 1e3,
+          presentedFrames,
+          processingDuration
+        });
+        delete this._rvfcpolyfillmap[handle];
+      } else {
+        this._rvfcpolyfillmap[handle] = requestAnimationFrame((newer) => check(now, newer));
+      }
+    };
+    this._rvfcpolyfillmap[handle] = requestAnimationFrame((newer) => check(handle, newer));
+    return handle;
   };
-  return this._rvfcpolyfillmap[e] = requestAnimationFrame((o) => n(e, o)), e;
-}, HTMLVideoElement.prototype.cancelVideoFrameCallback = function(r) {
-  cancelAnimationFrame(this._rvfcpolyfillmap[r]), delete this._rvfcpolyfillmap[r];
-});
-const ye = {
+  HTMLVideoElement.prototype.cancelVideoFrameCallback = function(handle) {
+    cancelAnimationFrame(this._rvfcpolyfillmap[handle]);
+    delete this._rvfcpolyfillmap[handle];
+  };
+}
+const initialState$1 = {
   cameras: [],
   facingFilter: void 0,
   videoElement: void 0,
   playbackState: "idle",
   selectedCamera: void 0,
-  isSwappingCamera: !1,
-  isQueryingCameras: !1,
-  mirrorX: !1,
+  isSwappingCamera: false,
+  isQueryingCameras: false,
+  mirrorX: false,
   errorState: void 0
-}, d = me()(
+};
+const cameraManagerStore = createStore()(
   // this is important! Otherwise solid-zustand will start mutating the initial state
-  he(() => structuredClone(ye))
-), Ye = () => {
-  console.debug("Stopping all cameras and resetting the `cameraManagerStore`."), d.getState().cameras.forEach((r) => {
-    r.stopStream();
-  }), d.setState(structuredClone(ye));
-}, Je = [
+  subscribeWithSelector(() => structuredClone(initialState$1))
+);
+const resetCameraManagerStore = () => {
+  console.debug("Stopping all cameras and resetting the `cameraManagerStore`.");
+  cameraManagerStore.getState().cameras.forEach((camera) => {
+    camera.stopStream();
+  });
+  cameraManagerStore.setState(structuredClone(initialState$1));
+};
+const backCameraKeywords = [
   // English
   "back",
   "rear",
@@ -118,7 +141,8 @@ const ye = {
   "बैक",
   // Latin American Spanish
   "posterior"
-], Ze = [
+];
+const frontCameraKeywords = [
   // English
   "front",
   // German
@@ -185,38 +209,66 @@ const ye = {
   "फ्रंट",
   // Latin American Spanish
   "frontal"
-], Se = (r, e) => e.some((t) => r.toLowerCase().includes(t)), Ce = (r) => Se(r, Je), ke = (r) => Se(r, Ze);
-var et = /* @__PURE__ */ function() {
-  function r(e, t) {
-    for (var a = 0; a < t.length; a++) {
-      var n = t[a];
-      n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(e, n.key, n);
+];
+const containsKeyword = (string, keywords) => {
+  return keywords.some((keyword) => string.toLowerCase().includes(keyword));
+};
+const isBackCameraName = (string) => containsKeyword(string, backCameraKeywords);
+const isFrontCameraName = (string) => containsKeyword(string, frontCameraKeywords);
+var _createClass = /* @__PURE__ */ function() {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
     }
   }
-  return function(e, t, a) {
-    return t && r(e.prototype, t), a && r(e, a), e;
+  return function(Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
   };
-}(), tt = rt(["", ""], ["", ""]);
-function rt(r, e) {
-  return Object.freeze(Object.defineProperties(r, { raw: { value: Object.freeze(e) } }));
+}();
+var _templateObject = _taggedTemplateLiteral(["", ""], ["", ""]);
+function _taggedTemplateLiteral(strings, raw) {
+  return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } }));
 }
-function at(r, e) {
-  if (!(r instanceof e))
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
+  }
 }
-var _ = function() {
-  function r() {
-    for (var e = this, t = arguments.length, a = Array(t), n = 0; n < t; n++)
-      a[n] = arguments[n];
-    return at(this, r), this.tag = function(o) {
-      for (var i = arguments.length, l = Array(i > 1 ? i - 1 : 0), c = 1; c < i; c++)
-        l[c - 1] = arguments[c];
-      return typeof o == "function" ? e.interimTag.bind(e, o) : typeof o == "string" ? e.transformEndResult(o) : (o = o.map(e.transformString.bind(e)), e.transformEndResult(o.reduce(e.processSubstitutions.bind(e, l))));
-    }, a.length > 0 && Array.isArray(a[0]) && (a = a[0]), this.transformers = a.map(function(o) {
-      return typeof o == "function" ? o() : o;
-    }), this.tag;
-  }
-  return et(r, [{
+var TemplateTag = function() {
+  function TemplateTag2() {
+    var _this = this;
+    for (var _len = arguments.length, transformers = Array(_len), _key = 0; _key < _len; _key++) {
+      transformers[_key] = arguments[_key];
+    }
+    _classCallCheck(this, TemplateTag2);
+    this.tag = function(strings) {
+      for (var _len2 = arguments.length, expressions = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        expressions[_key2 - 1] = arguments[_key2];
+      }
+      if (typeof strings === "function") {
+        return _this.interimTag.bind(_this, strings);
+      }
+      if (typeof strings === "string") {
+        return _this.transformEndResult(strings);
+      }
+      strings = strings.map(_this.transformString.bind(_this));
+      return _this.transformEndResult(strings.reduce(_this.processSubstitutions.bind(_this, expressions)));
+    };
+    if (transformers.length > 0 && Array.isArray(transformers[0])) {
+      transformers = transformers[0];
+    }
+    this.transformers = transformers.map(function(transformer) {
+      return typeof transformer === "function" ? transformer() : transformer;
+    });
+    return this.tag;
+  }
+  _createClass(TemplateTag2, [{
     key: "interimTag",
     /**
      * An intermediary template tag that receives a template tag and passes the result of calling the template with the received
@@ -226,10 +278,11 @@ var _ = function() {
      * @param  {...*}            ...substitutions - `substitutions` is an array of all substitutions in the template
      * @return {*}                                - the final processed value
      */
-    value: function(t, a) {
-      for (var n = arguments.length, o = Array(n > 2 ? n - 2 : 0), i = 2; i < n; i++)
-        o[i - 2] = arguments[i];
-      return this.tag(tt, t.apply(void 0, [a].concat(o)));
+    value: function interimTag(previousTag, template2) {
+      for (var _len3 = arguments.length, substitutions = Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
+        substitutions[_key3 - 2] = arguments[_key3];
+      }
+      return this.tag(_templateObject, previousTag.apply(void 0, [template2].concat(substitutions)));
     }
     /**
      * Performs bulk processing on the tagged template, transforming each substitution and then
@@ -241,9 +294,9 @@ var _ = function() {
      */
   }, {
     key: "processSubstitutions",
-    value: function(t, a, n) {
-      var o = this.transformSubstitution(t.shift(), a);
-      return "".concat(a, o, n);
+    value: function processSubstitutions(substitutions, resultSoFar, remainingPart) {
+      var substitution = this.transformSubstitution(substitutions.shift(), resultSoFar);
+      return "".concat(resultSoFar, substitution, remainingPart);
     }
     /**
      * Iterate through each transformer, applying the transformer's `onString` method to the template
@@ -253,11 +306,11 @@ var _ = function() {
      */
   }, {
     key: "transformString",
-    value: function(t) {
-      var a = function(o, i) {
-        return i.onString ? i.onString(o) : o;
+    value: function transformString(str) {
+      var cb = function cb2(res, transform) {
+        return transform.onString ? transform.onString(res) : res;
       };
-      return this.transformers.reduce(a, t);
+      return this.transformers.reduce(cb, str);
     }
     /**
      * When a substitution is encountered, iterates through each transformer and applies the transformer's
@@ -268,11 +321,11 @@ var _ = function() {
      */
   }, {
     key: "transformSubstitution",
-    value: function(t, a) {
-      var n = function(i, l) {
-        return l.onSubstitution ? l.onSubstitution(i, a) : i;
+    value: function transformSubstitution(substitution, resultSoFar) {
+      var cb = function cb2(res, transform) {
+        return transform.onSubstitution ? transform.onSubstitution(res, resultSoFar) : res;
       };
-      return this.transformers.reduce(n, t);
+      return this.transformers.reduce(cb, substitution);
     }
     /**
      * Iterates through each transformer, applying the transformer's `onEndResult` method to the
@@ -282,120 +335,161 @@ var _ = function() {
      */
   }, {
     key: "transformEndResult",
-    value: function(t) {
-      var a = function(o, i) {
-        return i.onEndResult ? i.onEndResult(o) : o;
+    value: function transformEndResult(endResult) {
+      var cb = function cb2(res, transform) {
+        return transform.onEndResult ? transform.onEndResult(res) : res;
       };
-      return this.transformers.reduce(a, t);
+      return this.transformers.reduce(cb, endResult);
     }
-  }]), r;
-}(), T = function() {
-  var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
+  }]);
+  return TemplateTag2;
+}();
+var trimResultTransformer = function trimResultTransformer2() {
+  var side = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "";
   return {
-    onEndResult: function(a) {
-      if (e === "")
-        return a.trim();
-      if (e = e.toLowerCase(), e === "start" || e === "left")
-        return a.replace(/^\s*/, "");
-      if (e === "end" || e === "right")
-        return a.replace(/\s*$/, "");
-      throw new Error("Side not supported: " + e);
+    onEndResult: function onEndResult(endResult) {
+      if (side === "") {
+        return endResult.trim();
+      }
+      side = side.toLowerCase();
+      if (side === "start" || side === "left") {
+        return endResult.replace(/^\s*/, "");
+      }
+      if (side === "end" || side === "right") {
+        return endResult.replace(/\s*$/, "");
+      }
+      throw new Error("Side not supported: " + side);
     }
   };
 };
-function nt(r) {
-  if (Array.isArray(r)) {
-    for (var e = 0, t = Array(r.length); e < r.length; e++)
-      t[e] = r[e];
-    return t;
-  } else
-    return Array.from(r);
+function _toConsumableArray(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
+      arr2[i] = arr[i];
+    }
+    return arr2;
+  } else {
+    return Array.from(arr);
+  }
 }
-var L = function() {
-  var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "initial";
+var stripIndentTransformer = function stripIndentTransformer2() {
+  var type = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "initial";
   return {
-    onEndResult: function(a) {
-      if (e === "initial") {
-        var n = a.match(/^[^\S\n]*(?=\S)/gm), o = n && Math.min.apply(Math, nt(n.map(function(l) {
-          return l.length;
+    onEndResult: function onEndResult(endResult) {
+      if (type === "initial") {
+        var match = endResult.match(/^[^\S\n]*(?=\S)/gm);
+        var indent = match && Math.min.apply(Math, _toConsumableArray(match.map(function(el) {
+          return el.length;
         })));
-        if (o) {
-          var i = new RegExp("^.{" + o + "}", "gm");
-          return a.replace(i, "");
+        if (indent) {
+          var regexp = new RegExp("^.{" + indent + "}", "gm");
+          return endResult.replace(regexp, "");
         }
-        return a;
+        return endResult;
       }
-      if (e === "all")
-        return a.replace(/^[^\S\n]+/gm, "");
-      throw new Error("Unknown type: " + e);
+      if (type === "all") {
+        return endResult.replace(/^[^\S\n]+/gm, "");
+      }
+      throw new Error("Unknown type: " + type);
     }
   };
-}, j = function(e, t) {
+};
+var replaceResultTransformer = function replaceResultTransformer2(replaceWhat, replaceWith) {
   return {
-    onEndResult: function(n) {
-      if (e == null || t == null)
+    onEndResult: function onEndResult(endResult) {
+      if (replaceWhat == null || replaceWith == null) {
         throw new Error("replaceResultTransformer requires at least 2 arguments.");
-      return n.replace(e, t);
+      }
+      return endResult.replace(replaceWhat, replaceWith);
     }
   };
-}, B = function(e, t) {
+};
+var replaceSubstitutionTransformer = function replaceSubstitutionTransformer2(replaceWhat, replaceWith) {
   return {
-    onSubstitution: function(n, o) {
-      if (e == null || t == null)
+    onSubstitution: function onSubstitution(substitution, resultSoFar) {
+      if (replaceWhat == null || replaceWith == null) {
         throw new Error("replaceSubstitutionTransformer requires at least 2 arguments.");
-      return n == null ? n : n.toString().replace(e, t);
+      }
+      if (substitution == null) {
+        return substitution;
+      } else {
+        return substitution.toString().replace(replaceWhat, replaceWith);
+      }
     }
   };
-}, ot = {
+};
+var defaults = {
   separator: "",
   conjunction: "",
-  serial: !1
-}, I = function() {
-  var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : ot;
+  serial: false
+};
+var inlineArrayTransformer = function inlineArrayTransformer2() {
+  var opts = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaults;
   return {
-    onSubstitution: function(a, n) {
-      if (Array.isArray(a)) {
-        var o = a.length, i = e.separator, l = e.conjunction, c = e.serial, f = n.match(/(\n?[^\S\n]+)$/);
-        if (f ? a = a.join(i + f[1]) : a = a.join(i + " "), l && o > 1) {
-          var g = a.lastIndexOf(i);
-          a = a.slice(0, g) + (c ? i : "") + " " + l + a.slice(g + 1);
+    onSubstitution: function onSubstitution(substitution, resultSoFar) {
+      if (Array.isArray(substitution)) {
+        var arrayLength = substitution.length;
+        var separator = opts.separator;
+        var conjunction = opts.conjunction;
+        var serial = opts.serial;
+        var indent = resultSoFar.match(/(\n?[^\S\n]+)$/);
+        if (indent) {
+          substitution = substitution.join(separator + indent[1]);
+        } else {
+          substitution = substitution.join(separator + " ");
+        }
+        if (conjunction && arrayLength > 1) {
+          var separatorIndex = substitution.lastIndexOf(separator);
+          substitution = substitution.slice(0, separatorIndex) + (serial ? separator : "") + " " + conjunction + substitution.slice(separatorIndex + 1);
         }
       }
-      return a;
+      return substitution;
     }
   };
-}, Ee = function(e) {
+};
+var splitStringTransformer = function splitStringTransformer2(splitBy) {
   return {
-    onSubstitution: function(a, n) {
-      return typeof a == "string" && a.includes(e) && (a = a.split(e)), a;
+    onSubstitution: function onSubstitution(substitution, resultSoFar) {
+      {
+        if (typeof substitution === "string" && substitution.includes(splitBy)) {
+          substitution = substitution.split(splitBy);
+        }
+      }
+      return substitution;
     }
   };
-}, le = function(e) {
-  return e != null && !Number.isNaN(e) && typeof e != "boolean";
-}, it = function() {
+};
+var isValidValue = function isValidValue2(x) {
+  return x != null && !Number.isNaN(x) && typeof x !== "boolean";
+};
+var removeNonPrintingValuesTransformer = function removeNonPrintingValuesTransformer2() {
   return {
-    onSubstitution: function(t) {
-      return Array.isArray(t) ? t.filter(le) : le(t) ? t : "";
+    onSubstitution: function onSubstitution(substitution) {
+      if (Array.isArray(substitution)) {
+        return substitution.filter(isValidValue);
+      }
+      if (isValidValue(substitution)) {
+        return substitution;
+      }
+      return "";
     }
   };
 };
-new _(I({ separator: "," }), L, T);
-new _(I({ separator: ",", conjunction: "and" }), L, T);
-new _(I({ separator: ",", conjunction: "or" }), L, T);
-new _(Ee(`
-`), it, I, L, T);
-new _(Ee(`
-`), I, L, T, B(/&/g, "&amp;"), B(/</g, "&lt;"), B(/>/g, "&gt;"), B(/"/g, "&quot;"), B(/'/g, "&#x27;"), B(/`/g, "&#x60;"));
-new _(j(/(?:\n(?:\s*))+/g, " "), T);
-new _(j(/(?:\n\s*)/g, ""), T);
-new _(I({ separator: "," }), j(/(?:\s+)/g, " "), T);
-new _(I({ separator: ",", conjunction: "or" }), j(/(?:\s+)/g, " "), T);
-new _(I({ separator: ",", conjunction: "and" }), j(/(?:\s+)/g, " "), T);
-new _(I, L, T);
-new _(I, j(/(?:\s+)/g, " "), T);
-new _(L, T);
-var _e = new _(L("all"), T);
-const st = [
+new TemplateTag(inlineArrayTransformer({ separator: "," }), stripIndentTransformer, trimResultTransformer);
+new TemplateTag(inlineArrayTransformer({ separator: ",", conjunction: "and" }), stripIndentTransformer, trimResultTransformer);
+new TemplateTag(inlineArrayTransformer({ separator: ",", conjunction: "or" }), stripIndentTransformer, trimResultTransformer);
+new TemplateTag(splitStringTransformer("\n"), removeNonPrintingValuesTransformer, inlineArrayTransformer, stripIndentTransformer, trimResultTransformer);
+new TemplateTag(splitStringTransformer("\n"), inlineArrayTransformer, stripIndentTransformer, trimResultTransformer, replaceSubstitutionTransformer(/&/g, "&amp;"), replaceSubstitutionTransformer(/</g, "&lt;"), replaceSubstitutionTransformer(/>/g, "&gt;"), replaceSubstitutionTransformer(/"/g, "&quot;"), replaceSubstitutionTransformer(/'/g, "&#x27;"), replaceSubstitutionTransformer(/`/g, "&#x60;"));
+new TemplateTag(replaceResultTransformer(/(?:\n(?:\s*))+/g, " "), trimResultTransformer);
+new TemplateTag(replaceResultTransformer(/(?:\n\s*)/g, ""), trimResultTransformer);
+new TemplateTag(inlineArrayTransformer({ separator: "," }), replaceResultTransformer(/(?:\s+)/g, " "), trimResultTransformer);
+new TemplateTag(inlineArrayTransformer({ separator: ",", conjunction: "or" }), replaceResultTransformer(/(?:\s+)/g, " "), trimResultTransformer);
+new TemplateTag(inlineArrayTransformer({ separator: ",", conjunction: "and" }), replaceResultTransformer(/(?:\s+)/g, " "), trimResultTransformer);
+new TemplateTag(inlineArrayTransformer, stripIndentTransformer, trimResultTransformer);
+new TemplateTag(inlineArrayTransformer, replaceResultTransformer(/(?:\s+)/g, " "), trimResultTransformer);
+new TemplateTag(stripIndentTransformer, trimResultTransformer);
+var stripIndents = new TemplateTag(stripIndentTransformer("all"), trimResultTransformer);
+const backDualWideCameraLocalizations = [
   "Cameră dublă cu obiectiv superangular spate",
   "מצלמה כפולה רחבה אחורית",
   "Артқы қос кең бұрышты камера",
@@ -433,145 +527,213 @@ const st = [
   "Cámara trasera dual con gran angular",
   "背面デュアル広角カメラ",
   "Stražnja dvostruka široka kamera"
-], X = (r) => {
-  if (r instanceof Error) return r;
+];
+const asError = (thrown) => {
+  if (thrown instanceof Error) return thrown;
   try {
-    return new Error(JSON.stringify(r));
+    return new Error(JSON.stringify(thrown));
   } catch {
-    return new Error(String(r));
+    return new Error(String(thrown));
   }
 };
-class Te extends Error {
+class CameraError extends Error {
   code;
-  constructor(e, t, a) {
-    super(e), this.code = t, this.cause = a;
+  constructor(message, code, cause) {
+    super(message);
+    this.code = code;
+    this.cause = cause;
   }
 }
-const lt = async () => {
+const askForCameraPermission = async () => {
   try {
-    const r = await navigator.mediaDevices.getUserMedia({
-      video: !0
+    const mediaStream = await navigator.mediaDevices.getUserMedia({
+      video: true
     });
-    xe(r);
-  } catch (r) {
-    throw console.log(r), new Te(
+    closeStreamTracks(mediaStream);
+  } catch (error) {
+    console.log(error);
+    const newError = new CameraError(
       "Camera permission not given",
       "PERMISSION_DENIED",
-      X(r)
+      asError(error)
     );
+    throw newError;
   }
-}, ct = async () => {
-  if (!isSecureContext)
-    throw new Error(_e`
+};
+const obtainVideoInputDevices = async () => {
+  if (!isSecureContext) {
+    throw new Error(stripIndents`
       Cameras can only be used in a secure context:
       https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
     `);
-  return await lt(), (await navigator.mediaDevices.enumerateDevices()).filter((t) => t.kind === "videoinput");
-}, xe = (r) => {
-  const e = r.getTracks();
-  for (const t of e)
-    t.stop();
-}, ut = (r, e, t) => ({
-  video: {
-    deviceId: t ? { exact: t } : void 0,
-    frameRate: 30,
-    aspectRatio: {
-      exact: P[r].width / P[r].height
-    },
-    width: {
-      ideal: P[r].width
-    },
-    height: {
-      ideal: P[r].height
+  }
+  await askForCameraPermission();
+  const allDevices = await navigator.mediaDevices.enumerateDevices();
+  const cameraDevices = allDevices.filter((device) => {
+    return device.kind === "videoinput";
+  });
+  return cameraDevices;
+};
+const closeStreamTracks = (stream) => {
+  const tracks = stream.getTracks();
+  for (const track of tracks) {
+    track.stop();
+  }
+};
+const createConstraints = (resolution, facing, id) => {
+  const constraints = {
+    video: {
+      deviceId: id ? { exact: id } : void 0,
+      frameRate: 30,
+      aspectRatio: {
+        exact: videoResolutions[resolution].width / videoResolutions[resolution].height
+      },
+      width: {
+        ideal: videoResolutions[resolution].width
+      },
+      height: {
+        ideal: videoResolutions[resolution].height
+      },
+      facingMode: facing
     },
-    facingMode: e
-  },
-  audio: !1
-}), dt = async (r, e = "4k", t = "back") => {
-  if (r.length === 0)
+    audio: false
+  };
+  return constraints;
+};
+const findIdealCamera = async (cameras, resolution = "4k", requestedFacing = "back") => {
+  if (cameras.length === 0) {
     throw new Error("No cameras found");
-  if (t === "back") {
-    const o = r.find(
-      (i) => st.includes(i.name)
+  }
+  if (requestedFacing === "back") {
+    const dualWideCamera = cameras.find(
+      (camera) => backDualWideCameraLocalizations.includes(camera.name)
     );
-    if (o)
-      return await o.startStream(e), o;
-  }
-  const a = r.filter((o) => t === "back" || t === void 0 ? Ce(o.name) : ke(o.name));
-  if (a.length === 1 && a[0].facingMode === t)
-    return await a[0].startStream(e), a[0];
-  if (a.length > 0 && t === "front") {
-    const o = a[a.length - 1];
-    return await o.startStream(e), o;
-  }
-  a.length === 0 && (console.debug("No camera found with requested facing, using all cameras"), a.push(...r));
-  const n = /* @__PURE__ */ new Map();
-  r.forEach((o) => n.set(o, 0));
-  for (let o = a.length - 1; o >= 0; o--) {
-    const i = a[o];
-    if (await i.startStream(e), !i.facingMode)
-      return console.debug("No facing mode, returning last camera"), i;
-    if (i.facingMode && i.facingMode !== t) {
-      console.debug("Mismatched facing mode, moving on to the next camera"), i.stopStream();
+    if (dualWideCamera) {
+      await dualWideCamera.startStream(resolution);
+      return dualWideCamera;
+    }
+  }
+  const cameraPool = cameras.filter((camera) => {
+    if (requestedFacing === "back" || requestedFacing === void 0) {
+      return isBackCameraName(camera.name);
+    } else {
+      return isFrontCameraName(camera.name);
+    }
+  });
+  if (cameraPool.length === 1 && cameraPool[0].facingMode === requestedFacing) {
+    await cameraPool[0].startStream(resolution);
+    return cameraPool[0];
+  }
+  if (cameraPool.length > 0 && requestedFacing === "front") {
+    const lastCamera = cameraPool[cameraPool.length - 1];
+    await lastCamera.startStream(resolution);
+    return lastCamera;
+  }
+  if (cameraPool.length === 0) {
+    console.debug("No camera found with requested facing, using all cameras");
+    cameraPool.push(...cameras);
+  }
+  const cameraScores = /* @__PURE__ */ new Map();
+  cameras.forEach((camera) => cameraScores.set(camera, 0));
+  for (let i = cameraPool.length - 1; i >= 0; i--) {
+    const camera = cameraPool[i];
+    await camera.startStream(resolution);
+    if (!camera.facingMode) {
+      console.debug("No facing mode, returning last camera");
+      return camera;
+    }
+    if (camera.facingMode && camera.facingMode !== requestedFacing) {
+      console.debug("Mismatched facing mode, moving on to the next camera");
+      camera.stopStream();
       continue;
     }
-    if (i.torchSupported && i.singleShotSupported)
-      return console.debug("Camera supports torch and single shot, returning"), i;
-    if (i.torchSupported && n.set(i, n.get(i) + 1), i.singleShotSupported && n.set(i, n.get(i) + 1), o === 0) {
+    if (camera.torchSupported && camera.singleShotSupported) {
+      console.debug("Camera supports torch and single shot, returning");
+      return camera;
+    }
+    if (camera.torchSupported) {
+      cameraScores.set(camera, cameraScores.get(camera) + 1);
+    }
+    if (camera.singleShotSupported) {
+      cameraScores.set(camera, cameraScores.get(camera) + 1);
+    }
+    if (i === 0) {
       console.debug("Last camera in the pool, picking the best one");
-      let l, c = -1 / 0;
-      return n.forEach((f, g) => {
-        f > c && (c = f, l = g);
-      }), l;
+      let maxKey;
+      let maxValue = -Infinity;
+      cameraScores.forEach((score, camera2) => {
+        if (score > maxValue) {
+          maxValue = score;
+          maxKey = camera2;
+        }
+      });
+      return maxKey;
     }
-    i.stopStream();
+    camera.stopStream();
   }
   throw new Error("No camera found, should not happen");
 };
-function ht(r) {
-  const e = [];
-  for (const t of r) {
-    const a = new Me(t);
-    a !== null && e.push(a);
+function createCameras(cameras) {
+  const camerasWithStream = [];
+  for (const device of cameras) {
+    const camera = new Camera(device);
+    if (camera !== null) {
+      camerasWithStream.push(camera);
+    }
   }
-  return e;
+  return camerasWithStream;
 }
-const P = {
+const videoResolutions = {
   "720p": { width: 1280, height: 720 },
   "1080p": { width: 1920, height: 1080 },
   "4k": { width: 3840, height: 2160 }
 };
-function mt(r) {
-  return Math.max(r.width, r.height);
+function returnLongerSide(resolution) {
+  return Math.max(resolution.width, resolution.height);
 }
-function gt(r) {
-  const e = {
-    width: Math.max(r.width, r.height),
-    height: Math.min(r.width, r.height)
+function getNormalizedResolution(resolution) {
+  const normalized = {
+    width: Math.max(resolution.width, resolution.height),
+    height: Math.min(resolution.width, resolution.height)
   };
-  return Math.abs(e.width / e.height - 16 / 9) > 1e-4 && console.warn(
-    `Resolution ${JSON.stringify(
-      r
-    )} is not 16:9, may cause issues with some video players.`
-  ), e;
+  const epsilon = 1e-4;
+  if (Math.abs(normalized.width / normalized.height - 16 / 9) > epsilon) {
+    console.warn(
+      `Resolution ${JSON.stringify(
+        resolution
+      )} is not 16:9, may cause issues with some video players.`
+    );
+  }
+  return normalized;
 }
-function ft(r) {
-  const e = mt(r);
-  return e > 1920 ? "4k" : e > 1280 ? "1080p" : "720p";
+function matchClosestResolution(resolution) {
+  const actualWidth = returnLongerSide(resolution);
+  if (actualWidth > 1920) {
+    return "4k";
+  } else if (actualWidth > 1280) {
+    return "1080p";
+  } else {
+    return "720p";
+  }
 }
-function bt(r) {
-  const e = gt(r), t = Object.entries(P).find(
-    ([n, o]) => o.width === e.width && o.height === e.height
+function findResolutionKey(videoTrackResolution) {
+  const normalizedResolution = getNormalizedResolution(videoTrackResolution);
+  const resolutionMatch = Object.entries(videoResolutions).find(
+    ([key, value]) => {
+      return value.width === normalizedResolution.width && value.height === normalizedResolution.height;
+    }
   );
-  if (!t) {
-    const n = ft(r);
-    return console.warn(
-      `No exact resolution match found for ${JSON.stringify(r)}, categorizing as ${n}`
-    ), n;
+  if (!resolutionMatch) {
+    const closestMatch = matchClosestResolution(videoTrackResolution);
+    console.warn(
+      `No exact resolution match found for ${JSON.stringify(videoTrackResolution)}, categorizing as ${closestMatch}`
+    );
+    return closestMatch;
   }
-  return t[0];
+  const resolutionKey = resolutionMatch[0];
+  return resolutionKey;
 }
-class Me {
+class Camera {
   deviceInfo;
   /**
    * Stream capabilities as reported by the stream.
@@ -585,9 +747,9 @@ class Me {
   activeStream;
   name;
   facingMode;
-  torchSupported = !1;
-  torchEnabled = !1;
-  singleShotSupported = !1;
+  torchSupported = false;
+  torchEnabled = false;
+  singleShotSupported = false;
   maxSupportedResolution;
   /**
    * Reference to the original instance before it was proxied.
@@ -604,100 +766,158 @@ class Me {
    *
    * @deprecated Not used. Reconsider using once Firefox and Chrome align on this.
    */
-  #e;
-  constructor(e) {
-    if (e.kind !== "videoinput")
+  #deviceCapabilities;
+  constructor(deviceInfo) {
+    if (deviceInfo.kind !== "videoinput") {
       throw new Error("Device is not a video input device");
-    this.deviceInfo = e, this.name = e.label, ke(e.label) && (this.facingMode = "front"), Ce(e.label) && (this.facingMode = "back");
-    const t = this, a = new Proxy(this, {
-      set(n, o, i, l) {
-        const c = Reflect.get(n, o, l), f = {
-          property: o,
-          oldValue: c,
-          value: i
+    }
+    this.deviceInfo = deviceInfo;
+    this.name = deviceInfo.label;
+    if (isFrontCameraName(deviceInfo.label)) {
+      this.facingMode = "front";
+    }
+    if (isBackCameraName(deviceInfo.label)) {
+      this.facingMode = "back";
+    }
+    const originalRef = this;
+    const proxy = new Proxy(this, {
+      set(target, property, value, receiver) {
+        const oldValue = Reflect.get(target, property, receiver);
+        const change = {
+          property,
+          oldValue,
+          value
         };
-        return t.notify(f), Reflect.set(n, o, i, l);
+        originalRef.notify(change);
+        return Reflect.set(target, property, value, receiver);
       }
     });
-    return this.notify = (n) => {
-      this.notifyStateChange?.(a, n);
-    }, a;
+    this.notify = (reason) => {
+      this.notifyStateChange?.(proxy, reason);
+    };
+    return proxy;
   }
-  async startStream(e) {
-    if (this.activeStream)
+  async startStream(resolution) {
+    if (this.activeStream) {
       return this.activeStream;
-    this.maxSupportedResolution && (e = this.maxSupportedResolution);
-    const t = await this.acquireStreamWithFallback(e);
-    this.populateCapabilities(t), this.activeStream = t;
-    const a = t.getVideoTracks()[0];
-    return a.onended = (n) => {
-      this.stopStream(), this.notify({
-        event: n,
+    }
+    if (this.maxSupportedResolution) {
+      resolution = this.maxSupportedResolution;
+    }
+    const stream = await this.acquireStreamWithFallback(resolution);
+    this.populateCapabilities(stream);
+    this.activeStream = stream;
+    const videoTrack = stream.getVideoTracks()[0];
+    videoTrack.onended = (e) => {
+      this.stopStream();
+      this.notify({
+        event: e,
         payload: "TRACK_END"
       });
-    }, t;
+    };
+    return stream;
   }
   /**
    * Acquires a camera stream with the specified resolution.
    * If acquisition fails, it tries a lower resolution as fallback.
    */
-  async acquireStreamWithFallback(e) {
+  async acquireStreamWithFallback(resolution) {
     try {
-      const t = ut(
-        e,
+      const constraints = createConstraints(
+        resolution,
         this.facingMode,
         this.deviceInfo.deviceId
       );
-      return await navigator.mediaDevices.getUserMedia(t);
-    } catch (t) {
+      return await navigator.mediaDevices.getUserMedia(constraints);
+    } catch (error) {
       console.warn(
-        `Can't get camera stream for ${this.name} at ${e}`,
-        t
+        `Can't get camera stream for ${this.name} at ${resolution}`,
+        error
       );
-      let a = Object.keys(P).indexOf(e);
-      if (a === 0)
+      let currentResolutionIndex = Object.keys(videoResolutions).indexOf(resolution);
+      if (currentResolutionIndex === 0) {
         throw new Error("Failed to get camera stream");
-      const n = Object.keys(P)[a - 1];
-      return await this.acquireStreamWithFallback(n);
+      }
+      const fallbackResolution = Object.keys(videoResolutions)[currentResolutionIndex - 1];
+      return await this.acquireStreamWithFallback(fallbackResolution);
     }
   }
   /**
    * Populates the camera instance with capabilities from the stream.
    */
-  populateCapabilities(e) {
-    this.streamCapabilities = e.getVideoTracks()[0].getCapabilities();
-    const a = e.getVideoTracks()[0].getSettings();
-    if (!a.width || !a.height)
+  populateCapabilities(stream) {
+    this.streamCapabilities = stream.getVideoTracks()[0].getCapabilities();
+    const videoTrack = stream.getVideoTracks()[0];
+    const trackSettings = videoTrack.getSettings();
+    if (!trackSettings.width || !trackSettings.height) {
       throw new Error(
         "Video track resolution not available. Should not happen."
       );
-    const n = {
-      width: a.width,
-      height: a.height
-    }, o = bt(n);
-    !this.maxSupportedResolution && o && (this.maxSupportedResolution = o), "torch" in this.streamCapabilities && (this.torchSupported = !0), "focusMode" in this.streamCapabilities && this.streamCapabilities.focusMode?.includes("single-shot") && (this.singleShotSupported = !0), this.facingMode === "front" && this.streamCapabilities.facingMode?.includes("environment") && (this.facingMode = "back", console.warn("Front camera selected, but facingMode is environment")), this.facingMode === "back" && this.streamCapabilities.facingMode?.includes("user") && (this.facingMode = "front", console.warn("Back camera selected, but facingMode is user")), this.facingMode || (this.streamCapabilities.facingMode?.includes("environment") && (this.facingMode = "back"), this.streamCapabilities.facingMode?.includes("user") && (this.facingMode = "front"));
+    }
+    const videoTrackResolution = {
+      width: trackSettings.width,
+      height: trackSettings.height
+    };
+    const resolutionKey = findResolutionKey(videoTrackResolution);
+    if (!this.maxSupportedResolution && resolutionKey) {
+      this.maxSupportedResolution = resolutionKey;
+    }
+    if ("torch" in this.streamCapabilities) {
+      this.torchSupported = true;
+    }
+    if ("focusMode" in this.streamCapabilities && this.streamCapabilities.focusMode?.includes("single-shot")) {
+      this.singleShotSupported = true;
+    }
+    if (this.facingMode === "front" && this.streamCapabilities.facingMode?.includes("environment")) {
+      this.facingMode = "back";
+      console.warn("Front camera selected, but facingMode is environment");
+    }
+    if (this.facingMode === "back" && this.streamCapabilities.facingMode?.includes("user")) {
+      this.facingMode = "front";
+      console.warn("Back camera selected, but facingMode is user");
+    }
+    if (!this.facingMode) {
+      if (this.streamCapabilities.facingMode?.includes("environment")) {
+        this.facingMode = "back";
+      }
+      if (this.streamCapabilities.facingMode?.includes("user")) {
+        this.facingMode = "front";
+      }
+    }
   }
   async toggleTorch() {
-    const e = this.getVideoTrack();
-    if (!e)
+    const videoTrack = this.getVideoTrack();
+    if (!videoTrack) {
       throw new Error("No active stream on Camera instance.");
-    if (!this.torchSupported)
+    }
+    if (!this.torchSupported) {
       throw new Error("Torch not supported on this device.");
+    }
     try {
-      await e.applyConstraints({
+      await videoTrack.applyConstraints({
         advanced: [
           {
             torch: !this.torchEnabled
           }
         ]
-      }), this.torchEnabled = !this.torchEnabled;
-    } catch (t) {
-      throw console.error("Failed to toggle torch", t), this.torchEnabled = !1, this.torchSupported = !1, new Error("Failed to toggle torch", { cause: t });
+      });
+      this.torchEnabled = !this.torchEnabled;
+    } catch (error) {
+      console.error("Failed to toggle torch", error);
+      this.torchEnabled = false;
+      this.torchSupported = false;
+      throw new Error("Failed to toggle torch", { cause: error });
     }
     return this.torchEnabled;
   }
   stopStream() {
-    this.activeStream && (console.debug(`Stopping active stream on ${this.name}`), xe(this.activeStream), this.activeStream = void 0, this.streamCapabilities = void 0, this.torchEnabled = !1);
+    if (this.activeStream) {
+      console.debug(`Stopping active stream on ${this.name}`);
+      closeStreamTracks(this.activeStream);
+      this.activeStream = void 0;
+      this.streamCapabilities = void 0;
+      this.torchEnabled = false;
+    }
   }
   getVideoTrack() {
     if (!this.activeStream) {
@@ -707,149 +927,241 @@ class Me {
     return this.activeStream.getVideoTracks()[0];
   }
 }
-const ce = Element.prototype.attachShadow;
-function se() {
-  return typeof window.ShadyDOM < "u" && typeof ShadowRoot < "u";
+const ORIGINAL_ATTACH_SHADOW = Element.prototype.attachShadow;
+function isShady() {
+  return typeof window.ShadyDOM !== "undefined" && typeof ShadowRoot !== "undefined";
 }
-function pt() {
-  return typeof ShadowRoot < "u";
+function supportsShadowRoots() {
+  return typeof ShadowRoot !== "undefined";
 }
-function vt(r) {
-  ce == null || se() || (Element.prototype.attachShadow = function(e) {
-    const t = ce.call(this, e);
-    return r(t), t;
-  });
+function patchElementPrototypeAttachShadow(callback) {
+  if (ORIGINAL_ATTACH_SHADOW == null || isShady())
+    return;
+  Element.prototype.attachShadow = function(shadowRootInitDict) {
+    const shadowRoot = ORIGINAL_ATTACH_SHADOW.call(this, shadowRootInitDict);
+    callback(shadowRoot);
+    return shadowRoot;
+  };
 }
-function wt(r, ...e) {
-  const t = new Set(e);
-  let a = !1;
-  const n = () => {
-    for (const o of t)
-      r(o);
-    t.clear();
+function createPausableQueue(job, ...queueItems) {
+  const queue = new Set(queueItems);
+  let running = false;
+  const flush = () => {
+    for (const queuedNode of queue) {
+      job(queuedNode);
+    }
+    queue.clear();
   };
   return {
     isRunning() {
-      return a;
+      return running;
     },
-    schedule(o) {
-      t.add(o), a && n();
+    schedule(node) {
+      queue.add(node);
+      if (running) {
+        flush();
+      }
     },
     stop() {
-      a = !1;
+      running = false;
     },
     run() {
-      a || (a = !0, n());
+      if (running)
+        return;
+      running = true;
+      flush();
     }
   };
 }
-const yt = {
-  childList: !0,
-  subtree: !0
-}, St = (r) => {
-  typeof queueMicrotask < "u" ? queueMicrotask(r) : typeof Promise < "u" ? Promise.resolve().then(() => r()) : setTimeout(() => r(), 0);
+const MUTATION_OBSERVER_INIT = {
+  childList: true,
+  subtree: true
 };
-function ue(r) {
-  if (typeof Symbol < "u" && r[Symbol.iterator] != null)
-    return [...r];
-  {
-    const e = [];
-    for (let t = 0; t < r.length; t++)
-      e[t] = r[t];
-    return e;
+const nextMicrotask = (func) => {
+  if (typeof queueMicrotask !== "undefined")
+    queueMicrotask(func);
+  else if (typeof Promise !== "undefined")
+    Promise.resolve().then(() => func());
+  else
+    setTimeout(() => func(), 0);
+};
+function nodeListToArray(nodeList) {
+  if (typeof Symbol !== "undefined" && nodeList[Symbol.iterator] != null) {
+    return [...nodeList];
+  } else {
+    const arr = [];
+    for (let i = 0; i < nodeList.length; i++) {
+      arr[i] = nodeList[i];
+    }
+    return arr;
   }
 }
-function Ct(r, e) {
-  return se() ? new Set(ue(window.ShadyDOM.nativeMethods.querySelectorAll.call(document.documentElement, e))) : new Set("querySelectorAll" in r ? ue(r.querySelectorAll(e)) : []);
+function queryRoot(root, query) {
+  if (isShady()) {
+    return new Set(nodeListToArray(window.ShadyDOM.nativeMethods.querySelectorAll.call(document.documentElement, query)));
+  }
+  return new Set(!("querySelectorAll" in root) ? [] : nodeListToArray(root.querySelectorAll(query)));
 }
-function kt(r, e) {
-  return /* @__PURE__ */ new Set([...r ?? [], ...e ?? []]);
+function mergeNodes(a, b) {
+  return /* @__PURE__ */ new Set([...a == null ? [] : a, ...b == null ? [] : b]);
 }
-function Et(r) {
-  return "activeElement" in r;
+function isDocumentOrShadowRoot(root) {
+  return "activeElement" in root;
 }
-function Re(r = document.documentElement) {
-  if (Et(r) && Ae(r), se() && r instanceof ShadowRoot || !pt())
+function observeMissingRoots(root = document.documentElement) {
+  if (isDocumentOrShadowRoot(root)) {
+    observeRoot(root);
+  }
+  if (isShady() && root instanceof ShadowRoot)
     return;
-  const e = r.childNodes, t = "shadowRoot" in r && r.shadowRoot != null ? [r.shadowRoot] : [];
-  for (const a of [...e, ...t])
-    Re(a);
+  if (!supportsShadowRoots())
+    return;
+  const childNodes = root.childNodes;
+  const shadowRoot = "shadowRoot" in root && root.shadowRoot != null ? [root.shadowRoot] : [];
+  for (const node of [...childNodes, ...shadowRoot]) {
+    observeMissingRoots(node);
+  }
 }
-function _t(r) {
-  return "isConnected" in Node.prototype ? r.isConnected : r.ownerDocument == null || !(r.ownerDocument.compareDocumentPosition(r) & r.DOCUMENT_POSITION_DISCONNECTED);
+function isConnected(node) {
+  if ("isConnected" in Node.prototype)
+    return node.isConnected;
+  return node.ownerDocument == null || !(node.ownerDocument.compareDocumentPosition(node) & node.DOCUMENT_POSITION_DISCONNECTED);
 }
-const W = /* @__PURE__ */ new Map();
-function Tt(r, e) {
-  const t = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new WeakMap();
-  let i = !1, l = !1, c = !1;
-  const f = () => {
-    l = !0;
-    const v = [...t];
-    v.length > 0 && e(v, r), t.clear(), i = !1, l = !1;
-  }, g = () => {
-    i || (i = !0, St(f));
-  }, y = (v) => {
-    t.add(v), l || g();
-  }, u = () => {
-    const v = [...t];
-    return t.clear(), v;
-  }, h = () => {
-    a.clear();
-  }, p = (v, x) => {
-    let R = n.get(v);
-    const F = Ct(v, x), M = R?.get(x), Pe = kt(F, M);
-    C(Pe), R == null && (R = /* @__PURE__ */ new Map(), n.set(v, R)), R.set(x, F);
-  }, C = (v) => {
-    for (const x of v) {
-      const R = o.get(x), F = _t(x);
-      R !== F && (o.set(x, F), y({
-        connected: F,
-        target: x
-      }));
+const CONNECTION_OBSERVER_INTERNALS_MAP = /* @__PURE__ */ new Map();
+function initializeConnectionObserver(observer, callback) {
+  const queue = /* @__PURE__ */ new Set();
+  const observedTargets = /* @__PURE__ */ new Set();
+  const rootToQuerySelectorToMatchedNodesMap = /* @__PURE__ */ new Map();
+  const nodeToLastConnectionValueMap = /* @__PURE__ */ new WeakMap();
+  let scheduled = false;
+  let flushing = false;
+  let hasFoundMissingRoots = false;
+  const flush = () => {
+    flushing = true;
+    const arr = [...queue];
+    if (arr.length > 0) {
+      callback(arr, observer);
+    }
+    queue.clear();
+    scheduled = false;
+    flushing = false;
+  };
+  const scheduleFlush = () => {
+    if (!scheduled) {
+      scheduled = true;
+      nextMicrotask(flush);
+    }
+  };
+  const addToQueue = (entry) => {
+    queue.add(entry);
+    if (!flushing) {
+      scheduleFlush();
+    }
+  };
+  const clearQueue = () => {
+    const items = [...queue];
+    queue.clear();
+    return items;
+  };
+  const clearObservedTargets = () => {
+    observedTargets.clear();
+  };
+  const queryRootAndHandleMutationChanges = (root, query) => {
+    let oldQuerySelectorMap = rootToQuerySelectorToMatchedNodesMap.get(root);
+    const currentNodes = queryRoot(root, query);
+    const oldNodes = oldQuerySelectorMap == null ? void 0 : oldQuerySelectorMap.get(query);
+    const mergedNodes = mergeNodes(currentNodes, oldNodes);
+    handleMutationChange(mergedNodes);
+    if (oldQuerySelectorMap == null) {
+      oldQuerySelectorMap = /* @__PURE__ */ new Map();
+      rootToQuerySelectorToMatchedNodesMap.set(root, oldQuerySelectorMap);
+    }
+    oldQuerySelectorMap.set(query, currentNodes);
+  };
+  const handleMutationChange = (targetNodes) => {
+    for (const targetNode of targetNodes) {
+      const lastValue = nodeToLastConnectionValueMap.get(targetNode);
+      const isTargetNodeConnected = isConnected(targetNode);
+      if (lastValue !== isTargetNodeConnected) {
+        nodeToLastConnectionValueMap.set(targetNode, isTargetNodeConnected);
+        addToQueue({
+          connected: isTargetNodeConnected,
+          target: targetNode
+        });
+      }
+    }
+  };
+  const addObservedTarget = (target) => {
+    rootObserverQueue.run();
+    if (!hasFoundMissingRoots) {
+      hasFoundMissingRoots = true;
+      observeMissingRoots();
+    }
+    observedTargets.add(target);
+    if (typeof target !== "string") {
+      handleMutationChange([target]);
+    } else {
+      for (const root of OBSERVED_ROOTS) {
+        queryRootAndHandleMutationChanges(root, target);
+      }
     }
-  }, b = {
-    observedTargets: a,
-    queryRootAndHandleMutationChanges: p,
-    handleMutationChange: C,
-    addObservedTarget: (v) => {
-      if (ae.run(), c || (c = !0, Re()), a.add(v), typeof v != "string")
-        C([v]);
-      else
-        for (const x of re)
-          p(x, v);
-    },
-    clearObservedTargets: h,
-    clearQueue: u
   };
-  W.set(r, b);
+  const internals = {
+    observedTargets,
+    queryRootAndHandleMutationChanges,
+    handleMutationChange,
+    addObservedTarget,
+    clearObservedTargets,
+    clearQueue
+  };
+  CONNECTION_OBSERVER_INTERNALS_MAP.set(observer, internals);
 }
-const xt = (r) => {
-  for (const e of r)
-    if (e.type === "childList")
-      for (const t of W.values())
-        for (const a of t.observedTargets)
-          typeof a == "string" ? t.queryRootAndHandleMutationChanges(e.target, a) : t.handleMutationChange([a]);
-}, re = /* @__PURE__ */ new Set(), Ae = /* @__PURE__ */ (() => {
-  let r;
-  return function(e) {
-    re.has(e) || (re.add(e), r == null && (r = new MutationObserver(xt)), r.observe(e, yt));
+const mutationCallback = (mutations) => {
+  for (const mutation of mutations) {
+    if (mutation.type !== "childList")
+      continue;
+    for (const observer of CONNECTION_OBSERVER_INTERNALS_MAP.values()) {
+      for (const target of observer.observedTargets) {
+        if (typeof target === "string") {
+          observer.queryRootAndHandleMutationChanges(mutation.target, target);
+        } else {
+          observer.handleMutationChange([target]);
+        }
+      }
+    }
+  }
+};
+const OBSERVED_ROOTS = /* @__PURE__ */ new Set();
+const observeRoot = /* @__PURE__ */ (() => {
+  let instance;
+  return function(root) {
+    if (OBSERVED_ROOTS.has(root))
+      return;
+    OBSERVED_ROOTS.add(root);
+    if (instance == null) {
+      instance = new MutationObserver(mutationCallback);
+    }
+    instance.observe(root, MUTATION_OBSERVER_INIT);
   };
-})(), ae = wt(Ae, document.documentElement);
-class N {
-  constructor(e) {
-    if (new.target === void 0)
-      throw new TypeError(`Constructor ${N.name} requires 'new'`);
-    if (e === void 0)
-      throw new ReferenceError(`Failed to construct '${N.name}': 1 argument required, but only 0 present.`);
-    if (typeof e != "function")
-      throw new TypeError(`Failed to construct '${N.name}': The callback provided as parameter 1 is not a function.`);
-    Tt(this, e);
+})();
+const rootObserverQueue = createPausableQueue(observeRoot, document.documentElement);
+class ConnectionObserver {
+  constructor(callback) {
+    if (new.target === void 0) {
+      throw new TypeError(`Constructor ${ConnectionObserver.name} requires 'new'`);
+    }
+    if (callback === void 0) {
+      throw new ReferenceError(`Failed to construct '${ConnectionObserver.name}': 1 argument required, but only 0 present.`);
+    } else if (typeof callback !== "function") {
+      throw new TypeError(`Failed to construct '${ConnectionObserver.name}': The callback provided as parameter 1 is not a function.`);
+    }
+    initializeConnectionObserver(this, callback);
   }
   /**
    * The Symbol.@@toStringTag value
    */
   get [Symbol.toStringTag]() {
-    return "ConnectionObserver";
+    return `ConnectionObserver`;
   }
   /**
    * Observe the given node or query selector for connections/disconnections.
@@ -857,121 +1169,148 @@ class N {
    * as for example "img[data-some-attr]", for each new MutationRecord, the query selector
    * will be executed and the matched nodes will be observed for connections/disconnections
    */
-  observe(e) {
-    if (e === void 0)
-      throw new ReferenceError(`Failed to execute '${this.observe.name}' on '${N.name}': 1 argument required, but only 0 present.`);
-    if (typeof e != "string" && !(e instanceof Node))
-      throw new TypeError(`Failed to execute '${this.observe.name}' on '${N.name}': parameter 1 is not of type 'Node' or a DOMString.`);
-    const t = W.get(this);
-    t?.addObservedTarget(e);
+  observe(target) {
+    if (target === void 0) {
+      throw new ReferenceError(`Failed to execute '${this.observe.name}' on '${ConnectionObserver.name}': 1 argument required, but only 0 present.`);
+    } else if (typeof target !== "string" && !(target instanceof Node)) {
+      throw new TypeError(`Failed to execute '${this.observe.name}' on '${ConnectionObserver.name}': parameter 1 is not of type 'Node' or a DOMString.`);
+    }
+    const internals = CONNECTION_OBSERVER_INTERNALS_MAP.get(this);
+    if (internals == null)
+      return;
+    internals.addObservedTarget(target);
   }
   /**
    * Takes the records immediately (instead of waiting for the next flush)
    */
   takeRecords() {
-    const e = W.get(this);
-    return e == null ? [] : e.clearQueue();
+    const internals = CONNECTION_OBSERVER_INTERNALS_MAP.get(this);
+    if (internals == null)
+      return [];
+    return internals.clearQueue();
   }
   /**
    * Disconnects the ConnectionObserver such that none of its callbacks will be invoked any longer
    */
   disconnect() {
-    const e = W.get(this);
-    e?.clearObservedTargets();
+    const internals = CONNECTION_OBSERVER_INTERNALS_MAP.get(this);
+    if (internals == null)
+      return;
+    internals.clearObservedTargets();
   }
 }
-vt(ae.schedule.bind(ae));
-function Mt(r, ...e) {
-  return r.addEventListener(...e), () => {
-    r.removeEventListener(...e);
+patchElementPrototypeAttachShadow(rootObserverQueue.schedule.bind(rootObserverQueue));
+function radEventListener(element, ...args) {
+  element.addEventListener(...args);
+  return () => {
+    element.removeEventListener(...args);
   };
 }
-function Rt(r, e) {
-  let t;
-  if (e((a, n) => {
-    r.addEventListener(a, n), t = () => r.removeEventListener(a, n);
-  }), !t)
+function rad(element, gen) {
+  let cleanup;
+  gen((listener, options) => {
+    element.addEventListener(listener, options);
+    cleanup = () => element.removeEventListener(listener, options);
+  });
+  if (!cleanup) {
     throw new Error("you forgot to add event listener");
-  return t;
+  }
+  return cleanup;
 }
-function ne(r) {
-  const e = $e(r);
-  if ("detached" in e)
-    return e.detached;
+function isBufferDetached(buffer) {
+  const actualBuffer = getBuffer(buffer);
+  if ("detached" in actualBuffer) {
+    const detached = actualBuffer.detached;
+    return detached;
+  }
   try {
-    return new Uint8Array(e), !1;
-  } catch {
-    return !0;
+    new Uint8Array(actualBuffer);
+    return false;
+  } catch (e) {
+    return true;
   }
 }
-class At {
-  #e;
-  #o = null;
-  #a = null;
-  #r = null;
-  #n = null;
-  #t = null;
-  #s = 0;
-  #l = 0;
-  #i;
-  #u = 4;
-  constructor(e = {}) {
-    const { canvasRenderingMode: t = "webgl2", fallbackWebGlTo2d: a = !0 } = e;
-    if (this.#i = t, this.#e = document.createElement("canvas"), t === "2d")
-      this.#d();
-    else if (t === "webgl2")
+class VideoFrameProcessor {
+  #canvas;
+  #context2d = null;
+  #contextWebGl2 = null;
+  #webGl2Texture = null;
+  #webGl2Framebuffer = null;
+  #buffer = null;
+  #cachedWidth = 0;
+  #cachedHeight = 0;
+  #canvasRenderingMode;
+  #requiredPackAlignment = 4;
+  constructor(options = {}) {
+    const { canvasRenderingMode = "webgl2", fallbackWebGlTo2d = true } = options;
+    this.#canvasRenderingMode = canvasRenderingMode;
+    this.#canvas = document.createElement("canvas");
+    if (canvasRenderingMode === "2d") {
+      this.#initialize2dContext();
+    } else if (canvasRenderingMode === "webgl2") {
       try {
-        this.#h();
-      } catch (n) {
-        if (a)
+        this.#initializeWebGl2Context();
+      } catch (error) {
+        if (fallbackWebGlTo2d) {
           console.warn(
             "Failed to create WebGL2 context, falling back to 2D canvas"
-          ), this.#i = "2d", this.#d();
-        else
-          throw n;
+          );
+          this.#canvasRenderingMode = "2d";
+          this.#initialize2dContext();
+        } else {
+          throw error;
+        }
       }
-    else
+    } else {
       throw new Error(
-        `Unsupported rendering context: ${t}`
+        `Unsupported rendering context: ${canvasRenderingMode}`
       );
+    }
   }
   /**
    * Initializes the 2D canvas context
    */
-  #d() {
-    const e = this.#e.getContext("2d", {
-      alpha: !1,
-      willReadFrequently: !0
+  #initialize2dContext() {
+    const ctx = this.#canvas.getContext("2d", {
+      alpha: false,
+      willReadFrequently: true
     });
-    if (!e) throw new Error("CanvasRenderingContext2D is missing!");
-    this.#o = e;
+    if (!ctx) throw new Error("CanvasRenderingContext2D is missing!");
+    this.#context2d = ctx;
   }
   /**
    * Initializes the WebGL2 context and resources
    */
-  #h() {
-    const e = this.#e.getContext("webgl2", {
-      alpha: !1,
-      depth: !1,
-      stencil: !1,
-      antialias: !1,
-      premultipliedAlpha: !1,
-      preserveDrawingBuffer: !1,
-      desynchronized: !1,
+  #initializeWebGl2Context() {
+    const ctx = this.#canvas.getContext("webgl2", {
+      alpha: false,
+      depth: false,
+      stencil: false,
+      antialias: false,
+      premultipliedAlpha: false,
+      preserveDrawingBuffer: false,
+      desynchronized: false,
       powerPreference: "high-performance"
     });
-    if (!e) throw new Error("WebGL2RenderingContext is missing!");
-    this.#a = e;
-    const t = e.createTexture();
-    if (!t) throw new Error("Failed to create WebGL texture");
-    this.#r = t, e.bindTexture(e.TEXTURE_2D, t), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST);
-    const a = e.createFramebuffer();
-    if (!a) throw new Error("Failed to create framebuffer");
-    this.#n = a, e.bindFramebuffer(e.FRAMEBUFFER, a), e.framebufferTexture2D(
-      e.FRAMEBUFFER,
-      e.COLOR_ATTACHMENT0,
-      e.TEXTURE_2D,
-      t,
+    if (!ctx) throw new Error("WebGL2RenderingContext is missing!");
+    this.#contextWebGl2 = ctx;
+    const texture = ctx.createTexture();
+    if (!texture) throw new Error("Failed to create WebGL texture");
+    this.#webGl2Texture = texture;
+    ctx.bindTexture(ctx.TEXTURE_2D, texture);
+    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
+    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
+    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.NEAREST);
+    ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.NEAREST);
+    const framebuffer = ctx.createFramebuffer();
+    if (!framebuffer) throw new Error("Failed to create framebuffer");
+    this.#webGl2Framebuffer = framebuffer;
+    ctx.bindFramebuffer(ctx.FRAMEBUFFER, framebuffer);
+    ctx.framebufferTexture2D(
+      ctx.FRAMEBUFFER,
+      ctx.COLOR_ATTACHMENT0,
+      ctx.TEXTURE_2D,
+      texture,
       0
     );
   }
@@ -980,31 +1319,34 @@ class At {
    * This should only be called with ArrayBuffers that were originally from this processor
    * Typically used after transferring the buffer to/from a worker
    */
-  reattachArrayBuffer(e) {
-    const t = $e(e);
-    if (ne(t))
+  reattachArrayBuffer(arrayBuffer) {
+    const actualBuffer = getBuffer(arrayBuffer);
+    if (isBufferDetached(actualBuffer)) {
       throw new Error("Can't use a detached array buffer!");
-    const a = this.#s * this.#l * 4;
-    if (t.byteLength === a)
-      this.#t = new Uint8ClampedArray(t);
-    else
+    }
+    const requiredSize = this.#cachedWidth * this.#cachedHeight * 4;
+    if (actualBuffer.byteLength === requiredSize) {
+      this.#buffer = new Uint8ClampedArray(actualBuffer);
+    } else {
       throw new Error(
-        `ArrayBuffer size mismatch: expected ${a}, got ${t.byteLength}`
+        `ArrayBuffer size mismatch: expected ${requiredSize}, got ${actualBuffer.byteLength}`
       );
+    }
   }
   /**
    * Used to check if the processor owns the buffer
    */
   isBufferDetached() {
-    if (!this.#t)
+    if (!this.#buffer) {
       throw new Error("Buffer is missing!");
-    return ne(this.#t.buffer);
+    }
+    return isBufferDetached(this.#buffer.buffer);
   }
   /**
    * Extracts image data from a source element
    */
-  getImageData(e, t) {
-    return this.#i === "2d" ? this.#m(e, t) : this.#g(e, t);
+  getImageData(source, area) {
+    return this.#canvasRenderingMode === "2d" ? this.#getImageData2d(source, area) : this.#getImageDataWebGl2(source, area);
   }
   /**
    * Used to get the current ImageData object with the current buffer. Useful
@@ -1013,126 +1355,178 @@ class At {
    * @returns ImageData object with the current buffer
    */
   getCurrentImageData() {
-    if (!this.#t)
+    if (!this.#buffer) {
       throw new Error("Buffer is missing!");
-    return new ImageData(this.#t, this.#s, this.#l);
+    }
+    return new ImageData(this.#buffer, this.#cachedWidth, this.#cachedHeight);
   }
   /**
    * Extract image data using 2D canvas
    */
-  #m(e, t) {
-    if (!this.#o)
+  #getImageData2d(source, area) {
+    if (!this.#context2d)
       throw new Error("CanvasRenderingContext2D is missing!");
-    const a = "videoWidth" in e ? e.videoWidth : e.width, n = "videoHeight" in e ? e.videoHeight : e.height, o = t?.x ?? 0, i = t?.y ?? 0, l = t?.width ?? a, c = t?.height ?? n;
-    return this.#c(l, c), this.#o.drawImage(e, o, i, l, c), this.#o.getImageData(0, 0, l, c);
+    const fullWidth = "videoWidth" in source ? source.videoWidth : source.width;
+    const fullHeight = "videoHeight" in source ? source.videoHeight : source.height;
+    const x = area?.x ?? 0;
+    const y = area?.y ?? 0;
+    const w = area?.width ?? fullWidth;
+    const h = area?.height ?? fullHeight;
+    this.#updateCanvasSize(w, h);
+    this.#context2d.drawImage(source, x, y, w, h);
+    return this.#context2d.getImageData(0, 0, w, h);
   }
   /**
    * Extract image data using WebGL2
    */
-  #g(e, t) {
-    if (!this.#a || !this.#r || !this.#n)
+  #getImageDataWebGl2(source, area) {
+    if (!this.#contextWebGl2 || !this.#webGl2Texture || !this.#webGl2Framebuffer) {
       throw new Error("WebGL2 context or resources are missing!");
-    const a = "videoWidth" in e ? e.videoWidth : e.width, n = "videoHeight" in e ? e.videoHeight : e.height, o = t?.x ?? 0, i = t?.y ?? 0, l = t?.width ?? a, c = t?.height ?? n, f = l * c * 4;
-    if (this.#c(l, c), this.isBufferDetached())
+    }
+    const fullWidth = "videoWidth" in source ? source.videoWidth : source.width;
+    const fullHeight = "videoHeight" in source ? source.videoHeight : source.height;
+    const x = area?.x ?? 0;
+    const y = area?.y ?? 0;
+    const w = area?.width ?? fullWidth;
+    const h = area?.height ?? fullHeight;
+    const requiredSize = w * h * 4;
+    this.#updateCanvasSize(w, h);
+    if (this.isBufferDetached()) {
       throw new Error("Buffer is detached!");
-    (!this.#t || this.#t.length !== f) && (this.#t = new Uint8ClampedArray(f));
-    const g = this.#a;
-    g.bindTexture(g.TEXTURE_2D, this.#r), g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, g.RGBA, g.UNSIGNED_BYTE, e), g.bindFramebuffer(g.FRAMEBUFFER, this.#n);
+    }
+    if (!this.#buffer || this.#buffer.length !== requiredSize) {
+      this.#buffer = new Uint8ClampedArray(requiredSize);
+    }
+    const gl = this.#contextWebGl2;
+    gl.bindTexture(gl.TEXTURE_2D, this.#webGl2Texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.#webGl2Framebuffer);
     try {
-      g.pixelStorei(g.PACK_ALIGNMENT, this.#u), g.readPixels(o, i, l, c, g.RGBA, g.UNSIGNED_BYTE, this.#t);
-    } catch (y) {
-      if (this.#u !== 1) {
-        this.#u = 1, g.pixelStorei(g.PACK_ALIGNMENT, 1);
-        const u = new Uint8ClampedArray(f);
-        return g.readPixels(0, 0, l, c, g.RGBA, g.UNSIGNED_BYTE, u), this.#t = u, new ImageData(u, l, c);
+      gl.pixelStorei(gl.PACK_ALIGNMENT, this.#requiredPackAlignment);
+      gl.readPixels(x, y, w, h, gl.RGBA, gl.UNSIGNED_BYTE, this.#buffer);
+    } catch (error) {
+      if (this.#requiredPackAlignment !== 1) {
+        this.#requiredPackAlignment = 1;
+        gl.pixelStorei(gl.PACK_ALIGNMENT, 1);
+        const newBuffer = new Uint8ClampedArray(requiredSize);
+        gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, newBuffer);
+        this.#buffer = newBuffer;
+        return new ImageData(newBuffer, w, h);
       }
-      throw y;
+      throw error;
     }
-    return new ImageData(this.#t, l, c);
+    return new ImageData(this.#buffer, w, h);
   }
   /**
    * Update canvas dimensions if needed
    *
    * This canvas is the orientation-aware
    */
-  #c(e, t) {
-    if (this.#s !== e || this.#l !== t) {
-      this.#e.width = e, this.#e.height = t, this.#s = e, this.#l = t;
-      const a = e * t * 4;
-      this.#t = new Uint8ClampedArray(a);
+  #updateCanvasSize(width, height) {
+    if (this.#cachedWidth !== width || this.#cachedHeight !== height) {
+      this.#canvas.width = width;
+      this.#canvas.height = height;
+      this.#cachedWidth = width;
+      this.#cachedHeight = height;
+      const requiredSize = width * height * 4;
+      this.#buffer = new Uint8ClampedArray(requiredSize);
     }
   }
   /**
    * Clean up resources
    */
   dispose() {
-    this.#a && (this.#r && (this.#a.deleteTexture(this.#r), this.#r = null), this.#n && (this.#a.deleteFramebuffer(this.#n), this.#n = null)), this.#o = null, this.#a = null, this.#t = null;
+    if (this.#contextWebGl2) {
+      if (this.#webGl2Texture) {
+        this.#contextWebGl2.deleteTexture(this.#webGl2Texture);
+        this.#webGl2Texture = null;
+      }
+      if (this.#webGl2Framebuffer) {
+        this.#contextWebGl2.deleteFramebuffer(this.#webGl2Framebuffer);
+        this.#webGl2Framebuffer = null;
+      }
+    }
+    this.#context2d = null;
+    this.#contextWebGl2 = null;
+    this.#buffer = null;
   }
 }
-const $e = (r) => ArrayBuffer.isView(r) ? r.buffer : r, $t = {
-  mirrorFrontCameras: !0
+const getBuffer = (buffer) => {
+  if (ArrayBuffer.isView(buffer)) {
+    return buffer.buffer;
+  } else {
+    return buffer;
+  }
+};
+const defaultCameraManagerOptions = {
+  mirrorFrontCameras: true
 };
-class Qr {
-  #e;
-  #o = "4k";
-  #a;
-  #r;
-  #n;
-  #t;
-  #s;
+class CameraManager {
+  #resumeRequest;
+  #resolution = "4k";
+  #extractionArea;
+  #videoFrameRequestId;
+  #videoFrameProcessor;
+  #mirrorFrontCameras;
+  #eventListenerCleanup;
   /**
    * If true, the user has initiated an abort. This will prevent the
    * CameraManager from throwing errors when the user interrupts the process.
    */
-  #l = !1;
+  #userInitiatedAbort = false;
   get userInitiatedAbort() {
-    return this.#l;
+    return this.#userInitiatedAbort;
   }
-  set userInitiatedAbort(e) {
-    this.#l = e;
+  set userInitiatedAbort(value) {
+    this.#userInitiatedAbort = value;
   }
   /**
    * Sets the area of the video frame that will be extracted.
    * @param extractionArea The area of the video frame that will be extracted.
    */
-  setExtractionArea(e) {
-    this.#a = e;
+  setExtractionArea(extractionArea) {
+    this.#extractionArea = extractionArea;
   }
   /**
    * Callbacks that will be triggered on each frame when the playback state is
    * "capturing".
    */
-  #i = /* @__PURE__ */ new Set();
-  constructor(e = {}, t) {
-    const { mirrorFrontCameras: a } = {
-      ...$t,
-      ...e
+  #frameCaptureCallbacks = /* @__PURE__ */ new Set();
+  constructor(options = {}, videoFrameProcessorOptions) {
+    const { mirrorFrontCameras } = {
+      ...defaultCameraManagerOptions,
+      ...options
     };
-    this.#n = new At(
-      t
-    ), this.#t = a;
+    this.#videoFrameProcessor = new VideoFrameProcessor(
+      videoFrameProcessorOptions
+    );
+    this.#mirrorFrontCameras = mirrorFrontCameras;
   }
   /**
    * Sets the resolution of the camera stream
    */
-  setResolution = async (e) => {
-    this.#o = e;
-    const t = this.getState().playbackState;
-    t !== "idle" && (this.#e = t, this.stopStream(), await this.startCameraStream());
+  setResolution = async (resolution) => {
+    this.#resolution = resolution;
+    const playbackState = this.getState().playbackState;
+    if (playbackState !== "idle") {
+      this.#resumeRequest = playbackState;
+      this.stopStream();
+      await this.startCameraStream();
+    }
   };
   get resolution() {
-    return this.#o;
+    return this.#resolution;
   }
   /**
    * True if there is a video playing or capturing
    * TODO: see if we can simplify this, by observing the video playback state
    */
   get isActive() {
-    return d.getState().playbackState !== "idle";
+    return cameraManagerStore.getState().playbackState !== "idle";
   }
-  setFacingFilter(e) {
-    d.setState({
-      facingFilter: e
+  setFacingFilter(facingFilter) {
+    cameraManagerStore.setState({
+      facingFilter
     });
   }
   /**
@@ -1140,28 +1534,37 @@ class Qr {
    * If no facing mode is set, all cameras are returned.
    */
   async getCameraDevices() {
-    let e = d.getState().cameras;
-    const t = d.getState().facingFilter;
-    return e.length || await this.refreshCameraDevices(), e = d.getState().cameras, t ? e.filter(
-      (n) => t.includes(n.facingMode)
-    ) : e;
+    let allCameras = cameraManagerStore.getState().cameras;
+    const facingFilter = cameraManagerStore.getState().facingFilter;
+    if (!allCameras.length) {
+      await this.refreshCameraDevices();
+    }
+    allCameras = cameraManagerStore.getState().cameras;
+    if (!facingFilter) {
+      return allCameras;
+    }
+    const filteredCameras = allCameras.filter(
+      (camera) => facingFilter.includes(camera.facingMode)
+    );
+    return filteredCameras;
   }
   /**
    * Single-time setup for a video element
    */
-  #u(e) {
-    if (!(e instanceof HTMLVideoElement))
+  #initVideoElement(videoElement) {
+    if (!(videoElement instanceof HTMLVideoElement)) {
       throw new Error(
-        `Expected an HTMLVideoElement, got ${typeof e}`,
+        `Expected an HTMLVideoElement, got ${typeof videoElement}`,
         {
-          cause: e
+          cause: videoElement
         }
       );
-    d.setState({
-      videoElement: e
+    }
+    cameraManagerStore.setState({
+      videoElement
     });
-    const t = Rt(e, (i) => {
-      [
+    const videoEventCleanup = rad(videoElement, (add) => {
+      const events = [
         "abort"
         // "error",
         // "canplay",
@@ -1180,49 +1583,62 @@ class Qr {
         // "timeupdate",
         // "ratechange",
         // "durationchange",
-      ].forEach((c) => {
-        i(c, () => {
-          console.debug(`Video event: ${c}`);
+      ];
+      events.forEach((event) => {
+        add(event, () => {
+          console.debug(`Video event: ${event}`);
         });
       });
     });
-    new N((i) => {
-      i[0].connected || this.releaseVideoElement();
-    }).observe(e), e.setAttribute("playsInline", ""), e.setAttribute("muted", ""), e.controls = !1;
-    let n = "idle";
-    const o = Mt(
+    const connectionObserver = new ConnectionObserver((entries) => {
+      if (!entries[0].connected) {
+        this.releaseVideoElement();
+      }
+    });
+    connectionObserver.observe(videoElement);
+    videoElement.setAttribute("playsInline", "");
+    videoElement.setAttribute("muted", "");
+    videoElement.controls = false;
+    let previousPlaybackState = "idle";
+    const cleanupVisibilityListener = radEventListener(
       document,
       "visibilitychange",
       async () => {
-        if (document.hidden) {
-          n = d.getState().playbackState, this.stopStream();
+        const isHidden = document.hidden;
+        if (isHidden) {
+          previousPlaybackState = cameraManagerStore.getState().playbackState;
+          this.stopStream();
           return;
         }
-        switch (n) {
+        switch (previousPlaybackState) {
           case "playback":
-            await this.startCameraStream(), await this.startPlayback();
+            await this.startCameraStream();
+            await this.startPlayback();
             break;
           case "capturing":
-            await this.startCameraStream(), await this.startFrameCapture();
+            await this.startCameraStream();
+            await this.startFrameCapture();
             break;
         }
       }
     );
-    this.#s = () => {
-      o(), t();
+    this.#eventListenerCleanup = () => {
+      cleanupVisibilityListener();
+      videoEventCleanup();
     };
   }
   /**
    * Initializes the CameraManager with a video element.
    */
-  initVideoElement(e) {
+  initVideoElement(videoElement) {
     try {
-      this.#u(e);
-    } catch (t) {
-      if (this.userInitiatedAbort)
+      this.#initVideoElement(videoElement);
+    } catch (error) {
+      if (this.userInitiatedAbort) {
         this.reset();
-      else
-        throw t;
+      } else {
+        throw error;
+      }
     }
   }
   /**
@@ -1232,74 +1648,108 @@ class Qr {
    * @param frameCaptureCallback
    * @returns a cleanup function to remove the callback
    */
-  addFrameCaptureCallback(e) {
-    return this.#i.add(e), () => this.#i.delete(e);
+  addFrameCaptureCallback(frameCaptureCallback) {
+    this.#frameCaptureCallbacks.add(frameCaptureCallback);
+    return () => this.#frameCaptureCallbacks.delete(frameCaptureCallback);
   }
   releaseVideoElement() {
-    this.#s?.(), d.setState({
+    this.#eventListenerCleanup?.();
+    cameraManagerStore.setState({
       videoElement: void 0
-    }), this.stopStream();
+    });
+    this.stopStream();
   }
   /**
    * Select a camera device from available ones.
    *
    * TODO: might become a private method in the future as an implementation detail of `startStream`
    */
-  async selectCamera(e) {
-    const t = d.getState().playbackState;
-    t !== "idle" && (this.#e = t);
-    const a = d.getState();
-    if (a.selectedCamera === e) {
+  async selectCamera(camera) {
+    const playbackState = cameraManagerStore.getState().playbackState;
+    if (playbackState !== "idle") {
+      this.#resumeRequest = playbackState;
+    }
+    const state = cameraManagerStore.getState();
+    if (state.selectedCamera === camera) {
       console.debug("Already selected");
       return;
     }
-    if (a.isSwappingCamera) {
+    if (state.isSwappingCamera) {
       console.debug("Already swapping");
       return;
     }
-    d.setState({
-      isSwappingCamera: !0
-    }), a.selectedCamera?.activeStream && (console.debug("Stopping previous stream"), a.selectedCamera.stopStream()), a.videoElement && (a.videoElement.srcObject = null), d.setState({
-      selectedCamera: e,
-      isSwappingCamera: !1
-    }), this.#e === "playback" && (console.debug("Starting new stream"), await this.startPlayback()), this.#e === "capturing" && (console.debug("Resuming frame capture"), await this.startFrameCapture()), this.#e = void 0;
+    cameraManagerStore.setState({
+      isSwappingCamera: true
+    });
+    if (state.selectedCamera?.activeStream) {
+      console.debug("Stopping previous stream");
+      state.selectedCamera.stopStream();
+    }
+    if (state.videoElement) {
+      state.videoElement.srcObject = null;
+    }
+    cameraManagerStore.setState({
+      selectedCamera: camera,
+      isSwappingCamera: false
+    });
+    if (this.#resumeRequest === "playback") {
+      console.debug("Starting new stream");
+      await this.startPlayback();
+    }
+    if (this.#resumeRequest === "capturing") {
+      console.debug("Resuming frame capture");
+      await this.startFrameCapture();
+    }
+    this.#resumeRequest = void 0;
   }
   /**
    * Refreshes available devices on the system and updates the state.
    */
   async refreshCameraDevices() {
-    if (d.getState().isQueryingCameras || d.getState().isSwappingCamera) {
+    if (cameraManagerStore.getState().isQueryingCameras || cameraManagerStore.getState().isSwappingCamera) {
       console.debug("Already querying cameras");
       return;
     }
-    d.setState({
-      isQueryingCameras: !0
+    cameraManagerStore.setState({
+      isQueryingCameras: true
     });
-    const e = await ct().catch((a) => {
-      throw d.setState({
-        errorState: X(a),
-        isQueryingCameras: !1
-      }), a;
-    }), t = ht(e);
-    t.forEach((a) => {
-      a.notifyStateChange || (a.notifyStateChange = (n, o) => {
+    const availableCameras = await obtainVideoInputDevices().catch((err) => {
+      cameraManagerStore.setState({
+        errorState: asError(err),
+        isQueryingCameras: false
+      });
+      throw err;
+    });
+    const cameras = createCameras(availableCameras);
+    cameras.forEach((camera) => {
+      if (camera.notifyStateChange) {
+        return;
+      }
+      camera.notifyStateChange = (camInstance, reason) => {
         window.queueMicrotask(() => {
-          d.setState({
-            cameras: [...d.getState().cameras]
+          cameraManagerStore.setState({
+            cameras: [...cameraManagerStore.getState().cameras]
           });
-          const i = d.getState().selectedCamera;
-          if (!i)
+          const selectedCamera = cameraManagerStore.getState().selectedCamera;
+          if (!selectedCamera) {
             return;
-          let l;
-          typeof o == "object" && o !== null && "payload" in o && o.payload === "TRACK_END" && (l = new Error("Camera stream ended unexpectedly")), n === i && d.setState({
-            selectedCamera: i,
-            errorState: l
-          });
+          }
+          let streamError;
+          if (typeof reason === "object" && reason !== null && "payload" in reason && reason.payload === "TRACK_END") {
+            streamError = new Error("Camera stream ended unexpectedly");
+          }
+          if (camInstance === selectedCamera) {
+            cameraManagerStore.setState({
+              selectedCamera,
+              errorState: streamError
+            });
+          }
         });
-      });
-    }), d.setState({
-      cameras: t,
-      isQueryingCameras: !1
+      };
+    });
+    cameraManagerStore.setState({
+      cameras,
+      isQueryingCameras: false
     });
   }
   /**
@@ -1308,140 +1758,181 @@ class Qr {
    * @returns resolves when playback starts
    */
   async startPlayback() {
-    const e = d.getState();
-    if (!(this.isActive && !this.#e)) {
-      if (!e.videoElement) {
-        console.warn("Starting playback - no video element present.");
-        return;
-      }
-      if (!e.selectedCamera) {
-        console.warn("Select a camera first.");
-        return;
-      }
-      if (!e.selectedCamera.activeStream) {
-        const t = await e.selectedCamera.startStream(this.resolution);
-        e.videoElement.srcObject = t;
-      }
-      try {
-        this.#f(), await e.videoElement.play(), d.setState({
-          playbackState: "playback"
-        });
-      } catch (t) {
-        throw console.error("Failed to start playback", t), d.setState({
-          errorState: X(t)
-        }), t;
-      }
+    const state = cameraManagerStore.getState();
+    if (this.isActive && !this.#resumeRequest) {
+      return;
+    }
+    if (!state.videoElement) {
+      console.warn("Starting playback - no video element present.");
+      return;
+    }
+    if (!state.selectedCamera) {
+      console.warn("Select a camera first.");
+      return;
+    }
+    if (!state.selectedCamera.activeStream) {
+      const stream = await state.selectedCamera.startStream(this.resolution);
+      state.videoElement.srcObject = stream;
+    }
+    try {
+      this.#applyMirrorIfNeeded();
+      await state.videoElement.play();
+      cameraManagerStore.setState({
+        playbackState: "playback"
+      });
+    } catch (error) {
+      console.error("Failed to start playback", error);
+      cameraManagerStore.setState({
+        errorState: asError(error)
+      });
+      throw error;
     }
   }
   /**
    * Starts playback and frame capturing.
    */
-  async #d() {
-    const e = d.getState();
-    if (!this.userInitiatedAbort && !(e.playbackState === "capturing" && this.#e !== "capturing")) {
-      if (!e.videoElement) {
-        console.warn(
-          "Missing video element. Setup a video element first using `initVideoElement`"
-        );
-        return;
-      }
-      if (!e.selectedCamera) {
-        console.warn(
-          "No active camera! Select a camera first, or use `startCameraStream`"
-        );
-        return;
-      }
-      await this.startPlayback(), d.setState({
-        playbackState: "capturing"
-      }), this.#c(), this.#e = void 0;
+  async #startFrameCapture() {
+    const state = cameraManagerStore.getState();
+    if (this.userInitiatedAbort) {
+      return;
+    }
+    if (state.playbackState === "capturing" && this.#resumeRequest !== "capturing") {
+      return;
+    }
+    if (!state.videoElement) {
+      console.warn(
+        "Missing video element. Setup a video element first using `initVideoElement`"
+      );
+      return;
+    }
+    if (!state.selectedCamera) {
+      console.warn(
+        "No active camera! Select a camera first, or use `startCameraStream`"
+      );
+      return;
     }
+    await this.startPlayback();
+    cameraManagerStore.setState({
+      playbackState: "capturing"
+    });
+    this.#queueFrame();
+    this.#resumeRequest = void 0;
   }
   /**
    * Starts capturing frames from the video element.
    */
   startFrameCapture = async () => {
     try {
-      await this.#d();
-    } catch (e) {
-      if (this.userInitiatedAbort)
+      await this.#startFrameCapture();
+    } catch (error) {
+      if (this.userInitiatedAbort) {
         this.reset();
-      else
-        throw e;
+      } else {
+        throw error;
+      }
     }
   };
-  async #h({
-    autoplay: e = !0,
-    preferredCamera: t,
-    preferredFacing: a
+  async #startCameraStream({
+    autoplay = true,
+    preferredCamera,
+    preferredFacing
   } = {}) {
-    const n = d.getState().videoElement;
-    if (!n) {
+    const videoElement = cameraManagerStore.getState().videoElement;
+    if (!videoElement) {
       console.warn("Can't start stream without a video element");
       return;
     }
-    if (this.isActive && !this.#e) {
+    if (this.isActive && !this.#resumeRequest) {
       console.warn("Already streaming");
       return;
     }
-    if (t instanceof Me && await this.selectCamera(t), !d.getState().selectedCamera)
+    if (preferredCamera instanceof Camera) {
+      await this.selectCamera(preferredCamera);
+    }
+    if (!cameraManagerStore.getState().selectedCamera) {
       try {
-        const l = await this.getCameraDevices();
-        let c;
-        if (!l.length)
-          throw console.log("Camera list is empty"), new Error(
-            `No cameras found matching the filter ${a}`
+        const cameras = await this.getCameraDevices();
+        let selectedCamera2;
+        if (!cameras.length) {
+          console.log("Camera list is empty");
+          throw new Error(
+            `No cameras found matching the filter ${preferredFacing}`
           );
-        if (typeof t == "function" && (c = t(l), c || console.warn(
-          "No camera found matching the preferred camera function, falling back to facing mode"
-        )), c || (c = await dt(
-          l,
-          this.resolution,
-          a
-        )), !c)
+        }
+        if (typeof preferredCamera === "function") {
+          selectedCamera2 = preferredCamera(cameras);
+          if (!selectedCamera2) {
+            console.warn(
+              `No camera found matching the preferred camera function, falling back to facing mode`
+            );
+          }
+        }
+        if (!selectedCamera2) {
+          selectedCamera2 = await findIdealCamera(
+            cameras,
+            this.resolution,
+            preferredFacing
+          );
+        }
+        if (!selectedCamera2) {
           throw new Error(
-            `No cameras found matching the filter ${a}`
+            `No cameras found matching the filter ${preferredFacing}`
           );
-        await this.selectCamera(c), this.#m() && d.setState({
-          errorState: void 0
+        }
+        await this.selectCamera(selectedCamera2);
+        if (this.#hasPermissionError()) {
+          cameraManagerStore.setState({
+            errorState: void 0
+          });
+        }
+      } catch (error) {
+        cameraManagerStore.setState({
+          errorState: asError(error)
         });
-      } catch (l) {
-        throw d.setState({
-          errorState: X(l)
-        }), l;
+        throw error;
       }
-    const o = d.getState().selectedCamera;
-    if (!o)
-      throw console.warn("No selected camera!"), new Error("No selected camera");
-    const i = await o.startStream(this.#o);
-    if (!n.isConnected)
+    }
+    const selectedCamera = cameraManagerStore.getState().selectedCamera;
+    if (!selectedCamera) {
+      console.warn("No selected camera!");
+      throw new Error("No selected camera");
+    }
+    const stream = await selectedCamera.startStream(this.#resolution);
+    if (!videoElement.isConnected) {
       throw new Error("Video element needs to be in the document!");
-    n.srcObject = i, d.setState({
-      videoElement: n
-    }), e && await this.startPlayback();
+    }
+    videoElement.srcObject = stream;
+    cameraManagerStore.setState({
+      videoElement
+    });
+    if (autoplay) {
+      await this.startPlayback();
+    }
   }
   /**
    * Starts a best-effort camera stream. Will pick a camera automatically if
    * none is selected.
    */
-  async startCameraStream(e = {}) {
+  async startCameraStream(params = {}) {
     try {
-      await this.#h(e);
-    } catch (t) {
-      if (this.userInitiatedAbort)
+      await this.#startCameraStream(params);
+    } catch (error) {
+      if (this.userInitiatedAbort) {
         this.reset();
-      else
-        throw t;
+      } else {
+        throw error;
+      }
     }
   }
-  #m = () => {
-    const e = d.getState().errorState;
-    return e instanceof Te && e.code === "PERMISSION_DENIED";
+  #hasPermissionError = () => {
+    const errorState = cameraManagerStore.getState().errorState;
+    return errorState instanceof CameraError && errorState.code === "PERMISSION_DENIED";
   };
   /**
    * Pauses capturing frames without pausing playback.
    */
   stopFrameCapture() {
-    d.setState({
+    cameraManagerStore.setState({
       playbackState: "playback"
     });
   }
@@ -1450,92 +1941,128 @@ class Qr {
    */
   stopStream() {
     console.debug("stopStream called");
-    const e = d.getState();
-    this.pausePlayback(), e.selectedCamera?.stopStream(), e.videoElement && (e.videoElement.srcObject = null);
+    const state = cameraManagerStore.getState();
+    this.pausePlayback();
+    state.selectedCamera?.stopStream();
+    if (state.videoElement) {
+      state.videoElement.srcObject = null;
+    }
   }
   /**
    * Pauses the video playback. This will also stop the capturing process.
    */
   pausePlayback() {
     console.debug("pausePlayback called");
-    const e = d.getState().videoElement;
-    d.setState({
+    const video = cameraManagerStore.getState().videoElement;
+    cameraManagerStore.setState({
       playbackState: "idle"
-    }), e && (this.#r && e.cancelVideoFrameCallback(this.#r), e.pause());
+    });
+    if (!video) {
+      return;
+    }
+    if (this.#videoFrameRequestId) {
+      video.cancelVideoFrameCallback(this.#videoFrameRequestId);
+    }
+    video.pause();
   }
   /**
    * The main recognition loop. Do not call this method directly, use #queueFrame instead.
    */
-  async #g() {
-    const e = d.getState();
-    if (this.#r === void 0) {
+  async #loop() {
+    const state = cameraManagerStore.getState();
+    if (this.#videoFrameRequestId === void 0) {
       console.error("Missing request ID");
       return;
     }
-    if (!e.videoElement) {
+    if (!state.videoElement) {
       console.warn("Missing video element, should not happen");
       return;
     }
-    if (!(e.videoElement.videoHeight >= e.videoElement.videoWidth == this.#a.height >= this.#a.width))
-      return this.#c();
-    if (this.#i.size !== 0) {
-      const a = this.#n.getImageData(
-        e.videoElement,
-        this.#a
+    const isSameOrientation = state.videoElement.videoHeight >= state.videoElement.videoWidth === this.#extractionArea.height >= this.#extractionArea.width;
+    if (!isSameOrientation) {
+      return this.#queueFrame();
+    }
+    if (this.#frameCaptureCallbacks.size !== 0) {
+      const capturedFrame = this.#videoFrameProcessor.getImageData(
+        state.videoElement,
+        this.#extractionArea
       );
-      for (const n of this.#i) {
-        const o = ne(a.data) ? this.#n.getCurrentImageData() : a, i = await n(o);
-        if (i) {
-          if (!(i instanceof ArrayBuffer))
-            throw new Error(
-              _e`
+      for (const callback of this.#frameCaptureCallbacks) {
+        const workingFrame = isBufferDetached(capturedFrame.data) ? this.#videoFrameProcessor.getCurrentImageData() : capturedFrame;
+        const returnedBuffer = await callback(workingFrame);
+        if (!returnedBuffer) {
+          continue;
+        }
+        if (!(returnedBuffer instanceof ArrayBuffer)) {
+          throw new Error(
+            stripIndents`
               Frame capture callback did not return an ArrayBuffer.
               Make sure to return the underlying buffer, not the view.
             `
-            );
-          this.#n.reattachArrayBuffer(i);
+          );
         }
+        this.#videoFrameProcessor.reattachArrayBuffer(returnedBuffer);
       }
     }
-    this.#c();
+    this.#queueFrame();
   }
   /**
    * Queues the next frame to be processed
    */
-  #c() {
-    const e = d.getState();
-    if (e.playbackState === "capturing") {
-      if (!e.videoElement) {
-        console.warn("Missing video element, should not happen");
-        return;
-      }
-      this.#r && e.videoElement.cancelVideoFrameCallback(this.#r), this.#r = e.videoElement.requestVideoFrameCallback(
-        () => void this.#g()
-      );
+  #queueFrame() {
+    const state = cameraManagerStore.getState();
+    if (state.playbackState !== "capturing") {
+      return;
+    }
+    if (!state.videoElement) {
+      console.warn("Missing video element, should not happen");
+      return;
+    }
+    if (this.#videoFrameRequestId) {
+      state.videoElement.cancelVideoFrameCallback(this.#videoFrameRequestId);
     }
+    this.#videoFrameRequestId = state.videoElement.requestVideoFrameCallback(
+      () => void this.#loop()
+    );
   }
   /**
    * Applies a mirror effect to the video if the camera is front-facing.
    * Assumes that desktop devices don't return a facing mode and that they are front-facing.
    */
-  #f() {
-    const e = d.getState().selectedCamera;
-    if (!e) {
+  #applyMirrorIfNeeded() {
+    const camera = cameraManagerStore.getState().selectedCamera;
+    if (!camera) {
       console.warn("No camera selected");
       return;
     }
-    this.#t && (e.facingMode !== "back" ? this.setCameraMirrorX(!0) : this.setCameraMirrorX(!1));
+    if (!this.#mirrorFrontCameras) {
+      return;
+    }
+    if (camera.facingMode !== "back") {
+      this.setCameraMirrorX(true);
+    } else {
+      this.setCameraMirrorX(false);
+    }
   }
   /**
    * If true, the video and captured frames will be mirrored horizontally.
    */
-  setCameraMirrorX(e) {
-    const t = d.getState(), a = t.videoElement;
-    if (!a) {
+  setCameraMirrorX(mirrorX) {
+    const currentState = cameraManagerStore.getState();
+    const videoElement = currentState.videoElement;
+    if (!videoElement) {
       console.warn("Mirror video - no video element present.");
       return;
     }
-    t.mirrorX !== e && (e ? a.style.scale = "-1 1" : a.style.removeProperty("scale"), d.setState({ mirrorX: e }));
+    if (currentState.mirrorX === mirrorX) {
+      return;
+    }
+    if (mirrorX) {
+      videoElement.style.scale = "-1 1";
+    } else {
+      videoElement.style.removeProperty("scale");
+    }
+    cameraManagerStore.setState({ mirrorX });
   }
   // The "typeof" is necessary to avoid a circular dependency when resolving types
   /**
@@ -1543,54 +2070,64 @@ class Qr {
    * Implemented using Zustand. For usage information, see
    * {@link https://github.com/pmndrs/zustand#using-subscribe-with-selector}
    */
-  subscribe = d.subscribe;
+  subscribe = cameraManagerStore.subscribe;
   /**
    * Gets the current internal state of the CameraManager.
    */
-  getState = d.getState;
+  getState = cameraManagerStore.getState;
   /**
    * Resets the CameraManager and stop all streams
    */
   reset() {
-    console.debug("Resetting camera manager"), this.#i.clear(), this.stopStream(), Ye();
+    console.debug("Resetting camera manager");
+    this.#frameCaptureCallbacks.clear();
+    this.stopStream();
+    resetCameraManagerStore();
   }
 }
-const Fe = be();
-function Ft() {
-  return we(d);
+const CameraUiStoreContext = createContext();
+function createCameraManagerSolidStore() {
+  return createWithSignal(cameraManagerStore);
 }
-const Dt = (r) => {
-  const e = {
-    cameraManagerSolidStore: Ft(),
+const CameraUiStoreProvider = (props) => {
+  const contextValue = {
+    cameraManagerSolidStore: createCameraManagerSolidStore(),
     // eslint-disable-next-line solid/reactivity
-    cameraManager: r.cameraManager,
+    cameraManager: props.cameraManager,
     // eslint-disable-next-line solid/reactivity
     dismountCameraUi: () => {
-      r.cameraManager.userInitiatedAbort = !0, r.dismountCameraUi();
+      props.cameraManager.userInitiatedAbort = true;
+      props.dismountCameraUi();
     },
     // eslint-disable-next-line solid/reactivity
-    addOnDismountCallback: r.addOnDismountCallback,
+    addOnDismountCallback: props.addOnDismountCallback,
     // eslint-disable-next-line solid/reactivity
-    mountTarget: r.mountTarget,
+    mountTarget: props.mountTarget,
     // eslint-disable-next-line solid/reactivity
-    showMirrorCameraButton: r.showMirrorCameraButton
+    showMirrorCameraButton: props.showMirrorCameraButton,
+    // eslint-disable-next-line solid/reactivity
+    showTorchButton: props.showTorchButton,
+    // eslint-disable-next-line solid/reactivity
+    showCloseButton: props.showCloseButton
   };
-  return ie(() => {
+  onCleanup(() => {
     console.debug("CameraUiStoreProvider cleanup");
-  }), s(Fe.Provider, {
-    value: e,
+  });
+  return createComponent(CameraUiStoreContext.Provider, {
+    value: contextValue,
     get children() {
-      return r.children;
+      return props.children;
     }
   });
 };
-function q() {
-  const r = pe(Fe);
-  if (!r)
+function useCameraUiStore() {
+  const ctx = useContext(CameraUiStoreContext);
+  if (!ctx) {
     throw new Error("StoreContext.Provider not in scope");
-  return r;
+  }
+  return ctx;
 }
-const It = {
+const enLocaleStrings = {
   selected_camera: "Selected camera",
   loading_cameras: "Loading cameras...",
   select_a_camera: "Select a camera",
@@ -1603,229 +2140,277 @@ const It = {
   camera_error_details: "Please allow camera access in your browser and try again.",
   camera_error_cancel_btn: "Cancel",
   camera_error_primary_btn: "Retry"
-}, De = be(), zt = (r) => {
-  const [e, t] = Xe(
+};
+const LocalizationContext = createContext();
+const LocalizationProvider = (props) => {
+  const [localizationStore, updateLocalizationStore] = createStore$1(
     // we structure clone to avoid proxying to the original object
     structuredClone({
-      ...It,
+      ...enLocaleStrings,
       // we don't care on init
       // eslint-disable-next-line solid/reactivity
-      ...r.userStrings
+      ...props.userStrings
     })
   );
-  Q(() => {
-    r.setLocalizationRef(t);
+  onMount(() => {
+    props.setLocalizationRef(updateLocalizationStore);
   });
-  const a = {
-    t: e,
-    updateLocalization: t
+  const contextValue = {
+    t: localizationStore,
+    updateLocalization: updateLocalizationStore
   };
-  return s(De.Provider, {
-    value: a,
+  return createComponent(LocalizationContext.Provider, {
+    value: contextValue,
     get children() {
-      return r.children;
+      return props.children;
     }
   });
 };
-function Y() {
-  const r = pe(De);
-  if (!r)
+function useLocalization() {
+  const ctx = useContext(LocalizationContext);
+  if (!ctx) {
     throw new Error("LocalizationContext.Provider not in scope.");
-  return r;
+  }
+  return ctx;
 }
-var Lt = /* @__PURE__ */ S("<span>");
-const J = (r) => {
-  const [e, t] = z(), [a, n] = z();
-  return Q(() => {
-    const o = a();
-    o && t(o.getRootNode());
-  }), s(E, {
+var _tmpl$$c = /* @__PURE__ */ template(`<span>`);
+const SmartEnvironmentProvider = (props) => {
+  const [rootNode, setRootNode] = createSignal();
+  const [ref, setRef] = createSignal();
+  onMount(() => {
+    const spanRef = ref();
+    if (!spanRef) {
+      return;
+    }
+    setRootNode(spanRef.getRootNode());
+  });
+  return createComponent(Show, {
     get when() {
-      return e();
+      return rootNode();
     },
     get fallback() {
       return (() => {
-        var o = Lt();
-        return O(n, o), o;
+        var _el$ = _tmpl$$c();
+        use(setRef, _el$);
+        return _el$;
       })();
     },
-    children: (o) => s(Ke, {
-      value: () => o(),
+    children: (rootNode2) => createComponent(EnvironmentProvider, {
+      value: () => rootNode2(),
       get children() {
-        return r.children(o());
+        return props.children(rootNode2());
       }
     })
   });
 };
-var Nt = /* @__PURE__ */ S('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z">');
-const Ot = (r = {}) => (() => {
-  var e = Nt();
-  return D(e, r, !0, !0), e;
+var _tmpl$$b = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z">`);
+const CloseIcon = (props = {}) => (() => {
+  var _el$ = _tmpl$$b();
+  spread(_el$, props, true, true);
+  return _el$;
 })();
-var Pt = /* @__PURE__ */ S('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M7 2h10l-2 7h4l-2.925 4.225L7 4.15zm3 20v-8H7V9.85L1.375 4.225L2.8 2.8l18.4 18.4l-1.425 1.425L13.75 16.6z">');
-const Bt = (r = {}) => (() => {
-  var e = Pt();
-  return D(e, r, !0, !0), e;
+var _tmpl$$a = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M7 2h10l-2 7h4l-2.925 4.225L7 4.15zm3 20v-8H7V9.85L1.375 4.225L2.8 2.8l18.4 18.4l-1.425 1.425L13.75 16.6z">`);
+const FlashOff = (props = {}) => (() => {
+  var _el$ = _tmpl$$a();
+  spread(_el$, props, true, true);
+  return _el$;
 })();
-var Vt = /* @__PURE__ */ S('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M10 22v-8H7V2h10l-2 7h4z">');
-const Ut = (r = {}) => (() => {
-  var e = Vt();
-  return D(e, r, !0, !0), e;
+var _tmpl$$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M10 22v-8H7V2h10l-2 7h4z">`);
+const FlashOn = (props = {}) => (() => {
+  var _el$ = _tmpl$$9();
+  spread(_el$, props, true, true);
+  return _el$;
 })();
-var jt = /* @__PURE__ */ S('<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M9 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4v2H5v14h4zm2 2V1h2v22zm4-2v-2h2v2zm0-16V3h2v2zm4 16v-2h2q0 .825-.587 1.413T19 21m0-4v-2h2v2zm0-4v-2h2v2zm0-4V7h2v2zm0-4V3q.825 0 1.413.588T21 5z">');
-const qt = (r = {}) => (() => {
-  var e = jt();
-  return D(e, r, !0, !0), e;
+var _tmpl$$8 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=currentColor d="M9 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4v2H5v14h4zm2 2V1h2v22zm4-2v-2h2v2zm0-16V3h2v2zm4 16v-2h2q0 .825-.587 1.413T19 21m0-4v-2h2v2zm0-4v-2h2v2zm0-4V7h2v2zm0-4V3q.825 0 1.413.588T21 5z">`);
+const MirrorIcon = (props = {}) => (() => {
+  var _el$ = _tmpl$$8();
+  spread(_el$, props, true, true);
+  return _el$;
 })();
-function Ie(r) {
-  const e = {};
-  return Object.entries(r).forEach(([t, a]) => {
-    const n = t.toLowerCase();
-    let o = n;
-    if (n.startsWith("on")) {
-      o = n.slice(2);
-      const i = `on:${o}`;
-      e[i] = a;
-    } else
-      e[o] = a;
-  }), e;
+function eventFixer(props) {
+  const newObj = {};
+  Object.entries(props).forEach(([key, value]) => {
+    const lowerCaseKey = key.toLowerCase();
+    let trimmedKey = lowerCaseKey;
+    if (lowerCaseKey.startsWith("on")) {
+      trimmedKey = lowerCaseKey.slice(2);
+      const newKey = `on:${trimmedKey}`;
+      newObj[newKey] = value;
+    } else {
+      newObj[trimmedKey] = value;
+    }
+  });
+  return newObj;
 }
-var Ht = /* @__PURE__ */ S('<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><g fill=#fff fill-rule=evenodd clip-rule=evenodd><path d="M6.322 2.988A1.67 1.67 0 0 1 7.5 2.5h5a1.667 1.667 0 0 1 1.667 1.667A.833.833 0 0 0 15 5h.833a2.5 2.5 0 0 1 2.5 2.5V15a2.5 2.5 0 0 1-2.5 2.5H4.167a2.5 2.5 0 0 1-2.5-2.5V7.5a2.5 2.5 0 0 1 2.5-2.5H5a.833.833 0 0 0 .833-.833c0-.442.176-.866.489-1.179M4.167 6.667a.833.833 0 0 0-.834.833V15a.833.833 0 0 0 .834.833h11.666a.834.834 0 0 0 .834-.833V7.5a.833.833 0 0 0-.834-.833H15a2.5 2.5 0 0 1-2.5-2.5h-5a2.5 2.5 0 0 1-2.5 2.5z"></path><path d="M10 9.167a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333m-3.333 1.666a3.333 3.333 0 1 1 6.666 0 3.333 3.333 0 0 1-6.666 0">');
-const Wt = (r = {}) => (() => {
-  var e = Ht();
-  return D(e, r, !0, !0), e;
+var _tmpl$$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><g fill=#fff fill-rule=evenodd clip-rule=evenodd><path d="M6.322 2.988A1.67 1.67 0 0 1 7.5 2.5h5a1.667 1.667 0 0 1 1.667 1.667A.833.833 0 0 0 15 5h.833a2.5 2.5 0 0 1 2.5 2.5V15a2.5 2.5 0 0 1-2.5 2.5H4.167a2.5 2.5 0 0 1-2.5-2.5V7.5a2.5 2.5 0 0 1 2.5-2.5H5a.833.833 0 0 0 .833-.833c0-.442.176-.866.489-1.179M4.167 6.667a.833.833 0 0 0-.834.833V15a.833.833 0 0 0 .834.833h11.666a.834.834 0 0 0 .834-.833V7.5a.833.833 0 0 0-.834-.833H15a2.5 2.5 0 0 1-2.5-2.5h-5a2.5 2.5 0 0 1-2.5 2.5z"></path><path d="M10 9.167a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333m-3.333 1.666a3.333 3.333 0 1 1 6.666 0 3.333 3.333 0 0 1-6.666 0">`);
+const IconCamera = (props = {}) => (() => {
+  var _el$ = _tmpl$$7();
+  spread(_el$, props, true, true);
+  return _el$;
 })();
-var Gt = /* @__PURE__ */ S('<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><path stroke=#fff stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M4.167 10.833 7.5 14.167l8.333-8.334">');
-const Xt = (r = {}) => (() => {
-  var e = Gt();
-  return D(e, r, !0, !0), e;
+var _tmpl$$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><path stroke=#fff stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M4.167 10.833 7.5 14.167l8.333-8.334">`);
+const IconCheck = (props = {}) => (() => {
+  var _el$ = _tmpl$$6();
+  spread(_el$, props, true, true);
+  return _el$;
 })();
-var Kt = /* @__PURE__ */ S('<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><path fill=#fff fill-rule=evenodd d="M4.41 6.91a.833.833 0 0 1 1.18 0L10 11.323l4.41-4.411a.833.833 0 1 1 1.18 1.178l-5 5a.833.833 0 0 1-1.18 0l-5-5a.833.833 0 0 1 0-1.178"clip-rule=evenodd>');
-const Qt = (r = {}) => (() => {
-  var e = Kt();
-  return D(e, r, !0, !0), e;
+var _tmpl$$5 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 20 20"><path fill=#fff fill-rule=evenodd d="M4.41 6.91a.833.833 0 0 1 1.18 0L10 11.323l4.41-4.411a.833.833 0 1 1 1.18 1.178l-5 5a.833.833 0 0 1-1.18 0l-5-5a.833.833 0 0 1 0-1.178"clip-rule=evenodd>`);
+const IconChevronDown = (props = {}) => (() => {
+  var _el$ = _tmpl$$5();
+  spread(_el$, props, true, true);
+  return _el$;
 })();
-var Yt = /* @__PURE__ */ S("<button>"), Jt = /* @__PURE__ */ S('<div class="h-[1px] absolute left-0 right-0 top-[-1px] bg-white pointer-events-none">');
-const Zt = () => {
+var _tmpl$$4 = /* @__PURE__ */ template(`<button>`), _tmpl$2$3 = /* @__PURE__ */ template(`<div class="h-[1px] absolute left-0 right-0 top-[-1px] bg-white pointer-events-none">`);
+const CameraSelector = () => {
+  const {
+    cameraManagerSolidStore,
+    cameraManager
+  } = useCameraUiStore();
   const {
-    cameraManagerSolidStore: r,
-    cameraManager: e
-  } = q(), {
     t
-  } = Y(), a = r((m) => m.cameras), n = r((m) => m.selectedCamera), o = r((m) => m.isQueryingCameras), i = r((m) => m.facingFilter), [l, c] = z(!1), f = () => o() || l(), g = () => {
-    const m = i();
-    return m ? a().filter((b) => m.includes(b.facingMode)) : a();
-  }, y = () => [...g().map((m) => ({
-    value: m.deviceInfo.deviceId,
-    label: m.name
-  }))], u = () => Qe({
-    items: [...y()]
-  }), h = () => {
-    const m = n();
-    if (!m)
+  } = useLocalization();
+  const cameras = cameraManagerSolidStore((x) => x.cameras);
+  const selectedCamera = cameraManagerSolidStore((x) => x.selectedCamera);
+  const isQueryingCameras = cameraManagerSolidStore((x) => x.isQueryingCameras);
+  const facingFilter = cameraManagerSolidStore((x) => x.facingFilter);
+  const [isSwapping, setIsSwapping] = createSignal(false);
+  const isDisabled = () => isQueryingCameras() || isSwapping();
+  const camerasWithFacingFilter = () => {
+    const $facingFilter = facingFilter();
+    if (!$facingFilter) {
+      return cameras();
+    }
+    return cameras().filter((camera) => $facingFilter.includes(camera.facingMode));
+  };
+  const createCameraOptions = () => [...camerasWithFacingFilter().map((camera) => ({
+    value: camera.deviceInfo.deviceId,
+    label: camera.name
+  }))];
+  const cameraCollection = () => createListCollection({
+    items: [...createCameraOptions()]
+  });
+  const selectedCameraInCollection = () => {
+    const $selectedCamera = selectedCamera();
+    if (!$selectedCamera) {
+      return;
+    }
+    const foundCamera = cameraCollection().find($selectedCamera.deviceInfo.deviceId);
+    if (!foundCamera) {
       return;
-    const b = u().find(m.deviceInfo.deviceId);
-    if (b)
-      return [b.value];
-  }, p = (m) => er.some((b) => b.value === m), C = async (m) => {
-    c(!0);
-    const b = a().find((v) => v.deviceInfo.deviceId === m);
-    if (!b) {
+    }
+    return [foundCamera.value];
+  };
+  const isFakeCamera = (value) => {
+    return fakeCameras.some((fakeCamera) => fakeCamera.value === value);
+  };
+  const selectCameraById = async (id) => {
+    setIsSwapping(true);
+    const camera = cameras().find((camera2) => camera2.deviceInfo.deviceId === id);
+    if (!camera) {
       console.warn("No camera");
       return;
     }
-    await e.selectCamera(b), c(!1);
+    await cameraManager.selectCamera(camera);
+    setIsSwapping(false);
   };
-  return s(J, {
-    children: () => s(A.Root, {
+  return createComponent(SmartEnvironmentProvider, {
+    children: () => createComponent(Select.Root, {
+      part: "camera-select-part",
       get collection() {
-        return u();
+        return cameraCollection();
       },
       get value() {
-        return h();
+        return selectedCameraInCollection();
       },
       positioning: {
         placement: "top"
       },
-      lazyMount: !0,
+      lazyMount: true,
       get disabled() {
-        return f();
+        return isDisabled();
       },
-      onValueChange: (m) => {
-        if (p(m.value[0])) {
+      onValueChange: (details) => {
+        if (isFakeCamera(details.value[0])) {
           console.warn("Fake camera, skipping");
           return;
         }
-        C(m.value[0]);
+        void selectCameraById(details.value[0]);
       },
       get children() {
-        return [s(A.Label, {
-          class: "sr-only",
+        return [createComponent(Select.Label, {
+          "class": "sr-only",
           get children() {
             return t.selected_camera;
           }
-        }), s(A.Trigger, {
-          asChild: (m) => (() => {
-            var b = Yt();
-            return D(b, K(() => Ie(m()), {
-              class: `flex px-4 py-2 items-center gap-2 rounded-full bg-dark-100/50 backdrop-blur-xl
+        }), createComponent(Select.Trigger, {
+          asChild: (selectProps) => {
+            return (() => {
+              var _el$ = _tmpl$$4();
+              spread(_el$, mergeProps(() => eventFixer(selectProps()), {
+                "class": `flex px-4 py-2 items-center gap-2 rounded-full bg-dark-100/50 backdrop-blur-xl
                     whitespace-nowrap text-base color-white font-500 cursor-pointer appearance-none
                     border-none disabled:opacity-50 disabled:cursor-not-allowed max-w-[100%]`
-            }), !1, !0), w(b, s(Wt, {
-              class: "size-6 shrink-0",
-              "aria-hidden": !0
-            }), null), w(b, s(A.ValueText, {
-              class: "truncate",
-              get placeholder() {
-                return o() ? t.loading_cameras : t.select_a_camera;
-              }
-            }), null), w(b, s(A.Indicator, {
-              class: "shrink-0 data-[state=open]:scale-y-[-1]",
-              get children() {
-                return s(Qt, {
-                  class: "size-6 shrink-0"
-                });
-              }
-            }), null), b;
-          })()
-        }), s(A.Positioner, {
+              }), false, true);
+              insert(_el$, createComponent(IconCamera, {
+                "class": "size-6 shrink-0",
+                "aria-hidden": true
+              }), null);
+              insert(_el$, createComponent(Select.ValueText, {
+                "class": "truncate",
+                get placeholder() {
+                  return isQueryingCameras() ? t.loading_cameras : t.select_a_camera;
+                }
+              }), null);
+              insert(_el$, createComponent(Select.Indicator, {
+                "class": "shrink-0 data-[state=open]:scale-y-[-1]",
+                get children() {
+                  return createComponent(IconChevronDown, {
+                    "class": "size-6 shrink-0"
+                  });
+                }
+              }), null);
+              return _el$;
+            })();
+          }
+        }), createComponent(Select.Positioner, {
           get children() {
-            return s(A.Content, {
+            return createComponent(Select.Content, {
               get children() {
-                return s(A.ItemGroup, {
-                  class: "rounded-4 overflow-hidden text-base color-white",
+                return createComponent(Select.ItemGroup, {
+                  "class": "rounded-4 overflow-hidden text-base color-white",
                   get children() {
-                    return s(qe, {
+                    return createComponent(Index, {
                       get each() {
-                        return u().items;
+                        return cameraCollection().items;
                       },
-                      children: (m, b) => s(A.Item, {
-                        get item() {
-                          return m();
-                        },
-                        class: `flex py-3 pl-4 pr-12 cursor-pointer select-none relative gap-[1px]
-                            bg-dark-100/50 backdrop-blur-xl data-[highlighted]:bg-gray-500/50`,
-                        get children() {
-                          return [s(A.ItemText, {
-                            class: "truncate",
-                            get children() {
-                              return m().label;
-                            }
-                          }), s(A.ItemIndicator, {
-                            class: "absolute right-4",
-                            get children() {
-                              return s(Xt, {
-                                class: "size-6 shrink-0"
-                              });
-                            }
-                          }), s(E, {
-                            when: b !== 0,
-                            get children() {
-                              return Jt();
-                            }
-                          })];
-                        }
-                      })
+                      children: (camera, index) => {
+                        return createComponent(Select.Item, {
+                          get item() {
+                            return camera();
+                          },
+                          "class": "flex py-3 pl-4 pr-12 cursor-pointer select-none relative gap-[1px]\n                            bg-dark-100/50 backdrop-blur-xl data-[highlighted]:bg-gray-500/50",
+                          get children() {
+                            return [createComponent(Select.ItemText, {
+                              "class": "truncate",
+                              get children() {
+                                return camera().label;
+                              }
+                            }), createComponent(Select.ItemIndicator, {
+                              "class": "absolute right-4",
+                              get children() {
+                                return createComponent(IconCheck, {
+                                  "class": "size-6 shrink-0"
+                                });
+                              }
+                            }), createComponent(Show, {
+                              when: index !== 0,
+                              get children() {
+                                return _tmpl$2$3();
+                              }
+                            })];
+                          }
+                        });
+                      }
                     });
                   }
                 });
@@ -1836,7 +2421,8 @@ const Zt = () => {
       }
     })
   });
-}, er = [{
+};
+const fakeCameras = [{
   value: "5",
   label: "Back Camera 2"
 }, {
@@ -1852,307 +2438,389 @@ const Zt = () => {
   value: "4",
   label: "Some random desktop camera"
 }];
-var Z = /* @__PURE__ */ S("<span class=sr-only>"), tr = /* @__PURE__ */ S('<div class="z-2 relative gap-2 grid justify-between items-center grid-cols-[1fr_auto_1fr] py-4 color-white lerp:px-3@xs,8@lg"><div class="justify-self-start flex flex-nowrap gap-4 auto-cols-auto"></div><div class="justify-self-center min-w-0 w-full"></div><div class=justify-self-end>'), rr = /* @__PURE__ */ S("<button>");
-const ar = () => {
+var _tmpl$$3 = /* @__PURE__ */ template(`<span class=sr-only>`), _tmpl$2$2 = /* @__PURE__ */ template(`<div class=justify-self-end>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class="z-2 relative gap-2 grid justify-between items-center grid-cols-[1fr_auto_1fr] py-4 color-white lerp:px-3@xs,8@lg"><div class="justify-self-start flex flex-nowrap gap-4 auto-cols-auto"></div><div class="justify-self-center min-w-0 w-full">`), _tmpl$4$1 = /* @__PURE__ */ template(`<button>`);
+const Header = () => {
+  const {
+    dismountCameraUi,
+    cameraManagerSolidStore,
+    cameraManager,
+    showMirrorCameraButton,
+    showTorchButton,
+    showCloseButton
+  } = useCameraUiStore();
   const {
-    dismountCameraUi: r,
-    cameraManagerSolidStore: e,
-    showMirrorCameraButton: t,
-    cameraManager: a
-  } = q(), {
-    t: n
-  } = Y(), o = e((h) => h.mirrorX), i = e((h) => h.selectedCamera), l = e((h) => h.cameras), c = e((h) => h.playbackState !== "idle"), f = e((h) => h.selectedCamera?.torchEnabled), g = () => i()?.torchSupported, y = () => {
-    const h = i();
-    h && h.toggleTorch();
-  }, u = () => {
-    a.setCameraMirrorX(!e.getState().mirrorX);
+    t
+  } = useLocalization();
+  const isMirrored = cameraManagerSolidStore((s) => s.mirrorX);
+  const selectedCamera = cameraManagerSolidStore((s) => s.selectedCamera);
+  const cameras = cameraManagerSolidStore((s) => s.cameras);
+  const isActive = cameraManagerSolidStore((s) => s.playbackState !== "idle");
+  const torchEnabled = cameraManagerSolidStore((s) => s.selectedCamera?.torchEnabled);
+  const hasTorch = () => selectedCamera()?.torchSupported;
+  const toggleTorch = () => {
+    const camera = selectedCamera();
+    if (!camera) {
+      return;
+    }
+    void camera.toggleTorch();
   };
-  return s(J, {
+  const toggleMirrorX = () => {
+    cameraManager.setCameraMirrorX(!cameraManagerSolidStore.getState().mirrorX);
+  };
+  return createComponent(SmartEnvironmentProvider, {
     children: () => (() => {
-      var h = tr(), p = h.firstChild, C = p.nextSibling, m = C.nextSibling;
-      return w(p, s(E, {
+      var _el$ = _tmpl$3$2(), _el$2 = _el$.firstChild, _el$5 = _el$2.nextSibling;
+      insert(_el$2, createComponent(Show, {
         get when() {
-          return t && c();
+          return showMirrorCameraButton && isActive();
         },
         get children() {
-          return s(ee, {
+          return createComponent(ToolbarButton, {
+            part: "mirror-camera-button-part",
             get tooltipLabel() {
-              return n.mirror_camera;
+              return t.mirror_camera;
             },
-            onClick: () => u(),
+            onClick: () => toggleMirrorX(),
             get children() {
               return [(() => {
-                var b = Z();
-                return w(b, () => n.mirror_camera), b;
-              })(), s(qt, {
-                class: "size-6 shrink-0 transition-transform duration-300 ease-in-out",
+                var _el$3 = _tmpl$$3();
+                insert(_el$3, () => t.mirror_camera);
+                return _el$3;
+              })(), createComponent(MirrorIcon, {
+                "class": "size-6 shrink-0 transition-transform duration-300 ease-in-out",
                 get style() {
                   return {
-                    transform: o() ? "scaleX(-1)" : "scaleX(1)"
+                    transform: isMirrored() ? "scaleX(-1)" : "scaleX(1)"
                   };
                 }
               })];
             }
           });
         }
-      }), null), w(p, s(E, {
+      }), null);
+      insert(_el$2, createComponent(Show, {
         get when() {
-          return ge(() => !!g())() && c();
+          return memo(() => !!(showTorchButton && hasTorch()))() && isActive();
         },
         get children() {
-          return s(ee, {
-            onClick: () => y(),
+          return createComponent(ToolbarButton, {
+            part: "torch-button-part",
+            onClick: () => toggleTorch(),
             get tooltipLabel() {
-              return n.torch;
+              return t.torch;
             },
             get children() {
-              return [s(E, {
+              return [createComponent(Show, {
                 get when() {
-                  return !f();
+                  return !torchEnabled();
                 },
                 get children() {
                   return [(() => {
-                    var b = Z();
-                    return w(b, () => n.torch), b;
-                  })(), s(Ut, {
-                    class: "size-6 shrink-0"
+                    var _el$4 = _tmpl$$3();
+                    insert(_el$4, () => t.torch);
+                    return _el$4;
+                  })(), createComponent(FlashOn, {
+                    "class": "size-6 shrink-0"
                   })];
                 }
-              }), s(E, {
+              }), createComponent(Show, {
                 get when() {
-                  return f();
+                  return torchEnabled();
                 },
                 get children() {
-                  return s(Bt, {
-                    class: "size-6 shrink-0"
+                  return createComponent(FlashOff, {
+                    "class": "size-6 shrink-0"
                   });
                 }
               })];
             }
           });
         }
-      }), null), w(C, s(E, {
+      }), null);
+      insert(_el$5, createComponent(Show, {
         get when() {
-          return l().length > 1;
+          return cameras().length > 1;
         },
         get children() {
-          return s(Zt, {});
+          return createComponent(CameraSelector, {});
         }
-      })), w(m, s(ee, {
-        onClick: () => r(),
-        get tooltipLabel() {
-          return n.close;
-        },
+      }));
+      insert(_el$, createComponent(Show, {
+        when: showCloseButton,
         get children() {
-          return [(() => {
-            var b = Z();
-            return w(b, () => n.close), b;
-          })(), s(Ot, {
-            class: "size-6 shrink-0"
-          })];
+          var _el$6 = _tmpl$2$2();
+          insert(_el$6, createComponent(ToolbarButton, {
+            part: "close-button-part",
+            onClick: () => dismountCameraUi(),
+            get tooltipLabel() {
+              return t.close;
+            },
+            get children() {
+              return [(() => {
+                var _el$7 = _tmpl$$3();
+                insert(_el$7, () => t.close);
+                return _el$7;
+              })(), createComponent(CloseIcon, {
+                "class": "size-6 shrink-0"
+              })];
+            }
+          }));
+          return _el$6;
         }
-      })), h;
+      }), null);
+      return _el$;
     })()
   });
-}, ee = (r) => s(G.Root, {
-  get children() {
-    return [s(G.Trigger, K(r, {
-      asChild: (e) => (() => {
-        var t = rr();
-        return D(t, K(() => Ie(e()), {
-          class: `rounded-full bg-dark-500 bg-opacity-50 backdrop-blur grid place-items-center
+};
+const ToolbarButton = (props) => {
+  return createComponent(Tooltip.Root, {
+    get children() {
+      return [createComponent(Tooltip.Trigger, mergeProps(props, {
+        asChild: (tooltipProps) => {
+          return (() => {
+            var _el$8 = _tmpl$4$1();
+            spread(_el$8, mergeProps(() => eventFixer(tooltipProps()), {
+              "class": `rounded-full bg-dark-500 bg-opacity-50 backdrop-blur grid place-items-center
               size-12 appearance-none border-none cursor-pointer`
-        }), !1, !0), w(t, () => r.children), t;
-      })()
-    })), s(G.Positioner, {
-      get children() {
-        return s(G.Content, {
-          class: `bg-dark-500 bg-opacity-50 backdrop-blur color-white text-align-center p-2
+            }), false, true);
+            insert(_el$8, () => props.children);
+            return _el$8;
+          })();
+        }
+      })), createComponent(Tooltip.Positioner, {
+        get children() {
+          return createComponent(Tooltip.Content, {
+            "class": `bg-dark-500 bg-opacity-50 backdrop-blur color-white text-align-center p-2
             rounded-md text-sm drop-shadow-md`,
-          get children() {
-            return r.tooltipLabel;
-          }
-        });
-      }
-    })];
-  }
-}), nr = (r, e, t) => He((a) => (w(e, r(), e.firstChild ? null : void 0), () => {
-  a(), e.textContent = "";
-}), t);
-var or = /* @__PURE__ */ S("<div>");
-const ir = (r) => {
-  const e = ve(), [t, a] = We(r, ["children", "disableShadowRoot", "getRef"]);
+            get children() {
+              return props.tooltipLabel;
+            }
+          });
+        }
+      })];
+    }
+  });
+};
+const renderWithOwner = (code, element, owner) => {
+  return createRoot((dispose) => {
+    insert(element, code(), element.firstChild ? null : void 0);
+    return () => {
+      dispose();
+      element.textContent = "";
+    };
+  }, owner);
+};
+var _tmpl$$2 = /* @__PURE__ */ template(`<div>`);
+const SolidShadowRoot = (props) => {
+  const owner = getOwner();
+  const [local, others] = splitProps(props, ["children", "disableShadowRoot", "getRef"]);
   return (() => {
-    var n = or();
-    return O((o) => {
-      if (t.disableShadowRoot)
+    var _el$ = _tmpl$$2();
+    use((ref) => {
+      if (local.disableShadowRoot) {
         return;
-      const i = o.attachShadow({
+      }
+      const shadowRoot = ref.attachShadow({
         mode: "open"
       });
-      nr(() => ge(() => t.children), i, e);
-    }, n), D(n, a, !1, !0), w(n, s(E, {
+      renderWithOwner(() => memo(() => local.children), shadowRoot, owner);
+    }, _el$);
+    spread(_el$, others, false, true);
+    insert(_el$, createComponent(Show, {
       get when() {
-        return t.disableShadowRoot;
+        return local.disableShadowRoot;
       },
       get children() {
-        return t.children;
+        return local.children;
       }
-    })), n;
+    }));
+    return _el$;
   })();
-}, sr = ":where(html){line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}", lr = ":host{font-family:var(--mb-ui-font);line-height:1.15;isolation:isolate;box-sizing:border-box}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}code,pre{font-family:var(--mb-monospace-font-stack)}svg path{pointer-events:none}img,picture,video,canvas,svg{display:block;max-width:100%}img{pointer-events:none;user-select:none}:where(input,button,textarea,select){font:inherit}:where(button,select){cursor:pointer;color:inherit;font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}", cr = ':host{--mb-system-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--mb-monospace-font-stack: Menlo, Consolas, "Ubuntu Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;--mb-ui-font: var(--mb-system-font-stack);--mb-size: 1;--color-accent-25-rgb-value: 242 247 255;--color-accent-50-rgb-value: 231 240 255;--color-accent-100-rgb-value: 220 234 255;--color-accent-200-rgb-value: 198 221 255;--color-accent-300-rgb-value: 158 197 255;--color-accent-400-rgb-value: 111 169 255;--color-accent-500-rgb-value: 58 137 253;--color-accent-600-rgb-value: 0 98 242;--color-accent-700-rgb-value: 0 80 197;--color-accent-800-rgb-value: 0 64 157;--color-accent-900-rgb-value: 0 54 133;--color-error-25-rgb-value: 255 248 249;--color-error-50-rgb-value: 255 241 242;--color-error-100-rgb-value: 255 228 230;--color-error-200-rgb-value: 254 205 211;--color-error-300-rgb-value: 253 164 175;--color-error-400-rgb-value: 251 113 133;--color-error-500-rgb-value: 244 63 94;--color-error-600-rgb-value: 225 29 72;--color-error-700-rgb-value: 190 18 60;--color-error-800-rgb-value: 136 19 39;--color-error-900-rgb-value: 89 13 40;--color-success-25-rgb-value: 245 254 250;--color-success-50-rgb-value: 236 253 245;--color-success-100-rgb-value: 209 250 229;--color-success-200-rgb-value: 167 243 208;--color-success-300-rgb-value: 110 231 183;--color-success-400-rgb-value: 52 211 153;--color-success-500-rgb-value: 16 185 144;--color-success-600-rgb-value: 22 163 138;--color-success-700-rgb-value: 39 121 106;--color-success-800-rgb-value: 23 92 79;--color-success-900-rgb-value: 12 59 50;--color-warning-25-rgb-value: 255 253 243;--color-warning-50-rgb-value: 254 252 232;--color-warning-100-rgb-value: 254 249 195;--color-warning-200-rgb-value: 254 240 138;--color-warning-300-rgb-value: 253 229 99;--color-warning-400-rgb-value: 252 218 59;--color-warning-500-rgb-value: 250 204 21;--color-warning-600-rgb-value: 234 179 8;--color-warning-700-rgb-value: 190 142 48;--color-warning-800-rgb-value: 132 83 28;--color-warning-900-rgb-value: 80 29 10;--color-deep-blue-25-rgb-value: 249 252 255;--color-deep-blue-50-rgb-value: 243 249 254;--color-deep-blue-100-rgb-value: 231 242 251;--color-deep-blue-200-rgb-value: 201 218 241;--color-deep-blue-300-rgb-value: 162 185 216;--color-deep-blue-400-rgb-value: 93 128 182;--color-deep-blue-500-rgb-value: 60 100 161;--color-deep-blue-600-rgb-value: 28 68 129;--color-deep-blue-700-rgb-value: 24 53 97;--color-deep-blue-800-rgb-value: 20 38 65;--color-deep-blue-900-rgb-value: 6 23 49;--color-light-blue-25-rgb-value: 248 251 253;--color-light-blue-50-rgb-value: 240 247 251;--color-light-blue-100-rgb-value: 228 238 244;--color-light-blue-200-rgb-value: 215 229 238;--color-light-blue-300-rgb-value: 190 218 237;--color-light-blue-400-rgb-value: 159 202 232;--color-light-blue-500-rgb-value: 135 180 211;--color-light-blue-600-rgb-value: 104 157 193;--color-light-blue-700-rgb-value: 78 129 164;--color-light-blue-800-rgb-value: 67 109 138;--color-light-blue-900-rgb-value: 55 84 104;--color-gray-50-rgb-value: 249 250 251;--color-gray-100-rgb-value: 243 244 246;--color-gray-200-rgb-value: 229 231 235;--color-gray-300-rgb-value: 209 213 219;--color-gray-400-rgb-value: 156 163 175;--color-gray-500-rgb-value: 107 114 128;--color-gray-600-rgb-value: 75 85 99;--color-gray-700-rgb-value: 55 65 81;--color-gray-800-rgb-value: 31 41 55;--color-blue-gray-50-rgb-value: 74 74 74;--color-blue-gray-100-rgb-value: 60 60 60;--color-blue-gray-200-rgb-value: 50 50 50;--color-blue-gray-300-rgb-value: 45 45 45;--color-blue-gray-400-rgb-value: 34 34 34;--color-blue-gray-500-rgb-value: 31 31 31;--color-blue-gray-600-rgb-value: 28 28 30;--color-blue-gray-700-rgb-value: 27 27 27;--color-blue-gray-800-rgb-value: 24 24 24;--color-blue-gray-900-rgb-value: 15 15 15;--color-black-rgb-value: 0 0 0;--color-white-rgb-value: 255 255 255;--color-primary: var(--color-accent-600-rgb-value);--color-error: var(--color-error-500-rgb-value);--color-success: var(--color-success-500-rgb-value);--color-warning: var(--color-warning-500-rgb-value);--color-deep-blue: var(--color-deep-blue-800-rgb-value);--color-light-blue: var(--color-light-blue-200-rgb-value);accent-color:var(--color-primary);caret-color:red}', ur = {
+};
+const normalize = '/* Document\n * ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\n:where(html) {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n * ========================================================================== */\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Edge, Firefox, and Safari.\n */\n\n:where(h1) {\n  font-size: 2em;\n  margin-block-end: 0.67em;\n  margin-block-start: 0.67em;\n}\n\n/* Grouping content\n * ========================================================================== */\n\n/**\n * Remove the margin on nested lists in Chrome, Edge, and Safari.\n */\n\n:where(dl, ol, ul) :where(dl, ol, ul) {\n  margin-block-end: 0;\n  margin-block-start: 0;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Correct the inheritance of border color in Firefox.\n */\n\n:where(hr) {\n  box-sizing: content-box; /* 1 */\n  color: inherit; /* 2 */\n  height: 0; /* 1 */\n}\n\n/* Text-level semantics\n * ========================================================================== */\n\n/**\n * Add the correct text decoration in Safari.\n */\n\n:where(abbr[title]) {\n  text-decoration: underline;\n  text-decoration: underline dotted;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\n:where(b, strong) {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\n:where(small) {\n  font-size: 80%;\n}\n\n/* Tabular data\n * ========================================================================== */\n\n/**\n * 1. Correct table border color in Chrome, Edge, and Safari.\n * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.\n */\n\n:where(table) {\n  border-color: currentColor; /* 1 */\n  text-indent: 0; /* 2 */\n}\n\n/* Forms\n * ========================================================================== */\n\n/**\n * Remove the margin on controls in Safari.\n */\n\n:where(button, input, select) {\n  margin: 0;\n}\n\n/**\n * Remove the inheritance of text transform in Firefox.\n */\n\n:where(button) {\n  text-transform: none;\n}\n\n/**\n * Correct the inability to style buttons in iOS and Safari.\n */\n\n:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {\n  -webkit-appearance: button;\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Edge, and Firefox.\n */\n\n:where(progress) {\n  vertical-align: baseline;\n}\n\n/**\n * Remove the inheritance of text transform in Firefox.\n */\n\n:where(select) {\n  text-transform: none;\n}\n\n/**\n * Remove the margin in Firefox and Safari.\n */\n\n:where(textarea) {\n  margin: 0;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome, Edge, and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n:where(input[type="search" i]) {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Safari.\n */\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * Correct the text style of placeholders in Chrome, Edge, and Safari.\n */\n\n::-webkit-input-placeholder {\n  color: inherit;\n  opacity: 0.54;\n}\n\n/**\n * Remove the inner padding in Chrome, Edge, and Safari on macOS.\n */\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style upload buttons in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/**\n * Remove the inner border and padding of focus outlines in Firefox.\n */\n\n:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n * Restore the focus outline styles unset by the previous rule in Firefox.\n */\n\n:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Remove the additional :invalid styles in Firefox.\n */\n\n:where(:-moz-ui-invalid) {\n  box-shadow: none;\n}\n\n/* Interactive\n * ========================================================================== */\n\n/*\n * Add the correct styles in Safari.\n */\n\n:where(dialog) {\n  background-color: white;\n  border: solid;\n  color: black;\n  height: -moz-fit-content;\n  height: fit-content;\n  left: 0;\n  margin: auto;\n  padding: 1em;\n  position: absolute;\n  right: 0;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n:where(dialog:not([open])) {\n  display: none;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\n:where(summary) {\n  display: list-item;\n}\n';
+const rootStyles = ":host {\n  font-family: var(--mb-ui-font);\n  line-height: 1.15;\n  isolation: isolate;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  overflow-wrap: break-word;\n}\n\ncode {\n  font-family: var(--mb-monospace-font-stack);\n}\n\npre {\n  font-family: var(--mb-monospace-font-stack);\n}\n\nsvg path {\n  pointer-events: none;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n  display: block;\n  max-width: 100%;\n}\n\nimg {\n  pointer-events: none;\n  user-select: none;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(button, select) {\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}";
+const variables = ':host {\n  --mb-system-font-stack:\n    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",\n    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  --mb-monospace-font-stack:\n    Menlo, Consolas, "Ubuntu Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;\n  --mb-ui-font: var(--mb-system-font-stack);\n  --mb-size: 1;\n  /***************************************/\n  /*              MB COLORS              */\n  /***************************************/\n  --color-accent-25-rgb-value: 242 247 255; /* #F2F7FF */\n  --color-accent-50-rgb-value: 231 240 255; /* #E7F0FF */\n  --color-accent-100-rgb-value: 220 234 255; /* #DCEAFF */\n  --color-accent-200-rgb-value: 198 221 255; /* #C6DDFF */\n  --color-accent-300-rgb-value: 158 197 255; /* #9EC5FF */\n  --color-accent-400-rgb-value: 111 169 255; /* #6FA9FF */\n  --color-accent-500-rgb-value: 58 137 253; /* #3A89FD */\n  --color-accent-600-rgb-value: 0 98 242; /* #0062F2 */\n  --color-accent-700-rgb-value: 0 80 197; /* #0050C5 */\n  --color-accent-800-rgb-value: 0 64 157; /* #00409D */\n  --color-accent-900-rgb-value: 0 54 133; /* #003685 */\n  --color-error-25-rgb-value: 255 248 249; /* #FFF8F9 */\n  --color-error-50-rgb-value: 255 241 242; /* #FFF1F2 */\n  --color-error-100-rgb-value: 255 228 230; /* #FFE4E6 */\n  --color-error-200-rgb-value: 254 205 211; /* #FECDD3 */\n  --color-error-300-rgb-value: 253 164 175; /* #FDA4AF */\n  --color-error-400-rgb-value: 251 113 133; /* #FB7185 */\n  --color-error-500-rgb-value: 244 63 94; /* #F43F5E */\n  --color-error-600-rgb-value: 225 29 72; /* #E11D48 */\n  --color-error-700-rgb-value: 190 18 60; /* #BE123C */\n  --color-error-800-rgb-value: 136 19 39; /* #881337 */\n  --color-error-900-rgb-value: 89 13 40; /* #590D28 */\n  --color-success-25-rgb-value: 245 254 250; /* #F5FEFA */\n  --color-success-50-rgb-value: 236 253 245; /* #ECFDF5 */\n  --color-success-100-rgb-value: 209 250 229; /* #D1FAE5 */\n  --color-success-200-rgb-value: 167 243 208; /* #A7F3D0 */\n  --color-success-300-rgb-value: 110 231 183; /* #6EE7B7 */\n  --color-success-400-rgb-value: 52 211 153; /* #34D399 */\n  --color-success-500-rgb-value: 16 185 144; /* #10B990 */\n  --color-success-600-rgb-value: 22 163 138; /* #16A38A */\n  --color-success-700-rgb-value: 39 121 106; /* #27796A */\n  --color-success-800-rgb-value: 23 92 79; /* #175C4F */\n  --color-success-900-rgb-value: 12 59 50; /* #0C3B32 */\n  --color-warning-25-rgb-value: 255 253 243; /* #FFFDF3 */\n  --color-warning-50-rgb-value: 254 252 232; /* #FEFCE8 */\n  --color-warning-100-rgb-value: 254 249 195; /* #FEF9C3 */\n  --color-warning-200-rgb-value: 254 240 138; /* #FEF08A */\n  --color-warning-300-rgb-value: 253 229 99; /* #FDE563 */\n  --color-warning-400-rgb-value: 252 218 59; /* #FCDA3B */\n  --color-warning-500-rgb-value: 250 204 21; /* #FACC15 */\n  --color-warning-600-rgb-value: 234 179 8; /* #EAB308 */\n  --color-warning-700-rgb-value: 190 142 48; /* #BE8E30 */\n  --color-warning-800-rgb-value: 132 83 28; /* #84531C */\n  --color-warning-900-rgb-value: 80 29 10; /* #501D0A */\n  --color-deep-blue-25-rgb-value: 249 252 255; /* #F9FCFF */\n  --color-deep-blue-50-rgb-value: 243 249 254; /* #F3F9FE */\n  --color-deep-blue-100-rgb-value: 231 242 251; /* #E7F2FB */\n  --color-deep-blue-200-rgb-value: 201 218 241; /* #C9DAF1 */\n  --color-deep-blue-300-rgb-value: 162 185 216; /* #A2B9D8 */\n  --color-deep-blue-400-rgb-value: 93 128 182; /* #5D80B6 */\n  --color-deep-blue-500-rgb-value: 60 100 161; /* #3C64A1 */\n  --color-deep-blue-600-rgb-value: 28 68 129; /* #1C4481 */\n  --color-deep-blue-700-rgb-value: 24 53 97; /* #183561 */\n  --color-deep-blue-800-rgb-value: 20 38 65; /* #142641 */\n  --color-deep-blue-900-rgb-value: 6 23 49; /* #061731 */\n  --color-light-blue-25-rgb-value: 248 251 253; /* #F8FBFD */\n  --color-light-blue-50-rgb-value: 240 247 251; /* #F0F7FB */\n  --color-light-blue-100-rgb-value: 228 238 244; /* #E4EEF4 */\n  --color-light-blue-200-rgb-value: 215 229 238; /* #D7E5EE */\n  --color-light-blue-300-rgb-value: 190 218 237; /* #BEDAED */\n  --color-light-blue-400-rgb-value: 159 202 232; /* #9FCAE8 */\n  --color-light-blue-500-rgb-value: 135 180 211; /* #87B4D3 */\n  --color-light-blue-600-rgb-value: 104 157 193; /* #689DC1 */\n  --color-light-blue-700-rgb-value: 78 129 164; /* #4E81A4 */\n  --color-light-blue-800-rgb-value: 67 109 138; /* #436D8A */\n  --color-light-blue-900-rgb-value: 55 84 104; /* #375468 */\n  --color-gray-50-rgb-value: 249 250 251; /* #FAFAFA */\n  --color-gray-100-rgb-value: 243 244 246; /* #F5F5F5 */\n  --color-gray-200-rgb-value: 229 231 235; /* #F0F0F0 */\n  --color-gray-300-rgb-value: 209 213 219; /* #D9D9D9 */\n  --color-gray-400-rgb-value: 156 163 175; /* #BFBFBF */\n  --color-gray-500-rgb-value: 107 114 128; /* #8C8C8C */\n  --color-gray-600-rgb-value: 75 85 99; /* #595959 */\n  --color-gray-700-rgb-value: 55 65 81; /* #434343 */\n  --color-gray-800-rgb-value: 31 41 55; /* #262626 */\n  --color-blue-gray-50-rgb-value: 74 74 74; /* #F9FAFB */\n  --color-blue-gray-100-rgb-value: 60 60 60; /* #F3F4F6 */\n  --color-blue-gray-200-rgb-value: 50 50 50; /* #E5E7EB */\n  --color-blue-gray-300-rgb-value: 45 45 45; /* #D1D5DB */\n  --color-blue-gray-400-rgb-value: 34 34 34; /* #9CA3AF */\n  --color-blue-gray-500-rgb-value: 31 31 31; /* #6B7280 */\n  --color-blue-gray-600-rgb-value: 28 28 30; /* #4B5563 */\n  --color-blue-gray-700-rgb-value: 27 27 27; /* #374151 */\n  --color-blue-gray-800-rgb-value: 24 24 24; /* #1F2937 */\n  --color-blue-gray-900-rgb-value: 15 15 15; /* #111827 */\n  --color-black-rgb-value: 0 0 0; /* #000000 */\n  --color-white-rgb-value: 255 255 255; /* #FFFFFF */\n  --color-primary: var(--color-accent-600-rgb-value);\n  --color-error: var(--color-error-500-rgb-value);\n  --color-success: var(--color-success-500-rgb-value);\n  --color-warning: var(--color-warning-500-rgb-value);\n  --color-deep-blue: var(--color-deep-blue-800-rgb-value);\n  --color-light-blue: var(--color-light-blue-200-rgb-value);\n  accent-color: var(--color-primary);\n  caret-color: red;\n}';
+const initialState = {
   feedbackLayer: null,
   overlayLayer: null,
   owner: null
-}, U = me()(
-  // this is important! Otherwise, solid-zustand will start mutating the initial state
-  he(() => structuredClone(ur))
-), oe = we(U), de = () => {
 };
-function dr(r, e) {
-  if (Be)
-    return { observe: de, unobserve: de };
-  const t = new ResizeObserver(r);
-  return ie(t.disconnect.bind(t)), {
-    observe: (a) => t.observe(a, e),
-    unobserve: t.unobserve.bind(t)
+const cameraUiRefStore = createStore()(
+  // this is important! Otherwise, solid-zustand will start mutating the initial state
+  subscribeWithSelector(() => structuredClone(initialState))
+);
+const cameraUiRefSignalStore = createWithSignal(cameraUiRefStore);
+const noop = () => void 0;
+function makeResizeObserver(callback, options) {
+  if (isServer) {
+    return { observe: noop, unobserve: noop };
+  }
+  const observer = new ResizeObserver(callback);
+  onCleanup(observer.disconnect.bind(observer));
+  return {
+    observe: (ref) => observer.observe(ref, options),
+    unobserve: observer.unobserve.bind(observer)
   };
 }
-const hr = (r, e, t, a) => {
-  const n = Math.max(r / t, e / a);
-  let o = 0;
-  if (r / t > e / a) {
-    const i = n * a;
-    o = 1 - e / i;
+const determineFitMode = (Cw, Ch, Vw, Vh) => {
+  const scaleCover = Math.max(Cw / Vw, Ch / Vh);
+  let croppedFraction = 0;
+  if (Cw / Vw > Ch / Vh) {
+    const visible = scaleCover * Vh;
+    croppedFraction = 1 - Ch / visible;
+  } else {
+    const visible = scaleCover * Vw;
+    croppedFraction = 1 - Cw / visible;
+  }
+  if (croppedFraction < 0.1) {
+    return "cover";
   } else {
-    const i = n * t;
-    o = 1 - r / i;
+    return "contain";
   }
-  return o < 0.1 ? "cover" : "contain";
 };
-function mr(r, e, t, a) {
-  const n = r / t, o = e / a, i = Math.max(n, o);
-  if (n >= o) {
-    const l = Math.round(e / i);
-    return { x: 0, y: Math.round((a - l) / 2), width: t, height: l };
+function getVisibleVideoArea(containerWidth, containerHeight, videoWidth, videoHeight) {
+  const scaleX = containerWidth / videoWidth;
+  const scaleY = containerHeight / videoHeight;
+  const s = Math.max(scaleX, scaleY);
+  if (scaleX >= scaleY) {
+    const visibleNaturalHeight = Math.round(containerHeight / s);
+    const y = Math.round((videoHeight - visibleNaturalHeight) / 2);
+    return { x: 0, y, width: videoWidth, height: visibleNaturalHeight };
   } else {
-    const l = Math.round(r / i);
-    return { x: Math.round((t - l) / 2), y: 0, width: l, height: a };
+    const visibleNaturalWidth = Math.round(containerWidth / s);
+    const x = Math.round((videoWidth - visibleNaturalWidth) / 2);
+    return { x, y: 0, width: visibleNaturalWidth, height: videoHeight };
   }
 }
-const gr = "_dialogPositioner_worsp_1", fr = "_dialogBackdrop_worsp_5", br = "_dialogContent_worsp_9", pr = "_large_worsp_13", vr = "_compact_worsp_16", wr = "_dialogTitle_worsp_30", yr = "_contentOut_worsp_34", Sr = "_closeButton_worsp_38", Cr = "_closeButtonInner_worsp_44", kr = "_primaryActionButton_worsp_49", Er = "_secondaryActionButton_worsp_53", _r = "_actions_worsp_57", Tr = "_alertTitle_worsp_64", xr = "_alertText_worsp_68", k = {
-  dialogPositioner: gr,
-  dialogBackdrop: fr,
-  dialogContent: br,
-  large: pr,
-  compact: vr,
-  dialogTitle: wr,
-  contentOut: yr,
-  closeButton: Sr,
-  closeButtonInner: Cr,
-  primaryActionButton: kr,
-  secondaryActionButton: Er,
-  actions: _r,
-  alertTitle: Tr,
-  alertText: xr
+const dialogPositioner = "_dialogPositioner_worsp_1";
+const dialogBackdrop = "_dialogBackdrop_worsp_5";
+const dialogContent = "_dialogContent_worsp_9";
+const large = "_large_worsp_13";
+const compact = "_compact_worsp_16";
+const dialogTitle = "_dialogTitle_worsp_30";
+const contentOut = "_contentOut_worsp_34";
+const closeButton = "_closeButton_worsp_38";
+const closeButtonInner = "_closeButtonInner_worsp_44";
+const primaryActionButton = "_primaryActionButton_worsp_49";
+const secondaryActionButton = "_secondaryActionButton_worsp_53";
+const actions = "_actions_worsp_57";
+const alertTitle = "_alertTitle_worsp_64";
+const alertText = "_alertText_worsp_68";
+const styles = {
+  dialogPositioner,
+  dialogBackdrop,
+  dialogContent,
+  large,
+  compact,
+  dialogTitle,
+  contentOut,
+  closeButton,
+  closeButtonInner,
+  primaryActionButton,
+  secondaryActionButton,
+  actions,
+  alertTitle,
+  alertText
 };
-var Mr = /* @__PURE__ */ S("<span>&times;"), Rr = /* @__PURE__ */ S("<div>"), Ar = /* @__PURE__ */ S("<p>"), $r = /* @__PURE__ */ S("<span>"), Fr = /* @__PURE__ */ S("<div><button></button><button>");
-const Dr = (r) => {
-  const e = () => {
-    switch (r.modalStyle) {
+var _tmpl$$1 = /* @__PURE__ */ template(`<span>&times;`), _tmpl$2$1 = /* @__PURE__ */ template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ template(`<p>`), _tmpl$4 = /* @__PURE__ */ template(`<span>`), _tmpl$5 = /* @__PURE__ */ template(`<div><button></button><button>`);
+const Modal = (props) => {
+  const getPaddingClass = () => {
+    switch (props.modalStyle) {
       case "compact":
-        return k.compact;
+        return styles.compact;
       case "large":
-        return k.compact;
+        return styles.compact;
       case "default":
       default:
-        return;
+        return void 0;
     }
   };
-  return s(J, {
-    children: () => s($.Root, K({
-      onFocusOutside: (t) => t.preventDefault(),
-      onInteractOutside: (t) => t.preventDefault(),
-      restoreFocus: !0,
-      unmountOnExit: !0,
-      lazyMount: !0
-    }, r, {
+  return createComponent(SmartEnvironmentProvider, {
+    children: () => createComponent(Dialog.Root, mergeProps({
+      onFocusOutside: (e) => e.preventDefault(),
+      onInteractOutside: (e) => e.preventDefault(),
+      restoreFocus: true,
+      unmountOnExit: true,
+      lazyMount: true
+    }, props, {
       get children() {
-        return s(E, {
+        return createComponent(Show, {
           get when() {
-            return r.open;
+            return props.open;
           },
           get children() {
-            return s(fe, {
+            return createComponent(Portal, {
               get mount() {
-                return r.mountTarget;
+                return props.mountTarget;
               },
               get children() {
-                return s($.Positioner, {
-                  get class() {
-                    return k.dialogPositioner;
+                return createComponent(Dialog.Positioner, {
+                  get ["class"]() {
+                    return styles.dialogPositioner;
                   },
                   get children() {
-                    return [s($.Backdrop, {
-                      get class() {
-                        return k.dialogBackdrop;
+                    return [createComponent(Dialog.Backdrop, {
+                      get ["class"]() {
+                        return styles.dialogBackdrop;
                       }
-                    }), s($.Content, {
-                      get class() {
-                        return `${k.dialogContent} ${e()}`;
+                    }), createComponent(Dialog.Content, {
+                      get ["class"]() {
+                        return `${styles.dialogContent} ${getPaddingClass()}`;
                       },
                       get children() {
-                        return [s(E, {
+                        return [createComponent(Show, {
                           get when() {
-                            return r.showCloseButton;
+                            return props.showCloseButton;
                           },
                           get children() {
-                            return s($.CloseTrigger, {
-                              get class() {
-                                return k.closeButton;
+                            return createComponent(Dialog.CloseTrigger, {
+                              get ["class"]() {
+                                return styles.closeButton;
                               },
                               get onClick() {
-                                return r.onCloseClicked;
+                                return props.onCloseClicked;
                               },
                               get children() {
-                                var t = Mr();
-                                return H(() => V(t, k.closeButtonInner)), t;
+                                var _el$ = _tmpl$$1();
+                                effect(() => className(_el$, styles.closeButtonInner));
+                                return _el$;
                               }
                             });
                           }
-                        }), s(E, {
+                        }), createComponent(Show, {
                           get when() {
-                            return r.headerImage;
+                            return props.headerImage;
                           },
                           get children() {
-                            return r.headerImage;
+                            return props.headerImage;
                           }
-                        }), s(E, {
+                        }), createComponent(Show, {
                           get when() {
-                            return r.header;
+                            return props.header;
                           },
-                          children: (t) => s($.Title, {
-                            get class() {
-                              return k.dialogTitle;
+                          children: (header) => createComponent(Dialog.Title, {
+                            get ["class"]() {
+                              return styles.dialogTitle;
                             },
                             get children() {
-                              return t();
+                              return header();
                             }
                           })
-                        }), s($.Description, {
-                          get class() {
-                            return k.contentOut;
+                        }), createComponent(Dialog.Description, {
+                          get ["class"]() {
+                            return styles.contentOut;
                           },
                           get children() {
-                            return r.children;
+                            return props.children;
                           }
-                        }), s(E, {
+                        }), createComponent(Show, {
                           get when() {
-                            return r.actions;
+                            return props.actions;
                           },
                           get children() {
-                            var t = Rr();
-                            return w(t, () => r.actions), t;
+                            var _el$2 = _tmpl$2$1();
+                            insert(_el$2, () => props.actions);
+                            return _el$2;
                           }
                         })];
                       }
@@ -2166,205 +2834,275 @@ const Dr = (r) => {
       }
     }))
   });
-}, Ir = ({
-  mountTarget: r,
-  header: e,
-  text: t,
-  open: a,
-  onPrimaryClick: n,
-  onSecondaryClick: o,
-  primaryButtonText: i = "Retry",
-  secondaryButtonText: l = "Cancel"
+};
+const AlertModal = ({
+  mountTarget,
+  header,
+  text,
+  open,
+  onPrimaryClick,
+  onSecondaryClick,
+  primaryButtonText = "Retry",
+  secondaryButtonText = "Cancel"
 }) => {
-  let c;
-  return s(Dr, {
-    mountTarget: r,
+  let primaryButtonEl;
+  return createComponent(Modal, {
+    mountTarget,
     get header() {
       return (() => {
-        var f = $r();
-        return w(f, e), H(() => V(f, k.alertTitle)), f;
+        var _el$4 = _tmpl$4();
+        insert(_el$4, header);
+        effect(() => className(_el$4, styles.alertTitle));
+        return _el$4;
       })();
     },
-    initialFocusEl: () => c,
-    open: a,
+    initialFocusEl: () => primaryButtonEl,
+    open,
     get actions() {
       return (() => {
-        var f = Fr(), g = f.firstChild, y = g.nextSibling;
-        g.$$click = () => o(), w(g, l), y.$$click = () => n();
-        var u = c;
-        return typeof u == "function" ? O(u, y) : c = y, w(y, i), H((h) => {
-          var p = k.actions, C = k.secondaryActionButton, m = k.primaryActionButton;
-          return p !== h.e && V(f, h.e = p), C !== h.t && V(g, h.t = C), m !== h.a && V(y, h.a = m), h;
+        var _el$5 = _tmpl$5(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+        _el$6.$$click = () => onSecondaryClick();
+        insert(_el$6, secondaryButtonText);
+        _el$7.$$click = () => onPrimaryClick();
+        var _ref$ = primaryButtonEl;
+        typeof _ref$ === "function" ? use(_ref$, _el$7) : primaryButtonEl = _el$7;
+        insert(_el$7, primaryButtonText);
+        effect((_p$) => {
+          var _v$ = styles.actions, _v$2 = styles.secondaryActionButton, _v$3 = styles.primaryActionButton;
+          _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$7, _p$.a = _v$3);
+          return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), f;
+        });
+        return _el$5;
       })();
     },
     modalStyle: "compact",
     get children() {
-      var f = Ar();
-      return w(f, t), H(() => V(f, k.alertText)), f;
+      var _el$3 = _tmpl$3$1();
+      insert(_el$3, text);
+      effect(() => className(_el$3, styles.alertText));
+      return _el$3;
     }
   });
 };
-Ve(["click"]);
-const zr = () => {
+delegateEvents(["click"]);
+const CameraErrorModal = () => {
   const {
-    t: r
-  } = Y(), {
-    cameraManagerSolidStore: e,
-    cameraManager: t,
-    dismountCameraUi: a
-  } = q(), n = e((i) => i.errorState), o = oe((i) => i.overlayLayer);
-  return s(E, {
+    t
+  } = useLocalization();
+  const {
+    cameraManagerSolidStore,
+    cameraManager,
+    dismountCameraUi
+  } = useCameraUiStore();
+  const errorState = cameraManagerSolidStore((x) => x.errorState);
+  const overlayLayer = cameraUiRefSignalStore((x) => x.overlayLayer);
+  return createComponent(Show, {
     get when() {
-      return n();
+      return errorState();
     },
     get children() {
-      return s(Ir, {
+      return createComponent(AlertModal, {
         get mountTarget() {
-          return o();
+          return overlayLayer();
         },
         get header() {
-          return r.camera_error_title;
+          return t.camera_error_title;
         },
-        open: !0,
-        onPrimaryClick: () => void t.startCameraStream(),
-        onSecondaryClick: () => a(),
+        open: true,
+        onPrimaryClick: () => void cameraManager.startCameraStream(),
+        onSecondaryClick: () => dismountCameraUi(),
         get primaryButtonText() {
-          return r.camera_error_primary_btn;
+          return t.camera_error_primary_btn;
         },
         get secondaryButtonText() {
-          return r.camera_error_cancel_btn;
+          return t.camera_error_cancel_btn;
         },
         get text() {
-          return r.camera_error_details;
+          return t.camera_error_details;
         }
       });
     }
   });
 };
-var te = /* @__PURE__ */ S("<style>"), Lr = /* @__PURE__ */ S("<style id=camera-manager-style>"), Nr = /* @__PURE__ */ S('<div class="bg-dark-500 color-white size-full relative min-h-[300px]"part=capture-screen-part><video class="block absolute top-0 left-0 size-full"></video><div class="absolute top-0 left-0 w-full h-full z-1"id=feedback-layer></div><div class="absolute top-0 left-0 w-full h-full has-[[data-scope]]:z-2"id=overlay-layer>');
-const ze = "capture-screen-host", Le = () => {
+var _tmpl$ = /* @__PURE__ */ template(`<style>`), _tmpl$2 = /* @__PURE__ */ template(`<style id=camera-manager-style>`), _tmpl$3 = /* @__PURE__ */ template(`<div class="bg-dark-500 color-white size-full relative min-h-[300px]"part=capture-screen-part><video part=video-element-part class="block absolute top-0 left-0 size-full"></video><div class="absolute top-0 left-0 w-full h-full z-1"id=feedback-layer></div><div class="absolute top-0 left-0 w-full h-full has-[[data-scope]]:z-2"id=overlay-layer>`);
+const CAPTURE_SCREEN_SHADOW_ROOT_HOST_ID = "capture-screen-host";
+const CaptureScreen = () => {
   const {
-    cameraManager: r,
-    mountTarget: e
-  } = q(), [t, a] = z(), [n, o] = z(), [i, l] = z(), c = () => e.parentNode === document.body, [f, g] = z("contain");
-  function y() {
-    const u = t();
-    if (!u)
+    cameraManager,
+    mountTarget
+  } = useCameraUiStore();
+  const [videoRef, setVideoRef] = createSignal();
+  const [feedbackRef, setFeedbackRef] = createSignal();
+  const [overlayLayerRef, setOverlayLayerRef] = createSignal();
+  const isPortalled = () => mountTarget.parentNode === document.body;
+  const [fitMode, setFitMode] = createSignal("contain");
+  function adjustVideoFit() {
+    const video = videoRef();
+    if (!video) {
       return;
-    const h = u.clientWidth, p = u.clientHeight, C = u.videoWidth, m = u.videoHeight, b = hr(h, p, C, m);
-    if (g(b), b === "cover") {
-      const v = mr(h, p, C, m);
-      r.setExtractionArea(v);
-    } else
-      r.setExtractionArea({
+    }
+    const Cw = video.clientWidth;
+    const Ch = video.clientHeight;
+    const Vw = video.videoWidth;
+    const Vh = video.videoHeight;
+    const newFitMode = determineFitMode(Cw, Ch, Vw, Vh);
+    setFitMode(newFitMode);
+    if (newFitMode === "cover") {
+      const visibleArea = getVisibleVideoArea(Cw, Ch, Vw, Vh);
+      cameraManager.setExtractionArea(visibleArea);
+    } else {
+      cameraManager.setExtractionArea({
         x: 0,
         y: 0,
-        width: C,
-        height: m
+        width: Vw,
+        height: Vh
       });
+    }
   }
-  return Q(() => {
-    const u = t();
-    if (!u)
+  onMount(() => {
+    const video = videoRef();
+    if (!video) {
       return;
+    }
     const {
-      observe: h,
-      unobserve: p
-    } = dr(y);
-    h(u), u.addEventListener("loadedmetadata", y), ie(() => {
-      p(u), u.removeEventListener("loadedmetadata", y);
+      observe,
+      unobserve
+    } = makeResizeObserver(adjustVideoFit);
+    observe(video);
+    video.addEventListener("loadedmetadata", adjustVideoFit);
+    onCleanup(() => {
+      unobserve(video);
+      video.removeEventListener("loadedmetadata", adjustVideoFit);
     });
-  }), Q(() => {
-    const u = ve();
-    u && oe.setState({
-      owner: u
+  });
+  onMount(() => {
+    const owner = getOwner();
+    if (!owner) {
+      return;
+    }
+    cameraUiRefSignalStore.setState({
+      owner
+    });
+  });
+  createEffect(() => {
+    const $videoRef = videoRef();
+    const $feedbackRef = feedbackRef();
+    const $overlayLayerRef = overlayLayerRef();
+    if (!$videoRef || !$feedbackRef || !$overlayLayerRef) {
+      return;
+    }
+    cameraUiRefSignalStore.setState({
+      feedbackLayer: $feedbackRef,
+      overlayLayer: $overlayLayerRef
     });
-  }), Ge(() => {
-    const u = t(), h = n(), p = i();
-    !u || !h || !p || (oe.setState({
-      feedbackLayer: h,
-      overlayLayer: p
-    }), r.initVideoElement(u));
-  }), s(ir, {
+    cameraManager.initVideoElement($videoRef);
+  });
+  return createComponent(SolidShadowRoot, {
     get id() {
-      return c() ? void 0 : ze;
+      return !isPortalled() ? CAPTURE_SCREEN_SHADOW_ROOT_HOST_ID : void 0;
     },
     get disableShadowRoot() {
-      return c();
+      return isPortalled();
     },
     get style() {
-      return c() ? {
+      return isPortalled() ? {
         height: "100%"
       } : void 0;
     },
     get children() {
       return [(() => {
-        var u = te();
-        return w(u, cr), u;
+        var _el$ = _tmpl$();
+        insert(_el$, variables);
+        return _el$;
       })(), (() => {
-        var u = te();
-        return w(u, sr), u;
+        var _el$2 = _tmpl$();
+        insert(_el$2, normalize);
+        return _el$2;
       })(), (() => {
-        var u = te();
-        return w(u, lr), u;
+        var _el$3 = _tmpl$();
+        insert(_el$3, rootStyles);
+        return _el$3;
       })(), (() => {
-        var u = Lr();
-        return O((h) => {
-          window.__mbCameraManagerCssCode && (h.innerHTML = window.__mbCameraManagerCssCode);
-        }, u), u;
+        var _el$4 = _tmpl$2();
+        use((ref) => {
+          if (window.__mbCameraManagerCssCode) {
+            ref.innerHTML = window.__mbCameraManagerCssCode;
+          }
+        }, _el$4);
+        return _el$4;
       })(), (() => {
-        var u = Nr(), h = u.firstChild, p = h.nextSibling, C = p.nextSibling;
-        return w(u, s(ar, {}), h), O(a, h), O(o, p), O(l, C), w(u, s(zr, {}), null), H((m) => (m = f()) != null ? h.style.setProperty("object-fit", m) : h.style.removeProperty("object-fit")), u;
+        var _el$5 = _tmpl$3(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
+        insert(_el$5, createComponent(Header, {}), _el$6);
+        use(setVideoRef, _el$6);
+        use(setFeedbackRef, _el$7);
+        use(setOverlayLayerRef, _el$8);
+        insert(_el$5, createComponent(CameraErrorModal, {}), null);
+        effect((_$p) => (_$p = fitMode()) != null ? _el$6.style.setProperty("object-fit", _$p) : _el$6.style.removeProperty("object-fit"));
+        return _el$5;
       })()];
     }
   });
-}, Or = () => {
+};
+const CaptureScreenPortalled = () => {
   const {
-    t: r
-  } = Y(), [e, t] = z(!0), {
-    addOnDismountCallback: a
-  } = q();
-  return a(() => {
-    t(!1);
-  }), s(fe, {
-    useShadow: !0,
+    t
+  } = useLocalization();
+  const [isOpen, setIsOpen] = createSignal(true);
+  const {
+    addOnDismountCallback
+  } = useCameraUiStore();
+  addOnDismountCallback(() => {
+    setIsOpen(false);
+  });
+  return createComponent(Portal, {
+    useShadow: true,
     get mount() {
-      return document.getElementById(Ne);
+      return document.getElementById(MOUNT_POINT_ID);
+    },
+    ref: (ref) => {
+      ref.id = CAPTURE_SCREEN_SHADOW_ROOT_HOST_ID;
+      ref.style.zIndex = "1000";
+      ref.style.position = "fixed";
+      ref.id = "mb-camera-host";
+      return ref;
     },
-    ref: (n) => (n.id = ze, n.style.zIndex = "1000", n.style.position = "fixed", n.id = "mb-camera-host", n),
     get children() {
-      return s(J, {
-        children: (n) => s($.Root, {
+      return createComponent(SmartEnvironmentProvider, {
+        children: (rootNode) => createComponent(Dialog.Root, {
           get open() {
-            return e();
+            return isOpen();
           },
-          lazyMount: !0,
-          unmountOnExit: !0,
+          lazyMount: true,
+          unmountOnExit: true,
           initialFocusEl: () => {
-            const o = document.createElement("div");
-            return o.tabIndex = -1, n.appendChild(o), setTimeout(() => {
-              o.remove();
-            }, 0), o;
+            const dummyNode = document.createElement("div");
+            dummyNode.tabIndex = -1;
+            rootNode.appendChild(dummyNode);
+            setTimeout(() => {
+              dummyNode.remove();
+            }, 0);
+            return dummyNode;
           },
           get children() {
-            return s($.Positioner, {
+            return createComponent(Dialog.Positioner, {
               get children() {
-                return s($.Content, {
+                return createComponent(Dialog.Content, {
                   "aria-labelledby": "dialog-title",
-                  class: "h-vh supports-[(height:100dvh)]:h-dvh top-0 left-0 w-full fixed",
+                  "class": "h-vh supports-[(height:100dvh)]:h-dvh top-0 left-0 w-full fixed",
                   get children() {
-                    return [s($.Title, {
-                      class: "sr-only",
+                    return [createComponent(Dialog.Title, {
+                      "class": "sr-only",
                       id: "dialog-title",
                       get children() {
-                        return r.scan_document;
+                        return t.scan_document;
                       }
-                    }), s(Le, {})];
+                    }), createComponent(CaptureScreen, {})];
                   }
                 });
               }
@@ -2374,65 +3112,89 @@ const ze = "capture-screen-host", Le = () => {
       });
     }
   });
-}, Pr = () => {
+};
+const RootComponent = () => {
   const {
-    mountTarget: r
-  } = q();
-  return s(Ue, {
+    mountTarget
+  } = useCameraUiStore();
+  return createComponent(Dynamic, {
     get component() {
-      return r.parentNode === document.body ? Or : Le;
+      return mountTarget.parentNode === document.body ? CaptureScreenPortalled : CaptureScreen;
     }
   });
-}, Ne = "camera-manager-mount-point";
-function Yr(r, e, {
-  localizationStrings: t,
-  showMirrorCameraButton: a = !1
+};
+const MOUNT_POINT_ID = "camera-manager-mount-point";
+function createCameraManagerUi(cameraManager, target, {
+  localizationStrings,
+  showMirrorCameraButton = false,
+  showTorchButton = true,
+  showCloseButton = true
 } = {}) {
-  let n;
-  const o = /* @__PURE__ */ new Set();
-  let i;
-  const l = (p) => {
-    i = p;
-  }, c = () => {
-    r.reset();
+  let mountTarget;
+  const dismountCallbacks = /* @__PURE__ */ new Set();
+  let updateLocalizationRef;
+  const setLocalizationRef = (setter) => {
+    updateLocalizationRef = setter;
   };
-  let f;
-  const g = () => {
+  const cleanupCameraManager = () => {
+    cameraManager.reset();
+  };
+  let dismountRef;
+  const dismountCameraManagerUi = () => {
     try {
       console.debug("🧱 Dismounting camera manager UI");
-      for (const p of o)
-        p();
-      o.clear(), c(), requestAnimationFrame(() => {
+      for (const callback of dismountCallbacks) {
+        callback();
+      }
+      dismountCallbacks.clear();
+      cleanupCameraManager();
+      requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          f && f(), n.remove(), c();
+          if (dismountRef) {
+            dismountRef();
+          }
+          mountTarget.remove();
+          cleanupCameraManager();
         });
       });
-    } catch (p) {
-      console.warn("Error while dismounting camera manager UI", p);
+    } catch (e) {
+      console.warn("Error while dismounting camera manager UI", e);
     }
-  }, y = document.createElement("div");
-  y.id = Ne, n = y, e ? e.appendChild(y) : document.body.appendChild(y);
-  const u = (p) => (o.add(p), () => {
-    o.delete(p);
-  });
-  f = je(() => s(zt, {
-    userStrings: t,
-    setLocalizationRef: l,
+  };
+  const newMountTarget = document.createElement("div");
+  newMountTarget.id = MOUNT_POINT_ID;
+  mountTarget = newMountTarget;
+  if (target) {
+    target.appendChild(newMountTarget);
+  } else {
+    document.body.appendChild(newMountTarget);
+  }
+  const addOnDismountCallback = (fn) => {
+    dismountCallbacks.add(fn);
+    return () => {
+      dismountCallbacks.delete(fn);
+    };
+  };
+  dismountRef = render(() => createComponent(LocalizationProvider, {
+    userStrings: localizationStrings,
+    setLocalizationRef,
     get children() {
-      return s(Dt, {
-        addOnDismountCallback: u,
-        dismountCameraUi: g,
-        cameraManager: r,
-        showMirrorCameraButton: a,
-        mountTarget: n,
+      return createComponent(CameraUiStoreProvider, {
+        addOnDismountCallback,
+        dismountCameraUi: dismountCameraManagerUi,
+        cameraManager,
+        showMirrorCameraButton,
+        showTorchButton,
+        showCloseButton,
+        mountTarget,
         get children() {
-          return s(Pr, {});
+          return createComponent(RootComponent, {});
         }
       });
     }
-  }), n);
-  const h = {
-    updateLocalization: i,
+  }), mountTarget);
+  const exposedComponentApi = {
+    updateLocalization: updateLocalizationRef,
     /**
      * Adds a callback to be called when the component is unmounted.
      * Returns a cleanup function that removes the callback when called.
@@ -2440,64 +3202,88 @@ function Yr(r, e, {
      * @param fn - The callback function to be called when the component is unmounted
      * @returns A cleanup function that removes the callback when called
      */
-    addOnDismountCallback: u,
-    cameraManager: r,
+    addOnDismountCallback,
+    cameraManager,
     // we know these are defined because `createCameraManagerUi` resolves when they are defined
     // TODO: maybe don't use getters but make sure they are defined
     get feedbackLayerNode() {
-      return U.getState().feedbackLayer;
+      return cameraUiRefStore.getState().feedbackLayer;
     },
     get overlayLayerNode() {
-      return U.getState().overlayLayer;
+      return cameraUiRefStore.getState().overlayLayer;
     },
     get owner() {
-      return U.getState().owner;
+      return cameraUiRefStore.getState().owner;
     },
-    dismount: g
+    dismount: dismountCameraManagerUi
   };
-  return new Promise((p) => {
-    let C = !1, m = !1, b = !1, v = () => {
-    }, x = () => {
-    }, R = () => {
+  return new Promise((resolve) => {
+    let videoExists = false;
+    let feedbackExists = false;
+    let overlayExists = false;
+    let unsubscribeFeedbackLayer = () => {
+    };
+    let unsubscribeOverlayLayer = () => {
+    };
+    let unsubscribeVideo = () => {
     };
-    const F = () => {
-      C && m && b && (v(), x(), R(), p(h));
+    const checkReady = () => {
+      if (videoExists && feedbackExists && overlayExists) {
+        unsubscribeFeedbackLayer();
+        unsubscribeOverlayLayer();
+        unsubscribeVideo();
+        resolve(exposedComponentApi);
+      }
     };
-    v = U.subscribe((M) => M.feedbackLayer, (M) => {
-      M && (m = !0), F();
+    unsubscribeFeedbackLayer = cameraUiRefStore.subscribe((x) => x.feedbackLayer, (feedbackLayer) => {
+      if (feedbackLayer) {
+        feedbackExists = true;
+      }
+      checkReady();
     }, {
-      fireImmediately: !0
-    }), x = U.subscribe((M) => M.overlayLayer, (M) => {
-      M && (b = !0), F();
+      fireImmediately: true
+    });
+    unsubscribeOverlayLayer = cameraUiRefStore.subscribe((x) => x.overlayLayer, (overlayLayer) => {
+      if (overlayLayer) {
+        overlayExists = true;
+      }
+      checkReady();
     }, {
-      fireImmediately: !0
-    }), R = r.subscribe((M) => M.videoElement, (M) => {
-      M && (C = !0, F());
+      fireImmediately: true
+    });
+    unsubscribeVideo = cameraManager.subscribe((state) => state.videoElement, (videoElement) => {
+      if (videoElement) {
+        videoExists = true;
+        checkReady();
+      }
     }, {
-      fireImmediately: !0
+      fireImmediately: true
     });
   });
 }
-const Oe = Symbol();
-globalThis.__CAMERA_MANAGER__ ||= Oe;
-globalThis.__CAMERA_MANAGER__ !== Oe && console.warn(
-  "Detected multiple instances of @microblink/camera-manager. This can lead to unexpected behavior."
-);
+const testSymbol = Symbol();
+globalThis.__CAMERA_MANAGER__ ||= testSymbol;
+if (globalThis.__CAMERA_MANAGER__ !== testSymbol) {
+  console.warn(
+    "Detected multiple instances of @microblink/camera-manager. This can lead to unexpected behavior."
+  );
+}
 export {
-  Me as Camera,
-  Qr as CameraManager,
-  Ne as MOUNT_POINT_ID,
-  At as VideoFrameProcessor,
-  d as cameraManagerStore,
-  U as cameraUiRefStore,
-  Yr as createCameraManagerUi,
-  $t as defaultCameraManagerOptions,
-  bt as findResolutionKey,
-  $e as getBuffer,
-  gt as getNormalizedResolution,
-  ne as isBufferDetached,
-  ft as matchClosestResolution,
-  Ye as resetCameraManagerStore,
-  mt as returnLongerSide,
-  P as videoResolutions
+  Camera,
+  CameraManager,
+  MOUNT_POINT_ID,
+  VideoFrameProcessor,
+  cameraManagerStore,
+  cameraUiRefStore,
+  createCameraManagerUi,
+  defaultCameraManagerOptions,
+  findResolutionKey,
+  getBuffer,
+  getNormalizedResolution,
+  isBufferDetached,
+  matchClosestResolution,
+  resetCameraManagerStore,
+  returnLongerSide,
+  videoResolutions
 };
+//# sourceMappingURL=camera-manager.js.map