@viasoftbr/shared-ui 0.0.4 → 0.0.5

package/dist/components.js

@@ -22728,10 +22728,10 @@ var Accordion = ({ title, children, defaultOpen = false }) => {
 var Accordion_default = Accordion;
 
 // src/components/display/Section.tsx
-import { useEffect as useEffect2, useRef, createContext as createContext2, useContext as useContext2 } from "react";
+import { useEffect as useEffect2, useRef, createContext as createContext2, use as use2 } from "react";
 
 // src/context/AuthContext.tsx
-import { createContext, useContext, useEffect, useState as useState2 } from "react";
+import { createContext, use, useEffect, useState as useState2 } from "react";
 
 // node_modules/.pnpm/axios@1.13.4/node_modules/axios/lib/helpers/bind.js
 function bind(fn, thisArg) {
@@ -25591,140 +25591,6 @@ function subscribeToWebsocket(url, onMessage) {
   };
 }
 
-// src/services/loadRemoteModule.ts
-import * as React2 from "react";
-import * as ReactDOM from "react-dom";
-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() {
@@ -25822,7 +25688,7 @@ var saveConfig = async (payload, basePath = "./php") => {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var AuthContext = createContext(void 0);
 function useAuth() {
-  const ctx = useContext(AuthContext);
+  const ctx = use(AuthContext);
   if (!ctx)
     throw new Error("useAuth must be used within AuthProvider");
   return ctx;
@@ -25862,7 +25728,7 @@ var SkeletonBlock = ({ lines = 3, className = "" }) => {
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var SectionContext = createContext2(void 0);
 function useSection() {
-  const ctx = useContext2(SectionContext);
+  const ctx = use2(SectionContext);
   return ctx ?? { readonly: false };
 }
 var Section2 = ({ id, title, icon, expanded, onToggle, children, readonly, loading = false }) => {
@@ -25907,7 +25773,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__ */ jsx4("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__ */ jsx4(SectionContext.Provider, { value: { readonly: !!effectiveReadonly }, children: loading ? /* @__PURE__ */ jsx4(SkeletonBlock, { lines: 5 }) : children }) })
+        children: /* @__PURE__ */ jsx4("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__ */ jsx4(SectionContext, { value: { readonly: !!effectiveReadonly }, children: loading ? /* @__PURE__ */ jsx4(SkeletonBlock, { lines: 5 }) : children }) })
       }
     )
   ] });
@@ -28066,7 +27932,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
-import * as React6 from "react";
+import * as React5 from "react";
 import { useLayoutEffect as useLayoutEffect2, useEffect as useEffect5, useRef as useRef4 } from "react";
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
@@ -28371,7 +28237,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
-import * as ReactDOM3 from "react-dom";
+import * as ReactDOM2 from "react-dom";
 
 // node_modules/.pnpm/@floating-ui+core@1.7.4/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
@@ -29574,9 +29440,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
-import * as React5 from "react";
+import * as React4 from "react";
 import { useLayoutEffect } from "react";
-import * as ReactDOM2 from "react-dom";
+import * as ReactDOM from "react-dom";
 var isClient = typeof document !== "undefined";
 var noop2 = function noop3() {
 };
@@ -29641,7 +29507,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;
   });
@@ -29664,7 +29530,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React5.useState({
+  const [data, setData] = React4.useState({
     x: 0,
     y: 0,
     strategy,
@@ -29672,19 +29538,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);
@@ -29692,14 +29558,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;
     }
@@ -29722,7 +29588,7 @@ function useFloating(options) {
       };
       if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
         dataRef.current = fullData;
-        ReactDOM2.flushSync(() => {
+        ReactDOM.flushSync(() => {
           setData(fullData);
         });
       }
@@ -29737,7 +29603,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React5.useRef(false);
+  const isMountedRef = React4.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -29756,17 +29622,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,
@@ -29792,7 +29658,7 @@ function useFloating(options) {
       top: y8
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React5.useMemo(() => ({
+  return React4.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -29819,12 +29685,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.");
     }
@@ -29832,7 +29698,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];
     }
@@ -29855,13 +29721,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;
@@ -29912,13 +29778,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 {
@@ -29927,8 +29793,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;
@@ -29936,7 +29802,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", {
@@ -29947,15 +29813,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,
@@ -29982,11 +29848,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) {
@@ -30002,7 +29868,7 @@ function useFloating2(options) {
       }
     }
   });
-  const setPositionReference = React6.useCallback((node) => {
+  const setPositionReference = React5.useCallback((node) => {
     const computedPositionReference = isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
       contextElement: node
@@ -30010,7 +29876,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);
@@ -30022,17 +29888,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,
@@ -30046,7 +29912,7 @@ function useFloating2(options) {
       node.context = context;
     }
   });
-  return React6.useMemo(() => ({
+  return React5.useMemo(() => ({
     ...position,
     context,
     refs,
@@ -30118,22 +29984,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
@@ -30204,7 +30070,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({
@@ -30229,10 +30095,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) {
@@ -30250,7 +30116,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())) {
@@ -30275,7 +30141,7 @@ function useInnerOffset(context, props) {
       };
     }
   }, [enabled, open, elements.floating, overflowRef, scrollRef, onChange]);
-  const floating = React6.useMemo(() => ({
+  const floating = React5.useMemo(() => ({
     onKeyDown() {
       controlledScrollingRef.current = true;
     },
@@ -30293,7 +30159,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(() => {
@@ -30301,7 +30167,7 @@ function useInnerOffset(context, props) {
       });
     }
   }), [elements.floating, onChange, overflowRef, scrollRef]);
-  return React6.useMemo(() => enabled ? {
+  return React5.useMemo(() => enabled ? {
     floating
   } : {}, [enabled, floating]);
 }
@@ -32659,7 +32525,7 @@ var MiddlewareServiceGroup = ({ expanded, onToggle, loading, settings, onChange
 var Service_default = MiddlewareServiceGroup;
 
 // src/components/encoder/DvB.tsx
-import { useState as useState12, useEffect as useEffect9, useImperativeHandle, forwardRef as forwardRef4 } from "react";
+import { useState as useState12, useEffect as useEffect9 } from "react";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultDvBSettings = {
   engine: "cpu",
@@ -32804,7 +32670,8 @@ var normalizeDvBData = (data) => {
     protocol: parseProtocolUrl(data.output_url || defaultProtocolSettings.ffurl)
   };
 };
-var DvB = forwardRef4(function DvB2({ settings, setSettings, encoderId, isLoading, setIsLoading }, ref) {
+var DvB = function DvB2(props) {
+  const { settings, setSettings, encoderId, isLoading, setIsLoading, ref } = props;
   const [internalSettings, setInternalSettings] = useState12(defaultDvBSettings);
   const [expandedSections, setExpandedSections] = useState12({
     video: true,
@@ -32865,13 +32732,33 @@ var DvB = forwardRef4(function DvB2({ settings, setSettings, encoderId, isLoadin
     newTracks[idx] = { label: newTracks[idx].label, value: !newTracks[idx].value };
     setTracks(newTracks);
   };
-  useImperativeHandle(ref, () => ({
-    getSettings: () => ({ ...effectiveSettings, output_url: buildProtocolUrl(effectiveSettings.protocol) }),
-    reset: () => {
-      effectiveSetSettings(savedSettings);
-    },
-    isDirty: () => JSON.stringify(effectiveSettings) !== JSON.stringify(savedSettings)
-  }));
+  useEffect9(() => {
+    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__ */ jsxs15("div", { className: "space-y-4 pl-4 border-l-[1px] border-gray-600 custom-scroll overflow-y-auto max-h-[670px]", children: [
     /* @__PURE__ */ jsxs15(VideoGroup_default, { expanded: expandedSections.video, onToggle: toggleSection, loading: isLoading ?? false, children: [
       /* @__PURE__ */ jsxs15("div", { children: [
@@ -33218,11 +33105,11 @@ var DvB = forwardRef4(function DvB2({ settings, setSettings, encoderId, isLoadin
       }
     )
   ] });
-});
+};
 var DvB_default = DvB;
 
 // src/components/encoder/Livecast.tsx
-import { useState as useState13, useEffect as useEffect10, useImperativeHandle as useImperativeHandle2, forwardRef as forwardRef5 } from "react";
+import { useState as useState13, useEffect as useEffect10 } from "react";
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultLivecastSettings = {
   service_label: "Encoder 2",
@@ -33346,7 +33233,8 @@ var normalizeLivecastData = (data) => {
     protocol: parsed
   };
 };
-var Livecast = forwardRef5(function Livecast2({ settings, setSettings, encoderId, isLoading, setIsLoading }, ref) {
+var Livecast = function Livecast2(props) {
+  const { settings, setSettings, encoderId, isLoading, setIsLoading, ref } = props;
   const [expandedSections, setExpandedSections] = useState13({
     video: true,
     audio: false,
@@ -33402,16 +33290,33 @@ var Livecast = forwardRef5(function Livecast2({ settings, setSettings, encoderId
     const next = { ...effectiveSettings, [key]: !effectiveSettings[key] };
     effectiveSetSettings(next);
   };
-  useImperativeHandle2(ref, () => ({
-    getSettings: () => ({
-      ...effectiveSettings,
-      send_url: buildProtocolUrl2(effectiveSettings.protocol)
-    }),
-    reset: () => {
-      effectiveSetSettings(savedSettings);
-    },
-    isDirty: () => JSON.stringify(effectiveSettings) !== JSON.stringify(savedSettings)
-  }));
+  useEffect10(() => {
+    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__ */ jsxs16("div", { className: "space-y-4 px-4 border-x-[1px] border-gray-500 custom-scroll overflow-y-auto max-h-[670px]", children: [
     /* @__PURE__ */ jsx19(VideoGroup_default, { expanded: expandedSections.video, onToggle: toggleSection, loading: isLoading ?? false, children: /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [
       /* @__PURE__ */ jsx19(
@@ -33562,7 +33467,7 @@ var Livecast = forwardRef5(function Livecast2({ settings, setSettings, encoderId
       }
     )
   ] });
-});
+};
 var Livecast_default = Livecast;
 
 // src/components/encoder/ViewLog.tsx
@@ -34345,11 +34250,11 @@ var EditInPlaceField = ({ initialValue, onSave }) => {
 var EditInPlaceField_default = EditInPlaceField;
 
 // src/context/ThemeContext.tsx
-import { createContext as createContext4, useContext as useContext4, useEffect as useEffect14, useState as useState18 } from "react";
+import { createContext as createContext4, use as use3, useEffect as useEffect14, useState as useState18 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var ThemeContext = createContext4(void 0);
 function useTheme() {
-  const context = useContext4(ThemeContext);
+  const context = use3(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -35326,18 +35231,18 @@ var Footer = () => {
 var Footer_default = Footer;
 
 // src/components/main/Header.tsx
-import React19, { useEffect as useEffect15, useState as useState21 } from "react";
+import React18, { useEffect as useEffect15, useState as useState21 } from "react";
 import { Link as Link3 } from "react-router-dom";
 import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var Header = ({ isSidebarOpen, setSidebarOpen, onNavigate }) => {
-  const [status, setStatus] = React19.useState(null);
-  const [loading, setLoading] = React19.useState(true);
-  const [error2, setError] = React19.useState(null);
+  const [status, setStatus] = React18.useState(null);
+  const [loading, setLoading] = React18.useState(true);
+  const [error2, setError] = React18.useState(null);
   const { theme, toggleTheme } = useTheme();
-  React19.useEffect(() => {
+  React18.useEffect(() => {
     let active = true;
     (async () => {
       try {
@@ -35696,7 +35601,7 @@ var Header = ({ isSidebarOpen, setSidebarOpen, onNavigate }) => {
 var Header_default = Header;
 
 // src/components/main/PageHeader.tsx
-import React20 from "react";
+import React19 from "react";
 import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 var PageHeader = ({
   icon,
@@ -35706,7 +35611,7 @@ var PageHeader = ({
   hasStates = false,
   children
 }) => {
-  const [currentState, setState] = React20.useState(state);
+  const [currentState, setState] = React19.useState(state);
   const startStop = () => {
     setState(currentState == "start" ? "stop" : "start");
     console.log("here", currentState);
@@ -36625,7 +36530,7 @@ var RequireAuth_default = RequireAuth;
 import { useEffect as useEffect19, useState as useState26 } from "react";
 
 // node_modules/.pnpm/react-i18next@16.5.4_i18next@25.8.2_typescript@5.9.3__react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/react-i18next/dist/es/Trans.js
-import { useContext as useContext5 } from "react";
+import { useContext as useContext2 } from "react";
 
 // node_modules/.pnpm/react-i18next@16.5.4_i18next@25.8.2_typescript@5.9.3__react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/react-i18next/dist/es/TransWithoutContext.js
 import { Fragment as Fragment7, isValidElement, cloneElement as cloneElement2, createElement as createElement5, Children } from "react";
@@ -39018,7 +38923,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;
@@ -39185,10 +39090,10 @@ var ReportNamespaces = class {
 };
 
 // node_modules/.pnpm/react-i18next@16.5.4_i18next@25.8.2_typescript@5.9.3__react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/react-i18next/dist/es/IcuTrans.js
-import { useContext as useContext6 } from "react";
+import { useContext as useContext3 } from "react";
 
 // node_modules/.pnpm/react-i18next@16.5.4_i18next@25.8.2_typescript@5.9.3__react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/react-i18next/dist/es/IcuTransWithoutContext.js
-import React25 from "react";
+import React24 from "react";
 
 // node_modules/.pnpm/react-i18next@16.5.4_i18next@25.8.2_typescript@5.9.3__react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/react-i18next/dist/es/IcuTransUtils/TranslationParserError.js
 var TranslationParserError = class _TranslationParserError extends Error {
@@ -39470,7 +39375,7 @@ var tokenize = (translation) => {
 };
 
 // node_modules/.pnpm/react-i18next@16.5.4_i18next@25.8.2_typescript@5.9.3__react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/react-i18next/dist/es/IcuTransUtils/renderTranslation.js
-import React24 from "react";
+import React23 from "react";
 var renderDeclarationNode = (declaration, children, childDeclarations) => {
   const {
     type,
@@ -39481,15 +39386,15 @@ var renderDeclarationNode = (declaration, children, childDeclarations) => {
       children: _childrenToRemove,
       ...propsWithoutChildren
     } = props;
-    return React24.createElement(type, propsWithoutChildren, ...children);
+    return React23.createElement(type, propsWithoutChildren, ...children);
   }
   if (children.length === 0) {
-    return React24.createElement(type, props);
+    return React23.createElement(type, props);
   }
   if (children.length === 1) {
-    return React24.createElement(type, props, children[0]);
+    return React23.createElement(type, props, children[0]);
   }
-  return React24.createElement(type, props, ...children);
+  return React23.createElement(type, props, ...children);
 };
 var renderTranslation = (translation, declarations = []) => {
   if (!translation) {
@@ -39589,7 +39494,7 @@ function IcuTransWithoutContext({
     warnOnce(i18n, "NO_I18NEXT_INSTANCE", `IcuTrans: You need to pass in an i18next instance using i18nextReactModule`, {
       i18nKey
     });
-    return React25.createElement(React25.Fragment, {}, defaultTranslation);
+    return React24.createElement(React24.Fragment, {}, defaultTranslation);
   }
   const t15 = tFromProps || i18n.t?.bind(i18n) || ((k11) => k11);
   let namespaces = ns || t15.ns || i18n.options?.defaultNS;
@@ -39610,13 +39515,13 @@ function IcuTransWithoutContext({
   });
   try {
     const rendered = renderTranslation(translation, content);
-    return React25.createElement(React25.Fragment, {}, ...rendered);
+    return React24.createElement(React24.Fragment, {}, ...rendered);
   } catch (error2) {
     warn2(i18n, "ICU_TRANS_RENDER_ERROR", `IcuTrans component error for key "${i18nKey}": ${error2.message}`, {
       i18nKey,
       error: error2
     });
-    return React25.createElement(React25.Fragment, {}, translation);
+    return React24.createElement(React24.Fragment, {}, translation);
   }
 }
 IcuTransWithoutContext.displayName = "IcuTransWithoutContext";
@@ -39634,7 +39539,7 @@ function IcuTrans({
   const {
     i18n: i18nFromContext,
     defaultNS: defaultNSFromContext
-  } = useContext6(I18nContext) || {};
+  } = useContext3(I18nContext) || {};
   const i18n = i18nFromProps || i18nFromContext || getI18n();
   const t15 = tFromProps || i18n?.t.bind(i18n);
   return IcuTransWithoutContext({
@@ -39650,7 +39555,7 @@ function IcuTrans({
 IcuTrans.displayName = "IcuTrans";
 
 // node_modules/.pnpm/react-i18next@16.5.4_i18next@25.8.2_typescript@5.9.3__react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/react-i18next/dist/es/useTranslation.js
-import { useContext as useContext7, useCallback as useCallback3, useMemo as useMemo6, useEffect as useEffect18, useRef as useRef9, useState as useState25 } from "react";
+import { useContext as useContext4, useCallback as useCallback3, useMemo as useMemo6, useEffect as useEffect18, useRef as useRef9, useState as useState25 } from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 var notReadyT = (k11, optsOrDefaultValue) => {
   if (isString3(optsOrDefaultValue))
@@ -39672,7 +39577,7 @@ var useTranslation = (ns, props = {}) => {
   const {
     i18n: i18nFromContext,
     defaultNS: defaultNSFromContext
-  } = useContext7(I18nContext) || {};
+  } = useContext4(I18nContext) || {};
   const i18n = i18nFromProps || i18nFromContext || getI18n();
   if (i18n && !i18n.reportNamespaces)
     i18n.reportNamespaces = new ReportNamespaces();
@@ -39822,7 +39727,7 @@ import { createElement as createElement7, useMemo as useMemo7 } from "react";
 import { createElement as createElement8 } from "react";
 
 // node_modules/.pnpm/react-i18next@16.5.4_i18next@25.8.2_typescript@5.9.3__react-dom@19.2.4_react@19.2.4__react@19.2.4_typescript@5.9.3/node_modules/react-i18next/dist/es/useSSR.js
-import { useContext as useContext8 } from "react";
+import { useContext as useContext5 } from "react";
 
 // src/locales/pt/translation.json
 var translation_default = {
@@ -40059,7 +39964,7 @@ instance.use(initReactI18next).init({
 var i18n_default = instance;
 
 // src/context/SharedUiProvider.tsx
-import React26 from "react";
+import React25 from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { jsx as jsx41 } from "react/jsx-runtime";
 
@@ -40302,48 +40207,13 @@ var ConfigWizard = ({ basePath = "./config-xcoder-wizard/php", onComplete }) =>
 };
 var Wizard_default = ConfigWizard;
 
-// src/components/RemoteModule.tsx
-import { useEffect as useEffect20, useState as useState27 } from "react";
-import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
-function RemoteModule({ scope, url, module, fallback }) {
-  const [Component2, setComponent] = useState27(null);
-  const [error2, setError] = useState27(null);
-  const [loading, setLoading] = useState27(true);
-  useEffect20(() => {
-    setLoading(true);
-    setError(null);
-    loadRemoteModule({ scope, url, module }).then((mod) => {
-      setComponent(() => mod);
-    }).catch((err) => {
-      console.error("Erro ao carregar m\xF3dulo:", err);
-      setError(err.message);
-    }).finally(() => {
-      setLoading(false);
-    });
-  }, [scope, url, module]);
-  if (loading) {
-    return /* @__PURE__ */ jsx43("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx43("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-primary dark:border-primary-purple" }) });
-  }
-  if (error2) {
-    return /* @__PURE__ */ jsxs38("div", { className: "p-6 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg", children: [
-      /* @__PURE__ */ jsx43("h3", { className: "text-lg font-semibold text-red-800 dark:text-red-300 mb-2", children: "Erro ao carregar m\xF3dulo" }),
-      /* @__PURE__ */ jsx43("p", { className: "text-red-600 dark:text-red-400", children: error2 }),
-      /* @__PURE__ */ jsx43("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__ */ jsx43(Fragment8, { children: fallback || /* @__PURE__ */ jsx43("div", { className: "p-4 text-neutral-500 dark:text-neutral-400", children: "M\xF3dulo n\xE3o encontrado" }) });
-  }
-  return /* @__PURE__ */ jsx43(Component2, {});
-}
-
 // src/components/xcoder/Fflog.tsx
-import { useEffect as useEffect21, useState as useState28 } from "react";
-import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useEffect as useEffect20, useState as useState27 } from "react";
+import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 var Fflog = ({ index: index3 }) => {
-  const [message, setMessage] = useState28("");
-  const [tooltip, setTooltip] = useState28("Copy to Clipboard");
-  useEffect21(() => {
+  const [message, setMessage] = useState27("");
+  const [tooltip, setTooltip] = useState27("Copy to Clipboard");
+  useEffect20(() => {
     const cleanupSocket = subscribeToWebsocket(buildWsUrl("/ws"), (data) => {
       const aux = data?.logs[index3 - 1];
       setMessage(aux.log);
@@ -40356,7 +40226,7 @@ var Fflog = ({ index: index3 }) => {
       cleanupSocket();
     };
   }, []);
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       "data-tooltip-id": "tooltip",
@@ -40371,8 +40241,8 @@ var Fflog = ({ index: index3 }) => {
       },
       onMouseLeave: () => message == "" ? setTooltip("Copy to Clipboard") : "",
       children: [
-        /* @__PURE__ */ jsx44(M10, { id: "tooltip" }),
-        /* @__PURE__ */ jsx44("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__ */ jsx43(M10, { id: "tooltip" }),
+        /* @__PURE__ */ jsx43("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 })
       ]
     }
   );
@@ -40380,7 +40250,7 @@ var Fflog = ({ index: index3 }) => {
 var Fflog_default = Fflog;
 
 // src/components/xcoder/Metrics.tsx
-import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
 var MetricBar = ({ label, value, suffix, color }) => {
   const colorClasses = {
     blue: "bg-blue-500",
@@ -40389,15 +40259,15 @@ var MetricBar = ({ label, value, suffix, color }) => {
     cyan: "bg-cyan-500",
     pink: "bg-pink-500"
   };
-  return /* @__PURE__ */ jsxs40("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between text-sm", children: [
-      /* @__PURE__ */ jsx45("span", { className: "text-gray-900 dark:text-slate-400", children: label }),
-      /* @__PURE__ */ jsxs40("span", { className: "text-gray-900 dark:text-white font-mono", children: [
+  return /* @__PURE__ */ jsxs39("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ jsx44("span", { className: "text-gray-900 dark:text-slate-400", children: label }),
+      /* @__PURE__ */ jsxs39("span", { className: "text-gray-900 dark:text-white font-mono", children: [
         Math.round(value),
         suffix
       ] })
     ] }),
-    /* @__PURE__ */ jsx45("div", { className: "h-2 bg-slate-300 dark:bg-slate-800 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx44("div", { className: "h-2 bg-slate-300 dark:bg-slate-800 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx44(
       "div",
       {
         className: `h-full transition-all duration-300 ${colorClasses[color]}`,
@@ -40409,8 +40279,8 @@ var MetricBar = ({ label, value, suffix, color }) => {
 var Metrics_default = MetricBar;
 
 // src/components/xcoder/Panel.tsx
-import { useState as useState29, useEffect as useEffect22 } from "react";
-import { Fragment as Fragment9, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { useState as useState28, useEffect as useEffect21 } from "react";
+import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 var convertServiceToOption = (serviceString) => {
   const match = serviceString.match(/^([^@]+)@/);
   if (!match) {
@@ -40424,12 +40294,12 @@ var convertServiceToOption = (serviceString) => {
   return { label, value: rawValue };
 };
 var EncoderDecoderPanel = ({ index: index3 }) => {
-  const [status, setStatus] = useState29("idle");
-  const [modes, setModes] = useState29([]);
-  const [oldModes, setOldModes] = useState29(modes);
-  const [open, setOpen] = useState29(false);
-  const [optionsList, setOptionsList] = useState29([]);
-  useEffect22(() => {
+  const [status, setStatus] = useState28("idle");
+  const [modes, setModes] = useState28([]);
+  const [oldModes, setOldModes] = useState28(modes);
+  const [open, setOpen] = useState28(false);
+  const [optionsList, setOptionsList] = useState28([]);
+  useEffect21(() => {
     const cleanupSocket = subscribeToWebsocket(buildWsUrl("/"), (data) => {
       setStatus(data?.services[`xcoder_${index3}`].status);
     });
@@ -40463,52 +40333,52 @@ var EncoderDecoderPanel = ({ index: index3 }) => {
       m: state ? "stop" : "start"
     });
   };
-  return /* @__PURE__ */ jsxs41("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__ */ jsxs41("div", { className: "px-6 py-3 border-b border-slate-800 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx46(Radio, { className: "w-5 h-5 text-blue-500" }),
-        /* @__PURE__ */ jsx46("h1", { className: "text-base font-medium text-gray-800 dark:text-white hover:underline", children: /* @__PURE__ */ jsxs41("a", { href: `/page/${modes[index3 - 1]?.split("@")[0] ?? "encoder-dvb"}?channel=${index3}`, children: [
+  return /* @__PURE__ */ jsxs40("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__ */ jsxs40("div", { className: "px-6 py-3 border-b border-slate-800 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx45(Radio, { className: "w-5 h-5 text-blue-500" }),
+        /* @__PURE__ */ jsx45("h1", { className: "text-base font-medium text-gray-800 dark:text-white hover:underline", children: /* @__PURE__ */ jsxs40("a", { href: `/page/${modes[index3 - 1]?.split("@")[0] ?? "encoder-dvb"}?channel=${index3}`, children: [
           "Xcoder BMD Video Interface (",
           index3,
           ")"
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx45(
           "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__ */ jsxs41(Fragment9, { children: [
-              /* @__PURE__ */ jsx46(Pause, { className: "w-4 h-4" }),
+            children: status == "running" ? /* @__PURE__ */ jsxs40(Fragment8, { children: [
+              /* @__PURE__ */ jsx45(Pause, { className: "w-4 h-4" }),
               "Stop"
-            ] }) : /* @__PURE__ */ jsxs41(Fragment9, { children: [
-              /* @__PURE__ */ jsx46(Play, { className: "w-4 h-4" }),
+            ] }) : /* @__PURE__ */ jsxs40(Fragment8, { children: [
+              /* @__PURE__ */ jsx45(Play, { className: "w-4 h-4" }),
               "Start"
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs41("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__ */ jsx46("div", { className: `w-2 h-2 rounded-full bg-white ${status == "running" ? "block" : "hidden"}` }),
-          /* @__PURE__ */ jsx46("span", { className: "text-sm text-slate-100 font-mono font-bold", children: status == "running" ? "READY" : "STANDBY" })
+        /* @__PURE__ */ jsxs40("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__ */ jsx45("div", { className: `w-2 h-2 rounded-full bg-white ${status == "running" ? "block" : "hidden"}` }),
+          /* @__PURE__ */ jsx45("span", { className: "text-sm text-slate-100 font-mono font-bold", children: status == "running" ? "READY" : "STANDBY" })
         ] }),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx45(
           "button",
           {
             onClick: () => setOpen(true),
             className: "p-2 rounded-md transition-colors",
-            children: /* @__PURE__ */ jsx46(Settings, { className: "w-5 h-5 text-slate-400 hover:text-blue-400" })
+            children: /* @__PURE__ */ jsx45(Settings, { className: "w-5 h-5 text-slate-400 hover:text-blue-400" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx45(
       Modal_default,
       {
         open,
         setOpen,
         title: "Switching Operation Mode",
-        element: /* @__PURE__ */ jsx46("div", { children: optionsList[index3 - 1] && /* @__PURE__ */ jsx46("div", { className: "relative p-6", children: /* @__PURE__ */ jsx46(
+        element: /* @__PURE__ */ jsx45("div", { children: optionsList[index3 - 1] && /* @__PURE__ */ jsx45("div", { className: "relative p-6", children: /* @__PURE__ */ jsx45(
           SelectField_default,
           {
             label: "New Mode",
@@ -40529,15 +40399,15 @@ var EncoderDecoderPanel = ({ index: index3 }) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx46("div", { className: "p-6", children: /* @__PURE__ */ jsx46(Preview_default, { index: index3, setVuPts: () => {
+    /* @__PURE__ */ jsx45("div", { className: "p-6", children: /* @__PURE__ */ jsx45(Preview_default, { index: index3, setVuPts: () => {
     } }) })
   ] });
 };
 var Panel_default = EncoderDecoderPanel;
 
 // src/components/xcoder/Preview.tsx
-import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef10, useState as useState30 } from "react";
-import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useEffect as useEffect22, useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef10, useState as useState29 } from "react";
+import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 var Preview = ({
   index: index3,
   setVuPts,
@@ -40547,8 +40417,8 @@ var Preview = ({
   orientation = "horizontal"
 }) => {
   const logEndRef = useRef10(null);
-  const [message, setMessage] = useState30([]);
-  useEffect23(() => {
+  const [message, setMessage] = useState29([]);
+  useEffect22(() => {
     const cleanupSocket = subscribeToWebsocket(buildWsUrl("/"), (data) => {
       const aux = data?.services[`xcoder_${index3}`];
       setMessage(aux.decklinkEvents.split("\n"));
@@ -40557,21 +40427,21 @@ var Preview = ({
       cleanupSocket();
     };
   }, []);
-  useEffect23(() => {
+  useEffect22(() => {
     if (logEndRef.current) {
       logEndRef.current.scrollTop = logEndRef.current.scrollHeight;
     }
   }, [message]);
-  const [vuChannels, setVuChannels] = useState30(
+  const [vuChannels, setVuChannels] = useState29(
     Array(8).fill({ left: 0, right: 0 })
   );
   const channelCount = 8;
   const vuBars = useMemo8(() => {
-    return Array.from({ length: channelCount }, (_7, i14) => /* @__PURE__ */ jsx47(VUMeter_default, { index: i14, volume: vuChannels }, `vu-bar-${i14}`));
+    return Array.from({ length: channelCount }, (_7, i14) => /* @__PURE__ */ jsx46(VUMeter_default, { index: i14, volume: vuChannels }, `vu-bar-${i14}`));
   }, [channelCount, vuChannels]);
   const playerRef = useRef10(null);
   const vuRef = useRef10(null);
-  const [height, setHeight] = useState30("auto");
+  const [height, setHeight] = useState29("auto");
   useLayoutEffect3(() => {
     const p8 = playerRef.current;
     const v6 = vuRef.current;
@@ -40586,15 +40456,15 @@ var Preview = ({
     }
     ;
   }, []);
-  const [isOpen, setIsOpen] = useState30(false);
-  const logData = message.map((log, i14) => /* @__PURE__ */ jsx47("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx47("span", { className: "text-slate-900 dark:text-slate-300 break-words", children: log }) }, i14));
-  return /* @__PURE__ */ jsxs42("div", { className: `"w-full h-full" ${orientation === "horizontal" ? "" : "py-6"}`, children: [
-    /* @__PURE__ */ jsxs42(
+  const [isOpen, setIsOpen] = useState29(false);
+  const logData = message.map((log, i14) => /* @__PURE__ */ jsx46("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx46("span", { className: "text-slate-900 dark:text-slate-300 break-words", children: log }) }, i14));
+  return /* @__PURE__ */ jsxs41("div", { className: `"w-full h-full" ${orientation === "horizontal" ? "" : "py-6"}`, children: [
+    /* @__PURE__ */ jsxs41(
       "div",
       {
         className: `grid gap-6 mb-5 ${orientation === "horizontal" ? "grid-cols-[1fr_300px] items-start" : "grid-cols-1"}`,
         children: [
-          /* @__PURE__ */ jsx47("div", { ref: playerRef, className: "bg-black rounded-lg overflow-hidden aspect-video", children: /* @__PURE__ */ jsx47("div", { className: "w-full h-full relative flex items-center justify-center", children: /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx46("div", { ref: playerRef, className: "bg-black rounded-lg overflow-hidden aspect-video", children: /* @__PURE__ */ jsx46("div", { className: "w-full h-full relative flex items-center justify-center", children: /* @__PURE__ */ jsx46(
             VideoPlayer_default,
             {
               pgmIndex: index3,
@@ -40603,10 +40473,10 @@ var Preview = ({
               setVuChannels
             }
           ) }) }),
-          /* @__PURE__ */ jsxs42("div", { className: `flex flex-col ${orientation === "horizontal" ? "h-full" : "h-[200px]"}`, children: [
-            /* @__PURE__ */ jsx47("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__ */ jsx47("div", { className: `flex justify-between items-end ${showDlog || showStreamControl ? "h-32" : "h-full"}`, children: vuBars }) }),
-            showStreamControl && /* @__PURE__ */ jsx47(StreamControl_default, { index: index3 }),
-            showDlog && /* @__PURE__ */ jsx47("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__ */ jsxs42(
+          /* @__PURE__ */ jsxs41("div", { className: `flex flex-col ${orientation === "horizontal" ? "h-full" : "h-[200px]"}`, children: [
+            /* @__PURE__ */ jsx46("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__ */ jsx46("div", { className: `flex justify-between items-end ${showDlog || showStreamControl ? "h-32" : "h-full"}`, children: vuBars }) }),
+            showStreamControl && /* @__PURE__ */ jsx46(StreamControl_default, { index: index3 }),
+            showDlog && /* @__PURE__ */ jsx46("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__ */ jsxs41(
               "div",
               {
                 ref: logEndRef,
@@ -40617,7 +40487,7 @@ var Preview = ({
                 style: { height },
                 onClick: () => setIsOpen(true),
                 children: [
-                  /* @__PURE__ */ jsx47(M10, { id: "tooltip" }),
+                  /* @__PURE__ */ jsx46(M10, { id: "tooltip" }),
                   logData
                 ]
               }
@@ -40626,15 +40496,15 @@ var Preview = ({
         ]
       }
     ),
-    showFflog && /* @__PURE__ */ jsx47(Fflog_default, { index: index3 }),
-    /* @__PURE__ */ jsx47(
+    showFflog && /* @__PURE__ */ jsx46(Fflog_default, { index: index3 }),
+    /* @__PURE__ */ jsx46(
       Modal_default,
       {
         open: isOpen,
         setOpen: () => setIsOpen(!isOpen),
         title: "Log Message",
-        element: /* @__PURE__ */ jsx47("div", { className: "custom-scroll overflow-y-auto p-3 h-[300px]", children: logData }),
-        icon: /* @__PURE__ */ jsx47(FileClock, { "aria-hidden": "true", className: "size-6 text-yellow-600" }),
+        element: /* @__PURE__ */ jsx46("div", { className: "custom-scroll overflow-y-auto p-3 h-[300px]", children: logData }),
+        icon: /* @__PURE__ */ jsx46(FileClock, { "aria-hidden": "true", className: "size-6 text-yellow-600" }),
         positiveLabel: "Copy",
         positiveCommand: () => {
           navigator.clipboard.writeText(message.join("\n"));
@@ -40646,11 +40516,11 @@ var Preview = ({
 var Preview_default = Preview;
 
 // src/components/xcoder/StreamControl.tsx
-import { useState as useState31 } from "react";
-import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { useState as useState30 } from "react";
+import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var StreamControl = ({ index: index3 }) => {
-  const [bufferValue, setBufferValue] = useState31(0);
-  const [syncValue, setSyncValue] = useState31(0);
+  const [bufferValue, setBufferValue] = useState30(0);
+  const [syncValue, setSyncValue] = useState30(0);
   const minBuffer = 0;
   const maxBuffer = 100;
   const minSync = -30;
@@ -40663,45 +40533,45 @@ var StreamControl = ({ index: index3 }) => {
     true,
     1e3
   );
-  return /* @__PURE__ */ jsxs43("div", { className: "w-80 space-y-3", children: [
-    /* @__PURE__ */ jsx48("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__ */ jsxs43("div", { className: "text-xs space-y-2 text-gray-800 dark:text-slate-200", children: [
-      /* @__PURE__ */ jsxs43("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs43("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx48("span", { className: "font-medium", children: "Service Name:" }),
-          /* @__PURE__ */ jsx48("span", { className: "truncate", children: data?.service_name ?? "\u2014" })
+  return /* @__PURE__ */ jsxs42("div", { className: "w-80 space-y-3", children: [
+    /* @__PURE__ */ jsx47("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__ */ jsxs42("div", { className: "text-xs space-y-2 text-gray-800 dark:text-slate-200", children: [
+      /* @__PURE__ */ jsxs42("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs42("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx47("span", { className: "font-medium", children: "Service Name:" }),
+          /* @__PURE__ */ jsx47("span", { className: "truncate", children: data?.service_name ?? "\u2014" })
         ] }),
-        /* @__PURE__ */ jsxs43("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx48("span", { className: "font-medium", children: "Service Provider:" }),
-          /* @__PURE__ */ jsx48("span", { className: "truncate", children: data?.service_provider ?? "\u2014" })
+        /* @__PURE__ */ jsxs42("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx47("span", { className: "font-medium", children: "Service Provider:" }),
+          /* @__PURE__ */ jsx47("span", { className: "truncate", children: data?.service_provider ?? "\u2014" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs43("div", { className: "space-y-1.5 pt-2", children: [
-        /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx48(Video, { className: "w-4 h-4 text-sky-400" }),
-          /* @__PURE__ */ jsxs43("span", { className: "truncate", children: [
+      /* @__PURE__ */ jsxs42("div", { className: "space-y-1.5 pt-2", children: [
+        /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx47(Video, { className: "w-4 h-4 text-sky-400" }),
+          /* @__PURE__ */ jsxs42("span", { className: "truncate", children: [
             "Video 0: ",
             data?.input_streans[1].input_stream.type
           ] })
         ] }),
-        /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx48(Volume2, { className: "w-4 h-4 text-emerald-400" }),
-          /* @__PURE__ */ jsxs43("span", { className: "truncate", children: [
+        /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx47(Volume2, { className: "w-4 h-4 text-emerald-400" }),
+          /* @__PURE__ */ jsxs42("span", { className: "truncate", children: [
             "Audio 1: ",
             data?.input_streans[0].input_stream.type
           ] })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx48("div", { className: "bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-3", children: /* @__PURE__ */ jsxs43("div", { className: "space-y-3 text-slate-200 text-xs", children: [
-      /* @__PURE__ */ jsx48(SliderField_default, { value: bufferValue, setValue: setBufferValue, label: "Fifo Size:", min: minBuffer, max: maxBuffer }),
-      /* @__PURE__ */ jsx48(SliderField_default, { value: syncValue, setValue: setSyncValue, label: "A/V Sync:", min: minSync, max: maxSync, content: ["<", ">"], step: 10 }),
-      /* @__PURE__ */ jsxs43("div", { className: "pt-2 border-t border-slate-700 text-xs text-gray-700 dark:text-slate-300 flex justify-between", children: [
-        /* @__PURE__ */ jsxs43("span", { children: [
+    /* @__PURE__ */ jsx47("div", { className: "bg-gray-100 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg p-3", children: /* @__PURE__ */ jsxs42("div", { className: "space-y-3 text-slate-200 text-xs", children: [
+      /* @__PURE__ */ jsx47(SliderField_default, { value: bufferValue, setValue: setBufferValue, label: "Fifo Size:", min: minBuffer, max: maxBuffer }),
+      /* @__PURE__ */ jsx47(SliderField_default, { value: syncValue, setValue: setSyncValue, label: "A/V Sync:", min: minSync, max: maxSync, content: ["<", ">"], step: 10 }),
+      /* @__PURE__ */ jsxs42("div", { className: "pt-2 border-t border-slate-700 text-xs text-gray-700 dark:text-slate-300 flex justify-between", children: [
+        /* @__PURE__ */ jsxs42("span", { children: [
           "Buffer: ",
           bufferValue,
           " frames"
         ] }),
-        /* @__PURE__ */ jsxs43("span", { children: [
+        /* @__PURE__ */ jsxs42("span", { children: [
           "Sync: ",
           syncValue > 0 ? "+" : "",
           syncValue,
@@ -40714,8 +40584,8 @@ var StreamControl = ({ index: index3 }) => {
 var StreamControl_default = StreamControl;
 
 // src/components/xcoder/VideoPlayer.tsx
-import { useEffect as useEffect24, useMemo as useMemo9, useRef as useRef11 } from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { useEffect as useEffect23, useMemo as useMemo9, useRef as useRef11 } from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var VideoPlayer = ({
   pgmIndex,
   vuChannels,
@@ -40726,7 +40596,7 @@ var VideoPlayer = ({
   const videoRef = useRef11(dummyCanvas);
   const prevRawChannelsRef = useRef11(null);
   const playerRef = useRef11(null);
-  useEffect24(() => {
+  useEffect23(() => {
     let cancelled = false;
     if (!videoRef.current) {
       console.warn("Video canvas not ready yet");
@@ -40847,7 +40717,7 @@ var VideoPlayer = ({
       initPlayer();
     }
   }, [pgmIndex]);
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx48(
     "canvas",
     {
       ref: videoRef,
@@ -40858,15 +40728,15 @@ var VideoPlayer = ({
 var VideoPlayer_default = VideoPlayer;
 
 // src/components/xcoder/VUMeter.tsx
-import { useRef as useRef12, useEffect as useEffect25, useCallback as useCallback4, useState as useState32 } from "react";
-import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
+import { useRef as useRef12, useEffect as useEffect24, useCallback as useCallback4, useState as useState31 } from "react";
+import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
 var VUBar = ({ index: index3, volume, width = "15px", displayMarks = false }) => {
-  const [tickerTarget, setTickerTarget] = useState32({ left: 0, right: 0 });
-  const [tickerTransition, setTickerTransition] = useState32({
+  const [tickerTarget, setTickerTarget] = useState31({ left: 0, right: 0 });
+  const [tickerTransition, setTickerTransition] = useState31({
     left: 0,
     right: 0
   });
-  const [resetVUTimeout, setResetVUTimeout] = useState32(0);
+  const [resetVUTimeout, setResetVUTimeout] = useState31(0);
   const tickerLeftRef = useRef12(null);
   const tickerRightRef = useRef12(null);
   const blockerLeftRef = useRef12(null);
@@ -40921,7 +40791,7 @@ var VUBar = ({ index: index3, volume, width = "15px", displayMarks = false }) =>
     } catch (e10) {
     }
   }, []);
-  useEffect25(() => {
+  useEffect24(() => {
     calcVolume();
     if (resetVUTimeout) {
       clearTimeout(resetVUTimeout);
@@ -40936,9 +40806,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__ */ jsxs44("div", { className: "flex w-full h-full justify-center", children: [
-    /* @__PURE__ */ jsx50("div", { className: displayMarks ? "mt-[60px]" : "hidden", children: measures.map((db) => {
-      return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs43("div", { className: "flex w-full h-full justify-center", children: [
+    /* @__PURE__ */ jsx49("div", { className: displayMarks ? "mt-[60px]" : "hidden", children: measures.map((db) => {
+      return /* @__PURE__ */ jsxs43(
         "div",
         {
           style: { marginBottom: `${(db - MIN_DB) / (MAX_DB - MIN_DB) * 100}px`, marginRight: "25px", textAlignLast: "center" },
@@ -40959,15 +40829,15 @@ var VUBar = ({ index: index3, volume, width = "15px", displayMarks = false }) =>
         db
       );
     }) }),
-    /* @__PURE__ */ jsxs44("div", { className: `h-full w-full text-xs text-center text-white`, style: { maxWidth: `${width}` }, children: [
-      /* @__PURE__ */ jsxs44("div", { className: "flex border border-gray-400 w-full h-[96%] rotate-180 scale-x-[-1]", children: [
-        /* @__PURE__ */ jsxs44("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__ */ jsx50("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__ */ jsx50("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__ */ jsxs43("div", { className: `h-full w-full text-xs text-center text-white`, style: { maxWidth: `${width}` }, children: [
+      /* @__PURE__ */ jsxs43("div", { className: "flex border border-gray-400 w-full h-[96%] rotate-180 scale-x-[-1]", children: [
+        /* @__PURE__ */ jsxs43("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__ */ jsx49("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__ */ jsx49("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__ */ jsxs44("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__ */ jsx50("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__ */ jsx50("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__ */ jsxs43("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__ */ jsx49("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__ */ jsx49("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
@@ -41008,7 +40878,6 @@ export {
   Protocol_default as Protocol,
   ProtocolGroup_default as ProtocolGroup,
   RangeField_default as RangeField,
-  RemoteModule,
   RequireAuth_default as RequireAuth,
   SaveDiscard_default as SaveDiscard,
   Section_default as Section,