@viasoftbr/shared-ui 0.0.5 → 0.0.7

package/dist/components/index.d.ts

@@ -4,7 +4,7 @@ import { AudioGroup, FilterGroup, MiddlewareAuthGroup, MiddlewareChannelsGroup,
 import { DvB, Livecast, ViewLog } from './encoder';
 import { CheckboxField, ColorField, DatePicker, EditInPlaceField, InputField, Protocol, RangeField, SelectField, SliderField, SwitchField } from './input';
 import { Footer, Header, PageHeader, SaveDiscard, Sidebar } from './main';
-import { AddNetwork, InterfacesTable, InterfacesTimeseries } from './network';
+import { AddNetwork, InterfacesTable, InterfacesTimeseries, isValidIPv4, isValidIPv6 } from './network';
 import { ConfigWizard, RequireAuth } from './system';
 import { Fflog, MetricBar, Panel, Preview, StreamControl, VideoPlayer, VUBar } from './xcoder';
-export { Accordion, AddNetwork, AudioGroup, CheckboxField, ConfigWizard, Copy2Clipboard, ColorField, getGridLabel, GridSelectionModal, DatePicker, DvB, EditInPlaceField, Fflog, FilterGroup, Footer, Header, InputField, InterfacesTable, InterfacesTimeseries, SwitchField, Livecast, MetricBar, MiddlewareAuthGroup, MiddlewareChannelsGroup, MiddlewareMOSGroup, MiddlewareServiceGroup, Modal, PageHeader, Panel, Preview, PreviewGroup, ProtocolGroup, Protocol, RangeField, RequireAuth, SaveDiscard, Section, SelectField, Sidebar, SliderField, StreamControl, ValidationItem, VideoGroup, VideoPlayer, ViewLog, VUBar };
+export { Accordion, AddNetwork, AudioGroup, CheckboxField, ConfigWizard, Copy2Clipboard, ColorField, getGridLabel, GridSelectionModal, DatePicker, DvB, EditInPlaceField, Fflog, FilterGroup, Footer, Header, InputField, InterfacesTable, InterfacesTimeseries, isValidIPv4, isValidIPv6, SwitchField, Livecast, MetricBar, MiddlewareAuthGroup, MiddlewareChannelsGroup, MiddlewareMOSGroup, MiddlewareServiceGroup, Modal, PageHeader, Panel, Preview, PreviewGroup, ProtocolGroup, Protocol, RangeField, RequireAuth, SaveDiscard, Section, SelectField, Sidebar, SliderField, StreamControl, ValidationItem, VideoGroup, VideoPlayer, ViewLog, VUBar };

package/dist/components/network/index.d.ts

@@ -1,4 +1,5 @@
-import AddNetwork from "./AddNetwork.tsx";
-import InterfacesTable from "./InterfacesTable.tsx";
-import InterfacesTimeseries from "./InterfacesTimeseries.tsx";
-export { AddNetwork, InterfacesTable, InterfacesTimeseries, };
+import AddNetwork from "./AddNetwork";
+import InterfacesTable from "./InterfacesTable";
+import InterfacesTimeseries from "./InterfacesTimeseries";
+import { isValidIPv4, isValidIPv6 } from "./validators";
+export { AddNetwork, InterfacesTable, InterfacesTimeseries, isValidIPv4, isValidIPv6, };

package/dist/components.cjs

@@ -165,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);
 
@@ -25626,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);
@@ -35286,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) {
@@ -35656,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,
@@ -36546,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");
@@ -40019,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");
 

package/dist/components.js

@@ -25571,12 +25571,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);
@@ -36491,6 +36540,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
 import { Navigate } from "react-router-dom";
 import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -40891,7 +40954,9 @@ export {
   VideoGroup_default as VideoGroup,
   VideoPlayer_default as VideoPlayer,
   ViewLog_default as ViewLog,
-  getGridLabel
+  getGridLabel,
+  isValidIPv4,
+  isValidIPv6
 };
 /*! Bundled license information:
 

package/dist/context.cjs

@@ -3027,7 +3027,7 @@ function useAuth() {
 }
 
 // src/context/SharedUiProvider.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"));
 var import_react_query = require("@tanstack/react-query");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function SharedUiProvider({ children, client }) {

package/dist/index.cjs

@@ -186,6 +186,8 @@ __export(src_exports, {
   getRefreshToken: () => getRefreshToken,
   hostConfigLoader: () => hostConfigLoader,
   isFirstRun: () => isFirstRun,
+  isValidIPv4: () => isValidIPv4,
+  isValidIPv6: () => isValidIPv6,
   registry: () => registry,
   saveConfig: () => saveConfig,
   setAccessToken: () => setAccessToken,
@@ -3038,6 +3040,35 @@ 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 encodeFfurl(settings) {
   const { ffurl } = await fetchApi.postJson("/auth/protocols/ffurl/encode", settings);
   return ffurl;
@@ -3046,8 +3077,28 @@ 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);
@@ -35545,7 +35596,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) {
@@ -35915,7 +35966,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,
@@ -36805,6 +36856,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");
@@ -40278,7 +40343,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");
 function SharedUiProvider({ children, client }) {

package/dist/index.js

@@ -2953,6 +2953,35 @@ 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 encodeFfurl(settings) {
   const { ffurl } = await fetchApi.postJson("/auth/protocols/ffurl/encode", settings);
   return ffurl;
@@ -2961,8 +2990,28 @@ 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);
@@ -36720,6 +36769,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
 import { Navigate } from "react-router-dom";
 import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -41279,6 +41342,8 @@ export {
   getRefreshToken,
   hostConfigLoader,
   isFirstRun,
+  isValidIPv4,
+  isValidIPv6,
   registry,
   saveConfig,
   setAccessToken,

package/dist/services/api.d.ts

@@ -1,4 +1,5 @@
 import { ProtocolSettings } from '../types/protocol';
+import { WebSocketSubscribeOptions } from '../types/websocket';
 export declare const api: import("axios").AxiosInstance;
 export declare const authApi: import("axios").AxiosInstance;
 export declare function getAccessToken(): string | null;
@@ -19,4 +20,4 @@ export declare const fetchApi: {
 export declare function buildWsUrl(path?: string): string;
 export declare function encodeFfurl(settings: ProtocolSettings): Promise<string>;
 export declare function decodeFfurl(ffurl: string): Promise<ProtocolSettings>;
-export declare function subscribeToWebsocket(url: string, onMessage: (data: any) => void): () => void;
+export declare function subscribeToWebsocket(url: string, onMessage: (data: any) => void, options?: WebSocketSubscribeOptions): () => void;

package/dist/services.cjs

@@ -2887,6 +2887,35 @@ 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 encodeFfurl(settings) {
   const { ffurl } = await fetchApi.postJson("/auth/protocols/ffurl/encode", settings);
   return ffurl;
@@ -2895,8 +2924,28 @@ 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);

package/dist/services.js

@@ -2847,6 +2847,35 @@ 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 encodeFfurl(settings) {
   const { ffurl } = await fetchApi.postJson("/auth/protocols/ffurl/encode", settings);
   return ffurl;
@@ -2855,8 +2884,28 @@ 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);

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
-export * from './auth.ts';
-export * from './module.ts';
-export * from './plugin.types.ts';
-export * from './protocol.ts';
-export * from './websocket.ts';
-export * from './wizard.ts';
+export * from './auth';
+export * from './module';
+export * from './plugin.types';
+export * from './protocol';
+export * from './websocket';
+export * from './wizard';

package/dist/types/websocket.d.ts

@@ -25,3 +25,10 @@ export interface WebSocketData {
     };
     system: SystemInfo;
 }
+export interface WebSocketSubscribeOptions {
+    headers?: Record<string, string>;
+    protocols?: string | string[];
+    bearerToken?: string | null;
+    bearerStrategy?: 'query' | 'protocol';
+    bearerQueryParam?: string;
+}

package/package.json

@@ -1,52 +1,32 @@
 {
   "name": "@viasoftbr/shared-ui",
-  "description": "Shared frontend utilities, components and i18n for Viasoft plugins and micro-frontends",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "./dist/index.js",
-  "types": "dist/index.d.ts",
-  "version": "0.0.5",
+  "version": "0.0.7",
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
-".": {
+    ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./index": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./context": {
-        "import": "./dist/context.js",
-        "require": "./dist/context.cjs",
-        "types": "./dist/context/index.d.ts"
+      "types": "./dist/types/index.d.ts"
     },
     "./components": {
-        "import": "./dist/components.js",
-        "require": "./dist/components.cjs",
-        "types": "./dist/components/index.d.ts"
-    },
-    "./services": {
-        "import": "./dist/services.js",
-        "require": "./dist/services.cjs",
-        "types": "./dist/services/index.d.ts"
+      "import": "./dist/components/index.js",
+      "types": "./dist/types/components/index.d.ts"
     },
     "./types": {
-        "import": "./dist/types.js",
-        "require": "./dist/types.cjs",
-        "types": "./dist/types/index.d.ts"
+      "import": "./dist/types-module/index.js",
+      "types": "./dist/types/types/index.d.ts"
     },
-    "./i18n": {
-        "import": "./dist/i18n.js",
-        "require": "./dist/i18n.cjs",
-        "types": "./dist/i18n.d.ts"
+    "./services": {
+      "import": "./dist/services/index.js",
+      "types": "./dist/types/services/index.d.ts"
     },
-    "./jsmpeg": {
-      "default": "./dist/jsmpeg.vu.min.js"
+    "./context": {
+      "import": "./dist/context/index.js",
+      "types": "./dist/types/context/index.d.ts"
     },
-    "./locales/*": {
-      "default": "./dist/locales/*"
+    "./hooks": {
+      "import": "./dist/hooks/index.js",
+      "types": "./dist/types/hooks/index.d.ts"
     }
   },
   "scripts": {