@evergis/react 4.0.136 → 4.0.138

package/dist/index.js

@@ -12,6 +12,7 @@ var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 var wkt = require('wkt');
 var turf = require('@turf/turf');
+var uuid = require('uuid');
 var signalr = require('@microsoft/signalr');
 var MapboxDraw = require('@mapbox/mapbox-gl-draw');
 var react = require('swiper/react');
@@ -21,7 +22,6 @@ var rehypeRaw = require('rehype-raw');
 var rehypeSanitize = require('rehype-sanitize');
 var remarkGfm = require('remark-gfm');
 var MapGL = require('react-map-gl/maplibre');
-var uuid = require('uuid');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 require('mapbox-gl/dist/mapbox-gl.css');
 var jspdf = require('jspdf');
@@ -3297,6 +3297,7 @@ exports.ContainerTemplate = void 0;
     ContainerTemplate["Attachment"] = "Attachment";
     ContainerTemplate["Divider"] = "Divider";
     ContainerTemplate["StructuredData"] = "StructuredData";
+    ContainerTemplate["Vote"] = "Vote";
 })(exports.ContainerTemplate || (exports.ContainerTemplate = {}));
 exports.HeaderTemplate = void 0;
 (function (HeaderTemplate) {
@@ -5379,169 +5380,6 @@ const getChartMarkers = (items, markers, dataSources) => {
     })) || []);
 };
 
-const ChartLegendContainer = styled(uilibGl.Flex).withConfig({ displayName: "ChartLegendContainer", componentId: "sc-1di1zl9" }) `
-  flex-direction: column;
-  flex-wrap: wrap;
-  justify-content: ${({ twoColumns }) => (twoColumns ? "flex-start" : "center")};
-`;
-const ChartLegendItem = styled(uilibGl.Flex).withConfig({ displayName: "ChartLegendItem", componentId: "sc-16m9piw" }) `
-  cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
-  align-items: center;
-  flex-wrap: nowrap;
-  width: auto;
-  margin-right: 0.375rem;
-  margin-bottom: 0.25rem;
-  line-height: 0.75rem;
-  opacity: ${({ isFiltered, hasAnyFilter }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
-`;
-const ChartLegendColor = styled.div.withConfig({ displayName: "ChartLegendColor", componentId: "sc-zxnnio" }) `
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-right: 0.375rem;
-  background-color: ${({ color }) => color};
-  border-radius: ${({ theme: { borderRadius } }) => borderRadius.tiny};
-`;
-const ChartLegendName = styled.div.withConfig({ displayName: "ChartLegendName", componentId: "sc-isz576" }) `
-  flex: 1;
-  font-size: ${({ $fontSize }) => $fontSize || "0.625rem"};
-  color: ${({ theme: { palette }, $fontColor }) => $fontColor || palette.textPrimary};
-`;
-
-const ContainerAlias = styled(uilibGl.Flex).withConfig({ displayName: "ContainerAlias", componentId: "sc-1ftaxyu" }) `
-  align-items: center;
-  flex-wrap: nowrap;
-  font-size: 0.75rem;
-  color: ${({ theme: { palette } }) => palette.textSecondary};
-
-  &&& {
-    margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? 0.25 : 0)}rem;
-  }
-  
-  span[kind] {
-    margin-right: 0.5rem;
-
-    :after {
-      color: ${({ theme: { palette } }) => palette.primary};
-    }
-  }
-`;
-const ContainerAliasIcon = styled.div.withConfig({ displayName: "ContainerAliasIcon", componentId: "sc-elezmi" }) `
-  margin-right: 0.5rem;
-`;
-const ContainerChart = styled(uilibGl.Flex).withConfig({ displayName: "ContainerChart", componentId: "sc-16sh3wn" }) `
-  justify-content: flex-start;
-
-  > * {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
-
-  /* fill: слот забирает остаток высоты ячейки (под слотами title/alias/legend) и центрирует тело графика. */
-  ${({ $fill }) => $fill &&
-    styled.css `
-      flex: 1 1 auto;
-      min-height: 0;
-      align-items: center;
-      justify-content: center;
-
-      > * {
-        height: 100%;
-      }
-    `}
-`;
-const ContainerLegend = styled(uilibGl.Flex).withConfig({ displayName: "ContainerLegend", componentId: "sc-z1n1s8" }) ``;
-const ContainerUnits = styled.div.withConfig({ displayName: "ContainerUnits", componentId: "sc-1vurgy9" }) `
-  margin-left: 0.5rem;
-  white-space: nowrap;
-  font-size: 0.75rem;
-`;
-const ContainerValue = styled(uilibGl.Flex).withConfig({ displayName: "ContainerValue", componentId: "sc-aj1rs9" }) `
-  justify-content: flex-end;
-  align-items: center;
-  flex-wrap: nowrap;
-  width: 100%;
-  font-size: ${({ big }) => (big ? 1.5 : 1)}rem;
-  color: ${({ fontColor, theme: { palette } }) => fontColor || palette.textPrimary};
-
-  /* fill: строка со слотом chart+legend забирает остаток высоты Container'а (гейт — только у Chart-контейнера). */
-  ${({ $fill }) => $fill &&
-    styled.css `
-      flex: 1 1 auto;
-      min-height: 0;
-    `}
-
-  > * {
-    width: ${({ column }) => (column ? "100%" : "auto")};
-  }
-
-  ${ContainerChart}, ${ContainerLegend} {
-    width: ${({ column }) => (column ? "100%" : "50%")};
-  }
-
-  ${ContainerLegend} {
-    margin-left: ${({ column }) => (column ? 0 : "1rem")};
-  }
-
-  ${ChartLegendContainer} {
-    flex-direction: ${({ column }) => (column ? "row" : "column")};
-    margin-top: ${({ column }) => (column ? "1rem" : 0)};
-  }
-`;
-const ColorIconMixin = styled.css `
-  :after {
-    color: ${({ $fontColor }) => $fontColor} !important;
-  }
-`;
-const SizeIconMixin = styled.css `
-  :after {
-    font-size: ${({ $fontSize }) => $fontSize}px !important;
-  }
-`;
-styled(uilibGl.Icon).withConfig({ displayName: "ContainerIcon", componentId: "sc-1w9w0bq" }) `
-  width: auto;
-  height: auto;
-  margin-bottom: 0.5rem;
-  ${({ $fontColor }) => !!$fontColor && ColorIconMixin};
-  ${({ $fontSize }) => !!$fontSize && SizeIconMixin};
-`;
-const SvgContainerColorMixin$1 = styled.css `
-  path,
-  line,
-  circle {
-    fill: ${({ $fontColor }) => $fontColor};
-  }
-`;
-const SvgContainer$1 = styled.div.withConfig({ displayName: "SvgContainer", componentId: "sc-1qs5gmx" }) `
-  &&& {
-    min-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
-    max-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
-
-    ${({ $fontColor }) => !!$fontColor && SvgContainerColorMixin$1};
-
-    > * {
-      min-width: inherit;
-    }
-  }
-`;
-const TwoColumnContainerWrapper = styled(Container).withConfig({ displayName: "TwoColumnContainerWrapper", componentId: "sc-1ogv4d3" }) `
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-
-  > * {
-    flex: 1;
-  }
-
-  > ${ContainerValue} {
-    justify-content: flex-end;
-
-    > * {
-      text-align: right;
-    }
-  }
-`;
-
 const DashboardContext = React.createContext({});
 const DashboardProvider = React.memo(({ children, ...props }) => {
     return jsxRuntime.jsx(DashboardContext.Provider, { value: props, children: children });
@@ -5694,6 +5532,127 @@ const ServerNotificationsProvider = ({ url, initialized, apiClient, children })
         }, children: children }));
 };
 
+const useGlobalContext = () => {
+    const { t, language, themeName, api, ewktGeometry, ewktExtent, zoomLevel, notification } = React.useContext(GlobalContext) || {};
+    const translate = React.useCallback((value, options) => {
+        if (t)
+            return t(value, options);
+        return options?.defaultValue ?? value;
+    }, [t]);
+    return React.useMemo(() => ({
+        t: translate,
+        language,
+        themeName,
+        api,
+        ewktGeometry,
+        ewktExtent,
+        zoomLevel,
+        notification,
+    }), [language, translate, api, ewktGeometry, ewktExtent, zoomLevel, themeName, notification]);
+};
+
+const GRID_TILE_SIZE = "4.5rem";
+const LIST_ICON_SIZE = "1.5rem";
+const JPG_MIME_TYPE = "image/jpeg";
+const PNG_MIME_TYPE = "image/png";
+const IMAGE_MIME_TYPES = [
+    "image/apng",
+    "image/avif",
+    "image/gif",
+    "image/jpeg",
+    "image/png",
+    "image/svg+xml",
+    "image/webp",
+];
+const XLSX_MIME_TYPES = [
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+];
+const PDF_MIME_TYPE = "application/pdf";
+const DOCX_MIME_TYPES = [
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+];
+const CSV_MIME_TYPE = "text/csv";
+const JSON_MIME_TYPE = "application/json";
+const TXT_MIME_TYPE = "text/plain";
+const PPTX_MIME_TYPES = [
+    "application/vnd.ms-powerpoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+];
+const SHP_MIME_TYPE = "application/octet-stream";
+const KML_MIME_TYPE = "application/octet-stream";
+const ZIP_MIME_TYPE = "application/zip";
+const PYTHON_MIME_TYPES = ["application/x-python-code", "text/x-python"];
+const DOWNLOAD_ERROR_DURATION = 5000;
+var AddAttachmentSource;
+(function (AddAttachmentSource) {
+    AddAttachmentSource["Pc"] = "pc";
+    AddAttachmentSource["Catalog"] = "catalog";
+    AddAttachmentSource["Link"] = "link";
+})(AddAttachmentSource || (AddAttachmentSource = {}));
+
+const REVOKE_DELAY = 1000;
+/**
+ * Отдаёт браузеру уже загруженный файл под именем `fileName`.
+ *
+ * Адрес отзывается не сразу: часть браузеров дочитывает поток уже после клика, и мгновенный
+ * `revokeObjectURL` обрывает сохранение.
+ */
+const saveBlobAsFile = (blob, fileName) => {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY);
+};
+
+/**
+ * Скачивание вложения по требованию — файл запрашивается в момент клика, а не заранее.
+ *
+ * Свой файл лежит за авторизацией (`Authorization: Bearer`), поэтому ссылкой его не отдать:
+ * он тянется через api и сохраняется из памяти. Чужой открывается ссылкой — кросс-доменный
+ * `download` браузер всё равно игнорирует.
+ */
+const useAttachmentDownload = (items) => {
+    const { api, notification, t } = useGlobalContext();
+    const inFlightRef = React.useRef(new Set());
+    return React.useCallback((index) => {
+        const item = items[index];
+        if (!item)
+            return;
+        if (item.isExternal) {
+            window.open(item.link, "_blank", "noopener,noreferrer");
+            return;
+        }
+        if (!api?.catalog?.getFile || inFlightRef.current.has(item.link))
+            return;
+        inFlightRef.current.add(item.link);
+        api.catalog
+            .getFile(item.link)
+            .then(blob => saveBlobAsFile(blob, item.name))
+            .catch(error => {
+            notification?.add({
+                id: uuid.v4(),
+                title: t("attachments.downloadError", {
+                    ns: "common",
+                    defaultValue: "Не удалось скачать вложение",
+                }),
+                description: error instanceof Error ? error.message : item.name,
+                error: true,
+                duration: DOWNLOAD_ERROR_DURATION,
+            });
+        })
+            .finally(() => {
+            inFlightRef.current.delete(item.link);
+        });
+    }, [items, api, notification, t]);
+};
+
 /**
  * Контекст виджет-фрейма. Возвращаемый объект включает поля и {@link DashboardContext},
  * и {@link FeatureCardContext}, а гибридные (`config`, `isEditing`, `isLoading`, `pageIndex`,
@@ -5810,65 +5769,6 @@ const useAttachmentItems = ({ type, elementConfig, valueOverride, }) => {
     };
 };
 
-const useGlobalContext = () => {
-    const { t, language, themeName, api, ewktGeometry, ewktExtent, zoomLevel, notification } = React.useContext(GlobalContext) || {};
-    const translate = React.useCallback((value, options) => {
-        if (t)
-            return t(value, options);
-        return options?.defaultValue ?? value;
-    }, [t]);
-    return React.useMemo(() => ({
-        t: translate,
-        language,
-        themeName,
-        api,
-        ewktGeometry,
-        ewktExtent,
-        zoomLevel,
-        notification,
-    }), [language, translate, api, ewktGeometry, ewktExtent, zoomLevel, themeName, notification]);
-};
-
-const GRID_TILE_SIZE = "4.5rem";
-const LIST_ICON_SIZE = "1.5rem";
-const JPG_MIME_TYPE = "image/jpeg";
-const PNG_MIME_TYPE = "image/png";
-const IMAGE_MIME_TYPES = [
-    "image/apng",
-    "image/avif",
-    "image/gif",
-    "image/jpeg",
-    "image/png",
-    "image/svg+xml",
-    "image/webp",
-];
-const XLSX_MIME_TYPES = [
-    "application/vnd.ms-excel",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-];
-const PDF_MIME_TYPE = "application/pdf";
-const DOCX_MIME_TYPES = [
-    "application/msword",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-];
-const CSV_MIME_TYPE = "text/csv";
-const JSON_MIME_TYPE = "application/json";
-const TXT_MIME_TYPE = "text/plain";
-const PPTX_MIME_TYPES = [
-    "application/vnd.ms-powerpoint",
-    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-];
-const SHP_MIME_TYPE = "application/octet-stream";
-const KML_MIME_TYPE = "application/octet-stream";
-const ZIP_MIME_TYPE = "application/zip";
-const PYTHON_MIME_TYPES = ["application/x-python-code", "text/x-python"];
-var AddAttachmentSource;
-(function (AddAttachmentSource) {
-    AddAttachmentSource["Pc"] = "pc";
-    AddAttachmentSource["Catalog"] = "catalog";
-    AddAttachmentSource["Link"] = "link";
-})(AddAttachmentSource || (AddAttachmentSource = {}));
-
 var FileType;
 (function (FileType) {
     FileType[FileType["UNKNOWN"] = 0] = "UNKNOWN";
@@ -8605,61 +8505,6 @@ const useUpdateDataSource = ({ dataSource, config, filters, attributes, layerPar
     }, [dataSource, getDataSourcePromises, getUpdatedDataSources, dataSources]);
 };
 
-const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, }) => {
-    const { attributes } = useWidgetContext(type);
-    const { getRenderContainerItem, attributesToRender } = useContainerAttributes({
-        elementConfig,
-        type,
-        renderElement,
-    });
-    const renderContainer = React.useCallback((attribute) => {
-        const item = getRenderContainerItem(elementConfig, attribute);
-        const itemAttribute = attribute
-            ? attributes?.find(({ attributeName }) => attributeName === attribute)
-            : undefined;
-        const overrideTemplateName = getDisplayTemplateNameFromAttribute(itemAttribute);
-        if (overrideTemplateName) {
-            const OverrideContainer = getContainerComponent(overrideTemplateName);
-            if (OverrideContainer) {
-                const itemConfig = {
-                    ...elementConfig,
-                    children: (elementConfig?.children ?? []).map(child => ({
-                        ...child,
-                        attributeName: attribute,
-                    })),
-                    templateName: overrideTemplateName,
-                };
-                return (jsxRuntime.jsx(OverrideContainer, { type: type, elementConfig: itemConfig, renderElement: item.render }, attribute));
-            }
-        }
-        if (isEmptyElementValue(item.value) && item.hideEmpty)
-            return null;
-        return renderBody(item, attribute);
-    }, [getRenderContainerItem, elementConfig, attributes, type, renderBody]);
-    return { renderContainer, attributesToRender };
-};
-
-const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) => {
-    const { width, height, overflow } = elementConfig?.options || {};
-    const templateName = elementConfig?.templateName;
-    const bgHost = useBgImageHost(elementConfig);
-    const renderBody = React.useCallback(({ id, value, style, hasUnits, render }) => (jsxRuntime.jsxs(Container, { id: id, isColumn: true, "data-templatename": templateName, style: style, "$sizeCss": getWrapperSizeStyle({
-            style,
-            width,
-            height,
-            overflow,
-            defaults: BASE_CONTAINER_STYLE,
-            defaultWidth: FILL_SIZE,
-        }), ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: render }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, overflow, templateName, bgHost, elementConfig]);
-    const { renderContainer, attributesToRender } = useRenderContainer({
-        type,
-        elementConfig,
-        renderElement,
-        renderBody,
-    });
-    return attributesToRender ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: attributesToRender.map(renderContainer) })) : (renderContainer());
-});
-
 /** Обычная (не сеточная) раскладка группы: дети в колонку или в строку. */
 const FlowGroup = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
@@ -9202,145 +9047,310 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
             setPreviewIndex(idx);
     }, [items]);
     const handleClosePreview = React.useCallback(() => setPreviewIndex(null), []);
+    const downloadByIndex = useAttachmentDownload(items);
+    const handleDownload = React.useCallback((_image, index) => downloadByIndex(index), [downloadByIndex]);
     const handleShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, onDownload: handleDownload, errorTitleText: t("attachments.resourceUnavailable", {
                                 ns: "common",
                                 defaultValue: "Ресурс недоступен",
                             }) }, previewIndex))] }) }))] }));
 });
 
-const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
-    const { expandedContainers } = useWidgetContext(type);
-    const { id, options } = elementConfig || {};
-    const { expandable, expanded } = options || {};
-    const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    const { root, body } = useContainerRoot({ elementConfig });
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
-});
-
-/**
- * Контекст вписывания графика (`options.fill` контейнера Chart).
- *
- * Компонент `Chart` рендерится через `renderElement({ id: "chart" })` и получает только дочерний
- * узел `{ id: "chart" }` — опции контейнера до него не доходят. `ChartContainer` оборачивает
- * график в провайдер этого контекста, а `Chart` читает значение через `useContext`.
- */
-const FillContext = React.createContext({ fill: false, fitHeight: false });
-
-const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderElement }) => {
-    const { options, children } = elementConfig || {};
-    const { twoColumns, hideEmpty, height } = options || {};
-    const fill = options?.fill;
-    const fillContextValue = React.useMemo(() => ({ fill: !!fill, fitHeight: !!fill && height != null }), [fill, height]);
-    const aliasElement = children.find(child => child.id === "alias");
-    const chartElement = children.find(child => child.id === "chart");
-    const legendElement = children.find(child => child.id === "legend");
-    const { root, body } = useContainerRoot({ elementConfig });
-    const { data, loading } = useChartData({
-        element: chartElement,
-        type,
-    });
-    if (data[0] && !data[0].items) {
-        return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
-    }
-    const hasItems = !!data[0]?.items?.length;
-    if (!loading && !hasItems && hideEmpty)
-        return null;
-    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, children: renderElement({ id: "chart" }) }) }), jsxRuntime.jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
-});
-
-const InnerContainerWrapper = styled.div.withConfig({ displayName: "InnerContainerWrapper", componentId: "sc-1a1fl7q" }) `
+const ChartLegendContainer = styled(uilibGl.Flex).withConfig({ displayName: "ChartLegendContainer", componentId: "sc-1di1zl9" }) `
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: ${({ twoColumns }) => (twoColumns ? "flex-start" : "center")};
+`;
+const ChartLegendItem = styled(uilibGl.Flex).withConfig({ displayName: "ChartLegendItem", componentId: "sc-16m9piw" }) `
   cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
-  width: ${({ column }) => (column ? "100%" : "auto")};
-  opacity: ${({ hasAnyFilter, isFiltered }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
-
-  /*
-    В ряду обёртка не сжимается. Родительский Container снимает порог по контенту
-    (min-width: 0 у детей), из-за чего обёртка ужималась до доли ширины ряда, а внутренний
-    шаблон — например, плашка RoundedBackground с жёсткими 9rem — блочный и не сжимается
-    вместе с ней. Записи вылезали за свои обёртки и наезжали друг на друга.
-  */
-  ${({ column }) => !column && "flex-shrink: 0;"}
+  align-items: center;
+  flex-wrap: nowrap;
+  width: auto;
+  margin-right: 0.375rem;
+  margin-bottom: 0.25rem;
+  line-height: 0.75rem;
+  opacity: ${({ isFiltered, hasAnyFilter }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
 `;
-
-const DataSourceInnerContainer = React.memo(({ config, elementConfig, feature, maxValue, type, index, innerComponent }) => {
-    const { t } = useGlobalContext();
-    const { expandedContainers, selectedTabId, setSelectedTabId, dataSources } = useWidgetContext(type);
-    const { pageIndex, currentPage } = useWidgetPage(type);
-    const { attributes, layerInfo } = useRelatedDataSourceAttributes({
-        type,
-        elementConfig,
-        dataSources,
-        feature,
-    });
-    const { options, children } = elementConfig || {};
-    const { relatedDataSource, filterName, column } = options || {};
-    /**
-     * Конфиг записи — тот же узел хоста, но без слота фона.
-     *
-     * У `DataSource`/`DataSourceProgress` дети — слоты ВНУТРЕННЕГО шаблона, поэтому `bgImage`
-     * достался бы и хосту, и каждой записи: одна картинка нарисовалась бы дважды. Фон остаётся
-     * за хостом (он и есть контейнер), а записи получают конфиг без слота.
-     */
-    const innerConfig = React.useMemo(() => elementConfig && children?.some(({ id }) => id === BG_IMAGE_SLOT_ID)
-        ? { ...elementConfig, children: children.filter(({ id }) => id !== BG_IMAGE_SLOT_ID) }
-        : elementConfig, [elementConfig, children]);
-    const aliasElement = React.useMemo(() => children?.find(({ id }) => id === "alias"), [children]);
-    const valueElement = React.useMemo(() => children?.find(({ id }) => id === "value"), [children]);
-    const aliasAttribute = React.useMemo(() => (aliasElement ? attributes?.find(({ attributeName }) => attributeName === aliasElement.attributeName) : null), [aliasElement, attributes]);
-    const value = aliasAttribute?.value;
-    const InnerContainer = innerComponent;
-    const data = React.useMemo(() => getDataFromRelatedFeatures({
-        t,
-        config: elementConfig,
-        filters: currentPage?.filters,
-        dataSource: dataSources?.find(({ name }) => name === relatedDataSource),
-        layerInfo,
-        relatedConfig: {
-            attributeName: valueElement?.attributeName,
-            attributeTitle: aliasElement?.attributeName,
-            filterName,
-        },
-    }), [
-        aliasElement?.attributeName,
-        currentPage?.filters,
-        dataSources,
-        elementConfig,
-        filterName,
-        layerInfo,
-        relatedDataSource,
-        t,
-        valueElement?.attributeName,
-    ]);
-    const { hasAnyFilter, isFiltered, onFilter } = useWidgetFilters(type, filterName, data);
-    const render = React.useMemo(() => getRenderElement({
-        config,
-        elementConfig,
-        attributes,
-        layerInfo,
-        expandedContainers,
-        selectedTabId,
-        setSelectedTabId,
-        pageIndex,
-        type,
-    }), [config, elementConfig, attributes, layerInfo, expandedContainers, selectedTabId, setSelectedTabId, pageIndex, type]);
-    if (!InnerContainer) {
-        return null;
-    }
-    return (jsxRuntime.jsx(InnerContainerWrapper, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(value), column: column === undefined || column, onClick: filterName ? () => onFilter(value) : undefined, children: jsxRuntime.jsx(InnerContainer, { config: config, elementConfig: innerConfig, feature: feature, maxValue: maxValue, type: type, index: index, renderElement: render }) }));
-});
-
-const DataSourceProgressContainerWrapper = styled.div.withConfig({ displayName: "DataSourceProgressContainerWrapper", componentId: "sc-d525nv" }) `
-  width: 100%;
-
-  ${sizeCssMixin};
+const ChartLegendColor = styled.div.withConfig({ displayName: "ChartLegendColor", componentId: "sc-zxnnio" }) `
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-right: 0.375rem;
+  background-color: ${({ color }) => color};
+  border-radius: ${({ theme: { borderRadius } }) => borderRadius.tiny};
 `;
-const ContainerToggler = styled(uilibGl.LegendToggler).withConfig({ displayName: "ContainerToggler", componentId: "sc-pgbop" }) `
-  width: auto;
+const ChartLegendName = styled.div.withConfig({ displayName: "ChartLegendName", componentId: "sc-isz576" }) `
+  flex: 1;
+  font-size: ${({ $fontSize }) => $fontSize || "0.625rem"};
+  color: ${({ theme: { palette }, $fontColor }) => $fontColor || palette.textPrimary};
 `;
 
-/** Дефолтный внутренний отступ между плитками, px (ТЗ §11). */
+const ContainerAlias = styled(uilibGl.Flex).withConfig({ displayName: "ContainerAlias", componentId: "sc-1ftaxyu" }) `
+  align-items: center;
+  flex-wrap: nowrap;
+  font-size: 0.75rem;
+  color: ${({ theme: { palette } }) => palette.textSecondary};
+
+  &&& {
+    margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? 0.25 : 0)}rem;
+  }
+  
+  span[kind] {
+    margin-right: 0.5rem;
+
+    :after {
+      color: ${({ theme: { palette } }) => palette.primary};
+    }
+  }
+`;
+const ContainerAliasIcon = styled.div.withConfig({ displayName: "ContainerAliasIcon", componentId: "sc-elezmi" }) `
+  margin-right: 0.5rem;
+`;
+const ContainerChart = styled(uilibGl.Flex).withConfig({ displayName: "ContainerChart", componentId: "sc-16sh3wn" }) `
+  justify-content: flex-start;
+
+  > * {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  /* fill: слот забирает остаток высоты ячейки (под слотами title/alias/legend) и центрирует тело графика. */
+  ${({ $fill }) => $fill &&
+    styled.css `
+      flex: 1 1 auto;
+      min-height: 0;
+      align-items: center;
+      justify-content: center;
+
+      > * {
+        height: 100%;
+      }
+    `}
+`;
+const ContainerLegend = styled(uilibGl.Flex).withConfig({ displayName: "ContainerLegend", componentId: "sc-z1n1s8" }) ``;
+const ContainerUnits = styled.div.withConfig({ displayName: "ContainerUnits", componentId: "sc-1vurgy9" }) `
+  margin-left: 0.5rem;
+  white-space: nowrap;
+  font-size: 0.75rem;
+`;
+const ContainerValue = styled(uilibGl.Flex).withConfig({ displayName: "ContainerValue", componentId: "sc-aj1rs9" }) `
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: nowrap;
+  width: 100%;
+  font-size: ${({ big }) => (big ? 1.5 : 1)}rem;
+  color: ${({ fontColor, theme: { palette } }) => fontColor || palette.textPrimary};
+
+  /* fill: строка со слотом chart+legend забирает остаток высоты Container'а (гейт — только у Chart-контейнера). */
+  ${({ $fill }) => $fill &&
+    styled.css `
+      flex: 1 1 auto;
+      min-height: 0;
+    `}
+
+  > * {
+    width: ${({ column }) => (column ? "100%" : "auto")};
+  }
+
+  ${ContainerChart}, ${ContainerLegend} {
+    width: ${({ column }) => (column ? "100%" : "50%")};
+  }
+
+  ${ContainerLegend} {
+    margin-left: ${({ column }) => (column ? 0 : "1rem")};
+  }
+
+  ${ChartLegendContainer} {
+    flex-direction: ${({ column }) => (column ? "row" : "column")};
+    margin-top: ${({ column }) => (column ? "1rem" : 0)};
+  }
+`;
+const ColorIconMixin = styled.css `
+  :after {
+    color: ${({ $fontColor }) => $fontColor} !important;
+  }
+`;
+const SizeIconMixin = styled.css `
+  :after {
+    font-size: ${({ $fontSize }) => $fontSize}px !important;
+  }
+`;
+styled(uilibGl.Icon).withConfig({ displayName: "ContainerIcon", componentId: "sc-1w9w0bq" }) `
+  width: auto;
+  height: auto;
+  margin-bottom: 0.5rem;
+  ${({ $fontColor }) => !!$fontColor && ColorIconMixin};
+  ${({ $fontSize }) => !!$fontSize && SizeIconMixin};
+`;
+const SvgContainerColorMixin$1 = styled.css `
+  path,
+  line,
+  circle {
+    fill: ${({ $fontColor }) => $fontColor};
+  }
+`;
+const SvgContainer$1 = styled.div.withConfig({ displayName: "SvgContainer", componentId: "sc-1qs5gmx" }) `
+  &&& {
+    min-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
+    max-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
+
+    ${({ $fontColor }) => !!$fontColor && SvgContainerColorMixin$1};
+
+    > * {
+      min-width: inherit;
+    }
+  }
+`;
+const TwoColumnContainerWrapper = styled(Container).withConfig({ displayName: "TwoColumnContainerWrapper", componentId: "sc-1ogv4d3" }) `
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+
+  > * {
+    flex: 1;
+  }
+
+  > ${ContainerValue} {
+    justify-content: flex-end;
+
+    > * {
+      text-align: right;
+    }
+  }
+`;
+
+const CameraContainer = React.memo(({ elementConfig, type, renderElement }) => {
+    const { expandedContainers } = useWidgetContext(type);
+    const { id, options } = elementConfig || {};
+    const { expandable, expanded } = options || {};
+    const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
+    const { root, body } = useContainerRoot({ elementConfig });
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
+});
+
+/**
+ * Контекст вписывания графика (`options.fill` контейнера Chart).
+ *
+ * Компонент `Chart` рендерится через `renderElement({ id: "chart" })` и получает только дочерний
+ * узел `{ id: "chart" }` — опции контейнера до него не доходят. `ChartContainer` оборачивает
+ * график в провайдер этого контекста, а `Chart` читает значение через `useContext`.
+ */
+const FillContext = React.createContext({ fill: false, fitHeight: false });
+
+const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderElement }) => {
+    const { options, children } = elementConfig || {};
+    const { twoColumns, hideEmpty, height } = options || {};
+    const fill = options?.fill;
+    const fillContextValue = React.useMemo(() => ({ fill: !!fill, fitHeight: !!fill && height != null }), [fill, height]);
+    const aliasElement = children.find(child => child.id === "alias");
+    const chartElement = children.find(child => child.id === "chart");
+    const legendElement = children.find(child => child.id === "legend");
+    const { root, body } = useContainerRoot({ elementConfig });
+    const { data, loading } = useChartData({
+        element: chartElement,
+        type,
+    });
+    if (data[0] && !data[0].items) {
+        return jsxRuntime.jsx(DataSourceError, { name: elementConfig.templateName });
+    }
+    const hasItems = !!data[0]?.items?.length;
+    if (!loading && !hasItems && hideEmpty)
+        return null;
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { ...body, isColumn: true, children: [aliasElement && jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { column: !twoColumns, alignItems: twoColumns && fill ? "stretch" : "center", "$fill": !!fill, children: hasItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, children: renderElement({ id: "chart" }) }) }), jsxRuntime.jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u2014" })) })] }))] }));
+});
+
+const InnerContainerWrapper = styled.div.withConfig({ displayName: "InnerContainerWrapper", componentId: "sc-1a1fl7q" }) `
+  cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
+  width: ${({ column }) => (column ? "100%" : "auto")};
+  opacity: ${({ hasAnyFilter, isFiltered }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
+
+  /*
+    В ряду обёртка не сжимается. Родительский Container снимает порог по контенту
+    (min-width: 0 у детей), из-за чего обёртка ужималась до доли ширины ряда, а внутренний
+    шаблон — например, плашка RoundedBackground с жёсткими 9rem — блочный и не сжимается
+    вместе с ней. Записи вылезали за свои обёртки и наезжали друг на друга.
+  */
+  ${({ column }) => !column && "flex-shrink: 0;"}
+`;
+
+const DataSourceInnerContainer = React.memo(({ config, elementConfig, feature, maxValue, type, index, innerComponent }) => {
+    const { t } = useGlobalContext();
+    const { expandedContainers, selectedTabId, setSelectedTabId, dataSources } = useWidgetContext(type);
+    const { pageIndex, currentPage } = useWidgetPage(type);
+    const { attributes, layerInfo } = useRelatedDataSourceAttributes({
+        type,
+        elementConfig,
+        dataSources,
+        feature,
+    });
+    const { options, children } = elementConfig || {};
+    const { relatedDataSource, filterName, column } = options || {};
+    /**
+     * Конфиг записи — тот же узел хоста, но без слота фона.
+     *
+     * У `DataSource`/`DataSourceProgress` дети — слоты ВНУТРЕННЕГО шаблона, поэтому `bgImage`
+     * достался бы и хосту, и каждой записи: одна картинка нарисовалась бы дважды. Фон остаётся
+     * за хостом (он и есть контейнер), а записи получают конфиг без слота.
+     */
+    const innerConfig = React.useMemo(() => elementConfig && children?.some(({ id }) => id === BG_IMAGE_SLOT_ID)
+        ? { ...elementConfig, children: children.filter(({ id }) => id !== BG_IMAGE_SLOT_ID) }
+        : elementConfig, [elementConfig, children]);
+    const aliasElement = React.useMemo(() => children?.find(({ id }) => id === "alias"), [children]);
+    const valueElement = React.useMemo(() => children?.find(({ id }) => id === "value"), [children]);
+    const aliasAttribute = React.useMemo(() => (aliasElement ? attributes?.find(({ attributeName }) => attributeName === aliasElement.attributeName) : null), [aliasElement, attributes]);
+    const value = aliasAttribute?.value;
+    const InnerContainer = innerComponent;
+    const data = React.useMemo(() => getDataFromRelatedFeatures({
+        t,
+        config: elementConfig,
+        filters: currentPage?.filters,
+        dataSource: dataSources?.find(({ name }) => name === relatedDataSource),
+        layerInfo,
+        relatedConfig: {
+            attributeName: valueElement?.attributeName,
+            attributeTitle: aliasElement?.attributeName,
+            filterName,
+        },
+    }), [
+        aliasElement?.attributeName,
+        currentPage?.filters,
+        dataSources,
+        elementConfig,
+        filterName,
+        layerInfo,
+        relatedDataSource,
+        t,
+        valueElement?.attributeName,
+    ]);
+    const { hasAnyFilter, isFiltered, onFilter } = useWidgetFilters(type, filterName, data);
+    const render = React.useMemo(() => getRenderElement({
+        config,
+        elementConfig,
+        attributes,
+        layerInfo,
+        expandedContainers,
+        selectedTabId,
+        setSelectedTabId,
+        pageIndex,
+        type,
+    }), [config, elementConfig, attributes, layerInfo, expandedContainers, selectedTabId, setSelectedTabId, pageIndex, type]);
+    if (!InnerContainer) {
+        return null;
+    }
+    return (jsxRuntime.jsx(InnerContainerWrapper, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(value), column: column === undefined || column, onClick: filterName ? () => onFilter(value) : undefined, children: jsxRuntime.jsx(InnerContainer, { config: config, elementConfig: innerConfig, feature: feature, maxValue: maxValue, type: type, index: index, renderElement: render }) }));
+});
+
+const DataSourceProgressContainerWrapper = styled.div.withConfig({ displayName: "DataSourceProgressContainerWrapper", componentId: "sc-d525nv" }) `
+  width: 100%;
+
+  ${sizeCssMixin};
+`;
+const ContainerToggler = styled(uilibGl.LegendToggler).withConfig({ displayName: "ContainerToggler", componentId: "sc-pgbop" }) `
+  width: auto;
+`;
+
+/** Дефолтный внутренний отступ между плитками, px (ТЗ §11). */
 const DEFAULT_TILE_GAP = 8;
 /** Раскладка ряда плиток (grid `justify-content`) для не-`stretch` выравнивания. */
 const ROW_JUSTIFY = {
@@ -10857,6 +10867,61 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { ...body, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
+const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, }) => {
+    const { attributes } = useWidgetContext(type);
+    const { getRenderContainerItem, attributesToRender } = useContainerAttributes({
+        elementConfig,
+        type,
+        renderElement,
+    });
+    const renderContainer = React.useCallback((attribute) => {
+        const item = getRenderContainerItem(elementConfig, attribute);
+        const itemAttribute = attribute
+            ? attributes?.find(({ attributeName }) => attributeName === attribute)
+            : undefined;
+        const overrideTemplateName = getDisplayTemplateNameFromAttribute(itemAttribute);
+        if (overrideTemplateName) {
+            const OverrideContainer = getContainerComponent(overrideTemplateName);
+            if (OverrideContainer) {
+                const itemConfig = {
+                    ...elementConfig,
+                    children: (elementConfig?.children ?? []).map(child => ({
+                        ...child,
+                        attributeName: attribute,
+                    })),
+                    templateName: overrideTemplateName,
+                };
+                return (jsxRuntime.jsx(OverrideContainer, { type: type, elementConfig: itemConfig, renderElement: item.render }, attribute));
+            }
+        }
+        if (isEmptyElementValue(item.value) && item.hideEmpty)
+            return null;
+        return renderBody(item, attribute);
+    }, [getRenderContainerItem, elementConfig, attributes, type, renderBody]);
+    return { renderContainer, attributesToRender };
+};
+
+const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) => {
+    const { width, height, overflow } = elementConfig?.options || {};
+    const templateName = elementConfig?.templateName;
+    const bgHost = useBgImageHost(elementConfig);
+    const renderBody = React.useCallback(({ id, value, style, hasUnits, render }) => (jsxRuntime.jsxs(Container, { id: id, isColumn: true, "data-templatename": templateName, style: style, "$sizeCss": getWrapperSizeStyle({
+            style,
+            width,
+            height,
+            overflow,
+            defaults: BASE_CONTAINER_STYLE,
+            defaultWidth: FILL_SIZE,
+        }), ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: render }), jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height, overflow, templateName, bgHost, elementConfig]);
+    const { renderContainer, attributesToRender } = useRenderContainer({
+        type,
+        elementConfig,
+        renderElement,
+        renderBody,
+    });
+    return attributesToRender ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: attributesToRender.map(renderContainer) })) : (renderContainer());
+});
+
 const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBorders }) => {
     const { config } = useWidgetConfig(type);
     const { pageIndex, currentPage } = useWidgetPage(type);
@@ -12025,6 +12090,734 @@ const UploadContainer = React.memo(({ type, elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(UploadContainerWrapper, { ...body, children: renderElement({ id: "uploader", wrap: false }) }))] }));
 });
 
+/** Зелёный для плашки «Ваш ответ принят». */
+const ACCEPTED_GREEN = "#2fa84f";
+const VoteWrapper = styled(uilibGl.Flex).withConfig({ displayName: "VoteWrapper", componentId: "sc-1cvc2lm" }) `
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  color: ${({ theme: { palette } }) => palette.textPrimary};
+`;
+const VoteHeading = styled.div.withConfig({ displayName: "VoteHeading", componentId: "sc-rzdt4p" }) `
+  font-size: 1rem;
+  font-weight: 600;
+  color: ${({ theme: { palette } }) => palette.textPrimary};
+`;
+const VoteQuestionText = styled.div.withConfig({ displayName: "VoteQuestionText", componentId: "sc-1t4w892" }) `
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: ${({ theme: { palette } }) => palette.textPrimary};
+`;
+const VoteCategoryLabel = styled.div.withConfig({ displayName: "VoteCategoryLabel", componentId: "sc-z1fkgy" }) `
+  font-size: 0.75rem;
+  color: ${({ theme: { palette } }) => palette.textSecondary};
+`;
+const VoteSectionLabel = styled.div.withConfig({ displayName: "VoteSectionLabel", componentId: "sc-1xxrikh" }) `
+  font-size: 0.75rem;
+  color: ${({ theme: { palette } }) => palette.textSecondary};
+`;
+const VoteChipList = styled(uilibGl.Flex).withConfig({ displayName: "VoteChipList", componentId: "sc-1ahupix" }) `
+  flex-wrap: wrap;
+  gap: 0.375rem;
+`;
+const VoteChip = styled(uilibGl.Flex).withConfig({ displayName: "VoteChip", componentId: "sc-x1icg3" }) `
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background-color: ${({ theme: { palette } }) => palette.elementDark};
+  border-radius: 0.25rem;
+  font-size: 0.8125rem;
+
+  :hover {
+    background-color: ${({ theme: { palette } }) => palette.elementDeep};
+  }
+`;
+/**
+ * Список вариантов ответа.
+ *
+ * Обёртка — именно `RadioGroup`: `Radio` из uilib читает его legacy-контекст и без него бросает
+ * `Radio must be controlled with RadioGroup context.` — даже когда `checked` и `onChange` заданы
+ * на самом контроле. Группа стоит всегда, а не только в режиме одиночного выбора: лишнего она не
+ * рисует, зато контекст не может пропасть при смене экрана.
+ *
+ * Подпись у `Radio` своя, но текст варианта рисует строка — он делит место со счётчиком и
+ * прогресс-баром. Поэтому пустой узел подписи и отступ кружка до него снимаются.
+ */
+const VoteVariantList = styled(uilibGl.RadioGroup).withConfig({ displayName: "VoteVariantList", componentId: "sc-kie7qv" }) `
+  width: 100%;
+
+  label > div {
+    display: none;
+  }
+
+  label > span {
+    margin-right: 0;
+  }
+`;
+const VoteVariantRow = styled.div.withConfig({ displayName: "VoteVariantRow", componentId: "sc-hlij7m" }) `
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.375rem 0;
+`;
+const VoteVariantHead = styled(uilibGl.Flex).withConfig({ displayName: "VoteVariantHead", componentId: "sc-1kbw26l" }) `
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+`;
+const VoteVariantText = styled.span.withConfig({ displayName: "VoteVariantText", componentId: "sc-1el70dv" }) `
+  flex: 1;
+  min-width: 0;
+`;
+const VoteVariantCount = styled.span.withConfig({ displayName: "VoteVariantCount", componentId: "sc-jle8ey" }) `
+  flex-shrink: 0;
+  font-size: 0.8125rem;
+  color: ${({ theme: { palette } }) => palette.textSecondary};
+`;
+const VoteAcceptedBadge = styled(uilibGl.Flex).withConfig({ displayName: "VoteAcceptedBadge", componentId: "sc-1utdte8" }) `
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  background-color: ${ACCEPTED_GREEN};
+  color: #ffffff;
+  font-size: 0.875rem;
+`;
+const VoteAuthHint = styled.div.withConfig({ displayName: "VoteAuthHint", componentId: "sc-l6fdf1" }) `
+  font-size: 0.8125rem;
+  color: ${({ theme: { palette } }) => palette.textSecondary};
+`;
+const VoteEditLink = styled.button.withConfig({ displayName: "VoteEditLink", componentId: "sc-1iedcup" }) `
+  align-self: flex-start;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  color: ${({ theme: { palette } }) => palette.primary};
+
+  :hover {
+    text-decoration: underline;
+  }
+`;
+const VoteShareBlock = styled(uilibGl.Flex).withConfig({ displayName: "VoteShareBlock", componentId: "sc-a8sttg" }) `
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+`;
+const VoteShareChips = styled(uilibGl.Flex).withConfig({ displayName: "VoteShareChips", componentId: "sc-1xnysrh" }) `
+  flex-wrap: wrap;
+  gap: 0.375rem;
+`;
+const VoteShareChip = styled.div.withConfig({ displayName: "VoteShareChip", componentId: "sc-mrpbcg" }) `
+  padding: 0.25rem 0.625rem;
+  border-radius: 1rem;
+  background-color: ${({ theme: { palette } }) => palette.element};
+  color: ${({ theme: { palette } }) => palette.textSecondary};
+  font-size: 0.75rem;
+`;
+styled.div.withConfig({ displayName: "VoteError", componentId: "sc-1gfzwqo" }) `
+  font-size: 0.8125rem;
+  color: ${({ theme: { palette } }) => palette.error};
+`;
+
+/** Имена полей таблиц голосования. */
+const VOTE_FIELDS = {
+    category: {
+        id: "id",
+        name: "name",
+    },
+    question: {
+        id: "id",
+        text: "text",
+        categoryId: "category_id",
+        userName: "user_name",
+        multiSelect: "multi_select",
+    },
+    variant: {
+        id: "id",
+        questionId: "question_id",
+        text: "text",
+    },
+    answer: {
+        id: "id",
+        questionId: "question_id",
+        userName: "user_name",
+        variantId: "variant_id",
+    },
+};
+/** Минимальное число вариантов ответа в голосовании. */
+const MIN_VARIANTS = 2;
+/** Лимит при чтении списков (вариантов/ответов/категорий). */
+const VOTE_FETCH_LIMIT = 10000;
+/** База для перевода доли голосов в проценты. */
+const PERCENT_BASE = 100;
+/** Namespace переводов потребляющего приложения (подписи берутся через `t` с defaultValue). */
+const VOTE_NS = "dashboard";
+/**
+ * Имя публичного (анонимного) аккаунта портала.
+ *
+ * Под ним сервер отдаёт `getUserInfo()` любому неавторизованному посетителю шаренного проекта,
+ * поэтому «кто уже голосовал» по нему не считается: первый же голос закрыл бы голосование всем
+ * сразу. Такой посетитель для контейнера — неавторизованный, ему доступны только результаты.
+ *
+ * Признака анонима в API нет (`UserInfoDc` — это `username` + `roles`), поэтому имя приходится
+ * знать по конвенции портала: оно же стоит ролью в ACL публичных ресурсов.
+ */
+const PUBLIC_USER_NAME = "public_user";
+/** Социальные сети для блока «Поделиться». */
+const VOTE_SOCIALS = ["Telegram", "VK"];
+
+/** Локальное состояние формы создания/редактирования голосования (категория, вопрос, чипсы-варианты). */
+const useVoteForm = (initialValues) => {
+    const [categoryId, setCategoryId] = React.useState(initialValues?.categoryId ?? "");
+    const [text, setText] = React.useState(initialValues?.text ?? "");
+    const [multiSelect, setMultiSelect] = React.useState(initialValues?.multiSelect ?? false);
+    const [variants, setVariants] = React.useState(initialValues?.variants ?? []);
+    const [draft, setDraft] = React.useState("");
+    const addVariant = React.useCallback(() => {
+        const value = draft.trim();
+        if (!value)
+            return;
+        setVariants(prev => [...prev, { text: value }]);
+        setDraft("");
+    }, [draft]);
+    const removeVariant = React.useCallback((index) => {
+        setVariants(prev => prev.filter((_, itemIndex) => itemIndex !== index));
+    }, []);
+    const isValid = React.useMemo(() => Boolean(categoryId && text.trim() && variants.length >= MIN_VARIANTS), [categoryId, text, variants.length]);
+    const values = React.useMemo(() => ({ categoryId, text: text.trim(), multiSelect, variants }), [categoryId, text, multiSelect, variants]);
+    return {
+        categoryId,
+        setCategoryId,
+        text,
+        setText,
+        multiSelect,
+        setMultiSelect,
+        variants,
+        addVariant,
+        removeVariant,
+        draft,
+        setDraft,
+        isValid,
+        values,
+    };
+};
+
+const VoteCreateForm = ({ categories, initialValues, isEditing, canDelete, submitting, onSubmit, onDelete, onCancel, }) => {
+    const { t } = useGlobalContext();
+    const form = useVoteForm(initialValues);
+    const { categoryId, setCategoryId, text, setText, multiSelect, setMultiSelect, variants, addVariant, removeVariant, draft, setDraft, isValid, values, } = form;
+    const categoryOptions = React.useMemo(() => categories.map(({ id, name }) => ({ text: name, value: id })), [categories]);
+    return (jsxRuntime.jsxs(VoteWrapper, { children: [!isEditing && jsxRuntime.jsx(VoteHeading, { children: t("vote.newVote", { ns: VOTE_NS, defaultValue: "Новое голосование" }) }), jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 110000, label: t("vote.category", { ns: VOTE_NS, defaultValue: "Категория" }), width: "100%", placeholder: t("vote.categoryPlaceholder", { ns: VOTE_NS, defaultValue: "Выберите категорию" }), options: categoryOptions, value: categoryId, onChange: items => setCategoryId(String(items[0]?.value ?? "")) }), jsxRuntime.jsx(uilibGl.Input, { label: t("vote.question", { ns: VOTE_NS, defaultValue: "Вопрос" }), width: "100%", placeholder: t("vote.questionPlaceholder", { ns: VOTE_NS, defaultValue: "Текст вопроса" }), value: text, onChange: ({ target }) => setText(target.value) }), jsxRuntime.jsx(VoteSectionLabel, { children: t("vote.variants", { ns: VOTE_NS, defaultValue: "Варианты ответов" }) }), !!variants.length && (jsxRuntime.jsx(VoteChipList, { children: variants.map(({ text: variantText }, index) => (jsxRuntime.jsxs(VoteChip, { children: [jsxRuntime.jsx(VoteVariantText, { children: variantText }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: () => removeVariant(index) })] }, `${variantText}:${index}`))) })), jsxRuntime.jsx(uilibGl.Input, { width: "100%", placeholder: t("vote.variantPlaceholder", { ns: VOTE_NS, defaultValue: "Введите вариант и нажмите Enter" }), value: draft, onChange: ({ target }) => setDraft(target.value), onKeyDown: event => {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        addVariant();
+                    }
+                } }), jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", justifyContent: "space-between", children: [jsxRuntime.jsx(VoteSectionLabel, { children: t("vote.multiSelect", { ns: VOTE_NS, defaultValue: "Множественный выбор" }) }), jsxRuntime.jsx(uilibGl.Switch, { checked: multiSelect, onChange: () => setMultiSelect(prev => !prev) })] }), jsxRuntime.jsx(uilibGl.RaisedButton, { primary: true, disabled: !isValid || submitting, onClick: () => onSubmit(values), children: isEditing
+                    ? t("vote.save", { ns: VOTE_NS, defaultValue: "Сохранить" })
+                    : t("vote.create", { ns: VOTE_NS, defaultValue: "Создать голосование" }) }), isEditing && (jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", justifyContent: "space-between", children: [onCancel && (jsxRuntime.jsx(VoteEditLink, { onClick: onCancel, children: t("vote.cancel", { ns: VOTE_NS, defaultValue: "Отмена" }) })), canDelete && onDelete && (jsxRuntime.jsx(uilibGl.RaisedButton, { error: true, disabled: submitting, onClick: onDelete, children: t("vote.delete", { ns: VOTE_NS, defaultValue: "Удалить голосование" }) }))] }))] }));
+};
+
+/** Блок «Поделиться в соцсетях» — пока только вёрстка, без рабочих ссылок. */
+const VoteShare = () => {
+    const { t } = useGlobalContext();
+    return (jsxRuntime.jsxs(VoteShareBlock, { children: [jsxRuntime.jsx(VoteSectionLabel, { children: t("vote.share", { ns: VOTE_NS, defaultValue: "Поделиться в соцсетях" }) }), jsxRuntime.jsx(VoteShareChips, { children: VOTE_SOCIALS.map(name => (jsxRuntime.jsx(VoteShareChip, { children: name }, name))) })] }));
+};
+
+const VoteResults = ({ question, category, results, screen, isOwner, hasAnswers, submitting, onSubmit, onEdit, }) => {
+    const { t } = useGlobalContext();
+    const [selected, setSelected] = React.useState([]);
+    const showControls = screen === "voting";
+    const showShare = screen === "voting" || screen === "voted";
+    const canEdit = screen === "voting" && isOwner && !hasAnswers;
+    const toggle = React.useCallback((variantId) => {
+        setSelected(prev => {
+            if (!question.multiSelect)
+                return [variantId];
+            return prev.includes(variantId) ? prev.filter(id => id !== variantId) : [...prev, variantId];
+        });
+    }, [question.multiSelect]);
+    const canSubmit = React.useMemo(() => selected.length > 0 && !submitting, [selected.length, submitting]);
+    return (jsxRuntime.jsxs(VoteWrapper, { children: [category && jsxRuntime.jsx(VoteCategoryLabel, { children: category.name }), jsxRuntime.jsx(VoteQuestionText, { children: question.text }), jsxRuntime.jsx(VoteVariantList, { column: true, value: selected[0] ?? "", children: results.map(({ id, text, count, percent }) => (jsxRuntime.jsxs(VoteVariantRow, { children: [jsxRuntime.jsxs(VoteVariantHead, { children: [showControls &&
+                                    (question.multiSelect ? (jsxRuntime.jsx(uilibGl.Checkbox, { checked: selected.includes(id), onChange: () => toggle(id) })) : (jsxRuntime.jsx(uilibGl.Radio, { value: id, checked: selected.includes(id), onChange: () => toggle(id) }))), jsxRuntime.jsx(VoteVariantText, { children: text }), jsxRuntime.jsx(VoteVariantCount, { children: count })] }), jsxRuntime.jsx(uilibGl.LinearProgress, { done: percent })] }, id))) }), screen === "unauthenticated" && (jsxRuntime.jsx(VoteAuthHint, { children: t("vote.authHint", { ns: VOTE_NS, defaultValue: "Чтобы проголосовать, пожалуйста, авторизуйтесь" }) })), screen === "voted" && (jsxRuntime.jsxs(VoteAcceptedBadge, { children: [jsxRuntime.jsx(uilibGl.Icon, { kind: "success" }), t("vote.accepted", { ns: VOTE_NS, defaultValue: "Ваш ответ принят" })] })), showControls && (jsxRuntime.jsx(uilibGl.RaisedButton, { primary: true, disabled: !canSubmit, onClick: () => onSubmit(selected), children: t("vote.submit", { ns: VOTE_NS, defaultValue: "Отправить ответ" }) })), canEdit && onEdit && (jsxRuntime.jsx(uilibGl.Flex, { children: jsxRuntime.jsx(VoteEditLink, { onClick: onEdit, children: t("vote.edit", { ns: VOTE_NS, defaultValue: "Редактировать" }) }) })), showShare && jsxRuntime.jsx(VoteShare, {})] }));
+};
+
+/**
+ * Тело контейнера: выбирает экран по вью-модели голосования.
+ *
+ * Живёт отдельно от `VoteContainer`, потому что тот отвечает за корень контейнера — размеры,
+ * фон и заголовок — и не должен раздуваться ветвлением по состояниям.
+ */
+const VoteScreen = ({ screen, categories, question, category, results, totalVotes, isOwner, hasAnswers, isEditing, setIsEditing, editInitialValues, submitting, createVote, submitAnswer, editVote, deleteVote, }) => {
+    const handleCreate = React.useCallback((values) => void createVote(values), [createVote]);
+    const handleEdit = React.useCallback((values) => void editVote(values).then(() => setIsEditing(false)), [editVote, setIsEditing]);
+    const handleDelete = React.useCallback(() => void deleteVote().then(() => setIsEditing(false)), [deleteVote, setIsEditing]);
+    const handleCancel = React.useCallback(() => setIsEditing(false), [setIsEditing]);
+    const handleEditOpen = React.useCallback(() => setIsEditing(true), [setIsEditing]);
+    const handleSubmitAnswer = React.useCallback((variantIds) => void submitAnswer(variantIds), [submitAnswer]);
+    if (screen === "loading")
+        return jsxRuntime.jsx(ContainerLoading, {});
+    if (isEditing && question) {
+        return (jsxRuntime.jsx(VoteCreateForm, { categories: categories, initialValues: editInitialValues, isEditing: true, canDelete: !hasAnswers, submitting: submitting, onSubmit: handleEdit, onDelete: handleDelete, onCancel: handleCancel }));
+    }
+    if (screen === "create") {
+        return (jsxRuntime.jsx(VoteCreateForm, { categories: categories, isEditing: false, canDelete: false, submitting: submitting, onSubmit: handleCreate }));
+    }
+    if (!question)
+        return null;
+    return (jsxRuntime.jsx(VoteResults, { question: question, category: category, results: results, totalVotes: totalVotes, screen: screen, isOwner: isOwner, hasAnswers: hasAnswers, submitting: submitting, onSubmit: handleSubmitAnswer, onEdit: handleEditOpen }));
+};
+
+/** Приводит значение атрибута к строке-идентификатору (id приходят числами/строками). */
+const toId = (value) => (value === null || value === undefined ? "" : String(value));
+/**
+ * Условие равенства по числовому полю для `conditions` слоя: `field == value`.
+ *
+ * Двойное равенство — форма, которой написаны условия во всех конфигах проекта; лексер языка
+ * условий принимает и одиночное `=`, но расходиться с авторскими конфигами незачем.
+ */
+const eqCondition = (field, value) => `${field} == ${value}`;
+const props = (feature) => feature.properties ?? {};
+const mapCategories = (features) => features.map(feature => ({
+    id: toId(props(feature)[VOTE_FIELDS.category.id] ?? feature.id),
+    name: toId(props(feature)[VOTE_FIELDS.category.name]),
+}));
+const mapQuestion = (feature) => {
+    const featureProps = props(feature);
+    return {
+        id: toId(featureProps[VOTE_FIELDS.question.id] ?? feature.id),
+        text: toId(featureProps[VOTE_FIELDS.question.text]),
+        categoryId: toId(featureProps[VOTE_FIELDS.question.categoryId]),
+        userName: toId(featureProps[VOTE_FIELDS.question.userName]),
+        multiSelect: Boolean(featureProps[VOTE_FIELDS.question.multiSelect]),
+    };
+};
+const mapVariants = (features) => features.map(feature => ({
+    id: toId(props(feature)[VOTE_FIELDS.variant.id] ?? feature.id),
+    text: toId(props(feature)[VOTE_FIELDS.variant.text]),
+}));
+/** Список `variant_id` из ответов конкретного пользователя. */
+const getUserVariantIds = (answers, userName) => answers
+    .filter(answer => toId(props(answer)[VOTE_FIELDS.answer.userName]) === userName)
+    .map(answer => toId(props(answer)[VOTE_FIELDS.answer.variantId]));
+/** Id записей-ответов конкретного пользователя (для замены ответа при переголосовании). */
+const getUserAnswerIds = (answers, userName) => answers
+    .filter(answer => toId(props(answer)[VOTE_FIELDS.answer.userName]) === userName)
+    .map(answer => toId(answer.id))
+    .filter(Boolean);
+/**
+ * Считает голоса по вариантам. `percent` — доля голосов варианта от общего числа голосов
+ * по голосованию.
+ */
+const computeResults = (variants, answers) => {
+    const counts = new Map();
+    answers.forEach(answer => {
+        const variantId = toId(props(answer)[VOTE_FIELDS.answer.variantId]);
+        counts.set(variantId, (counts.get(variantId) ?? 0) + 1);
+    });
+    const totalVotes = answers.length;
+    const results = variants.map(variant => {
+        const count = counts.get(variant.id) ?? 0;
+        return {
+            ...variant,
+            count,
+            percent: totalVotes ? Math.round((count / totalVotes) * PERCENT_BASE) : 0,
+        };
+    });
+    return { results, totalVotes };
+};
+/**
+ * Сравнивает варианты из формы с существующими в БД и раскладывает на наборы операций:
+ * создать (новые без id), обновить (изменился текст) и удалить (исчезли из формы).
+ */
+const diffVariants = (existing, next) => {
+    const nextIds = new Set(next.filter(({ id }) => id).map(({ id }) => id));
+    const existingById = new Map(existing.map(variant => [variant.id, variant]));
+    const toCreate = next.filter(({ id, text }) => !id && text.trim()).map(({ text }) => text.trim());
+    const toUpdate = next
+        .filter(({ id, text }) => id && existingById.get(id) && existingById.get(id)?.text !== text.trim())
+        .map(({ id, text }) => ({ id: id, text: text.trim() }));
+    const toDeleteIds = existing.filter(({ id }) => !nextIds.has(id)).map(({ id }) => id);
+    return { toCreate, toUpdate, toDeleteIds };
+};
+
+/**
+ * Операции записи контейнера: создание голосования, отправка ответа, редактирование и удаление.
+ * Все операции доступны только авторизованному пользователю.
+ */
+const useVoteActions = ({ dataSources, attributeName, featureId, featureLayerName, username, question, variants, answers, onQuestionIdChange, reload, }) => {
+    const { api } = useGlobalContext();
+    const { questionDataSource, variantDataSource, answerDataSource } = dataSources;
+    const [submitting, setSubmitting] = React.useState(false);
+    const writeFeatureAttribute = React.useCallback(async (value) => {
+        if (!api || !featureLayerName || !featureId || !attributeName)
+            return;
+        await api.layers.updateFeature(featureLayerName, [{ id: featureId, attributes: { [attributeName]: value } }]);
+    }, [api, featureLayerName, featureId, attributeName]);
+    const createVote = React.useCallback(async (values) => {
+        if (!api)
+            return;
+        setSubmitting(true);
+        try {
+            const questionResult = await api.layers.createFeatures({ name: questionDataSource }, [
+                {
+                    properties: {
+                        [VOTE_FIELDS.question.text]: values.text,
+                        [VOTE_FIELDS.question.categoryId]: values.categoryId,
+                        [VOTE_FIELDS.question.userName]: username,
+                        [VOTE_FIELDS.question.multiSelect]: values.multiSelect,
+                    },
+                },
+            ]);
+            const newQuestionId = questionResult.createdIds?.[0];
+            if (!newQuestionId)
+                return;
+            await api.layers.createFeatures({ name: variantDataSource }, values.variants
+                .filter(({ text }) => text.trim())
+                .map(({ text }) => ({
+                properties: {
+                    [VOTE_FIELDS.variant.questionId]: newQuestionId,
+                    [VOTE_FIELDS.variant.text]: text.trim(),
+                },
+            })));
+            await writeFeatureAttribute(newQuestionId);
+            onQuestionIdChange(newQuestionId);
+            reload();
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [api, questionDataSource, variantDataSource, username, writeFeatureAttribute, onQuestionIdChange, reload]);
+    const submitAnswer = React.useCallback(async (variantIds) => {
+        if (!api || !question || !variantIds.length)
+            return;
+        setSubmitting(true);
+        try {
+            // Заложено на будущее (переголосование без UI): сначала снимаем прежние ответы пользователя.
+            const previousAnswerIds = getUserAnswerIds(answers, username);
+            if (previousAnswerIds.length) {
+                await api.layers.deleteFeatures({ name: answerDataSource, ids: previousAnswerIds });
+            }
+            await api.layers.createFeatures({ name: answerDataSource }, variantIds.map(variantId => ({
+                properties: {
+                    [VOTE_FIELDS.answer.questionId]: question.id,
+                    [VOTE_FIELDS.answer.userName]: username,
+                    [VOTE_FIELDS.answer.variantId]: variantId,
+                },
+            })));
+            reload();
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [api, question, answers, username, answerDataSource, reload]);
+    const editVote = React.useCallback(async (values) => {
+        if (!api || !question)
+            return;
+        setSubmitting(true);
+        try {
+            await api.layers.updateFeature(questionDataSource, [
+                {
+                    id: question.id,
+                    attributes: {
+                        [VOTE_FIELDS.question.text]: values.text,
+                        [VOTE_FIELDS.question.categoryId]: values.categoryId,
+                        [VOTE_FIELDS.question.multiSelect]: values.multiSelect,
+                    },
+                },
+            ]);
+            const { toCreate, toUpdate, toDeleteIds } = diffVariants(variants, values.variants);
+            if (toCreate.length) {
+                await api.layers.createFeatures({ name: variantDataSource }, toCreate.map(text => ({
+                    properties: { [VOTE_FIELDS.variant.questionId]: question.id, [VOTE_FIELDS.variant.text]: text },
+                })));
+            }
+            if (toUpdate.length) {
+                await api.layers.updateFeature(variantDataSource, toUpdate.map(({ id, text }) => ({ id, attributes: { [VOTE_FIELDS.variant.text]: text } })));
+            }
+            if (toDeleteIds.length) {
+                await api.layers.deleteFeatures({ name: variantDataSource, ids: toDeleteIds });
+            }
+            reload();
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [api, question, questionDataSource, variantDataSource, variants, reload]);
+    const deleteVote = React.useCallback(async () => {
+        if (!api || !question)
+            return;
+        setSubmitting(true);
+        try {
+            const variantIds = variants.map(({ id }) => id).filter(Boolean);
+            if (variantIds.length) {
+                await api.layers.deleteFeatures({ name: variantDataSource, ids: variantIds });
+            }
+            await api.layers.deleteFeature({ name: questionDataSource, id: question.id });
+            await writeFeatureAttribute(null);
+            onQuestionIdChange("");
+            reload();
+        }
+        finally {
+            setSubmitting(false);
+        }
+    }, [api, question, variants, variantDataSource, questionDataSource, writeFeatureAttribute, onQuestionIdChange, reload]);
+    return { submitting, createVote, submitAnswer, editVote, deleteVote };
+};
+
+/**
+ * Загружает справочник категорий, а по `questionId` — само голосование, его варианты и ответы.
+ * Перечитывается при смене `questionId` или `reloadToken` (после создания/голосования/правки).
+ */
+const useVoteData = ({ dataSources, questionId, reloadToken }) => {
+    const { api } = useGlobalContext();
+    const { categoryDataSource, questionDataSource, variantDataSource, answerDataSource } = dataSources;
+    const [categories, setCategories] = React.useState([]);
+    const [question, setQuestion] = React.useState(null);
+    const [variants, setVariants] = React.useState([]);
+    const [answers, setAnswers] = React.useState([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(false);
+    React.useEffect(() => {
+        let active = true;
+        if (api && categoryDataSource) {
+            api.layers
+                .getFeatures(categoryDataSource, { withGeom: false, limit: VOTE_FETCH_LIMIT })
+                .then(response => {
+                if (active)
+                    setCategories(mapCategories(response.features ?? []));
+            })
+                .catch(() => undefined);
+        }
+        return () => {
+            active = false;
+        };
+    }, [api, categoryDataSource]);
+    React.useEffect(() => {
+        let active = true;
+        if (!api || !questionId) {
+            setQuestion(null);
+            setVariants([]);
+            setAnswers([]);
+            return () => {
+                active = false;
+            };
+        }
+        setLoading(true);
+        setError(false);
+        Promise.all([
+            api.layers.getFeatures(questionDataSource, {
+                conditions: [eqCondition(VOTE_FIELDS.question.id, questionId)],
+                withGeom: false,
+                limit: 1,
+            }),
+            api.layers.getFeatures(variantDataSource, {
+                conditions: [eqCondition(VOTE_FIELDS.variant.questionId, questionId)],
+                withGeom: false,
+                limit: VOTE_FETCH_LIMIT,
+            }),
+            api.layers.getFeatures(answerDataSource, {
+                conditions: [eqCondition(VOTE_FIELDS.answer.questionId, questionId)],
+                withGeom: false,
+                limit: VOTE_FETCH_LIMIT,
+            }),
+        ])
+            .then(([questionResponse, variantResponse, answerResponse]) => {
+            if (!active)
+                return;
+            const questionFeature = questionResponse.features?.[0];
+            setQuestion(questionFeature ? mapQuestion(questionFeature) : null);
+            setVariants(mapVariants(variantResponse.features ?? []));
+            setAnswers(answerResponse.features ?? []);
+        })
+            .catch(() => {
+            if (active)
+                setError(true);
+        })
+            .finally(() => {
+            if (active)
+                setLoading(false);
+        });
+        return () => {
+            active = false;
+        };
+    }, [api, questionId, reloadToken, questionDataSource, variantDataSource, answerDataSource]);
+    const { results, totalVotes } = React.useMemo(() => computeResults(variants, answers), [variants, answers]);
+    return { categories, question, variants, answers, results, totalVotes, loading, error };
+};
+
+/**
+ * Текущий пользователь для контейнера голосования. Авторизация обязательна — неавторизованный
+ * пользователь видит только результаты. Источник — `api.account.getUserInfo()`; ошибка/отсутствие
+ * `username` трактуются как «не авторизован».
+ *
+ * Публичный аккаунт портала (`PUBLIC_USER_NAME` в `username` или в ролях) авторизацией не
+ * считается: под ним ходят ВСЕ анонимные посетители шаренного проекта, поэтому и «мой голос»,
+ * и владение голосованием опознались бы у них общими на всех.
+ */
+const useVoteUser = () => {
+    const { api } = useGlobalContext();
+    const [username, setUsername] = React.useState("");
+    const [roles, setRoles] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    React.useEffect(() => {
+        let active = true;
+        if (!api) {
+            setLoading(false);
+            return () => {
+                active = false;
+            };
+        }
+        api.account
+            .getUserInfo()
+            .then(info => {
+            if (!active)
+                return;
+            setUsername(info?.username ?? "");
+            setRoles(info?.roles ?? []);
+        })
+            .catch(() => {
+            if (!active)
+                return;
+            setUsername("");
+            setRoles([]);
+        })
+            .finally(() => {
+            if (active)
+                setLoading(false);
+        });
+        return () => {
+            active = false;
+        };
+    }, [api]);
+    const isPublic = React.useMemo(() => username === PUBLIC_USER_NAME || roles.includes(PUBLIC_USER_NAME), [username, roles]);
+    const isAuthenticated = !!username && !isPublic;
+    return { username, isAuthenticated, loading };
+};
+
+const normalizeAttributeName = (attributeName) => {
+    if (Array.isArray(attributeName))
+        return attributeName[0] ?? "";
+    return attributeName ?? "";
+};
+/**
+ * Вью-модель контейнера голосования: определяет текущий экран и собирает данные/действия.
+ * Привязка к объекту карты — через `elementConfig.attributeName` (хранит `question_id`).
+ */
+const useVoteContainer = (elementConfig) => {
+    const { feature, layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
+    const options = elementConfig?.options;
+    const attributeName = normalizeAttributeName(elementConfig?.attributeName);
+    const dataSources = React.useMemo(() => ({
+        categoryDataSource: options?.categoryDataSource ?? "",
+        questionDataSource: options?.questionDataSource ?? "",
+        variantDataSource: options?.variantDataSource ?? "",
+        answerDataSource: options?.answerDataSource ?? "",
+    }), [options]);
+    const configured = React.useMemo(() => Boolean(attributeName &&
+        dataSources.categoryDataSource &&
+        dataSources.questionDataSource &&
+        dataSources.variantDataSource &&
+        dataSources.answerDataSource), [attributeName, dataSources]);
+    const { username, isAuthenticated, loading: userLoading } = useVoteUser();
+    const featureId = feature?.id;
+    const featureQuestionId = toId(feature?.properties?.[attributeName]);
+    const [overrideQuestionId, setOverrideQuestionId] = React.useState(null);
+    React.useEffect(() => {
+        setOverrideQuestionId(null);
+    }, [featureId]);
+    const questionId = overrideQuestionId ?? featureQuestionId;
+    const [reloadToken, setReloadToken] = React.useState(0);
+    const reload = React.useCallback(() => setReloadToken(token => token + 1), []);
+    const onQuestionIdChange = React.useCallback((id) => setOverrideQuestionId(id), []);
+    const { categories, question, variants, answers, results, totalVotes, loading } = useVoteData({
+        dataSources,
+        questionId,
+        reloadToken,
+    });
+    const [isEditing, setIsEditing] = React.useState(false);
+    const actions = useVoteActions({
+        dataSources,
+        attributeName,
+        featureId,
+        featureLayerName: layerInfo?.name,
+        username,
+        question,
+        variants,
+        answers,
+        onQuestionIdChange,
+        reload,
+    });
+    const hasAnswers = answers.length > 0;
+    const isOwner = isAuthenticated && !!question && question.userName === username;
+    const hasVoted = React.useMemo(() => getUserVariantIds(answers, username).length > 0, [answers, username]);
+    const category = React.useMemo(() => categories.find(({ id }) => id === question?.categoryId), [categories, question?.categoryId]);
+    const screen = React.useMemo(() => {
+        if (!configured)
+            return null;
+        if (userLoading)
+            return "loading";
+        if (!questionId)
+            return isAuthenticated ? "create" : null;
+        if (loading && !question)
+            return "loading";
+        if (!question)
+            return null;
+        if (!isAuthenticated)
+            return "unauthenticated";
+        return hasVoted ? "voted" : "voting";
+    }, [configured, userLoading, questionId, isAuthenticated, loading, question, hasVoted]);
+    const editInitialValues = React.useMemo(() => question
+        ? {
+            categoryId: question.categoryId,
+            text: question.text,
+            multiSelect: question.multiSelect,
+            variants: variants.map(({ id, text }) => ({ id, text })),
+        }
+        : undefined, [question, variants]);
+    return {
+        configured,
+        screen,
+        categories,
+        question,
+        category,
+        results,
+        totalVotes,
+        isOwner,
+        hasAnswers,
+        isEditing,
+        setIsEditing,
+        editInitialValues,
+        ...actions,
+    };
+};
+
+/**
+ * Контейнер «Голосование»: привязывает опрос к объекту карты через `attributeName`
+ * и показывает один из экранов — создание, голосование, после голосования
+ * или (для неавторизованных) только результаты.
+ *
+ * Корнем владеет сам (`useContainerRoot`), поэтому шаблон записан в `ROOT_OWNING_TEMPLATES`:
+ * размеры, авторский `style`, фон и заголовок живут на одном узле, без внешней обёртки.
+ */
+const VoteContainer = React.memo(({ type, elementConfig, isVisible, renderElement }) => {
+    const { root, body } = useContainerRoot({ elementConfig });
+    const { configured, ...vote } = useVoteContainer(elementConfig);
+    // Без имени атрибута или хотя бы одного источника контейнеру не с чем работать: раньше он
+    // молча возвращал null, и опечатка в конфиге выглядела как «блока просто нет».
+    if (!configured) {
+        return jsxRuntime.jsx(DataSourceError, { name: elementConfig?.templateName ?? exports.ContainerTemplate.Vote });
+    }
+    // Голосования нет, а создавать его посетитель не вправе — показывать нечего. Пустой заголовок
+    // в карточке в этом случае тоже не нужен, поэтому не рисуем и корень.
+    if (!vote.screen)
+        return null;
+    return (jsxRuntime.jsxs(ContainerRoot, { ...root, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { ...body, isColumn: true, children: jsxRuntime.jsx(VoteScreen, { ...vote, screen: vote.screen }) }))] }));
+});
+
 const ExpandableTitle = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, options, templateName, children } = elementConfig || {};
@@ -13249,6 +14042,8 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
             setPreviewIndex(idx);
     }, [items]);
     const handleClosePreview = React.useCallback(() => setPreviewIndex(null), []);
+    const downloadByIndex = useAttachmentDownload(items);
+    const handleDownload = React.useCallback((_image, index) => downloadByIndex(index), [downloadByIndex]);
     const handleShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
     const handleDelete = React.useCallback((link) => {
         persist(items.filter(item => item.link !== link));
@@ -13299,7 +14094,7 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
             setUploading(false);
         }
     }, [api, items, parentResourceId, persist]);
-    return (jsxRuntime.jsxs(AttachmentsContainer, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), jsxRuntime.jsx(AddButton, { accept: fileExtensions, onSelectFiles: uploading ? () => undefined : handleUpload, onSelectFromCatalog: handleSelectFromCatalog, onSelectFromLink: handleOpenLinkDialog }), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: handleCloseLinkDialog, onSubmit: handleAddByLink }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview }, previewIndex))] }));
+    return (jsxRuntime.jsxs(AttachmentsContainer, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, ...bgHost, children: [jsxRuntime.jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), jsxRuntime.jsx(AddButton, { accept: fileExtensions, onSelectFiles: uploading ? () => undefined : handleUpload, onSelectFromCatalog: handleSelectFromCatalog, onSelectFromLink: handleOpenLinkDialog }), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: handleCloseLinkDialog, onSubmit: handleAddByLink }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, onDownload: handleDownload }, previewIndex))] }));
 });
 
 // `ProgressContainer` и `RoundedBackgroundContainer` исторически принимают `InnerContainerProps`
@@ -13353,6 +14148,7 @@ const createContainerComponents = () => ({
     [exports.ContainerTemplate.EditAttachment]: EditAttachmentContainer,
     [exports.ContainerTemplate.Attachment]: AttachmentContainer,
     [exports.ContainerTemplate.EditGroup]: EditGroupContainer,
+    [exports.ContainerTemplate.Vote]: VoteContainer,
     [exports.ContainerTemplate.ContainersGroup]: ContainersGroupContainer,
     [exports.ContainerTemplate.GridRow]: GridRowContainer,
     [exports.ContainerTemplate.StructuredData]: StructuredDataContainer,
@@ -13388,6 +14184,7 @@ const ROOT_OWNING_TEMPLATES = new Set([
     exports.ContainerTemplate.StructuredData,
     exports.ContainerTemplate.Task,
     exports.ContainerTemplate.Upload,
+    exports.ContainerTemplate.Vote,
 ]);
 let cachedContainerComponents = null;
 const getContainerComponents = () => {
@@ -18695,6 +19492,7 @@ exports.TopContainerButtons = TopContainerButtons;
 exports.TwoColumnContainer = TwoColumnContainer;
 exports.UploadContainer = UploadContainer;
 exports.VIEW_MODES = VIEW_MODES;
+exports.VoteContainer = VoteContainer;
 exports.ZOOM_FILTER_NAME = ZOOM_FILTER_NAME;
 exports.addDataSource = addDataSource;
 exports.addDataSources = addDataSources;
@@ -18854,6 +19652,7 @@ exports.transparentizeColor = transparentizeColor;
 exports.updateDataSource = updateDataSource;
 exports.useAfterSave = useAfterSave;
 exports.useAppHeight = useAppHeight;
+exports.useAttachmentDownload = useAttachmentDownload;
 exports.useAttachmentItems = useAttachmentItems;
 exports.useAttachmentPreviewImages = useAttachmentPreviewImages;
 exports.useAutoCompleteControl = useAutoCompleteControl;