@serhii.olishevskyi/docs 1.2.21 → 1.2.23

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, PropsWithChildren } from 'react';
 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';
@@ -385,6 +385,48 @@ interface ExpandableNoteComponentProps extends Omit<TypographyProps, 'children'>
     label?: React__default.ReactNode;
 }
 
+type TextTruncateMode = 'truncate' | 'clamp-2' | 'wrap';
+interface HeaderActionItem {
+    id: string;
+    label: string;
+    icon?: React__default.ReactNode;
+    onClick: () => void;
+    color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+    disabled?: boolean;
+    divider?: boolean;
+}
+interface PrimaryActionProps {
+    label: string;
+    onClick: () => void;
+    icon?: React__default.ReactNode;
+    variant?: 'contained' | 'outlined' | 'text';
+    color?: 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    disabled?: boolean;
+}
+interface RefreshActionProps {
+    onClick: () => void;
+    disabled?: boolean;
+}
+interface PageHeaderProps {
+    overrideNamespace?: string;
+    icon?: React__default.ReactNode;
+    title: string;
+    subtitle?: string;
+    tag?: React__default.ReactNode;
+    titleTruncateMode?: TextTruncateMode;
+    subtitleTruncateMode?: TextTruncateMode;
+    customFragment?: React__default.JSX.Element;
+    primaryAction?: PrimaryActionProps;
+    secondaryActions?: HeaderActionItem[];
+    refreshAction?: RefreshActionProps;
+    mobileBreakpoint?: 'xs' | 'sm' | 'md';
+    forceMobileView?: boolean;
+    sx?: SxProps<Theme>;
+}
+type PageComponentProps = {
+    header?: PageHeaderProps;
+};
+
 interface PageLink {
     text: ReactNode;
     href?: string;
@@ -415,6 +457,22 @@ type CollapsedWidgetContainerProps = {
     onExpanded?: (expanded: boolean) => void;
 };
 
+type FilterWidth = '25%' | '33%' | '50%' | '66%' | '75%' | '100%';
+interface FilterSectionProps extends PropsWithChildren {
+    /** Ширина самой секции на десктопе (по умолчанию '100%') */
+    width?: FilterWidth;
+    /** Ширина самой секции на мобильном (по умолчанию '100%') */
+    mobileWidth?: FilterWidth;
+    /** Ширина каждого элемента ВНУТРИ секции на десктопе (по умолчанию '50%') */
+    itemWidth?: FilterWidth;
+    /** Ширина каждого элемента ВНУТРИ секции на мобильном (по умолчанию '100%') */
+    itemMobileWidth?: FilterWidth;
+}
+interface FilterContainerWidgetProps extends PropsWithChildren {
+    sections?: ReactNode[];
+    sx?: SxProps<Theme>;
+}
+
 interface ErrorAlertWidgetProps {
     overrideNamespace?: string;
     title?: ReactNode;
@@ -449,6 +507,9 @@ declare const UI: {
         MyAvatar: React$1.FC<MyAvatarComponentProps>;
         ExpandableNote: React$1.FC<ExpandableNoteComponentProps>;
     };
+    Layout: {
+        Page: React$1.FC<React$1.PropsWithChildren<PageComponentProps>>;
+    };
     Widgets: {
         Locales: {
             ProtectedLanguageSelector: React$1.FC<{}>;
@@ -457,6 +518,8 @@ declare const UI: {
         Pages: {
             PageLinkWidget: React$1.FC<PageLinkWidgetProps>;
             CollapsedWidgetContainer: (props: React$1.PropsWithChildren<CollapsedWidgetContainerProps>) => React$1.JSX.Element;
+            FilterContainerWidget: React$1.FC<FilterContainerWidgetProps>;
+            FilterSection: React$1.FC<FilterSectionProps>;
         };
         Misc: {
             ErrorAlertWidget: React$1.FC<ErrorAlertWidgetProps>;
@@ -814,4 +877,4 @@ declare const Utils: {
     };
 };
 
-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 };
+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 FilterContainerWidgetProps, type FilterSectionProps, type FilterWidth, type FullCompanyMemberItem, type HeaderActionItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageComponentProps, type PageHeaderProps, type PageLink, type PageLinkWidgetProps, type PrimaryActionProps, Providers, type RefreshActionProps, type RefreshButtonComponentProps, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type TextTruncateMode, 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,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, PropsWithChildren } from 'react';
 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';
@@ -385,6 +385,48 @@ interface ExpandableNoteComponentProps extends Omit<TypographyProps, 'children'>
     label?: React__default.ReactNode;
 }
 
+type TextTruncateMode = 'truncate' | 'clamp-2' | 'wrap';
+interface HeaderActionItem {
+    id: string;
+    label: string;
+    icon?: React__default.ReactNode;
+    onClick: () => void;
+    color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+    disabled?: boolean;
+    divider?: boolean;
+}
+interface PrimaryActionProps {
+    label: string;
+    onClick: () => void;
+    icon?: React__default.ReactNode;
+    variant?: 'contained' | 'outlined' | 'text';
+    color?: 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    disabled?: boolean;
+}
+interface RefreshActionProps {
+    onClick: () => void;
+    disabled?: boolean;
+}
+interface PageHeaderProps {
+    overrideNamespace?: string;
+    icon?: React__default.ReactNode;
+    title: string;
+    subtitle?: string;
+    tag?: React__default.ReactNode;
+    titleTruncateMode?: TextTruncateMode;
+    subtitleTruncateMode?: TextTruncateMode;
+    customFragment?: React__default.JSX.Element;
+    primaryAction?: PrimaryActionProps;
+    secondaryActions?: HeaderActionItem[];
+    refreshAction?: RefreshActionProps;
+    mobileBreakpoint?: 'xs' | 'sm' | 'md';
+    forceMobileView?: boolean;
+    sx?: SxProps<Theme>;
+}
+type PageComponentProps = {
+    header?: PageHeaderProps;
+};
+
 interface PageLink {
     text: ReactNode;
     href?: string;
@@ -415,6 +457,22 @@ type CollapsedWidgetContainerProps = {
     onExpanded?: (expanded: boolean) => void;
 };
 
+type FilterWidth = '25%' | '33%' | '50%' | '66%' | '75%' | '100%';
+interface FilterSectionProps extends PropsWithChildren {
+    /** Ширина самой секции на десктопе (по умолчанию '100%') */
+    width?: FilterWidth;
+    /** Ширина самой секции на мобильном (по умолчанию '100%') */
+    mobileWidth?: FilterWidth;
+    /** Ширина каждого элемента ВНУТРИ секции на десктопе (по умолчанию '50%') */
+    itemWidth?: FilterWidth;
+    /** Ширина каждого элемента ВНУТРИ секции на мобильном (по умолчанию '100%') */
+    itemMobileWidth?: FilterWidth;
+}
+interface FilterContainerWidgetProps extends PropsWithChildren {
+    sections?: ReactNode[];
+    sx?: SxProps<Theme>;
+}
+
 interface ErrorAlertWidgetProps {
     overrideNamespace?: string;
     title?: ReactNode;
@@ -449,6 +507,9 @@ declare const UI: {
         MyAvatar: React$1.FC<MyAvatarComponentProps>;
         ExpandableNote: React$1.FC<ExpandableNoteComponentProps>;
     };
+    Layout: {
+        Page: React$1.FC<React$1.PropsWithChildren<PageComponentProps>>;
+    };
     Widgets: {
         Locales: {
             ProtectedLanguageSelector: React$1.FC<{}>;
@@ -457,6 +518,8 @@ declare const UI: {
         Pages: {
             PageLinkWidget: React$1.FC<PageLinkWidgetProps>;
             CollapsedWidgetContainer: (props: React$1.PropsWithChildren<CollapsedWidgetContainerProps>) => React$1.JSX.Element;
+            FilterContainerWidget: React$1.FC<FilterContainerWidgetProps>;
+            FilterSection: React$1.FC<FilterSectionProps>;
         };
         Misc: {
             ErrorAlertWidget: React$1.FC<ErrorAlertWidgetProps>;
@@ -814,4 +877,4 @@ declare const Utils: {
     };
 };
 
-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 };
+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 FilterContainerWidgetProps, type FilterSectionProps, type FilterWidth, type FullCompanyMemberItem, type HeaderActionItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageComponentProps, type PageHeaderProps, type PageLink, type PageLinkWidgetProps, type PrimaryActionProps, Providers, type RefreshActionProps, type RefreshButtonComponentProps, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type TextTruncateMode, 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

@@ -5131,6 +5131,380 @@ var ButtonComponent = (0, import_react31.forwardRef)(
 );
 ButtonComponent.displayName = "ButtonComponent";
 
+// src/UI/components/layout/PageComponent.tsx
+var import_react32 = __toESM(require("react"));
+var import_material28 = require("@mui/material");
+var import_MoreVert = __toESM(require("@mui/icons-material/MoreVert"));
+var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_icons_material5 = require("@mui/icons-material");
+init_context();
+init_TranslatableTooltipComponent();
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var getTruncateStyles = (mode = "truncate") => {
+  switch (mode) {
+    case "truncate":
+      return { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" };
+    case "clamp-2":
+      return { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal" };
+    case "wrap":
+    default:
+      return { whiteSpace: "normal", wordBreak: "break-word" };
+  }
+};
+var PageHeader = ({
+  overrideNamespace,
+  icon,
+  title,
+  subtitle,
+  tag,
+  titleTruncateMode = "truncate",
+  subtitleTruncateMode = "truncate",
+  customFragment,
+  primaryAction,
+  secondaryActions = [],
+  refreshAction,
+  mobileBreakpoint = "sm",
+  forceMobileView,
+  sx = []
+}) => {
+  const theme = (0, import_material28.useTheme)();
+  const mediaIsMobile = (0, import_material28.useMediaQuery)(theme.breakpoints.down(mobileBreakpoint));
+  const isMobile = forceMobileView ?? mediaIsMobile;
+  const [anchorEl, setAnchorEl] = (0, import_react32.useState)(null);
+  const isMenuOpen = Boolean(anchorEl);
+  const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
+  const handleCloseMenu = () => setAnchorEl(null);
+  const handleMenuAction = (cb) => {
+    handleCloseMenu();
+    cb();
+  };
+  const hasSecondaryActions = secondaryActions.length > 0;
+  const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    import_material28.Box,
+    {
+      sx: [
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          gap: { xs: 1.5, sm: 2.5 },
+          py: 1.5,
+          px: { xs: 1.5, sm: 2 },
+          borderRadius: 2,
+          backgroundColor: "background.paper",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Box, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            import_material28.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: { xs: 40, sm: 48 },
+                height: { xs: 40, sm: 48 },
+                borderRadius: 2.5,
+                backgroundColor: "primary.50",
+                color: "primary.main",
+                flexShrink: 0,
+                border: "1px solid",
+                borderColor: "primary.100",
+                "& svg": { fontSize: { xs: 22, sm: 26 } }
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Box, { sx: { minWidth: 0, flex: 1 }, children: [
+            tag && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Box, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Tooltip, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              import_material28.Typography,
+              {
+                variant: "h5",
+                component: "h1",
+                sx: {
+                  fontWeight: 700,
+                  color: "text.primary",
+                  fontSize: { xs: "1.125rem", sm: "1.35rem" },
+                  lineHeight: 1.3,
+                  ...getTruncateStyles(titleTruncateMode)
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: title })
+              }
+            ) }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Tooltip, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              import_material28.Typography,
+              {
+                variant: "body2",
+                sx: {
+                  color: "text.secondary",
+                  mt: 0.25,
+                  fontSize: { xs: "0.8125rem", sm: "0.875rem" },
+                  lineHeight: 1.4,
+                  ...getTruncateStyles(subtitleTruncateMode)
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: subtitle })
+              }
+            ) })
+          ] })
+        ] }),
+        hasActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Box, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+          /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              import_material28.IconButton,
+              {
+                onClick: handleOpenMenu,
+                sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_MoreVert.default, {})
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+              import_material28.Menu,
+              {
+                anchorEl,
+                open: isMenuOpen,
+                onClose: handleCloseMenu,
+                transformOrigin: { horizontal: "right", vertical: "top" },
+                anchorOrigin: { horizontal: "right", vertical: "bottom" },
+                slotProps: { paper: { elevation: 4, sx: { minWidth: 200, borderRadius: 2, mt: 1, p: 0.5 } } },
+                children: [
+                  primaryAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                      import_material28.MenuItem,
+                      {
+                        onClick: () => handleMenuAction(primaryAction.onClick),
+                        disabled: primaryAction.disabled,
+                        sx: {
+                          borderRadius: 1.5,
+                          fontWeight: 700,
+                          backgroundColor: "primary.50",
+                          color: primaryAction.color ? `${primaryAction.color}.main` : "primary.main",
+                          py: 1.2,
+                          px: 1.5
+                        },
+                        children: [
+                          primaryAction.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                        ]
+                      }
+                    ),
+                    hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { my: 0.75 } })
+                  ] }),
+                  secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react32.default.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                      import_material28.MenuItem,
+                      {
+                        onClick: () => handleMenuAction(action.onClick),
+                        disabled: action.disabled,
+                        sx: { borderRadius: 1, py: 1, px: 1.5, color: action.color ? `${action.color}.main` : "text.primary" },
+                        children: [
+                          action.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                        ]
+                      }
+                    )
+                  ] }, action.id)),
+                  refreshAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                      import_material28.MenuItem,
+                      {
+                        onClick: () => handleMenuAction(refreshAction.onClick),
+                        disabled: refreshAction.disabled,
+                        sx: {
+                          borderRadius: 1.5,
+                          fontWeight: 700,
+                          backgroundColor: "primary.50",
+                          py: 1.2,
+                          px: 1.5
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material5.Refresh, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { primary: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ) : (
+          /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            (primaryAction || refreshAction) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_material28.Stack, { direction: "row", spacing: 2, children: [
+              primaryAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                import_material28.Button,
+                {
+                  variant: primaryAction.variant || "contained",
+                  color: primaryAction.color || "primary",
+                  onClick: primaryAction.onClick,
+                  disabled: primaryAction.disabled,
+                  startIcon: primaryAction.icon,
+                  sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { children: primaryAction.label })
+                }
+              ),
+              refreshAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                import_material28.Fab,
+                {
+                  color: "default",
+                  onClick: refreshAction.onClick,
+                  disabled: refreshAction.disabled,
+                  "aria-label": "refresh",
+                  size: "small",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_material5.Refresh, {})
+                }
+              ) })
+            ] }),
+            hasSecondaryActions && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                import_material28.IconButton,
+                {
+                  onClick: handleOpenMenu,
+                  sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_KeyboardArrowDown.default, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                import_material28.Menu,
+                {
+                  anchorEl,
+                  open: isMenuOpen,
+                  onClose: handleCloseMenu,
+                  transformOrigin: { horizontal: "right", vertical: "top" },
+                  anchorOrigin: { horizontal: "right", vertical: "bottom" },
+                  slotProps: { paper: { elevation: 4, sx: { minWidth: 180, borderRadius: 2, mt: 1, p: 0.5 } } },
+                  children: secondaryActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react32.default.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+                      import_material28.MenuItem,
+                      {
+                        onClick: () => handleMenuAction(action.onClick),
+                        disabled: action.disabled,
+                        sx: { borderRadius: 1, py: 0.85, color: action.color ? `${action.color}.main` : "text.primary" },
+                        children: [
+                          action.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_material28.ListItemText, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                        ]
+                      }
+                    )
+                  ] }, action.id))
+                }
+              )
+            ] })
+          ] })
+        ) }),
+        customFragment && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: customFragment })
+      ]
+    }
+  );
+};
+var PageContainer = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_material28.Box,
+    {
+      sx: {
+        width: "100%",
+        boxSizing: "border-box",
+        p: { xs: 1.5, sm: 3 },
+        backgroundColor: "background.paper"
+      },
+      children
+    }
+  );
+};
+var PageComponent = ({
+  header,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_material28.Box,
+    {
+      sx: {
+        //pt: 2,
+        flexGrow: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(PageContainer, { children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PageHeader, { ...header }),
+        children
+      ] })
+    }
+  );
+};
+
+// src/UI/widgets/page/FilterContainerWidget.tsx
+var import_react33 = __toESM(require("react"));
+var import_material29 = require("@mui/material");
+var import_jsx_runtime39 = (
+  /* Автоматическая обертка каждого дочернего элемента в Grid size */
+  require("react/jsx-runtime")
+);
+var widthToGridColumns = (width) => {
+  switch (width) {
+    case "25%":
+      return 3;
+    case "33%":
+      return 4;
+    case "50%":
+      return 6;
+    case "66%":
+      return 8;
+    case "75%":
+      return 9;
+    case "100%":
+    default:
+      return 12;
+  }
+};
+var createGridSize = (desktopWidth, mobileWidth = "100%") => {
+  return {
+    xs: widthToGridColumns(mobileWidth),
+    md: widthToGridColumns(desktopWidth)
+  };
+};
+var FilterSection = ({
+  width = "100%",
+  mobileWidth = "100%",
+  itemWidth = "50%",
+  itemMobileWidth = "100%",
+  children
+}) => {
+  const sectionGridSize = createGridSize(width, mobileWidth);
+  const itemGridSize = createGridSize(itemWidth, itemMobileWidth);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Grid, { size: sectionGridSize, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: import_react33.default.Children.map(children, (child) => {
+    if (!child) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Grid, { size: itemGridSize, children: child });
+  }) }) });
+};
+var FilterContainerWidget = ({
+  sections,
+  children,
+  sx
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    import_material29.Paper,
+    {
+      variant: "outlined",
+      sx: [
+        { p: 2, mb: 3 },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react33.default.Fragment, { children: sec }, idx)) : children })
+    }
+  );
+};
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
@@ -5157,9 +5531,9 @@ var UI = {
     MyAvatar: MyAvatarComponent,
     ExpandableNote: ExpandableNoteComponent
   },
-  /*Layout: {
-    Row: FormRow,
-  },*/
+  Layout: {
+    Page: PageComponent
+  },
   Widgets: {
     Locales: {
       ProtectedLanguageSelector: LanguageSelector,
@@ -5167,7 +5541,9 @@ var UI = {
     },
     Pages: {
       PageLinkWidget,
-      CollapsedWidgetContainer
+      CollapsedWidgetContainer,
+      FilterContainerWidget,
+      FilterSection
     },
     Misc: {
       ErrorAlertWidget
@@ -5198,16 +5574,16 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-var import_react32 = require("react");
+var import_react34 = 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_react32.useState)("offline");
-  const [lastSeen, setLastSeen] = (0, import_react32.useState)(initialLastSeenAt ?? null);
-  const lastSeenRef = (0, import_react32.useRef)(initialLastSeenAt ?? null);
+  const [status, setStatus] = (0, import_react34.useState)("offline");
+  const [lastSeen, setLastSeen] = (0, import_react34.useState)(initialLastSeenAt ?? null);
+  const lastSeenRef = (0, import_react34.useRef)(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
     if (isOnline) return "online";
@@ -5223,7 +5599,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;

package/dist/index.mjs

@@ -2215,6 +2215,393 @@ var ButtonComponent = forwardRef(
 );
 ButtonComponent.displayName = "ButtonComponent";
 
+// src/UI/components/layout/PageComponent.tsx
+import React12, { useState as useState13 } from "react";
+import {
+  Box as Box10,
+  Typography as Typography9,
+  Button as Button6,
+  IconButton as IconButton8,
+  Menu as Menu2,
+  MenuItem as MenuItem3,
+  ListItemIcon as ListItemIcon2,
+  ListItemText as ListItemText3,
+  Divider as Divider3,
+  Tooltip as Tooltip8,
+  useTheme as useTheme2,
+  useMediaQuery,
+  Stack,
+  Fab as Fab2
+} from "@mui/material";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Refresh as RefreshIcon } from "@mui/icons-material";
+import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var getTruncateStyles = (mode = "truncate") => {
+  switch (mode) {
+    case "truncate":
+      return { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" };
+    case "clamp-2":
+      return { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal" };
+    case "wrap":
+    default:
+      return { whiteSpace: "normal", wordBreak: "break-word" };
+  }
+};
+var PageHeader = ({
+  overrideNamespace,
+  icon,
+  title,
+  subtitle,
+  tag,
+  titleTruncateMode = "truncate",
+  subtitleTruncateMode = "truncate",
+  customFragment,
+  primaryAction,
+  secondaryActions = [],
+  refreshAction,
+  mobileBreakpoint = "sm",
+  forceMobileView,
+  sx = []
+}) => {
+  const theme = useTheme2();
+  const mediaIsMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
+  const isMobile = forceMobileView ?? mediaIsMobile;
+  const [anchorEl, setAnchorEl] = useState13(null);
+  const isMenuOpen = Boolean(anchorEl);
+  const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
+  const handleCloseMenu = () => setAnchorEl(null);
+  const handleMenuAction = (cb) => {
+    handleCloseMenu();
+    cb();
+  };
+  const hasSecondaryActions = secondaryActions.length > 0;
+  const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
+  return /* @__PURE__ */ jsxs13(
+    Box10,
+    {
+      sx: [
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          gap: { xs: 1.5, sm: 2.5 },
+          py: 1.5,
+          px: { xs: 1.5, sm: 2 },
+          borderRadius: 2,
+          backgroundColor: "background.paper",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
+          icon && /* @__PURE__ */ jsx18(
+            Box10,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: { xs: 40, sm: 48 },
+                height: { xs: 40, sm: 48 },
+                borderRadius: 2.5,
+                backgroundColor: "primary.50",
+                color: "primary.main",
+                flexShrink: 0,
+                border: "1px solid",
+                borderColor: "primary.100",
+                "& svg": { fontSize: { xs: 22, sm: 26 } }
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxs13(Box10, { sx: { minWidth: 0, flex: 1 }, children: [
+            tag && /* @__PURE__ */ jsx18(Box10, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ jsx18(Tooltip8, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx18(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx18(
+              Typography9,
+              {
+                variant: "h5",
+                component: "h1",
+                sx: {
+                  fontWeight: 700,
+                  color: "text.primary",
+                  fontSize: { xs: "1.125rem", sm: "1.35rem" },
+                  lineHeight: 1.3,
+                  ...getTruncateStyles(titleTruncateMode)
+                },
+                children: /* @__PURE__ */ jsx18(TranslateText, { children: title })
+              }
+            ) }),
+            subtitle && /* @__PURE__ */ jsx18(Tooltip8, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx18(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx18(
+              Typography9,
+              {
+                variant: "body2",
+                sx: {
+                  color: "text.secondary",
+                  mt: 0.25,
+                  fontSize: { xs: "0.8125rem", sm: "0.875rem" },
+                  lineHeight: 1.4,
+                  ...getTruncateStyles(subtitleTruncateMode)
+                },
+                children: /* @__PURE__ */ jsx18(TranslateText, { children: subtitle })
+              }
+            ) })
+          ] })
+        ] }),
+        hasActions && /* @__PURE__ */ jsx18(Box10, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+          /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
+          /* @__PURE__ */ jsxs13(Fragment10, { children: [
+            /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx18(
+              IconButton8,
+              {
+                onClick: handleOpenMenu,
+                sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
+                children: /* @__PURE__ */ jsx18(MoreVertIcon, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsxs13(
+              Menu2,
+              {
+                anchorEl,
+                open: isMenuOpen,
+                onClose: handleCloseMenu,
+                transformOrigin: { horizontal: "right", vertical: "top" },
+                anchorOrigin: { horizontal: "right", vertical: "bottom" },
+                slotProps: { paper: { elevation: 4, sx: { minWidth: 200, borderRadius: 2, mt: 1, p: 0.5 } } },
+                children: [
+                  primaryAction && /* @__PURE__ */ jsxs13(Fragment10, { children: [
+                    /* @__PURE__ */ jsxs13(
+                      MenuItem3,
+                      {
+                        onClick: () => handleMenuAction(primaryAction.onClick),
+                        disabled: primaryAction.disabled,
+                        sx: {
+                          borderRadius: 1.5,
+                          fontWeight: 700,
+                          backgroundColor: "primary.50",
+                          color: primaryAction.color ? `${primaryAction.color}.main` : "primary.main",
+                          py: 1.2,
+                          px: 1.5
+                        },
+                        children: [
+                          primaryAction.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ jsx18(ListItemText3, { primary: /* @__PURE__ */ jsx18(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                        ]
+                      }
+                    ),
+                    hasSecondaryActions && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.75 } })
+                  ] }),
+                  secondaryActions.map((action) => /* @__PURE__ */ jsxs13(React12.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs13(
+                      MenuItem3,
+                      {
+                        onClick: () => handleMenuAction(action.onClick),
+                        disabled: action.disabled,
+                        sx: { borderRadius: 1, py: 1, px: 1.5, color: action.color ? `${action.color}.main` : "text.primary" },
+                        children: [
+                          action.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx18(ListItemText3, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                        ]
+                      }
+                    )
+                  ] }, action.id)),
+                  refreshAction && /* @__PURE__ */ jsxs13(Fragment10, { children: [
+                    /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs13(
+                      MenuItem3,
+                      {
+                        onClick: () => handleMenuAction(refreshAction.onClick),
+                        disabled: refreshAction.disabled,
+                        sx: {
+                          borderRadius: 1.5,
+                          fontWeight: 700,
+                          backgroundColor: "primary.50",
+                          py: 1.2,
+                          px: 1.5
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx18(RefreshIcon, {}) }),
+                          /* @__PURE__ */ jsx18(ListItemText3, { primary: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ) : (
+          /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
+          /* @__PURE__ */ jsxs13(Box10, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            (primaryAction || refreshAction) && /* @__PURE__ */ jsxs13(Stack, { direction: "row", spacing: 2, children: [
+              primaryAction && /* @__PURE__ */ jsx18(
+                Button6,
+                {
+                  variant: primaryAction.variant || "contained",
+                  color: primaryAction.color || "primary",
+                  onClick: primaryAction.onClick,
+                  disabled: primaryAction.disabled,
+                  startIcon: primaryAction.icon,
+                  sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
+                  children: /* @__PURE__ */ jsx18(TranslateText, { children: primaryAction.label })
+                }
+              ),
+              refreshAction && /* @__PURE__ */ jsx18(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx18(
+                Fab2,
+                {
+                  color: "default",
+                  onClick: refreshAction.onClick,
+                  disabled: refreshAction.disabled,
+                  "aria-label": "refresh",
+                  size: "small",
+                  children: /* @__PURE__ */ jsx18(RefreshIcon, {})
+                }
+              ) })
+            ] }),
+            hasSecondaryActions && /* @__PURE__ */ jsxs13(Fragment10, { children: [
+              /* @__PURE__ */ jsx18(
+                IconButton8,
+                {
+                  onClick: handleOpenMenu,
+                  sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
+                  children: /* @__PURE__ */ jsx18(KeyboardArrowDownIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx18(
+                Menu2,
+                {
+                  anchorEl,
+                  open: isMenuOpen,
+                  onClose: handleCloseMenu,
+                  transformOrigin: { horizontal: "right", vertical: "top" },
+                  anchorOrigin: { horizontal: "right", vertical: "bottom" },
+                  slotProps: { paper: { elevation: 4, sx: { minWidth: 180, borderRadius: 2, mt: 1, p: 0.5 } } },
+                  children: secondaryActions.map((action) => /* @__PURE__ */ jsxs13(React12.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx18(Divider3, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs13(
+                      MenuItem3,
+                      {
+                        onClick: () => handleMenuAction(action.onClick),
+                        disabled: action.disabled,
+                        sx: { borderRadius: 1, py: 0.85, color: action.color ? `${action.color}.main` : "text.primary" },
+                        children: [
+                          action.icon && /* @__PURE__ */ jsx18(ListItemIcon2, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx18(ListItemText3, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                        ]
+                      }
+                    )
+                  ] }, action.id))
+                }
+              )
+            ] })
+          ] })
+        ) }),
+        customFragment && /* @__PURE__ */ jsx18(Fragment10, { children: customFragment })
+      ]
+    }
+  );
+};
+var PageContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx18(
+    Box10,
+    {
+      sx: {
+        width: "100%",
+        boxSizing: "border-box",
+        p: { xs: 1.5, sm: 3 },
+        backgroundColor: "background.paper"
+      },
+      children
+    }
+  );
+};
+var PageComponent = ({
+  header,
+  children
+}) => {
+  return /* @__PURE__ */ jsx18(
+    Box10,
+    {
+      sx: {
+        //pt: 2,
+        flexGrow: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsxs13(PageContainer, { children: [
+        header && /* @__PURE__ */ jsx18(PageHeader, { ...header }),
+        children
+      ] })
+    }
+  );
+};
+
+// src/UI/widgets/page/FilterContainerWidget.tsx
+import React13 from "react";
+import { Grid, Paper } from "@mui/material";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var widthToGridColumns = (width) => {
+  switch (width) {
+    case "25%":
+      return 3;
+    case "33%":
+      return 4;
+    case "50%":
+      return 6;
+    case "66%":
+      return 8;
+    case "75%":
+      return 9;
+    case "100%":
+    default:
+      return 12;
+  }
+};
+var createGridSize = (desktopWidth, mobileWidth = "100%") => {
+  return {
+    xs: widthToGridColumns(mobileWidth),
+    md: widthToGridColumns(desktopWidth)
+  };
+};
+var FilterSection = ({
+  width = "100%",
+  mobileWidth = "100%",
+  itemWidth = "50%",
+  itemMobileWidth = "100%",
+  children
+}) => {
+  const sectionGridSize = createGridSize(width, mobileWidth);
+  const itemGridSize = createGridSize(itemWidth, itemMobileWidth);
+  return /* @__PURE__ */ jsx19(Grid, { size: sectionGridSize, children: /* @__PURE__ */ jsx19(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: React13.Children.map(children, (child) => {
+    if (!child) return null;
+    return (
+      /* Автоматическая обертка каждого дочернего элемента в Grid size */
+      /* @__PURE__ */ jsx19(Grid, { size: itemGridSize, children: child })
+    );
+  }) }) });
+};
+var FilterContainerWidget = ({
+  sections,
+  children,
+  sx
+}) => {
+  return /* @__PURE__ */ jsx19(
+    Paper,
+    {
+      variant: "outlined",
+      sx: [
+        { p: 2, mb: 3 },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ jsx19(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ jsx19(React13.Fragment, { children: sec }, idx)) : children })
+    }
+  );
+};
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
@@ -2241,9 +2628,9 @@ var UI = {
     MyAvatar: MyAvatarComponent,
     ExpandableNote: ExpandableNoteComponent
   },
-  /*Layout: {
-    Row: FormRow,
-  },*/
+  Layout: {
+    Page: PageComponent
+  },
   Widgets: {
     Locales: {
       ProtectedLanguageSelector: LanguageSelector,
@@ -2251,7 +2638,9 @@ var UI = {
     },
     Pages: {
       PageLinkWidget,
-      CollapsedWidgetContainer
+      CollapsedWidgetContainer,
+      FilterContainerWidget,
+      FilterSection
     },
     Misc: {
       ErrorAlertWidget
@@ -2274,13 +2663,13 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect6, useRef, useState as useState13 } from "react";
+import { useEffect as useEffect6, useRef, useState as useState14 } from "react";
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = useState13("offline");
-  const [lastSeen, setLastSeen] = useState13(initialLastSeenAt ?? null);
+  const [status, setStatus] = useState14("offline");
+  const [lastSeen, setLastSeen] = useState14(initialLastSeenAt ?? null);
   const lastSeenRef = useRef(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {

package/package.json

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