@viasoftbr/shared-ui 0.0.4 → 0.0.6

package/dist/components.cjs

@@ -152,7 +152,6 @@ __export(components_exports, {
   Protocol: () => Protocol_default,
   ProtocolGroup: () => ProtocolGroup_default,
   RangeField: () => RangeField_default,
-  RemoteModule: () => RemoteModule,
   RequireAuth: () => RequireAuth_default,
   SaveDiscard: () => SaveDiscard_default,
   Section: () => Section_default,
@@ -166,7 +165,9 @@ __export(components_exports, {
   VideoGroup: () => VideoGroup_default,
   VideoPlayer: () => VideoPlayer_default,
   ViewLog: () => ViewLog_default,
-  getGridLabel: () => getGridLabel
+  getGridLabel: () => getGridLabel,
+  isValidIPv4: () => isValidIPv4,
+  isValidIPv6: () => isValidIPv6
 });
 module.exports = __toCommonJS(components_exports);
 
@@ -25627,12 +25628,61 @@ function buildWsUrl(path = "/") {
     return `${proto}://${host}${path.startsWith("/") ? path : "/" + path}`;
   }
 }
+function extractBearerToken(headers, explicitToken) {
+  if (explicitToken)
+    return explicitToken;
+  if (!headers)
+    return null;
+  const authHeader = headers.Authorization || headers.authorization;
+  if (!authHeader)
+    return null;
+  const match = authHeader.match(/^Bearer\s+(.+)$/i);
+  return match ? match[1] : null;
+}
+function appendWsQueryParam(url, key, value) {
+  try {
+    const parsed = new URL(
+      url,
+      typeof window !== "undefined" ? window.location.href : void 0
+    );
+    parsed.searchParams.set(key, value);
+    return parsed.toString();
+  } catch {
+    const separator = url.includes("?") ? "&" : "?";
+    return `${url}${separator}${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+  }
+}
+function normalizeProtocols(protocols) {
+  if (!protocols)
+    return void 0;
+  return Array.isArray(protocols) ? protocols.filter(Boolean) : [protocols];
+}
 async function decodeFfurl(ffurl) {
   const { settings } = await fetchApi.postJson("/auth/protocols/ffurl/decode", { ffurl });
   return settings;
 }
-function subscribeToWebsocket(url, onMessage) {
-  const socket = new WebSocket(url);
+function subscribeToWebsocket(url, onMessage, options = {}) {
+  const bearerToken = extractBearerToken(options.headers, options.bearerToken);
+  const bearerStrategy = options.bearerStrategy ?? "query";
+  let resolvedUrl = url;
+  const protocols = normalizeProtocols(options.protocols) ?? [];
+  if (options.headers && Object.keys(options.headers).length > 0) {
+    console.warn(
+      "WebSocket connections in browsers do not support custom HTTP headers. shared-ui will derive bearer auth from Authorization and forward it using query string or subprotocol."
+    );
+  }
+  if (bearerToken) {
+    if (bearerStrategy === "protocol") {
+      protocols.push("bearer", bearerToken);
+    } else {
+      resolvedUrl = appendWsQueryParam(
+        url,
+        options.bearerQueryParam ?? "access_token",
+        bearerToken
+      );
+    }
+  }
+  const socket = protocols.length > 0 ? new WebSocket(resolvedUrl, protocols) : new WebSocket(resolvedUrl);
   socket.onmessage = (event) => {
     try {
       const data = JSON.parse(event.data);
@@ -25647,140 +25697,6 @@ function subscribeToWebsocket(url, onMessage) {
   };
 }
 
-// src/services/loadRemoteModule.ts
-var React2 = __toESM(require("react"), 1);
-var ReactDOM = __toESM(require("react-dom"), 1);
-var sharedScopeInitialized = false;
-function getSharedScope() {
-  if (!globalThis.__federation_shared__) {
-    globalThis.__federation_shared__ = {};
-  }
-  if (!sharedScopeInitialized) {
-    globalThis.__federation_shared__["react"] = {
-      "18.3.1": {
-        get: () => Promise.resolve(() => React2),
-        loaded: true,
-        from: "core",
-        scope: "default"
-      }
-    };
-    globalThis.__federation_shared__["react-dom"] = {
-      "18.3.1": {
-        get: () => Promise.resolve(() => ReactDOM),
-        loaded: true,
-        from: "core",
-        scope: "default"
-      }
-    };
-    sharedScopeInitialized = true;
-  }
-  return globalThis.__federation_shared__;
-}
-var loadedContainers = /* @__PURE__ */ new Map();
-var initializedContainers = /* @__PURE__ */ new Set();
-async function loadContainer(url) {
-  if (loadedContainers.has(url)) {
-    return loadedContainers.get(url);
-  }
-  const loadPromise = (async () => {
-    try {
-      const container = await import(
-        /* @vite-ignore */
-        url
-      );
-      if (container.init && !initializedContainers.has(url)) {
-        await container.init(getSharedScope());
-        initializedContainers.add(url);
-      }
-      return container;
-    } catch (error2) {
-      loadedContainers.delete(url);
-      initializedContainers.delete(url);
-      throw error2;
-    }
-  })();
-  loadedContainers.set(url, loadPromise);
-  return loadPromise;
-}
-async function loadRemoteModule(config) {
-  const container = await loadContainer(config.url);
-  if (!container || typeof container.get !== "function") {
-    throw new Error(`Container inv\xE1lido ou sem m\xE9todo get: ${config.scope}`);
-  }
-  if (typeof container.dynamicLoadingCss === "function") {
-    try {
-      await container.dynamicLoadingCss([]);
-    } catch (err) {
-      console.warn(`Aviso: Falha ao carregar CSS global do remote ${config.scope}`, err);
-    }
-  }
-  const factory2 = await container.get(config.module);
-  const moduleExports = await factory2();
-  if (moduleExports && typeof moduleExports === "object" && "default" in moduleExports) {
-    return moduleExports.default;
-  }
-  return moduleExports;
-}
-
-// src/services/metadataLoader.ts
-var MetadataLoader = class {
-  constructor() {
-    __publicField(this, "metadataCache", /* @__PURE__ */ new Map());
-  }
-  async loadMetadata(metadataUrl) {
-    if (this.metadataCache.has(metadataUrl)) {
-      return this.metadataCache.get(metadataUrl) || [];
-    }
-    try {
-      const response = await fetch(metadataUrl);
-      console.log(response);
-      if (!response.ok) {
-        throw new Error(`Failed to fetch metadata: ${response.statusText}`);
-      }
-      const data = await response.json();
-      let metadata;
-      if (Array.isArray(data)) {
-        metadata = data;
-      } else if (data.pages && Array.isArray(data.pages)) {
-        metadata = data.pages;
-      } else {
-        throw new Error(
-          "Invalid metadata format: expected array or object with pages property"
-        );
-      }
-      metadata.forEach((page, index3) => {
-        if (!page.id || !page.name || !page.path || !page.url) {
-          throw new Error(
-            `Invalid page metadata at index ${index3}: missing required fields`
-          );
-        }
-      });
-      this.metadataCache.set(metadataUrl, metadata);
-      return metadata;
-    } catch (error2) {
-      console.warn(`Failed to load metadata from ${metadataUrl}:`, error2);
-      return [];
-    }
-  }
-  async loadFromDirectory(directoryUrl) {
-    try {
-      const manifestUrl = `${directoryUrl}/manifest.json`;
-      return await this.loadMetadata(manifestUrl);
-    } catch (error2) {
-      throw new Error(
-        `Directory manifest not found at ${directoryUrl}/manifest.json: ${error2}`
-      );
-    }
-  }
-  clearCache() {
-    this.metadataCache.clear();
-  }
-  getCachedMetadata(metadataUrl) {
-    return this.metadataCache.get(metadataUrl);
-  }
-};
-var metadataLoader = new MetadataLoader();
-
 // src/services/registry.ts
 var PluginRegistryImpl = class {
   constructor() {
@@ -25878,7 +25794,7 @@ var saveConfig = async (payload, basePath = "./php") => {
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AuthContext = (0, import_react4.createContext)(void 0);
 function useAuth() {
-  const ctx = (0, import_react4.useContext)(AuthContext);
+  const ctx = (0, import_react4.use)(AuthContext);
   if (!ctx)
     throw new Error("useAuth must be used within AuthProvider");
   return ctx;
@@ -25918,7 +25834,7 @@ var SkeletonBlock = ({ lines = 3, className = "" }) => {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var SectionContext = (0, import_react5.createContext)(void 0);
 function useSection() {
-  const ctx = (0, import_react5.useContext)(SectionContext);
+  const ctx = (0, import_react5.use)(SectionContext);
   return ctx ?? { readonly: false };
 }
 var Section2 = ({ id, title, icon, expanded, onToggle, children, readonly, loading = false }) => {
@@ -25963,7 +25879,7 @@ var Section2 = ({ id, title, icon, expanded, onToggle, children, readonly, loadi
           overflow-hidden 
           ${expanded ? "max-h-fit opacity-100" : "max-h-0 opacity-0"}
         `,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-6 py-4 border-t transition-all transition-discrete border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SectionContext.Provider, { value: { readonly: !!effectiveReadonly }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { lines: 5 }) : children }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-6 py-4 border-t transition-all transition-discrete border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SectionContext, { value: { readonly: !!effectiveReadonly }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { lines: 5 }) : children }) })
       }
     )
   ] });
@@ -28122,7 +28038,7 @@ function m6(u16, t15) {
 }
 
 // node_modules/.pnpm/@floating-ui+react@0.26.28_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-var React6 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 var import_react48 = require("react");
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
@@ -28427,7 +28343,7 @@ function rectToClientRect(rect) {
 }
 
 // node_modules/.pnpm/@floating-ui+react@0.26.28_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-var ReactDOM3 = __toESM(require("react-dom"), 1);
+var ReactDOM2 = __toESM(require("react-dom"), 1);
 
 // node_modules/.pnpm/@floating-ui+core@1.7.4/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
@@ -29630,9 +29546,9 @@ var computePosition2 = (reference, floating, options) => {
 };
 
 // node_modules/.pnpm/@floating-ui+react-dom@2.1.7_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
-var React5 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_react47 = require("react");
-var ReactDOM2 = __toESM(require("react-dom"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
 var isClient = typeof document !== "undefined";
 var noop2 = function noop3() {
 };
@@ -29697,7 +29613,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React5.useRef(value);
+  const ref = React4.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -29720,7 +29636,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React5.useState({
+  const [data, setData] = React4.useState({
     x: 0,
     y: 0,
     strategy,
@@ -29728,19 +29644,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React5.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React4.useState(middleware);
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React5.useState(null);
-  const [_floating, _setFloating] = React5.useState(null);
-  const setReference = React5.useCallback((node) => {
+  const [_reference, _setReference] = React4.useState(null);
+  const [_floating, _setFloating] = React4.useState(null);
+  const setReference = React4.useCallback((node) => {
     if (node !== referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, []);
-  const setFloating = React5.useCallback((node) => {
+  const setFloating = React4.useCallback((node) => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -29748,14 +29664,14 @@ function useFloating(options) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React5.useRef(null);
-  const floatingRef = React5.useRef(null);
-  const dataRef = React5.useRef(data);
+  const referenceRef = React4.useRef(null);
+  const floatingRef = React4.useRef(null);
+  const dataRef = React4.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
   const openRef = useLatestRef(open);
-  const update = React5.useCallback(() => {
+  const update = React4.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -29778,7 +29694,7 @@ function useFloating(options) {
       };
       if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
         dataRef.current = fullData;
-        ReactDOM2.flushSync(() => {
+        ReactDOM.flushSync(() => {
           setData(fullData);
         });
       }
@@ -29793,7 +29709,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React5.useRef(false);
+  const isMountedRef = React4.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -29812,17 +29728,17 @@ function useFloating(options) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React5.useMemo(() => ({
+  const refs = React4.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React5.useMemo(() => ({
+  const elements = React4.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React5.useMemo(() => {
+  const floatingStyles = React4.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -29848,7 +29764,7 @@ function useFloating(options) {
       top: y8
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React5.useMemo(() => ({
+  return React4.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -29875,12 +29791,12 @@ var size3 = (options, deps) => ({
 
 // node_modules/.pnpm/@floating-ui+react@0.26.28_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
 var SafeReact = {
-  ...React6
+  ...React5
 };
 var useInsertionEffect = SafeReact.useInsertionEffect;
 var useSafeInsertionEffect = useInsertionEffect || ((fn) => fn());
 function useEffectEvent(callback) {
-  const ref = React6.useRef(() => {
+  const ref = React5.useRef(() => {
     if (true) {
       throw new Error("Cannot call an event handler while rendering.");
     }
@@ -29888,7 +29804,7 @@ function useEffectEvent(callback) {
   useSafeInsertionEffect(() => {
     ref.current = callback;
   });
-  return React6.useCallback(function() {
+  return React5.useCallback(function() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -29911,13 +29827,13 @@ var genId = () => (
   "floating-ui-" + Math.random().toString(36).slice(2, 6) + count++
 );
 function useFloatingId() {
-  const [id, setId] = React6.useState(() => serverHandoffComplete ? genId() : void 0);
+  const [id, setId] = React5.useState(() => serverHandoffComplete ? genId() : void 0);
   index2(() => {
     if (id == null) {
       setId(genId());
     }
   }, []);
-  React6.useEffect(() => {
+  React5.useEffect(() => {
     serverHandoffComplete = true;
   }, []);
   return id;
@@ -29968,13 +29884,13 @@ function createPubSub() {
     }
   };
 }
-var FloatingNodeContext = /* @__PURE__ */ React6.createContext(null);
-var FloatingTreeContext = /* @__PURE__ */ React6.createContext(null);
+var FloatingNodeContext = /* @__PURE__ */ React5.createContext(null);
+var FloatingTreeContext = /* @__PURE__ */ React5.createContext(null);
 var useFloatingParentNodeId = () => {
   var _React$useContext;
-  return ((_React$useContext = React6.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
+  return ((_React$useContext = React5.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
 };
-var useFloatingTree = () => React6.useContext(FloatingTreeContext);
+var useFloatingTree = () => React5.useContext(FloatingTreeContext);
 var FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
 function useFloatingRootContext(options) {
   const {
@@ -29983,8 +29899,8 @@ function useFloatingRootContext(options) {
     elements: elementsProp
   } = options;
   const floatingId = useId();
-  const dataRef = React6.useRef({});
-  const [events] = React6.useState(() => createPubSub());
+  const dataRef = React5.useRef({});
+  const [events] = React5.useState(() => createPubSub());
   const nested = useFloatingParentNodeId() != null;
   if (true) {
     const optionDomReference = elementsProp.reference;
@@ -29992,7 +29908,7 @@ function useFloatingRootContext(options) {
       error("Cannot pass a virtual element to the `elements.reference` option,", "as it must be a real DOM element. Use `refs.setPositionReference()`", "instead.");
     }
   }
-  const [positionReference, setPositionReference] = React6.useState(elementsProp.reference);
+  const [positionReference, setPositionReference] = React5.useState(elementsProp.reference);
   const onOpenChange = useEffectEvent((open2, event, reason) => {
     dataRef.current.openEvent = open2 ? event : void 0;
     events.emit("openchange", {
@@ -30003,15 +29919,15 @@ function useFloatingRootContext(options) {
     });
     onOpenChangeProp == null || onOpenChangeProp(open2, event, reason);
   });
-  const refs = React6.useMemo(() => ({
+  const refs = React5.useMemo(() => ({
     setPositionReference
   }), []);
-  const elements = React6.useMemo(() => ({
+  const elements = React5.useMemo(() => ({
     reference: positionReference || elementsProp.reference || null,
     floating: elementsProp.floating || null,
     domReference: elementsProp.reference
   }), [positionReference, elementsProp.reference, elementsProp.floating]);
-  return React6.useMemo(() => ({
+  return React5.useMemo(() => ({
     dataRef,
     open,
     onOpenChange,
@@ -30038,11 +29954,11 @@ function useFloating2(options) {
   });
   const rootContext = options.rootContext || internalRootContext;
   const computedElements = rootContext.elements;
-  const [_domReference, setDomReference] = React6.useState(null);
-  const [positionReference, _setPositionReference] = React6.useState(null);
+  const [_domReference, setDomReference] = React5.useState(null);
+  const [positionReference, _setPositionReference] = React5.useState(null);
   const optionDomReference = computedElements == null ? void 0 : computedElements.domReference;
   const domReference = optionDomReference || _domReference;
-  const domReferenceRef = React6.useRef(null);
+  const domReferenceRef = React5.useRef(null);
   const tree = useFloatingTree();
   index2(() => {
     if (domReference) {
@@ -30058,7 +29974,7 @@ function useFloating2(options) {
       }
     }
   });
-  const setPositionReference = React6.useCallback((node) => {
+  const setPositionReference = React5.useCallback((node) => {
     const computedPositionReference = isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
       contextElement: node
@@ -30066,7 +29982,7 @@ function useFloating2(options) {
     _setPositionReference(computedPositionReference);
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
-  const setReference = React6.useCallback((node) => {
+  const setReference = React5.useCallback((node) => {
     if (isElement(node) || node === null) {
       domReferenceRef.current = node;
       setDomReference(node);
@@ -30078,17 +29994,17 @@ function useFloating2(options) {
       position.refs.setReference(node);
     }
   }, [position.refs]);
-  const refs = React6.useMemo(() => ({
+  const refs = React5.useMemo(() => ({
     ...position.refs,
     setReference,
     setPositionReference,
     domReference: domReferenceRef
   }), [position.refs, setReference, setPositionReference]);
-  const elements = React6.useMemo(() => ({
+  const elements = React5.useMemo(() => ({
     ...position.elements,
     domReference
   }), [position.elements, domReference]);
-  const context = React6.useMemo(() => ({
+  const context = React5.useMemo(() => ({
     ...position,
     ...rootContext,
     refs,
@@ -30102,7 +30018,7 @@ function useFloating2(options) {
       node.context = context;
     }
   });
-  return React6.useMemo(() => ({
+  return React5.useMemo(() => ({
     ...position,
     context,
     refs,
@@ -30174,22 +30090,22 @@ function useInteractions(propsList) {
   const referenceDeps = propsList.map((key) => key == null ? void 0 : key.reference);
   const floatingDeps = propsList.map((key) => key == null ? void 0 : key.floating);
   const itemDeps = propsList.map((key) => key == null ? void 0 : key.item);
-  const getReferenceProps = React6.useCallback(
+  const getReferenceProps = React5.useCallback(
     (userProps) => mergeProps(userProps, propsList, "reference"),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     referenceDeps
   );
-  const getFloatingProps = React6.useCallback(
+  const getFloatingProps = React5.useCallback(
     (userProps) => mergeProps(userProps, propsList, "floating"),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     floatingDeps
   );
-  const getItemProps = React6.useCallback(
+  const getItemProps = React5.useCallback(
     (userProps) => mergeProps(userProps, propsList, "item"),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     itemDeps
   );
-  return React6.useMemo(() => ({
+  return React5.useMemo(() => ({
     getReferenceProps,
     getFloatingProps,
     getItemProps
@@ -30260,7 +30176,7 @@ var inner = (props) => ({
     scrollEl.scrollTop = diffY;
     if (onFallbackChange) {
       const shouldFallback = scrollEl.offsetHeight < item.offsetHeight * min(minItemsVisible, listRef.current.length) - 1 || refOverflow.top >= -referenceOverflowThreshold || refOverflow.bottom >= -referenceOverflowThreshold;
-      ReactDOM3.flushSync(() => onFallbackChange(shouldFallback));
+      ReactDOM2.flushSync(() => onFallbackChange(shouldFallback));
     }
     if (overflowRef) {
       overflowRef.current = await detectOverflow2(getArgsWithCustomFloatingHeight({
@@ -30285,10 +30201,10 @@ function useInnerOffset(context, props) {
     onChange: unstable_onChange
   } = props;
   const onChange = useEffectEvent(unstable_onChange);
-  const controlledScrollingRef = React6.useRef(false);
-  const prevScrollTopRef = React6.useRef(null);
-  const initialOverflowRef = React6.useRef(null);
-  React6.useEffect(() => {
+  const controlledScrollingRef = React5.useRef(false);
+  const prevScrollTopRef = React5.useRef(null);
+  const initialOverflowRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (!enabled)
       return;
     function onWheel(e10) {
@@ -30306,7 +30222,7 @@ function useInnerOffset(context, props) {
       }
       if (!isAtTop && dY > 0 || !isAtBottom && dY < 0) {
         e10.preventDefault();
-        ReactDOM3.flushSync(() => {
+        ReactDOM2.flushSync(() => {
           onChange((d9) => d9 + Math[method](dY, remainingScroll * sign));
         });
       } else if (/firefox/i.test(getUserAgent())) {
@@ -30331,7 +30247,7 @@ function useInnerOffset(context, props) {
       };
     }
   }, [enabled, open, elements.floating, overflowRef, scrollRef, onChange]);
-  const floating = React6.useMemo(() => ({
+  const floating = React5.useMemo(() => ({
     onKeyDown() {
       controlledScrollingRef.current = true;
     },
@@ -30349,7 +30265,7 @@ function useInnerOffset(context, props) {
       if (prevScrollTopRef.current !== null) {
         const scrollDiff = el.scrollTop - prevScrollTopRef.current;
         if (overflowRef.current.bottom < -0.5 && scrollDiff < -1 || overflowRef.current.top < -0.5 && scrollDiff > 1) {
-          ReactDOM3.flushSync(() => onChange((d9) => d9 + scrollDiff));
+          ReactDOM2.flushSync(() => onChange((d9) => d9 + scrollDiff));
         }
       }
       requestAnimationFrame(() => {
@@ -30357,7 +30273,7 @@ function useInnerOffset(context, props) {
       });
     }
   }), [elements.floating, onChange, overflowRef, scrollRef]);
-  return React6.useMemo(() => enabled ? {
+  return React5.useMemo(() => enabled ? {
     floating
   } : {}, [enabled, floating]);
 }
@@ -32860,7 +32776,8 @@ var normalizeDvBData = (data) => {
     protocol: parseProtocolUrl(data.output_url || defaultProtocolSettings.ffurl)
   };
 };
-var DvB = (0, import_react74.forwardRef)(function DvB2({ settings, setSettings, encoderId, isLoading, setIsLoading }, ref) {
+var DvB = function DvB2(props) {
+  const { settings, setSettings, encoderId, isLoading, setIsLoading, ref } = props;
   const [internalSettings, setInternalSettings] = (0, import_react74.useState)(defaultDvBSettings);
   const [expandedSections, setExpandedSections] = (0, import_react74.useState)({
     video: true,
@@ -32921,13 +32838,33 @@ var DvB = (0, import_react74.forwardRef)(function DvB2({ settings, setSettings,
     newTracks[idx] = { label: newTracks[idx].label, value: !newTracks[idx].value };
     setTracks(newTracks);
   };
-  (0, import_react74.useImperativeHandle)(ref, () => ({
-    getSettings: () => ({ ...effectiveSettings, output_url: buildProtocolUrl(effectiveSettings.protocol) }),
-    reset: () => {
-      effectiveSetSettings(savedSettings);
-    },
-    isDirty: () => JSON.stringify(effectiveSettings) !== JSON.stringify(savedSettings)
-  }));
+  (0, import_react74.useEffect)(() => {
+    if (!ref)
+      return;
+    const impl = {
+      getSettings: () => ({ ...effectiveSettings, output_url: buildProtocolUrl(effectiveSettings.protocol) }),
+      reset: () => {
+        effectiveSetSettings(savedSettings);
+      },
+      isDirty: () => JSON.stringify(effectiveSettings) !== JSON.stringify(savedSettings)
+    };
+    try {
+      if (typeof ref === "function")
+        ref(impl);
+      else if ("current" in ref)
+        ref.current = impl;
+    } catch {
+    }
+    return () => {
+      try {
+        if (typeof ref === "function")
+          ref(null);
+        else if ("current" in ref)
+          ref.current = null;
+      } catch {
+      }
+    };
+  }, [ref, effectiveSettings, savedSettings, effectiveSetSettings]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-4 pl-4 border-l-[1px] border-gray-600 custom-scroll overflow-y-auto max-h-[670px]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(VideoGroup_default, { expanded: expandedSections.video, onToggle: toggleSection, loading: isLoading ?? false, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
@@ -33274,7 +33211,7 @@ var DvB = (0, import_react74.forwardRef)(function DvB2({ settings, setSettings,
       }
     )
   ] });
-});
+};
 var DvB_default = DvB;
 
 // src/components/encoder/Livecast.tsx
@@ -33402,7 +33339,8 @@ var normalizeLivecastData = (data) => {
     protocol: parsed
   };
 };
-var Livecast = (0, import_react75.forwardRef)(function Livecast2({ settings, setSettings, encoderId, isLoading, setIsLoading }, ref) {
+var Livecast = function Livecast2(props) {
+  const { settings, setSettings, encoderId, isLoading, setIsLoading, ref } = props;
   const [expandedSections, setExpandedSections] = (0, import_react75.useState)({
     video: true,
     audio: false,
@@ -33458,16 +33396,33 @@ var Livecast = (0, import_react75.forwardRef)(function Livecast2({ settings, set
     const next = { ...effectiveSettings, [key]: !effectiveSettings[key] };
     effectiveSetSettings(next);
   };
-  (0, import_react75.useImperativeHandle)(ref, () => ({
-    getSettings: () => ({
-      ...effectiveSettings,
-      send_url: buildProtocolUrl2(effectiveSettings.protocol)
-    }),
-    reset: () => {
-      effectiveSetSettings(savedSettings);
-    },
-    isDirty: () => JSON.stringify(effectiveSettings) !== JSON.stringify(savedSettings)
-  }));
+  (0, import_react75.useEffect)(() => {
+    if (!ref)
+      return;
+    const impl = {
+      getSettings: () => ({ ...effectiveSettings, send_url: buildProtocolUrl2(effectiveSettings.protocol) }),
+      reset: () => {
+        effectiveSetSettings(savedSettings);
+      },
+      isDirty: () => JSON.stringify(effectiveSettings) !== JSON.stringify(savedSettings)
+    };
+    try {
+      if (typeof ref === "function")
+        ref(impl);
+      else if ("current" in ref)
+        ref.current = impl;
+    } catch {
+    }
+    return () => {
+      try {
+        if (typeof ref === "function")
+          ref(null);
+        else if ("current" in ref)
+          ref.current = null;
+      } catch {
+      }
+    };
+  }, [ref, effectiveSettings, savedSettings, effectiveSetSettings]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4 px-4 border-x-[1px] border-gray-500 custom-scroll overflow-y-auto max-h-[670px]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VideoGroup_default, { expanded: expandedSections.video, onToggle: toggleSection, loading: isLoading ?? false, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -33618,7 +33573,7 @@ var Livecast = (0, import_react75.forwardRef)(function Livecast2({ settings, set
       }
     )
   ] });
-});
+};
 var Livecast_default = Livecast;
 
 // src/components/encoder/ViewLog.tsx
@@ -34405,7 +34360,7 @@ var import_react80 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var ThemeContext = (0, import_react80.createContext)(void 0);
 function useTheme() {
-  const context = (0, import_react80.useContext)(ThemeContext);
+  const context = (0, import_react80.use)(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -35382,7 +35337,7 @@ var Footer = () => {
 var Footer_default = Footer;
 
 // src/components/main/Header.tsx
-var import_react86 = __toESM(require("react"), 1);
+var import_react86 = __toESM(require("react"));
 var import_react_router_dom = require("react-router-dom");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function classNames(...classes) {
@@ -35752,7 +35707,7 @@ var Header = ({ isSidebarOpen, setSidebarOpen, onNavigate }) => {
 var Header_default = Header;
 
 // src/components/main/PageHeader.tsx
-var import_react88 = __toESM(require("react"), 1);
+var import_react88 = __toESM(require("react"));
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var PageHeader = ({
   icon,
@@ -36642,6 +36597,20 @@ var InterfacesTimeseries = ({
 };
 var InterfacesTimeseries_default = InterfacesTimeseries;
 
+// src/components/network/validators.ts
+var isValidIPv4 = (ip) => {
+  if (!ip)
+    return false;
+  const ipv4Regex = /^(25[0-5]|2[0-4]\d|1?\d?\d)(\.(25[0-5]|2[0-4]\d|1?\d?\d)){3}$/;
+  return ipv4Regex.test(ip.trim());
+};
+var isValidIPv6 = (ip) => {
+  if (!ip)
+    return false;
+  const ipv6Regex = /^(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}$|^((?:[A-F0-9]{1,4}(?::|$)){1,8})$/i;
+  return ipv6Regex.test(ip.trim());
+};
+
 // src/components/system/RequireAuth.tsx
 var import_react_router_dom3 = require("react-router-dom");
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -39074,7 +39043,7 @@ var dir = instance.dir;
 var init = instance.init;
 var loadResources = instance.loadResources;
 var reloadResources = instance.reloadResources;
-var use = instance.use;
+var use4 = instance.use;
 var changeLanguage = instance.changeLanguage;
 var getFixedT = instance.getFixedT;
 var t14 = instance.t;
@@ -40115,7 +40084,7 @@ instance.use(initReactI18next).init({
 var i18n_default = instance;
 
 // src/context/SharedUiProvider.tsx
-var import_react104 = __toESM(require("react"), 1);
+var import_react104 = __toESM(require("react"));
 var import_react_query2 = require("@tanstack/react-query");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 
@@ -40358,48 +40327,13 @@ var ConfigWizard = ({ basePath = "./config-xcoder-wizard/php", onComplete }) =>
 };
 var Wizard_default = ConfigWizard;
 
-// src/components/RemoteModule.tsx
+// src/components/xcoder/Fflog.tsx
 var import_react106 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function RemoteModule({ scope, url, module: module2, fallback }) {
-  const [Component2, setComponent] = (0, import_react106.useState)(null);
-  const [error2, setError] = (0, import_react106.useState)(null);
-  const [loading, setLoading] = (0, import_react106.useState)(true);
-  (0, import_react106.useEffect)(() => {
-    setLoading(true);
-    setError(null);
-    loadRemoteModule({ scope, url, module: module2 }).then((mod) => {
-      setComponent(() => mod);
-    }).catch((err) => {
-      console.error("Erro ao carregar m\xF3dulo:", err);
-      setError(err.message);
-    }).finally(() => {
-      setLoading(false);
-    });
-  }, [scope, url, module2]);
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-primary dark:border-primary-purple" }) });
-  }
-  if (error2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "p-6 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h3", { className: "text-lg font-semibold text-red-800 dark:text-red-300 mb-2", children: "Erro ao carregar m\xF3dulo" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-red-600 dark:text-red-400", children: error2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-sm text-red-500 dark:text-red-500 mt-2", children: "Verifique se o m\xF3dulo est\xE1 instalado e o servidor est\xE1 rodando." })
-    ] });
-  }
-  if (!Component2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: fallback || /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "p-4 text-neutral-500 dark:text-neutral-400", children: "M\xF3dulo n\xE3o encontrado" }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Component2, {});
-}
-
-// src/components/xcoder/Fflog.tsx
-var import_react107 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
 var Fflog = ({ index: index3 }) => {
-  const [message, setMessage] = (0, import_react107.useState)("");
-  const [tooltip, setTooltip] = (0, import_react107.useState)("Copy to Clipboard");
-  (0, import_react107.useEffect)(() => {
+  const [message, setMessage] = (0, import_react106.useState)("");
+  const [tooltip, setTooltip] = (0, import_react106.useState)("Copy to Clipboard");
+  (0, import_react106.useEffect)(() => {
     const cleanupSocket = subscribeToWebsocket(buildWsUrl("/ws"), (data) => {
       const aux = data?.logs[index3 - 1];
       setMessage(aux.log);
@@ -40412,7 +40346,7 @@ var Fflog = ({ index: index3 }) => {
       cleanupSocket();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       "data-tooltip-id": "tooltip",
@@ -40427,8 +40361,8 @@ var Fflog = ({ index: index3 }) => {
       },
       onMouseLeave: () => message == "" ? setTooltip("Copy to Clipboard") : "",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(M10, { id: "tooltip" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "relative mt-[-10px] text-justify text-gray-900 dark:text-slate-200 font-mono", style: { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: message })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(M10, { id: "tooltip" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "relative mt-[-10px] text-justify text-gray-900 dark:text-slate-200 font-mono", style: { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: message })
       ]
     }
   );
@@ -40436,7 +40370,7 @@ var Fflog = ({ index: index3 }) => {
 var Fflog_default = Fflog;
 
 // src/components/xcoder/Metrics.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var MetricBar = ({ label, value, suffix, color }) => {
   const colorClasses = {
     blue: "bg-blue-500",
@@ -40445,15 +40379,15 @@ var MetricBar = ({ label, value, suffix, color }) => {
     cyan: "bg-cyan-500",
     pink: "bg-pink-500"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-gray-900 dark:text-slate-400", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "text-gray-900 dark:text-white font-mono", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-gray-900 dark:text-slate-400", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-gray-900 dark:text-white font-mono", children: [
         Math.round(value),
         suffix
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "h-2 bg-slate-300 dark:bg-slate-800 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "h-2 bg-slate-300 dark:bg-slate-800 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "div",
       {
         className: `h-full transition-all duration-300 ${colorClasses[color]}`,
@@ -40465,8 +40399,8 @@ var MetricBar = ({ label, value, suffix, color }) => {
 var Metrics_default = MetricBar;
 
 // src/components/xcoder/Panel.tsx
-var import_react108 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react107 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var convertServiceToOption = (serviceString) => {
   const match = serviceString.match(/^([^@]+)@/);
   if (!match) {
@@ -40480,12 +40414,12 @@ var convertServiceToOption = (serviceString) => {
   return { label, value: rawValue };
 };
 var EncoderDecoderPanel = ({ index: index3 }) => {
-  const [status, setStatus] = (0, import_react108.useState)("idle");
-  const [modes, setModes] = (0, import_react108.useState)([]);
-  const [oldModes, setOldModes] = (0, import_react108.useState)(modes);
-  const [open, setOpen] = (0, import_react108.useState)(false);
-  const [optionsList, setOptionsList] = (0, import_react108.useState)([]);
-  (0, import_react108.useEffect)(() => {
+  const [status, setStatus] = (0, import_react107.useState)("idle");
+  const [modes, setModes] = (0, import_react107.useState)([]);
+  const [oldModes, setOldModes] = (0, import_react107.useState)(modes);
+  const [open, setOpen] = (0, import_react107.useState)(false);
+  const [optionsList, setOptionsList] = (0, import_react107.useState)([]);
+  (0, import_react107.useEffect)(() => {
     const cleanupSocket = subscribeToWebsocket(buildWsUrl("/"), (data) => {
       setStatus(data?.services[`xcoder_${index3}`].status);
     });
@@ -40519,52 +40453,52 @@ var EncoderDecoderPanel = ({ index: index3 }) => {
       m: state ? "stop" : "start"
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "bg-gray-200 dark:bg-slate-900/50 border bg-gray-200 border-gray-400 dark:border-slate-800 rounded-lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "px-6 py-3 border-b border-slate-800 flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Radio, { className: "w-5 h-5 text-blue-500" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h1", { className: "text-base font-medium text-gray-800 dark:text-white hover:underline", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("a", { href: `/page/${modes[index3 - 1]?.split("@")[0] ?? "encoder-dvb"}?channel=${index3}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "bg-gray-200 dark:bg-slate-900/50 border bg-gray-200 border-gray-400 dark:border-slate-800 rounded-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "px-6 py-3 border-b border-slate-800 flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Radio, { className: "w-5 h-5 text-blue-500" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h1", { className: "text-base font-medium text-gray-800 dark:text-white hover:underline", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("a", { href: `/page/${modes[index3 - 1]?.split("@")[0] ?? "encoder-dvb"}?channel=${index3}`, children: [
           "Xcoder BMD Video Interface (",
           index3,
           ")"
         ] }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "button",
           {
             onClick: () => startStop(status == "running"),
             className: `flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${status == "running" ? "bg-red-600 hover:bg-red-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"}`,
-            children: status == "running" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Pause, { className: "w-4 h-4" }),
+            children: status == "running" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Pause, { className: "w-4 h-4" }),
               "Stop"
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Play, { className: "w-4 h-4" }),
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Play, { className: "w-4 h-4" }),
               "Start"
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `flex w-[100px] justify-center items-center gap-2 px-4 py-2 rounded-md ${status == "running" ? "bg-yellow-600" : "bg-slate-700"}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `w-2 h-2 rounded-full bg-white ${status == "running" ? "block" : "hidden"}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm text-slate-100 font-mono font-bold", children: status == "running" ? "READY" : "STANDBY" })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `flex w-[100px] justify-center items-center gap-2 px-4 py-2 rounded-md ${status == "running" ? "bg-yellow-600" : "bg-slate-700"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `w-2 h-2 rounded-full bg-white ${status == "running" ? "block" : "hidden"}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm text-slate-100 font-mono font-bold", children: status == "running" ? "READY" : "STANDBY" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "button",
           {
             onClick: () => setOpen(true),
             className: "p-2 rounded-md transition-colors",
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Settings, { className: "w-5 h-5 text-slate-400 hover:text-blue-400" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Settings, { className: "w-5 h-5 text-slate-400 hover:text-blue-400" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Modal_default,
       {
         open,
         setOpen,
         title: "Switching Operation Mode",
-        element: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: optionsList[index3 - 1] && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "relative p-6", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        element: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: optionsList[index3 - 1] && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "relative p-6", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           SelectField_default,
           {
             label: "New Mode",
@@ -40585,15 +40519,15 @@ var EncoderDecoderPanel = ({ index: index3 }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "p-6", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Preview_default, { index: index3, setVuPts: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "p-6", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Preview_default, { index: index3, setVuPts: () => {
     } }) })
   ] });
 };
 var Panel_default = EncoderDecoderPanel;
 
 // src/components/xcoder/Preview.tsx
-var import_react109 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react108 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var Preview = ({
   index: index3,
   setVuPts,
@@ -40602,9 +40536,9 @@ var Preview = ({
   showStreamControl = false,
   orientation = "horizontal"
 }) => {
-  const logEndRef = (0, import_react109.useRef)(null);
-  const [message, setMessage] = (0, import_react109.useState)([]);
-  (0, import_react109.useEffect)(() => {
+  const logEndRef = (0, import_react108.useRef)(null);
+  const [message, setMessage] = (0, import_react108.useState)([]);
+  (0, import_react108.useEffect)(() => {
     const cleanupSocket = subscribeToWebsocket(buildWsUrl("/"), (data) => {
       const aux = data?.services[`xcoder_${index3}`];
       setMessage(aux.decklinkEvents.split("\n"));
@@ -40613,22 +40547,22 @@ var Preview = ({
       cleanupSocket();
     };
   }, []);
-  (0, import_react109.useEffect)(() => {
+  (0, import_react108.useEffect)(() => {
     if (logEndRef.current) {
       logEndRef.current.scrollTop = logEndRef.current.scrollHeight;
     }
   }, [message]);
-  const [vuChannels, setVuChannels] = (0, import_react109.useState)(
+  const [vuChannels, setVuChannels] = (0, import_react108.useState)(
     Array(8).fill({ left: 0, right: 0 })
   );
   const channelCount = 8;
-  const vuBars = (0, import_react109.useMemo)(() => {
-    return Array.from({ length: channelCount }, (_7, i14) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(VUMeter_default, { index: i14, volume: vuChannels }, `vu-bar-${i14}`));
+  const vuBars = (0, import_react108.useMemo)(() => {
+    return Array.from({ length: channelCount }, (_7, i14) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(VUMeter_default, { index: i14, volume: vuChannels }, `vu-bar-${i14}`));
   }, [channelCount, vuChannels]);
-  const playerRef = (0, import_react109.useRef)(null);
-  const vuRef = (0, import_react109.useRef)(null);
-  const [height, setHeight] = (0, import_react109.useState)("auto");
-  (0, import_react109.useLayoutEffect)(() => {
+  const playerRef = (0, import_react108.useRef)(null);
+  const vuRef = (0, import_react108.useRef)(null);
+  const [height, setHeight] = (0, import_react108.useState)("auto");
+  (0, import_react108.useLayoutEffect)(() => {
     const p8 = playerRef.current;
     const v6 = vuRef.current;
     if (p8 && p8 != null && v6 && v6 != null) {
@@ -40642,15 +40576,15 @@ var Preview = ({
     }
     ;
   }, []);
-  const [isOpen, setIsOpen] = (0, import_react109.useState)(false);
-  const logData = message.map((log, i14) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-slate-900 dark:text-slate-300 break-words", children: log }) }, i14));
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `"w-full h-full" ${orientation === "horizontal" ? "" : "py-6"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  const [isOpen, setIsOpen] = (0, import_react108.useState)(false);
+  const logData = message.map((log, i14) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-slate-900 dark:text-slate-300 break-words", children: log }) }, i14));
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `"w-full h-full" ${orientation === "horizontal" ? "" : "py-6"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "div",
       {
         className: `grid gap-6 mb-5 ${orientation === "horizontal" ? "grid-cols-[1fr_300px] items-start" : "grid-cols-1"}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref: playerRef, className: "bg-black rounded-lg overflow-hidden aspect-video", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-full h-full relative flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref: playerRef, className: "bg-black rounded-lg overflow-hidden aspect-video", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-full h-full relative flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             VideoPlayer_default,
             {
               pgmIndex: index3,
@@ -40659,10 +40593,10 @@ var Preview = ({
               setVuChannels
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `flex flex-col ${orientation === "horizontal" ? "h-full" : "h-[200px]"}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref: vuRef, className: `bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-4 ${showDlog || showStreamControl ? "mb-5" : "flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: `flex justify-between items-end ${showDlog || showStreamControl ? "h-32" : "h-full"}`, children: vuBars }) }),
-            showStreamControl && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StreamControl_default, { index: index3 }),
-            showDlog && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `flex flex-col ${orientation === "horizontal" ? "h-full" : "h-[200px]"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref: vuRef, className: `bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-4 ${showDlog || showStreamControl ? "mb-5" : "flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `flex justify-between items-end ${showDlog || showStreamControl ? "h-32" : "h-full"}`, children: vuBars }) }),
+            showStreamControl && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StreamControl_default, { index: index3 }),
+            showDlog && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
               "div",
               {
                 ref: logEndRef,
@@ -40673,7 +40607,7 @@ var Preview = ({
                 style: { height },
                 onClick: () => setIsOpen(true),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(M10, { id: "tooltip" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(M10, { id: "tooltip" }),
                   logData
                 ]
               }
@@ -40682,15 +40616,15 @@ var Preview = ({
         ]
       }
     ),
-    showFflog && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Fflog_default, { index: index3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    showFflog && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Fflog_default, { index: index3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       Modal_default,
       {
         open: isOpen,
         setOpen: () => setIsOpen(!isOpen),
         title: "Log Message",
-        element: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "custom-scroll overflow-y-auto p-3 h-[300px]", children: logData }),
-        icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(FileClock, { "aria-hidden": "true", className: "size-6 text-yellow-600" }),
+        element: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "custom-scroll overflow-y-auto p-3 h-[300px]", children: logData }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FileClock, { "aria-hidden": "true", className: "size-6 text-yellow-600" }),
         positiveLabel: "Copy",
         positiveCommand: () => {
           navigator.clipboard.writeText(message.join("\n"));
@@ -40702,11 +40636,11 @@ var Preview = ({
 var Preview_default = Preview;
 
 // src/components/xcoder/StreamControl.tsx
-var import_react110 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react109 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var StreamControl = ({ index: index3 }) => {
-  const [bufferValue, setBufferValue] = (0, import_react110.useState)(0);
-  const [syncValue, setSyncValue] = (0, import_react110.useState)(0);
+  const [bufferValue, setBufferValue] = (0, import_react109.useState)(0);
+  const [syncValue, setSyncValue] = (0, import_react109.useState)(0);
   const minBuffer = 0;
   const maxBuffer = 100;
   const minSync = -30;
@@ -40719,45 +40653,45 @@ var StreamControl = ({ index: index3 }) => {
     true,
     1e3
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "w-80 space-y-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-3 max-h-[300px] min-h-[100px] overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-xs space-y-2 text-gray-800 dark:text-slate-200", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-medium", children: "Service Name:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate", children: data?.service_name ?? "\u2014" })
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "w-80 space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-3 max-h-[300px] min-h-[100px] overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "text-xs space-y-2 text-gray-800 dark:text-slate-200", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "font-medium", children: "Service Name:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "truncate", children: data?.service_name ?? "\u2014" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "font-medium", children: "Service Provider:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate", children: data?.service_provider ?? "\u2014" })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "font-medium", children: "Service Provider:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "truncate", children: data?.service_provider ?? "\u2014" })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-1.5 pt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Video, { className: "w-4 h-4 text-sky-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "truncate", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-1.5 pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Video, { className: "w-4 h-4 text-sky-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "truncate", children: [
             "Video 0: ",
             data?.input_streans[1].input_stream.type
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Volume2, { className: "w-4 h-4 text-emerald-400" }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "truncate", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Volume2, { className: "w-4 h-4 text-emerald-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "truncate", children: [
             "Audio 1: ",
             data?.input_streans[0].input_stream.type
           ] })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-3 text-slate-200 text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SliderField_default, { value: bufferValue, setValue: setBufferValue, label: "Fifo Size:", min: minBuffer, max: maxBuffer }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SliderField_default, { value: syncValue, setValue: setSyncValue, label: "A/V Sync:", min: minSync, max: maxSync, content: ["<", ">"], step: 10 }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "pt-2 border-t border-slate-700 text-xs text-gray-700 dark:text-slate-300 flex justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-3", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-3 text-slate-200 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SliderField_default, { value: bufferValue, setValue: setBufferValue, label: "Fifo Size:", min: minBuffer, max: maxBuffer }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SliderField_default, { value: syncValue, setValue: setSyncValue, label: "A/V Sync:", min: minSync, max: maxSync, content: ["<", ">"], step: 10 }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "pt-2 border-t border-slate-700 text-xs text-gray-700 dark:text-slate-300 flex justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
           "Buffer: ",
           bufferValue,
           " frames"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
           "Sync: ",
           syncValue > 0 ? "+" : "",
           syncValue,
@@ -40770,8 +40704,8 @@ var StreamControl = ({ index: index3 }) => {
 var StreamControl_default = StreamControl;
 
 // src/components/xcoder/VideoPlayer.tsx
-var import_react111 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react110 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var import_meta2 = {};
 var VideoPlayer = ({
   pgmIndex,
@@ -40779,11 +40713,11 @@ var VideoPlayer = ({
   setVuPts,
   setVuChannels
 }) => {
-  const dummyCanvas = (0, import_react111.useMemo)(() => document.createElement("canvas"), []);
-  const videoRef = (0, import_react111.useRef)(dummyCanvas);
-  const prevRawChannelsRef = (0, import_react111.useRef)(null);
-  const playerRef = (0, import_react111.useRef)(null);
-  (0, import_react111.useEffect)(() => {
+  const dummyCanvas = (0, import_react110.useMemo)(() => document.createElement("canvas"), []);
+  const videoRef = (0, import_react110.useRef)(dummyCanvas);
+  const prevRawChannelsRef = (0, import_react110.useRef)(null);
+  const playerRef = (0, import_react110.useRef)(null);
+  (0, import_react110.useEffect)(() => {
     let cancelled = false;
     if (!videoRef.current) {
       console.warn("Video canvas not ready yet");
@@ -40904,7 +40838,7 @@ var VideoPlayer = ({
       initPlayer();
     }
   }, [pgmIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "canvas",
     {
       ref: videoRef,
@@ -40915,21 +40849,21 @@ var VideoPlayer = ({
 var VideoPlayer_default = VideoPlayer;
 
 // src/components/xcoder/VUMeter.tsx
-var import_react112 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react111 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var VUBar = ({ index: index3, volume, width = "15px", displayMarks = false }) => {
-  const [tickerTarget, setTickerTarget] = (0, import_react112.useState)({ left: 0, right: 0 });
-  const [tickerTransition, setTickerTransition] = (0, import_react112.useState)({
+  const [tickerTarget, setTickerTarget] = (0, import_react111.useState)({ left: 0, right: 0 });
+  const [tickerTransition, setTickerTransition] = (0, import_react111.useState)({
     left: 0,
     right: 0
   });
-  const [resetVUTimeout, setResetVUTimeout] = (0, import_react112.useState)(0);
-  const tickerLeftRef = (0, import_react112.useRef)(null);
-  const tickerRightRef = (0, import_react112.useRef)(null);
-  const blockerLeftRef = (0, import_react112.useRef)(null);
-  const blockerRightRef = (0, import_react112.useRef)(null);
-  const fillerRef = (0, import_react112.useRef)(null);
-  const calcVolume = (0, import_react112.useCallback)(() => {
+  const [resetVUTimeout, setResetVUTimeout] = (0, import_react111.useState)(0);
+  const tickerLeftRef = (0, import_react111.useRef)(null);
+  const tickerRightRef = (0, import_react111.useRef)(null);
+  const blockerLeftRef = (0, import_react111.useRef)(null);
+  const blockerRightRef = (0, import_react111.useRef)(null);
+  const fillerRef = (0, import_react111.useRef)(null);
+  const calcVolume = (0, import_react111.useCallback)(() => {
     try {
       const fillerRect = fillerRef.current?.getBoundingClientRect();
       const blockerLeftRect = blockerLeftRef.current?.getBoundingClientRect();
@@ -40978,7 +40912,7 @@ var VUBar = ({ index: index3, volume, width = "15px", displayMarks = false }) =>
     } catch (e10) {
     }
   }, []);
-  (0, import_react112.useEffect)(() => {
+  (0, import_react111.useEffect)(() => {
     calcVolume();
     if (resetVUTimeout) {
       clearTimeout(resetVUTimeout);
@@ -40993,9 +40927,9 @@ var VUBar = ({ index: index3, volume, width = "15px", displayMarks = false }) =>
   const MIN_DB = -70;
   const MAX_DB = 0;
   const measures = [0, -10, -20, -30, -40, -50, -60, -70];
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex w-full h-full justify-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: displayMarks ? "mt-[60px]" : "hidden", children: measures.map((db) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex w-full h-full justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: displayMarks ? "mt-[60px]" : "hidden", children: measures.map((db) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
           style: { marginBottom: `${(db - MIN_DB) / (MAX_DB - MIN_DB) * 100}px`, marginRight: "25px", textAlignLast: "center" },
@@ -41016,15 +40950,15 @@ var VUBar = ({ index: index3, volume, width = "15px", displayMarks = false }) =>
         db
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: `h-full w-full text-xs text-center text-white`, style: { maxWidth: `${width}` }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex border border-gray-400 w-full h-[96%] rotate-180 scale-x-[-1]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ref: fillerRef, className: "w-1/2 h-full", style: { background: "linear-gradient(180deg, rgba(0, 187, 0, 1) 0%, rgba(255, 162, 0, 1) 50%, rgba(255, 0, 0, 1) 100%)", borderRadius: "inherit" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: blockerLeftRef, className: "absolute bg-gray-200 dark:bg-[#18191d] bottom-0 w-1/2", style: { height: `${100 - volume[index3].left}%`, transition: "height 0.1s ease-out" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: tickerLeftRef, className: "absolute h-[5px] w-1/2 bg-white border border-black", style: { top: `${tickerTarget.left}%`, transition: `top ${tickerTransition.left}s ease-out` } })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `h-full w-full text-xs text-center text-white`, style: { maxWidth: `${width}` }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex border border-gray-400 w-full h-[96%] rotate-180 scale-x-[-1]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref: fillerRef, className: "w-1/2 h-full", style: { background: "linear-gradient(180deg, rgba(0, 187, 0, 1) 0%, rgba(255, 162, 0, 1) 50%, rgba(255, 0, 0, 1) 100%)", borderRadius: "inherit" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref: blockerLeftRef, className: "absolute bg-gray-200 dark:bg-[#18191d] bottom-0 w-1/2", style: { height: `${100 - volume[index3].left}%`, transition: "height 0.1s ease-out" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref: tickerLeftRef, className: "absolute h-[5px] w-1/2 bg-white border border-black", style: { top: `${tickerTarget.left}%`, transition: `top ${tickerTransition.left}s ease-out` } })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "w-1/2 h-full", style: { background: "linear-gradient(180deg, rgba(0, 187, 0, 1) 0%, rgba(255, 162, 0, 1) 50%, rgba(255, 0, 0, 1) 100%)", borderRadius: "inherit" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: blockerRightRef, className: "absolute bg-gray-200 dark:bg-[#18191d] bottom-0 w-1/2", style: { height: `${100 - volume[index3].right}%`, transition: "height 0.1s ease-out" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: tickerRightRef, className: "absolute h-[5px] w-1/2 bg-white border border-black", style: { top: `${tickerTarget.right}%`, transition: `top ${tickerTransition.right}s ease-out` } })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "w-1/2 h-full", style: { background: "linear-gradient(180deg, rgba(0, 187, 0, 1) 0%, rgba(255, 162, 0, 1) 50%, rgba(255, 0, 0, 1) 100%)", borderRadius: "inherit" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref: blockerRightRef, className: "absolute bg-gray-200 dark:bg-[#18191d] bottom-0 w-1/2", style: { height: `${100 - volume[index3].right}%`, transition: "height 0.1s ease-out" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref: tickerRightRef, className: "absolute h-[5px] w-1/2 bg-white border border-black", style: { top: `${tickerTarget.right}%`, transition: `top ${tickerTransition.right}s ease-out` } })
         ] })
       ] }),
       index3 + 1