@serhii.olishevskyi/docs 1.2.16 → 1.2.18

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { TextFieldProps, SelectProps, SelectChangeEvent, FormControlLabelProps, SwitchProps, CheckboxProps, IconButtonProps, TooltipProps, SxProps, Theme, TypographyProps } from '@mui/material';
+import { TextFieldProps, SelectProps, SelectChangeEvent, FormControlLabelProps, SwitchProps, CheckboxProps, ButtonProps, IconButtonProps, TooltipProps, SxProps, Theme, TypographyProps } from '@mui/material';
 import { SystemProps } from '@mui/system';
 import * as _supabase_supabase_js from '@supabase/supabase-js';
 import { SupabaseClient, User, Session } from '@supabase/supabase-js';
@@ -155,6 +155,22 @@ type CheckboxComponentProps = Omit<FormControlLabelProps, 'control' | 'label' |
     checkboxProps?: CheckboxProps;
 };
 
+type ButtonComponentProps = Omit<ButtonProps, 'children'> & {
+    /**
+     * Метка кнопки. Если передана строка, она автоматически
+     * оборачивается в <TranslateText> для локализации.
+     */
+    label?: ReactNode;
+    /**
+     * Кастомный неймспейс для перевода (если нужен)
+     */
+    overrideNamespace?: string;
+    /**
+     * Дочерние элементы (используются, если не передан label)
+     */
+    children?: ReactNode;
+};
+
 interface CopyClipboardButtonComponentProps extends Omit<IconButtonProps, 'onClick'> {
     overrideNamespace?: string;
     /** Текст, який буде скопійовано в буфер обміну */
@@ -171,6 +187,21 @@ interface CopyClipboardButtonComponentProps extends Omit<IconButtonProps, 'onCli
     onCopySuccess?: (text: string) => void;
 }
 
+interface RefreshButtonComponentProps {
+    overrideNamespace?: string;
+    size?: 'small' | 'medium' | 'large';
+    color?: "success" | "error" | "info" | "warning";
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    loading?: boolean;
+    tooltip?: ReactNode;
+    mobileViewOnly?: boolean;
+    disableMobileView?: boolean;
+    hideTooltipOnMobile?: boolean;
+    hideTooltipOnDesktop?: boolean;
+}
+
 interface TranslatableTooltipComponentProps extends Omit<TooltipProps, 'children'> {
     overrideNamespace?: string;
     disableSpan?: boolean;
@@ -384,6 +415,15 @@ type CollapsedWidgetContainerProps = {
     onExpanded?: (expanded: boolean) => void;
 };
 
+interface ErrorAlertWidgetProps {
+    overrideNamespace?: string;
+    title?: ReactNode;
+    message: ReactNode;
+    onRetry?: () => void;
+    retryText?: ReactNode;
+    isRetrying?: boolean;
+}
+
 declare const UI: {
     Inputs: {
         TextField: React$1.FC<TextFieldComponentProps>;
@@ -396,7 +436,9 @@ declare const UI: {
         Url: typeof UrlComponent;
     };
     Buttons: {
+        ButtonComponent: React$1.ForwardRefExoticComponent<Omit<ButtonComponentProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
         CopyClipboardButton: React$1.FC<CopyClipboardButtonComponentProps>;
+        RefreshButton: React$1.FC<RefreshButtonComponentProps>;
     };
     DataDisplay: {
         TranslatableTooltip: React$1.FC<TranslatableTooltipComponentProps>;
@@ -416,6 +458,9 @@ declare const UI: {
             PageLinkWidget: React$1.FC<PageLinkWidgetProps>;
             CollapsedWidgetContainer: (props: React$1.PropsWithChildren<CollapsedWidgetContainerProps>) => React$1.JSX.Element;
         };
+        Misc: {
+            ErrorAlertWidget: React$1.FC<ErrorAlertWidgetProps>;
+        };
     };
 };
 
@@ -763,6 +808,10 @@ declare const Hooks: {
 
 declare const Utils: {
     readonly getDeviceId: () => string;
+    readonly Sessions: {
+        readonly notifySessionChange: () => void;
+        readonly subscribeToSessionChanges: (callback: () => void) => () => void;
+    };
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type CheckboxComponentProps, type CollapsedWidgetContainerProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, type ExpandableNoteComponentProps, type FullCompanyMemberItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageLink, type PageLinkWidgetProps, Providers, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserProfile, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ButtonComponentProps, type CheckboxComponentProps, type CollapsedWidgetContainerProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, type ErrorAlertWidgetProps, type ExpandableNoteComponentProps, type FullCompanyMemberItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageLink, type PageLinkWidgetProps, Providers, type RefreshButtonComponentProps, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserProfile, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { TextFieldProps, SelectProps, SelectChangeEvent, FormControlLabelProps, SwitchProps, CheckboxProps, IconButtonProps, TooltipProps, SxProps, Theme, TypographyProps } from '@mui/material';
+import { TextFieldProps, SelectProps, SelectChangeEvent, FormControlLabelProps, SwitchProps, CheckboxProps, ButtonProps, IconButtonProps, TooltipProps, SxProps, Theme, TypographyProps } from '@mui/material';
 import { SystemProps } from '@mui/system';
 import * as _supabase_supabase_js from '@supabase/supabase-js';
 import { SupabaseClient, User, Session } from '@supabase/supabase-js';
@@ -155,6 +155,22 @@ type CheckboxComponentProps = Omit<FormControlLabelProps, 'control' | 'label' |
     checkboxProps?: CheckboxProps;
 };
 
+type ButtonComponentProps = Omit<ButtonProps, 'children'> & {
+    /**
+     * Метка кнопки. Если передана строка, она автоматически
+     * оборачивается в <TranslateText> для локализации.
+     */
+    label?: ReactNode;
+    /**
+     * Кастомный неймспейс для перевода (если нужен)
+     */
+    overrideNamespace?: string;
+    /**
+     * Дочерние элементы (используются, если не передан label)
+     */
+    children?: ReactNode;
+};
+
 interface CopyClipboardButtonComponentProps extends Omit<IconButtonProps, 'onClick'> {
     overrideNamespace?: string;
     /** Текст, який буде скопійовано в буфер обміну */
@@ -171,6 +187,21 @@ interface CopyClipboardButtonComponentProps extends Omit<IconButtonProps, 'onCli
     onCopySuccess?: (text: string) => void;
 }
 
+interface RefreshButtonComponentProps {
+    overrideNamespace?: string;
+    size?: 'small' | 'medium' | 'large';
+    color?: "success" | "error" | "info" | "warning";
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    loading?: boolean;
+    tooltip?: ReactNode;
+    mobileViewOnly?: boolean;
+    disableMobileView?: boolean;
+    hideTooltipOnMobile?: boolean;
+    hideTooltipOnDesktop?: boolean;
+}
+
 interface TranslatableTooltipComponentProps extends Omit<TooltipProps, 'children'> {
     overrideNamespace?: string;
     disableSpan?: boolean;
@@ -384,6 +415,15 @@ type CollapsedWidgetContainerProps = {
     onExpanded?: (expanded: boolean) => void;
 };
 
+interface ErrorAlertWidgetProps {
+    overrideNamespace?: string;
+    title?: ReactNode;
+    message: ReactNode;
+    onRetry?: () => void;
+    retryText?: ReactNode;
+    isRetrying?: boolean;
+}
+
 declare const UI: {
     Inputs: {
         TextField: React$1.FC<TextFieldComponentProps>;
@@ -396,7 +436,9 @@ declare const UI: {
         Url: typeof UrlComponent;
     };
     Buttons: {
+        ButtonComponent: React$1.ForwardRefExoticComponent<Omit<ButtonComponentProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
         CopyClipboardButton: React$1.FC<CopyClipboardButtonComponentProps>;
+        RefreshButton: React$1.FC<RefreshButtonComponentProps>;
     };
     DataDisplay: {
         TranslatableTooltip: React$1.FC<TranslatableTooltipComponentProps>;
@@ -416,6 +458,9 @@ declare const UI: {
             PageLinkWidget: React$1.FC<PageLinkWidgetProps>;
             CollapsedWidgetContainer: (props: React$1.PropsWithChildren<CollapsedWidgetContainerProps>) => React$1.JSX.Element;
         };
+        Misc: {
+            ErrorAlertWidget: React$1.FC<ErrorAlertWidgetProps>;
+        };
     };
 };
 
@@ -763,6 +808,10 @@ declare const Hooks: {
 
 declare const Utils: {
     readonly getDeviceId: () => string;
+    readonly Sessions: {
+        readonly notifySessionChange: () => void;
+        readonly subscribeToSessionChanges: (callback: () => void) => () => void;
+    };
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type CheckboxComponentProps, type CollapsedWidgetContainerProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, type ExpandableNoteComponentProps, type FullCompanyMemberItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageLink, type PageLinkWidgetProps, Providers, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserProfile, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type ButtonComponentProps, type CheckboxComponentProps, type CollapsedWidgetContainerProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, type ErrorAlertWidgetProps, type ExpandableNoteComponentProps, type FullCompanyMemberItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageLink, type PageLinkWidgetProps, Providers, type RefreshButtonComponentProps, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserProfile, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.js

@@ -2619,7 +2619,7 @@ var init_UserPopoverComponent = __esm({
           }
         };
         loadStatus();
-        const channel = supabase.channel(`user_status_popover_${userId}`).on(
+        const channel2 = supabase.channel(`user_status_popover_${userId}`).on(
           "postgres_changes",
           {
             event: "*",
@@ -2633,7 +2633,7 @@ var init_UserPopoverComponent = __esm({
         ).subscribe();
         return () => {
           isMounted = false;
-          supabase.removeChannel(channel);
+          supabase.removeChannel(channel2);
         };
       }, [userId, open]);
       const isOnline = Boolean(
@@ -3096,7 +3096,7 @@ var TextFieldComponent = ({
             ...slotProps?.input || {},
             readOnly: isReadOnly,
             endAdornment: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material4.InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
-              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -3106,7 +3106,7 @@ var TextFieldComponent = ({
                   children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Clear.default, { fontSize: "small" })
                 }
               ) }),
-              hasValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              hasValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -3156,7 +3156,7 @@ var TextFieldComponent = ({
                   )
                 }
               ) }),
-              isLocked && showLock && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              isLocked && showLock && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -4834,7 +4834,7 @@ var CollapsedWidgetContainer = (props) => {
             {
               sx: { flexGrow: 1 },
               avatar: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Avatar, { sx: { bgcolor: "primary.main" }, children: props.icon }),
-              label: typeof props.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Typography, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              label: typeof props.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) : props.title,
               subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
             }
           ),
@@ -4856,6 +4856,281 @@ var CollapsedWidgetContainer = (props) => {
   ] });
 };
 
+// src/UI/components/buttons/RefreshButtonComponent.tsx
+var import_react30 = require("react");
+var import_material25 = require("@mui/material");
+var import_Refresh = __toESM(require("@mui/icons-material/Refresh"));
+init_context();
+init_TranslatableTooltipComponent();
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var AnimatedRefreshIcon = (0, import_material25.styled)(import_Refresh.default, {
+  shouldForwardProp: (prop) => prop !== "isSpinning"
+})(({ isSpinning }) => ({
+  animation: isSpinning ? "spin 1s linear infinite" : "none",
+  "@keyframes spin": {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  }
+}));
+var RefreshButtonComponent = ({
+  overrideNamespace,
+  size = "small",
+  onClick,
+  disabled = false,
+  fullWidth = false,
+  loading: externalLoading,
+  tooltip,
+  mobileViewOnly,
+  disableMobileView,
+  hideTooltipOnMobile,
+  hideTooltipOnDesktop
+}) => {
+  const { displayState } = useAppTheme();
+  const [internalLoading, setInternalLoading] = (0, import_react30.useState)(false);
+  const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
+  const handleClick = async (event) => {
+    if (!onClick || isLoading || disabled) return;
+    try {
+      setInternalLoading(true);
+      await onClick(event);
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+  const renderIcon = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      import_material25.Fab,
+      {
+        size,
+        color: "inherit",
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        "aria-label": "refresh",
+        children: renderIcon()
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_material25.Button,
+    {
+      variant: "contained",
+      color: "inherit",
+      size,
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      fullWidth,
+      startIcon: renderIcon(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+    }
+  ) });
+};
+
+// src/UI/widgets/misc/ErrorAlertWidget.tsx
+var import_material26 = require("@mui/material");
+var import_Replay = __toESM(require("@mui/icons-material/Replay"));
+init_context();
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ErrorIllustration = ({ size = 64 }) => {
+  const theme = (0, import_material26.useTheme)();
+  const mainColor = theme.palette.error.main;
+  const lightColor = theme.palette.error.light;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_material26.Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: "0 0 100 100",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              "circle",
+              {
+                cx: "50",
+                cy: "50",
+                r: "42",
+                fill: lightColor,
+                fillOpacity: "0.25",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    "animate",
+                    {
+                      attributeName: "r",
+                      values: "38;44;38",
+                      dur: "3s",
+                      repeatCount: "indefinite"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    "animate",
+                    {
+                      attributeName: "fill-opacity",
+                      values: "0.2;0.4;0.2",
+                      dur: "3s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M50 20L80 72H20L50 20Z",
+                fill: mainColor,
+                stroke: theme.palette.background.paper,
+                strokeWidth: "3",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M50 36V54",
+                stroke: "#FFFFFF",
+                strokeWidth: "4",
+                strokeLinecap: "round"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
+          ]
+        }
+      )
+    }
+  );
+};
+var ErrorAlertWidget = ({
+  overrideNamespace,
+  title = "An error occurred",
+  message,
+  onRetry,
+  retryText = "Retry",
+  isRetrying = false
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_material26.Alert,
+    {
+      severity: "error",
+      icon: false,
+      sx: {
+        borderRadius: 1,
+        p: 2.5,
+        m: 3,
+        border: "1px solid",
+        borderColor: "error.light",
+        bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(211, 47, 47, 0.08)" : "rgba(211, 47, 47, 0.04)",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
+        "& .MuiAlert-message": {
+          width: "100%",
+          p: 0
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        import_material26.Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: { xs: "column", sm: "row" },
+            alignItems: { xs: "flex-start", sm: "center" },
+            gap: 2
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorIllustration, { size: 68 }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_material26.Box, { sx: { flexGrow: 1 }, children: [
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                import_material26.Typography,
+                {
+                  variant: "subtitle1",
+                  sx: { fontWeight: 600, color: "error.main", mb: 0.5 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { overrideNamespace, children: title })
+                }
+              ) : title,
+              typeof message === "string" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material26.Typography, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TranslateText, { overrideNamespace, children: message }) }) : message
+            ] }),
+            onRetry && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_material26.Box,
+              {
+                sx: {
+                  alignSelf: { xs: "flex-end", sm: "center" },
+                  mt: { xs: 1, sm: 0 }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  import_material26.Button,
+                  {
+                    variant: "outlined",
+                    color: "error",
+                    size: "small",
+                    disabled: isRetrying,
+                    onClick: onRetry,
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      import_Replay.default,
+                      {
+                        sx: {
+                          animation: isRetrying ? "spin 1s linear infinite" : "none",
+                          "@keyframes spin": {
+                            "0%": { transform: "rotate(0deg)" },
+                            "100%": { transform: "rotate(360deg)" }
+                          }
+                        }
+                      }
+                    ),
+                    sx: {
+                      //borderRadius: 2,
+                      textTransform: "none",
+                      fontWeight: 600,
+                      px: 2,
+                      py: 0.75,
+                      whiteSpace: "nowrap"
+                    },
+                    children: retryText
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/UI/components/buttons/ButtonComponent.tsx
+var import_react31 = require("react");
+var import_material27 = require("@mui/material");
+init_context();
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var ButtonComponent = (0, import_react31.forwardRef)(
+  ({ label, children, overrideNamespace, ...props }, ref) => {
+    const renderContent = (content) => {
+      if (typeof content === "string") {
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TranslateText, { overrideNamespace, children: content });
+      }
+      return content;
+    };
+    const contentToRender = label !== void 0 ? label : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_material27.Button, { ref, ...props, children: renderContent(contentToRender) });
+  }
+);
+ButtonComponent.displayName = "ButtonComponent";
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
@@ -4869,7 +5144,9 @@ var UI = {
     Url: UrlComponent
   },
   Buttons: {
-    CopyClipboardButton: CopyClipboardButtonComponent
+    ButtonComponent,
+    CopyClipboardButton: CopyClipboardButtonComponent,
+    RefreshButton: RefreshButtonComponent
   },
   DataDisplay: {
     TranslatableTooltip: TranslatableTooltipComponent,
@@ -4891,6 +5168,9 @@ var UI = {
     Pages: {
       PageLinkWidget,
       CollapsedWidgetContainer
+    },
+    Misc: {
+      ErrorAlertWidget
     }
   }
 };
@@ -4918,16 +5198,16 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-var import_react30 = require("react");
+var import_react32 = require("react");
 init_deviceId();
 init_context();
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = (0, import_react30.useState)("offline");
-  const [lastSeen, setLastSeen] = (0, import_react30.useState)(initialLastSeenAt ?? null);
-  const lastSeenRef = (0, import_react30.useRef)(initialLastSeenAt ?? null);
+  const [status, setStatus] = (0, import_react32.useState)("offline");
+  const [lastSeen, setLastSeen] = (0, import_react32.useState)(initialLastSeenAt ?? null);
+  const lastSeenRef = (0, import_react32.useRef)(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
     if (isOnline) return "online";
@@ -4943,7 +5223,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -4966,9 +5246,9 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
       }
     };
     fetchLastSeen();
-    const channel = supabase.channel(`presence_user_${userId}`);
-    channel.on("presence", { event: "sync" }, () => {
-      const state = channel.presenceState();
+    const channel2 = supabase.channel(`presence_user_${userId}`);
+    channel2.on("presence", { event: "sync" }, () => {
+      const state = channel2.presenceState();
       const isOnline = Object.keys(state).length > 0;
       if (isMounted) {
         setStatus(isOnline ? "online" : calculateStatus(false, lastSeenRef.current));
@@ -4998,7 +5278,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     ).subscribe();
     return () => {
       isMounted = false;
-      supabase.removeChannel(channel);
+      supabase.removeChannel(channel2);
     };
   }, [userId, initialLastSeenAt, currentAuthUserId]);
   return {
@@ -5016,8 +5296,31 @@ var Hooks = {
 
 // src/utils/index.ts
 init_deviceId();
+
+// src/utils/session.events.ts
+var channel = typeof window !== "undefined" ? new BroadcastChannel("session_activity") : null;
+var notifySessionChange = () => {
+  channel?.postMessage("SESSION_UPDATED");
+};
+var subscribeToSessionChanges = (callback) => {
+  if (!channel) return () => {
+  };
+  const handleMessage = (event) => {
+    if (event.data === "SESSION_UPDATED") {
+      callback();
+    }
+  };
+  channel.addEventListener("message", handleMessage);
+  return () => channel.removeEventListener("message", handleMessage);
+};
+
+// src/utils/index.ts
 var Utils = {
-  getDeviceId
+  getDeviceId,
+  Sessions: {
+    notifySessionChange,
+    subscribeToSessionChanges
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -156,7 +156,7 @@ var TextFieldComponent = ({
             ...slotProps?.input || {},
             readOnly: isReadOnly,
             endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
-              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ jsx(
+              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: clearTooltip }), children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "small",
@@ -166,7 +166,7 @@ var TextFieldComponent = ({
                   children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
                 }
               ) }),
-              hasValue && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace, children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ jsx(
+              hasValue && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "small",
@@ -216,7 +216,7 @@ var TextFieldComponent = ({
                   )
                 }
               ) }),
-              isLocked && showLock && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ jsx(
+              isLocked && showLock && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: lockTooltip }), children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "small",
@@ -1875,7 +1875,7 @@ var CheckboxComponent = ({
 
 // src/UI/widgets/page/CollapsedWidgetContainer.tsx
 import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
-import { Avatar as Avatar3, Box as Box8, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider2, IconButton as IconButton7, styled, Tooltip as Tooltip7, Typography as Typography7 } from "@mui/material";
+import { Avatar as Avatar3, Box as Box8, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider2, IconButton as IconButton7, styled, Tooltip as Tooltip7 } from "@mui/material";
 import { useState as useState11 } from "react";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var ExpandMore = styled((props) => {
@@ -1918,7 +1918,7 @@ var CollapsedWidgetContainer = (props) => {
             {
               sx: { flexGrow: 1 },
               avatar: /* @__PURE__ */ jsx14(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
-              label: typeof props.title === "string" ? /* @__PURE__ */ jsx14(Typography7, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              label: typeof props.title === "string" ? /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) : props.title,
               subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
             }
           ),
@@ -1940,6 +1940,281 @@ var CollapsedWidgetContainer = (props) => {
   ] });
 };
 
+// src/UI/components/buttons/RefreshButtonComponent.tsx
+import { useState as useState12 } from "react";
+import {
+  Button as Button3,
+  Fab,
+  styled as styled2
+} from "@mui/material";
+import RefreshIconMui from "@mui/icons-material/Refresh";
+import { Fragment as Fragment9, jsx as jsx15 } from "react/jsx-runtime";
+var AnimatedRefreshIcon = styled2(RefreshIconMui, {
+  shouldForwardProp: (prop) => prop !== "isSpinning"
+})(({ isSpinning }) => ({
+  animation: isSpinning ? "spin 1s linear infinite" : "none",
+  "@keyframes spin": {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  }
+}));
+var RefreshButtonComponent = ({
+  overrideNamespace,
+  size = "small",
+  onClick,
+  disabled = false,
+  fullWidth = false,
+  loading: externalLoading,
+  tooltip,
+  mobileViewOnly,
+  disableMobileView,
+  hideTooltipOnMobile,
+  hideTooltipOnDesktop
+}) => {
+  const { displayState } = useAppTheme();
+  const [internalLoading, setInternalLoading] = useState12(false);
+  const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
+  const handleClick = async (event) => {
+    if (!onClick || isLoading || disabled) return;
+    try {
+      setInternalLoading(true);
+      await onClick(event);
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+  const renderIcon = () => /* @__PURE__ */ jsx15(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
+    return /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ jsx15(Fragment9, {}) : tooltip || /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15("span", { children: /* @__PURE__ */ jsx15(
+      Fab,
+      {
+        size,
+        color: "inherit",
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        "aria-label": "refresh",
+        children: renderIcon()
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ jsx15(Fragment9, {}) : tooltip || /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15(
+    Button3,
+    {
+      variant: "contained",
+      color: "inherit",
+      size,
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      fullWidth,
+      startIcon: renderIcon(),
+      children: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+    }
+  ) });
+};
+
+// src/UI/widgets/misc/ErrorAlertWidget.tsx
+import { Alert, Box as Box9, Button as Button4, Typography as Typography8, useTheme } from "@mui/material";
+import ReplayIcon from "@mui/icons-material/Replay";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var ErrorIllustration = ({ size = 64 }) => {
+  const theme = useTheme();
+  const mainColor = theme.palette.error.main;
+  const lightColor = theme.palette.error.light;
+  return /* @__PURE__ */ jsx16(
+    Box9,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxs12(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: "0 0 100 100",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsxs12(
+              "circle",
+              {
+                cx: "50",
+                cy: "50",
+                r: "42",
+                fill: lightColor,
+                fillOpacity: "0.25",
+                children: [
+                  /* @__PURE__ */ jsx16(
+                    "animate",
+                    {
+                      attributeName: "r",
+                      values: "38;44;38",
+                      dur: "3s",
+                      repeatCount: "indefinite"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx16(
+                    "animate",
+                    {
+                      attributeName: "fill-opacity",
+                      values: "0.2;0.4;0.2",
+                      dur: "3s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
+            /* @__PURE__ */ jsx16(
+              "path",
+              {
+                d: "M50 20L80 72H20L50 20Z",
+                fill: mainColor,
+                stroke: theme.palette.background.paper,
+                strokeWidth: "3",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx16(
+              "path",
+              {
+                d: "M50 36V54",
+                stroke: "#FFFFFF",
+                strokeWidth: "4",
+                strokeLinecap: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx16("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
+            /* @__PURE__ */ jsx16("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
+            /* @__PURE__ */ jsx16("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
+            /* @__PURE__ */ jsx16("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
+          ]
+        }
+      )
+    }
+  );
+};
+var ErrorAlertWidget = ({
+  overrideNamespace,
+  title = "An error occurred",
+  message,
+  onRetry,
+  retryText = "Retry",
+  isRetrying = false
+}) => {
+  return /* @__PURE__ */ jsx16(
+    Alert,
+    {
+      severity: "error",
+      icon: false,
+      sx: {
+        borderRadius: 1,
+        p: 2.5,
+        m: 3,
+        border: "1px solid",
+        borderColor: "error.light",
+        bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(211, 47, 47, 0.08)" : "rgba(211, 47, 47, 0.04)",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
+        "& .MuiAlert-message": {
+          width: "100%",
+          p: 0
+        }
+      },
+      children: /* @__PURE__ */ jsxs12(
+        Box9,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: { xs: "column", sm: "row" },
+            alignItems: { xs: "flex-start", sm: "center" },
+            gap: 2
+          },
+          children: [
+            /* @__PURE__ */ jsx16(ErrorIllustration, { size: 68 }),
+            /* @__PURE__ */ jsxs12(Box9, { sx: { flexGrow: 1 }, children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx16(
+                Typography8,
+                {
+                  variant: "subtitle1",
+                  sx: { fontWeight: 600, color: "error.main", mb: 0.5 },
+                  children: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace, children: title })
+                }
+              ) : title,
+              typeof message === "string" ? /* @__PURE__ */ jsx16(Typography8, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace, children: message }) }) : message
+            ] }),
+            onRetry && /* @__PURE__ */ jsx16(
+              Box9,
+              {
+                sx: {
+                  alignSelf: { xs: "flex-end", sm: "center" },
+                  mt: { xs: 1, sm: 0 }
+                },
+                children: /* @__PURE__ */ jsx16(
+                  Button4,
+                  {
+                    variant: "outlined",
+                    color: "error",
+                    size: "small",
+                    disabled: isRetrying,
+                    onClick: onRetry,
+                    startIcon: /* @__PURE__ */ jsx16(
+                      ReplayIcon,
+                      {
+                        sx: {
+                          animation: isRetrying ? "spin 1s linear infinite" : "none",
+                          "@keyframes spin": {
+                            "0%": { transform: "rotate(0deg)" },
+                            "100%": { transform: "rotate(360deg)" }
+                          }
+                        }
+                      }
+                    ),
+                    sx: {
+                      //borderRadius: 2,
+                      textTransform: "none",
+                      fontWeight: 600,
+                      px: 2,
+                      py: 0.75,
+                      whiteSpace: "nowrap"
+                    },
+                    children: retryText
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/UI/components/buttons/ButtonComponent.tsx
+import { forwardRef } from "react";
+import { Button as Button5 } from "@mui/material";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ButtonComponent = forwardRef(
+  ({ label, children, overrideNamespace, ...props }, ref) => {
+    const renderContent = (content) => {
+      if (typeof content === "string") {
+        return /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: content });
+      }
+      return content;
+    };
+    const contentToRender = label !== void 0 ? label : children;
+    return /* @__PURE__ */ jsx17(Button5, { ref, ...props, children: renderContent(contentToRender) });
+  }
+);
+ButtonComponent.displayName = "ButtonComponent";
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
@@ -1953,7 +2228,9 @@ var UI = {
     Url: UrlComponent
   },
   Buttons: {
-    CopyClipboardButton: CopyClipboardButtonComponent
+    ButtonComponent,
+    CopyClipboardButton: CopyClipboardButtonComponent,
+    RefreshButton: RefreshButtonComponent
   },
   DataDisplay: {
     TranslatableTooltip: TranslatableTooltipComponent,
@@ -1975,6 +2252,9 @@ var UI = {
     Pages: {
       PageLinkWidget,
       CollapsedWidgetContainer
+    },
+    Misc: {
+      ErrorAlertWidget
     }
   }
 };
@@ -1994,13 +2274,13 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect6, useRef, useState as useState12 } from "react";
+import { useEffect as useEffect6, useRef, useState as useState13 } from "react";
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = useState12("offline");
-  const [lastSeen, setLastSeen] = useState12(initialLastSeenAt ?? null);
+  const [status, setStatus] = useState13("offline");
+  const [lastSeen, setLastSeen] = useState13(initialLastSeenAt ?? null);
   const lastSeenRef = useRef(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
@@ -2040,9 +2320,9 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
       }
     };
     fetchLastSeen();
-    const channel = supabase.channel(`presence_user_${userId}`);
-    channel.on("presence", { event: "sync" }, () => {
-      const state = channel.presenceState();
+    const channel2 = supabase.channel(`presence_user_${userId}`);
+    channel2.on("presence", { event: "sync" }, () => {
+      const state = channel2.presenceState();
       const isOnline = Object.keys(state).length > 0;
       if (isMounted) {
         setStatus(isOnline ? "online" : calculateStatus(false, lastSeenRef.current));
@@ -2072,7 +2352,7 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
     ).subscribe();
     return () => {
       isMounted = false;
-      supabase.removeChannel(channel);
+      supabase.removeChannel(channel2);
     };
   }, [userId, initialLastSeenAt, currentAuthUserId]);
   return {
@@ -2088,9 +2368,30 @@ var Hooks = {
   useUserStatus
 };
 
+// src/utils/session.events.ts
+var channel = typeof window !== "undefined" ? new BroadcastChannel("session_activity") : null;
+var notifySessionChange = () => {
+  channel?.postMessage("SESSION_UPDATED");
+};
+var subscribeToSessionChanges = (callback) => {
+  if (!channel) return () => {
+  };
+  const handleMessage = (event) => {
+    if (event.data === "SESSION_UPDATED") {
+      callback();
+    }
+  };
+  channel.addEventListener("message", handleMessage);
+  return () => channel.removeEventListener("message", handleMessage);
+};
+
 // src/utils/index.ts
 var Utils = {
-  getDeviceId
+  getDeviceId,
+  Sessions: {
+    notifySessionChange,
+    subscribeToSessionChanges
+  }
 };
 export {
   AIProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhii.olishevskyi/docs",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "description": "DOCS.UA react packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",