@sequent-org/moodboard 1.4.26 → 1.4.27

package/src/ui/chat/icons.js

@@ -0,0 +1,113 @@
+/**
+ * Inline SVG-иконки для чата.
+ *
+ * Одна ответственность: возвращать строки SVG для подстановки в innerHTML.
+ * Без зависимостей. Стиль — outline 1.5, цвет берётся из currentColor.
+ */
+
+const SIZE = 16;
+
+function svg(content) {
+    return `<svg class="moodboard-chat__pill-icon" width="${SIZE}" height="${SIZE}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${content}</svg>`;
+}
+
+/**
+ * Генерирует SVG-иконку формата для сетки выбора соотношения сторон.
+ * viewBox="0 0 25 24" — оригинальный из ratio.svg.
+ * @param {number} x — смещение прямоугольника по X
+ * @param {boolean} rotate — повернуть на 90° (для альбомных форматов)
+ * @param {boolean} isAuto — добавить букву «A» (для Auto)
+ * @param {number} width — ширина прямоугольника формата
+ */
+function ratioSvgIcon(x, rotate, isAuto, width = 14.65, vbWidth = 25) {
+    const transform = rotate ? ' transform="rotate(90 12.5 12)"' : '';
+    const rect = `<rect x="${x}" y="2.675" width="${width}" height="18.65" rx="2.325" stroke="currentColor" stroke-width="1.35"${transform}/>`;
+    const letter = isAuto
+        ? `<path fill="currentColor" d="m8.747 16 3.072-8.52h1.788L16.679 16h-1.512l-.744-2.112h-3.42L10.259 16zm2.688-3.372h2.556l-1.272-3.744z"/>`
+        : '';
+    return `<svg class="moodboard-chat__ratio-icon" width="${vbWidth}" height="24" viewBox="0 0 ${vbWidth} 24" fill="none" xmlns="http://www.w3.org/2000/svg">${rect}${letter}</svg>`;
+}
+
+const IMAGE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M9.28 1c.886 0 1.588-.001 2.152.045.57.047 1.053.145 1.494.37a3.8 3.8 0 0 1 1.66 1.66c.225.44.322.924.37 1.494C15 5.133 15 5.834 15 6.72v2.56c0 .886 0 1.588-.046 2.152-.046.57-.145 1.053-.37 1.494a3.8 3.8 0 0 1-1.66 1.66c-.44.224-.923.322-1.493.37C10.868 15 10.166 15 9.28 15H6.72c-.885 0-1.586 0-2.15-.046-.57-.046-1.054-.144-1.495-.369a3.8 3.8 0 0 1-1.66-1.66c-.225-.441-.322-.924-.37-1.494-.045-.564-.044-1.266-.044-2.152V6.72c0-.885-.001-1.586.045-2.15.047-.57.144-1.054.369-1.495a3.8 3.8 0 0 1 1.66-1.66c.441-.224.925-.322 1.495-.37C5.134 1 5.835 1 6.72 1zm1.268 7.117a1.8 1.8 0 0 0-.985.04c-.15.049-.314.138-.557.326-.25.193-.546.46-.974.845l-4.561 4.106q.072.044.15.083c.243.124.55.2 1.047.24.503.042 1.147.043 2.053.043h2.56c.905 0 1.549-.001 2.052-.042.496-.04.804-.117 1.048-.241.489-.25.887-.648 1.137-1.137.123-.244.2-.552.24-1.048.022-.264.032-.566.037-.925l-1.627-1.244a19 19 0 0 0-1.04-.765c-.256-.167-.427-.244-.58-.28M6.72 2.2c-.906 0-1.55.001-2.053.042-.496.04-.804.118-1.048.242-.489.25-.886.647-1.136 1.136-.124.244-.201.552-.242 1.048-.04.503-.042 1.147-.042 2.053v2.56c0 .905.001 1.549.042 2.052.04.496.118.804.242 1.048a3 3 0 0 0 .123.215L7.23 8.437c.415-.374.75-.676 1.043-.903.3-.23.587-.409.917-.517a3 3 0 0 1 1.64-.067c.339.082.64.237.956.444.31.202.668.477 1.111.816l.905.691V6.72c0-.906-.001-1.55-.042-2.053-.04-.496-.117-.804-.241-1.048a2.6 2.6 0 0 0-1.137-1.136c-.244-.124-.552-.201-1.048-.242-.503-.04-1.147-.042-2.053-.042zM5.3 4a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6"/></svg>`;
+
+/** public/icons/video.svg — 14×14 для пункта меню «Видео» */
+const VIDEO_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 122.88 122.88" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.93,0,61.44,27.51,61.44,61.44s-27.51,61.44-61.44,61.44S0,95.37,0,61.44S27.51,0,61.44,0L61.44,0z M83.31,65.24c3.13-2.02,3.12-4.27,0-6.06L50.98,40.6c-2.55-1.6-5.21-0.66-5.14,2.67l0.1,37.55c0.22,3.61,2.28,4.6,5.32,2.93 L83.31,65.24L83.31,65.24z M61.44,12.48c27.04,0,48.96,21.92,48.96,48.96c0,27.04-21.92,48.96-48.96,48.96S12.48,88.48,12.48,61.44 C12.48,34.4,34.4,12.48,61.44,12.48L61.44,12.48z"/></svg>`;
+
+/** public/icons/attachments-light.svg — кнопка вложений в composer */
+const ATTACHMENTS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="m4.773 8.557 3.19-3.189a.603.603 0 0 1 .851.852L5.625 9.41A.9.9 0 0 0 6.9 10.682l4.666-4.666a2.404 2.404 0 1 0-3.4-3.4L3.383 7.4a3.907 3.907 0 0 0 5.525 5.525l2.243-2.242a.602.602 0 0 1 .851.851L9.76 13.777a5.112 5.112 0 1 1-7.23-7.23l4.783-4.782a3.61 3.61 0 0 1 5.104 5.104L7.75 11.535a2.106 2.106 0 0 1-2.978-2.978"/></svg>`;
+
+/** Кнопка отправки в composer */
+const SEND_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M7.453 1.204a.87.87 0 0 1 1.093 0l.066.06 4.962 4.961a.6.6 0 0 1-.849.849L8.6 2.949v11.45a.6.6 0 0 1-1.199 0V2.946L3.273 7.074a.6.6 0 1 1-.847-.849l4.96-4.962z"/></svg>`;
+
+/** public/icons/enhance-prompt.svg */
+const ENHANCE_PROMPT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 11.771a.6.6 0 1 1 0 1.2L1.6 13a.6.6 0 0 1 0-1.2zm2-4.37A.6.6 0 1 1 10 8.6H1.6a.6.6 0 1 1 0-1.2zM14.4 3a.6.6 0 1 1 0 1.2H1.6a.6.6 0 1 1 0-1.2zm-1.101 5.5a.346.346 0 0 0-.643 0l-.174.417a2.98 2.98 0 0 1-1.538 1.59l-.489.218a.362.362 0 0 0 0 .658l.519.231c.675.3 1.216.85 1.516 1.538l.168.387a.347.347 0 0 0 .639 0l.168-.387c.3-.689.841-1.237 1.516-1.538l.519-.231a.362.362 0 0 0 0-.658l-.49-.218a3 3 0 0 1-1.538-1.59z"/></svg>`;
+
+/** public/icons/extend-promt-field.svg */
+const EXTEND_PROMPT_FIELD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M9.696 7.151a.599.599 0 1 1-.847-.847L12.55 2.6H9.272a.6.6 0 0 1 0-1.2H14a.6.6 0 0 1 .6.599v4.728a.6.6 0 1 1-1.2 0V3.449zM1.4 9.272a.6.6 0 1 1 1.2 0v3.28l3.704-3.703a.599.599 0 1 1 .847.847L3.45 13.4h3.279a.6.6 0 0 1 0 1.2H2A.6.6 0 0 1 1.4 14z"/></svg>`;
+
+export const ICONS = {
+    image: IMAGE_ICON,
+    video: VIDEO_ICON,
+    bolt: svg('<path d="M13 3L4 14h6l-1 7 9-11h-6l1-7z"/>'),
+    model: svg('<circle cx="12" cy="9" r="4"/><path d="M5 21c1-4 4-6 7-6s6 2 7 6"/>'),
+    plus: svg('<path d="M12 5v14M5 12h14"/>'),
+    ratio: svg('<rect x="6" y="3" width="12" height="18" rx="2"/>'),
+    ratioAuto: svg('<rect x="6" y="3" width="12" height="18" rx="2"/><text x="12" y="15" text-anchor="middle" font-size="7" font-family="Arial,sans-serif" stroke="none" fill="currentColor">A</text>'),
+    count: svg('<rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="8" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/><rect x="13" y="13" width="8" height="8" rx="1.5"/>'),
+    palette: svg('<path d="M12 3a9 9 0 0 0 0 18c1.7 0 2-1 2-2 0-1.5 1-2 2-2h2a3 3 0 0 0 3-3c0-5-4-9-9-9z"/><circle cx="7.5" cy="11" r="1"/><circle cx="11" cy="7" r="1"/><circle cx="15" cy="7" r="1"/><circle cx="17.5" cy="11" r="1"/>'),
+    attach: ATTACHMENTS_ICON,
+    send: SEND_ICON,
+    enhancePrompt: ENHANCE_PROMPT_ICON,
+    extendPromptField: EXTEND_PROMPT_FIELD_ICON,
+    sliders: svg('<path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/>'),
+    chevronDown: svg('<path d="M6 9l6 6 6-6"/>'),
+    trash: svg('<path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M6 6l1 14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-14"/>'),
+    close: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.575 12.726a.6.6 0 0 1-.849.849zm-.849-10.3a.6.6 0 0 1 .849.848L8.848 7.999l4.727 4.727-.425.424-.424.425-4.727-4.727-4.725 4.727a.6.6 0 0 1-.848-.849l4.726-4.727-4.726-4.725a.599.599 0 1 1 .848-.848l4.725 4.726z"></path></svg>`,
+    sparkles: svg('<path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/>')
+};
+
+/**
+ * Inline SVG-иконки количества изображений.
+ * Активные квадраты — currentColor (полная непрозрачность),
+ * неактивные — currentColor с fill-opacity 0.67.
+ */
+const COUNT_AUTO_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="m8.684 15 2.304-6.39h1.62L14.912 15H13.49l-.468-1.359h-2.457L10.097 15zm2.268-2.484h1.692l-.846-2.466zM4.4 8.6c.41 0 .754 0 1.035.023.287.024.56.074.819.206.395.201.717.523.918.918.132.259.182.532.206.82.023.28.022.624.022 1.034V12c0 .41 0 .754-.022 1.034-.024.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.259.131-.532.182-.82.205C5.155 15 4.81 15 4.4 15h-.399c-.41 0-.754 0-1.034-.023-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.258-.182-.532-.206-.819-.022-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.075-.56.206-.819.202-.395.523-.717.918-.918.26-.132.533-.183.82-.206.28-.023.624-.022 1.034-.022zm-.399 1.2c-.43 0-.717 0-.937.018-.212.018-.31.05-.372.08a.9.9 0 0 0-.393.394c-.032.062-.063.16-.08.372-.018.22-.019.507-.019.937V12c0 .43 0 .716.019.937.017.212.048.31.08.372.086.169.224.307.393.393.062.031.16.063.372.08.22.018.508.018.937.018h.4c.429 0 .716 0 .936-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .394-.393c.031-.062.062-.16.08-.372.018-.22.017-.507.017-.937v-.4c0-.429 0-.716-.017-.936-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.394c-.062-.031-.16-.062-.372-.08C5.117 9.8 4.83 9.8 4.4 9.8zM12 1c.41 0 .754 0 1.034.022.287.024.56.075.82.207.395.2.716.522.918.917.131.26.182.533.205.82C15 3.246 15 3.59 15 4v.4c0 .41 0 .753-.023 1.034-.023.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.819.206-.28.023-.624.022-1.034.022h-.4c-.41 0-.753 0-1.034-.022-.287-.024-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.26-.183-.532-.206-.82-.023-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.074-.56.206-.82.201-.395.523-.716.918-.917.26-.132.532-.183.82-.207C10.846 1 11.19 1 11.6 1zm-.4 1.2c-.43 0-.716 0-.936.018-.213.017-.31.048-.372.08a.9.9 0 0 0-.394.393c-.031.062-.062.16-.08.372C9.8 3.283 9.8 3.57 9.8 4v.4c0 .43 0 .716.018.936.018.213.049.31.08.372.087.17.225.307.394.394.062.031.16.062.372.08.22.018.507.017.937.017H12c.43 0 .716 0 .937-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .393-.394c.031-.062.063-.16.08-.372.018-.22.018-.507.018-.937V4c0-.43 0-.717-.018-.937-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019zM4.4 1c.41 0 .754 0 1.035.022.287.024.56.075.819.207.395.2.717.522.918.917.132.26.182.533.206.82.023.28.022.624.022 1.034v.4c0 .41 0 .753-.022 1.034-.024.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.82.206-.28.023-.624.022-1.034.022h-.399c-.41 0-.754 0-1.034-.022-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.26-.182-.532-.206-.82-.022-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.075-.56.206-.82.202-.394.523-.716.918-.917.26-.132.533-.183.82-.207C3.247 1 3.59 1 4 1zm-.399 1.2c-.43 0-.717 0-.937.018-.212.017-.31.049-.372.08a.9.9 0 0 0-.393.393c-.032.062-.063.16-.08.372C2.2 3.283 2.2 3.57 2.2 4v.4c0 .43 0 .716.019.936.017.213.048.31.08.372.086.17.224.307.393.394.062.03.16.062.372.08.22.018.507.017.937.017h.4c.429 0 .716 0 .936-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .394-.394c.03-.062.062-.16.08-.372.018-.22.017-.507.017-.937V4c0-.43 0-.717-.017-.937-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019z"/></svg>`;
+
+const COUNT_1_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" fill-opacity="0.67" d="M12 8.6c.41 0 .754 0 1.034.023.287.024.56.074.82.206.395.201.716.523.918.918.131.26.182.532.205.82.023.28.023.624.023 1.034V12c0 .41 0 .754-.023 1.034-.023.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.258.131-.532.182-.819.205C12.754 15 12.41 15 12 15h-.4c-.41 0-.753 0-1.034-.023-.287-.023-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.258-.182-.532-.206-.819-.023-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.074-.56.206-.819.201-.395.523-.717.918-.918.26-.132.532-.182.82-.206.28-.023.624-.022 1.034-.022zm-.4 1.2c-.43 0-.716 0-.936.018-.213.018-.31.049-.372.08a.9.9 0 0 0-.394.394c-.031.062-.062.16-.08.372-.018.22-.018.507-.018.937V12c0 .43 0 .716.018.937.018.212.049.31.08.372.087.169.225.307.394.393.062.031.16.063.372.08.22.018.507.018.937.018H12c.43 0 .716 0 .937-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .393-.393c.032-.062.063-.16.08-.372.018-.22.018-.507.018-.937v-.4c0-.43 0-.716-.018-.936-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.394c-.062-.031-.16-.062-.372-.08C12.717 9.8 12.43 9.8 12 9.8zM4.4 8.6c.41 0 .754 0 1.035.023.287.024.56.074.819.206.395.201.717.523.918.918.132.259.182.532.206.82.023.28.022.624.022 1.034V12c0 .41 0 .754-.022 1.034-.024.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.259.131-.532.182-.82.205C5.155 15 4.81 15 4.4 15h-.399c-.41 0-.754 0-1.034-.023-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.258-.182-.532-.206-.819-.022-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.075-.56.206-.819.202-.395.523-.717.918-.918.26-.132.533-.183.82-.206.28-.023.624-.022 1.034-.022zm-.399 1.2c-.43 0-.717 0-.937.018-.212.018-.31.05-.372.08a.9.9 0 0 0-.393.394c-.032.062-.063.16-.08.372-.018.22-.019.507-.019.937V12c0 .43 0 .716.019.937.017.212.048.31.08.372.086.169.224.307.393.393.062.031.16.063.372.08.22.018.508.018.937.018h.4c.429 0 .716 0 .936-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .394-.393c.031-.062.062-.16.08-.372.018-.22.017-.507.017-.937v-.4c0-.429 0-.716-.017-.936-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.394c-.062-.031-.16-.062-.372-.08C5.117 9.8 4.83 9.8 4.4 9.8zM12 1c.41 0 .754 0 1.034.022.287.024.56.075.82.207.395.2.716.522.918.917.131.26.182.533.205.82C15 3.246 15 3.59 15 4v.4c0 .41 0 .753-.023 1.034-.023.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.819.206-.28.023-.624.022-1.034.022h-.4c-.41 0-.753 0-1.034-.022-.287-.024-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.26-.183-.532-.206-.82-.023-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.074-.56.206-.82.201-.395.523-.716.918-.917.26-.132.532-.183.82-.207C10.846 1 11.19 1 11.6 1zm-.4 1.2c-.43 0-.716 0-.936.018-.213.017-.31.048-.372.08a.9.9 0 0 0-.394.393c-.031.062-.062.16-.08.372C9.8 3.283 9.8 3.57 9.8 4v.4c0 .43 0 .716.018.936.018.213.049.31.08.372.087.17.225.307.394.394.062.031.16.062.372.08.22.018.507.017.937.017H12c.43 0 .716 0 .937-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .393-.394c.031-.062.063-.16.08-.372.018-.22.018-.507.018-.937V4c0-.43 0-.717-.018-.937-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019z"></path><path fill="currentColor" d="M4.4 1c.41 0 .754 0 1.035.022.287.024.56.075.819.207.395.2.717.522.918.917.132.26.182.533.206.82.023.28.022.624.022 1.034v.4c0 .41 0 .753-.022 1.034-.024.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.82.206-.28.023-.624.022-1.034.022h-.399c-.41 0-.754 0-1.034-.022-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.26-.182-.532-.206-.82-.022-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.075-.56.206-.82.202-.394.523-.716.918-.917.26-.132.533-.183.82-.207C3.247 1 3.59 1 4 1zm-.399 1.2c-.43 0-.717 0-.937.018-.212.017-.31.049-.372.08a.9.9 0 0 0-.393.393c-.032.062-.063.16-.08.372C2.2 3.283 2.2 3.57 2.2 4v.4c0 .43 0 .716.019.936.017.213.048.31.08.372.086.17.224.307.393.394.062.03.16.062.372.08.22.018.507.017.937.017h.4c.429 0 .716 0 .936-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .394-.394c.03-.062.062-.16.08-.372.018-.22.017-.507.017-.937V4c0-.43 0-.717-.017-.937-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019z"></path></svg>`;
+
+const COUNT_2_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" fill-opacity="0.67" d="M12 8.6c.41 0 .754 0 1.034.023.287.024.56.074.82.206.395.201.716.523.918.918.131.26.182.532.205.82.023.28.023.624.023 1.034V12c0 .41 0 .754-.023 1.034-.023.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.258.131-.532.182-.819.205C12.754 15 12.41 15 12 15h-.4c-.41 0-.753 0-1.034-.023-.287-.023-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.258-.182-.532-.206-.819-.023-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.074-.56.206-.819.201-.395.523-.717.918-.918.26-.132.532-.182.82-.206.28-.023.624-.022 1.034-.022zm-.4 1.2c-.43 0-.716 0-.936.018-.213.018-.31.049-.372.08a.9.9 0 0 0-.394.394c-.031.062-.062.16-.08.372-.018.22-.018.507-.018.937V12c0 .43 0 .716.018.937.018.212.049.31.08.372.087.169.225.307.394.393.062.031.16.063.372.08.22.018.507.018.937.018H12c.43 0 .716 0 .937-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .393-.393c.032-.062.063-.16.08-.372.018-.22.018-.507.018-.937v-.4c0-.43 0-.716-.018-.936-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.394c-.062-.031-.16-.062-.372-.08C12.717 9.8 12.43 9.8 12 9.8zM4.4 8.6c.41 0 .754 0 1.035.023.287.024.56.074.819.206.395.201.717.523.918.918.132.259.182.532.206.82.023.28.022.624.022 1.034V12c0 .41 0 .754-.022 1.034-.024.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.259.131-.532.182-.82.205C5.155 15 4.81 15 4.4 15h-.399c-.41 0-.754 0-1.034-.023-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.258-.182-.532-.206-.819-.022-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.075-.56.206-.819.202-.395.523-.717.918-.918.26-.132.533-.183.82-.206.28-.023.624-.022 1.034-.022zm-.399 1.2c-.43 0-.717 0-.937.018-.212.018-.31.05-.372.08a.9.9 0 0 0-.393.394c-.032.062-.063.16-.08.372-.018.22-.019.507-.019.937V12c0 .43 0 .716.019.937.017.212.048.31.08.372.086.169.224.307.393.393.062.031.16.063.372.08.22.018.508.018.937.018h.4c.429 0 .716 0 .936-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .394-.393c.031-.062.062-.16.08-.372.018-.22.017-.507.017-.937v-.4c0-.429 0-.716-.017-.936-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.394c-.062-.031-.16-.062-.372-.08C5.117 9.8 4.83 9.8 4.4 9.8z"></path><path fill="currentColor" d="M12 1c.41 0 .754 0 1.034.022.287.024.56.075.82.207.395.2.716.522.918.917.131.26.182.533.205.82C15 3.246 15 3.59 15 4v.4c0 .41 0 .753-.023 1.034-.023.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.819.206-.28.023-.624.022-1.034.022h-.4c-.41 0-.753 0-1.034-.022-.287-.024-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.26-.183-.532-.206-.82-.023-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.074-.56.206-.82.201-.395.523-.716.918-.917.26-.132.532-.183.82-.207C10.846 1 11.19 1 11.6 1zm-.4 1.2c-.43 0-.716 0-.936.018-.213.017-.31.048-.372.08a.9.9 0 0 0-.394.393c-.031.062-.062.16-.08.372C9.8 3.283 9.8 3.57 9.8 4v.4c0 .43 0 .716.018.936.018.213.049.31.08.372.087.17.225.307.394.394.062.031.16.062.372.08.22.018.507.017.937.017H12c.43 0 .716 0 .937-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .393-.394c.031-.062.063-.16.08-.372.018-.22.018-.507.018-.937V4c0-.43 0-.717-.018-.937-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019zM4.4 1c.41 0 .754 0 1.035.022.287.024.56.075.819.207.395.2.717.522.918.917.132.26.182.533.206.82.023.28.022.624.022 1.034v.4c0 .41 0 .753-.022 1.034-.024.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.82.206-.28.023-.624.022-1.034.022h-.399c-.41 0-.754 0-1.034-.022-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.26-.182-.532-.206-.82-.022-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.075-.56.206-.82.202-.394.523-.716.918-.917.26-.132.533-.183.82-.207C3.247 1 3.59 1 4 1zm-.399 1.2c-.43 0-.717 0-.937.018-.212.017-.31.049-.372.08a.9.9 0 0 0-.393.393c-.032.062-.063.16-.08.372C2.2 3.283 2.2 3.57 2.2 4v.4c0 .43 0 .716.019.936.017.213.048.31.08.372.086.17.224.307.393.394.062.03.16.062.372.08.22.018.507.017.937.017h.4c.429 0 .716 0 .936-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .394-.394c.03-.062.062-.16.08-.372.018-.22.017-.507.017-.937V4c0-.43 0-.717-.017-.937-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019z"></path></svg>`;
+
+const COUNT_3_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" fill-opacity="0.67" d="M12 8.6c.41 0 .754 0 1.034.023.287.024.56.074.82.206.395.201.716.523.918.918.131.26.182.532.205.82.023.28.023.624.023 1.034V12c0 .41 0 .754-.023 1.034-.023.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.258.131-.532.182-.819.205C12.754 15 12.41 15 12 15h-.4c-.41 0-.753 0-1.034-.023-.287-.023-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.258-.182-.532-.206-.819-.023-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.074-.56.206-.819.201-.395.523-.717.918-.918.26-.132.532-.182.82-.206.28-.023.624-.022 1.034-.022zm-.4 1.2c-.43 0-.716 0-.936.018-.213.018-.31.049-.372.08a.9.9 0 0 0-.394.394c-.031.062-.062.16-.08.372-.018.22-.018.507-.018.937V12c0 .43 0 .716.018.937.018.212.049.31.08.372.087.169.225.307.394.393.062.031.16.063.372.08.22.018.507.018.937.018H12c.43 0 .716 0 .937-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .393-.393c.032-.062.063-.16.08-.372.018-.22.018-.507.018-.937v-.4c0-.43 0-.716-.018-.936-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.394c-.062-.031-.16-.062-.372-.08C12.717 9.8 12.43 9.8 12 9.8z"></path><path fill="currentColor" d="M4.4 8.6c.41 0 .754 0 1.035.023.287.024.56.074.819.206.395.201.717.523.918.918.132.259.182.532.206.82.023.28.022.624.022 1.034V12c0 .41 0 .754-.022 1.034-.024.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.259.131-.532.182-.82.205C5.155 15 4.81 15 4.4 15h-.399c-.41 0-.754 0-1.034-.023-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.258-.182-.532-.206-.819-.022-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.075-.56.206-.819.202-.395.523-.717.918-.918.26-.132.533-.183.82-.206.28-.023.624-.022 1.034-.022zm-.399 1.2c-.43 0-.717 0-.937.018-.212.018-.31.05-.372.08a.9.9 0 0 0-.393.394c-.032.062-.063.16-.08.372-.018.22-.019.507-.019.937V12c0 .43 0 .716.019.937.017.212.048.31.08.372.086.169.224.307.393.393.062.031.16.063.372.08.22.018.508.018.937.018h.4c.429 0 .716 0 .936-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .394-.393c.031-.062.062-.16.08-.372.018-.22.017-.507.017-.937v-.4c0-.429 0-.716-.017-.936-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.394c-.062-.031-.16-.062-.372-.08C5.117 9.8 4.83 9.8 4.4 9.8zM12 1c.41 0 .754 0 1.034.022.287.024.56.075.82.207.395.2.716.522.918.917.131.26.182.533.205.82C15 3.246 15 3.59 15 4v.4c0 .41 0 .753-.023 1.034-.023.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.819.206-.28.023-.624.022-1.034.022h-.4c-.41 0-.753 0-1.034-.022-.287-.024-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.26-.183-.532-.206-.82-.023-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.074-.56.206-.82.201-.395.523-.716.918-.917.26-.132.532-.183.82-.207C10.846 1 11.19 1 11.6 1zm-.4 1.2c-.43 0-.716 0-.936.018-.213.017-.31.048-.372.08a.9.9 0 0 0-.394.393c-.031.062-.062.16-.08.372C9.8 3.283 9.8 3.57 9.8 4v.4c0 .43 0 .716.018.936.018.213.049.31.08.372.087.17.225.307.394.394.062.031.16.062.372.08.22.018.507.017.937.017H12c.43 0 .716 0 .937-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .393-.394c.031-.062.063-.16.08-.372.018-.22.018-.507.018-.937V4c0-.43 0-.717-.018-.937-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019zM4.4 1c.41 0 .754 0 1.035.022.287.024.56.075.819.207.395.2.717.522.918.917.132.26.182.533.206.82.023.28.022.624.022 1.034v.4c0 .41 0 .753-.022 1.034-.024.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.82.206-.28.023-.624.022-1.034.022h-.399c-.41 0-.754 0-1.034-.022-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.26-.182-.532-.206-.82-.022-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.075-.56.206-.82.202-.394.523-.716.918-.917.26-.132.533-.183.82-.207C3.247 1 3.59 1 4 1zm-.399 1.2c-.43 0-.717 0-.937.018-.212.017-.31.049-.372.08a.9.9 0 0 0-.393.393c-.032.062-.063.16-.08.372C2.2 3.283 2.2 3.57 2.2 4v.4c0 .43 0 .716.019.936.017.213.048.31.08.372.086.17.224.307.393.394.062.03.16.062.372.08.22.018.507.017.937.017h.4c.429 0 .716 0 .936-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .394-.394c.03-.062.062-.16.08-.372.018-.22.017-.507.017-.937V4c0-.43 0-.717-.017-.937-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019z"></path></svg>`;
+
+const COUNT_4_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M12 8.6c.41 0 .754 0 1.034.023.287.024.56.074.82.206.395.201.716.523.918.918.131.26.182.532.205.82.023.28.023.624.023 1.034V12c0 .41 0 .754-.023 1.034-.023.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.258.131-.532.182-.819.205C12.754 15 12.41 15 12 15h-.4c-.41 0-.753 0-1.034-.023-.287-.023-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.258-.182-.532-.206-.819-.023-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.074-.56.206-.819.201-.395.523-.717.918-.918.26-.132.532-.182.82-.206.28-.023.624-.022 1.034-.022zm-.4 1.2c-.43 0-.716 0-.936.018-.213.018-.31.049-.372.08a.9.9 0 0 0-.394.394c-.031.062-.062.16-.08.372-.018.22-.018.507-.018.937V12c0 .43 0 .716.018.937.018.212.049.31.08.372.087.169.225.307.394.393.062.031.16.063.372.08.22.018.507.018.937.018H12c.43 0 .716 0 .937-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .393-.393c.032-.062.063-.16.08-.372.018-.22.018-.507.018-.937v-.4c0-.43 0-.716-.018-.936-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.394c-.062-.031-.16-.062-.372-.08C12.717 9.8 12.43 9.8 12 9.8zM4.4 8.6c.41 0 .754 0 1.035.023.287.024.56.074.819.206.395.201.717.523.918.918.132.259.182.532.206.82.023.28.022.624.022 1.034V12c0 .41 0 .754-.022 1.034-.024.287-.074.56-.206.82a2.1 2.1 0 0 1-.918.918c-.259.131-.532.182-.82.205C5.155 15 4.81 15 4.4 15h-.399c-.41 0-.754 0-1.034-.023-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.258-.182-.532-.206-.819-.022-.28-.022-.624-.022-1.034v-.4c0-.41 0-.753.022-1.034.024-.287.075-.56.206-.819.202-.395.523-.717.918-.918.26-.132.533-.183.82-.206.28-.023.624-.022 1.034-.022zm-.399 1.2c-.43 0-.717 0-.937.018-.212.018-.31.05-.372.08a.9.9 0 0 0-.393.394c-.032.062-.063.16-.08.372-.018.22-.019.507-.019.937V12c0 .43 0 .716.019.937.017.212.048.31.08.372.086.169.224.307.393.393.062.031.16.063.372.08.22.018.508.018.937.018h.4c.429 0 .716 0 .936-.018.212-.017.31-.048.372-.08a.9.9 0 0 0 .394-.393c.031-.062.062-.16.08-.372.018-.22.017-.507.017-.937v-.4c0-.429 0-.716-.017-.936-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.394c-.062-.031-.16-.062-.372-.08C5.117 9.8 4.83 9.8 4.4 9.8zM12 1c.41 0 .754 0 1.034.022.287.024.56.075.82.207.395.2.716.522.918.917.131.26.182.533.205.82C15 3.246 15 3.59 15 4v.4c0 .41 0 .753-.023 1.034-.023.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.819.206-.28.023-.624.022-1.034.022h-.4c-.41 0-.753 0-1.034-.022-.287-.024-.56-.074-.819-.206a2.1 2.1 0 0 1-.918-.918c-.132-.26-.183-.532-.206-.82-.023-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.074-.56.206-.82.201-.395.523-.716.918-.917.26-.132.532-.183.82-.207C10.846 1 11.19 1 11.6 1zm-.4 1.2c-.43 0-.716 0-.936.018-.213.017-.31.048-.372.08a.9.9 0 0 0-.394.393c-.031.062-.062.16-.08.372C9.8 3.283 9.8 3.57 9.8 4v.4c0 .43 0 .716.018.936.018.213.049.31.08.372.087.17.225.307.394.394.062.031.16.062.372.08.22.018.507.017.937.017H12c.43 0 .716 0 .937-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .393-.394c.031-.062.063-.16.08-.372.018-.22.018-.507.018-.937V4c0-.43 0-.717-.018-.937-.017-.212-.049-.31-.08-.372a.9.9 0 0 0-.393-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019zM4.4 1c.41 0 .754 0 1.035.022.287.024.56.075.819.207.395.2.717.522.918.917.132.26.182.533.206.82.023.28.022.624.022 1.034v.4c0 .41 0 .753-.022 1.034-.024.287-.074.56-.206.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.182-.82.206-.28.023-.624.022-1.034.022h-.399c-.41 0-.754 0-1.034-.022-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.918-.918c-.131-.26-.182-.532-.206-.82-.022-.28-.022-.624-.022-1.034V4c0-.41 0-.754.022-1.034.024-.287.075-.56.206-.82.202-.394.523-.716.918-.917.26-.132.533-.183.82-.207C3.247 1 3.59 1 4 1zm-.399 1.2c-.43 0-.717 0-.937.018-.212.017-.31.049-.372.08a.9.9 0 0 0-.393.393c-.032.062-.063.16-.08.372C2.2 3.283 2.2 3.57 2.2 4v.4c0 .43 0 .716.019.936.017.213.048.31.08.372.086.17.224.307.393.394.062.03.16.062.372.08.22.018.507.017.937.017h.4c.429 0 .716 0 .936-.017.212-.018.31-.049.372-.08a.9.9 0 0 0 .394-.394c.03-.062.062-.16.08-.372.018-.22.017-.507.017-.937V4c0-.43 0-.717-.017-.937-.018-.212-.05-.31-.08-.372a.9.9 0 0 0-.394-.393c-.062-.032-.16-.063-.372-.08-.22-.018-.507-.019-.937-.019z"></path></svg>`;
+
+export const COUNT_ICONS = {
+    auto: COUNT_AUTO_ICON,
+    1:    COUNT_1_ICON,
+    2:    COUNT_2_ICON,
+    3:    COUNT_3_ICON,
+    4:    COUNT_4_ICON,
+};
+
+/**
+ * Иконки соотношений сторон для сетки выбора формата.
+ * Порядок соответствует строкам грида: портрет (7 шт.), затем альбом+авто (7 шт.).
+ */
+export const RATIO_ICONS = {
+    /* портретные */
+    '1:1':   ratioSvgIcon(3.389, false, false, 18.65),
+    '4:5':   ratioSvgIcon(4.818, false),
+    '3:4':   ratioSvgIcon(5.746, false, false, 13.65),
+    '10:14': ratioSvgIcon(5.532, false, false, 12.936, 24),
+    '2:3':   ratioSvgIcon(6.437, false, false, 11.983),
+    '9:16':  ratioSvgIcon(7.907, false, false, 9.9),
+    '1:2':   ratioSvgIcon(7.961, false, false, 8.65),
+    /* авто + альбомные (повёрнутые портреты) */
+    'auto':  ratioSvgIcon(3.389, false, true, 18.65),
+    '5:4':   ratioSvgIcon(4.818, true),
+    '4:3':   ratioSvgIcon(5.746, true, false, 13.65),
+    '14:10': ratioSvgIcon(5.532, true, false, 12.936),
+    '3:2':   ratioSvgIcon(6.437, true, false, 11.983),
+    '16:9':  ratioSvgIcon(7.907, true, false, 9.9),
+    '2:1':   ratioSvgIcon(7.961, true, false, 8.65),
+};