poe-svelte-ui-lib 1.28.2 → 1.28.4

package/dist/Map/Map.svelte

@@ -17,12 +17,27 @@
   }: IMapProps = $props()
 
   /* Мастер-цвет (тот же bg-* из optionsStore.COLOR_OPTIONS, что и у остальных примитивов) —
-     проявляется как акцентная рамка карты, т.к. заливать фон самой карты цветом нет смысла. */
-  const roleBorderClass = $derived.by(() => {
+     красить саму карту цветом смысла нет (это базовая карта MapLibre), поэтому проявляется на
+     ФОНЕ наших собственных оверлеев поверх неё: панели управления (CustomControl) и карточки
+     устройства (Popup) — см. roleBgClass ниже, применяется прямо в разметке. */
+  const roleBgClass = $derived.by(() => {
     const role = wrapperClass.match(/bg-(\w+)/)?.[1]
-    /* border-(--border-color) — реальная utility, красящая рамку; border-{role} лишь задаёт
-       переменную --border-color (см. app.css), как и bg-* для --bg-color (см. Button.svelte). */
-    return role && role !== "max" ? `border-2 border-(--border-color) border-${role}` : ""
+    /* bg-(--bg-color) — реальная utility, красящая заливку; bg-{role} лишь задаёт переменную
+       --bg-color (см. app.css), тот же приём, что и в Button.svelte (roleBg/roleClass).
+       text-(--on-accent) — иначе тёмный текст (задуман под белую подложку control'ов MapLibre
+       по умолчанию) нечитаем на цветной заливке. */
+    return role && role !== "max" ? `bg-(--bg-color) bg-${role} text-(--on-accent)` : ""
+  })
+
+  /* Акцентное кольцо вокруг самой карты. Намеренно ring, а не border: border меняет content-box
+     контейнера MapLibre уже ПОСЛЕ монтажа, а сама MapLibre не переотрисовывает canvas при таком
+     ресайзе без явного вызова map.resize() — итог был обрезанный/съехавший рендер при смене
+     цвета. ring — box-shadow, размеры контейнера не меняет, поэтому безопасен. */
+  const roleRingClass = $derived.by(() => {
+    const role = wrapperClass.match(/bg-(\w+)/)?.[1]
+    /* ring-(--border-color) — реальная utility, красящая кольцо; border-{role} лишь задаёт
+       переменную --border-color (см. app.css). */
+    return role && role !== "max" ? `ring-2 ring-inset ring-(--border-color) border-${role}` : ""
   })
 
   interface MapDevice extends IDeviceGNSS {
@@ -146,7 +161,7 @@
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
   <MapLibre
-    class={twMerge("h-[calc(100%-2rem)] min-h-50 overflow-hidden rounded-xl shadow-sm transition duration-200 hover:shadow-md", roleBorderClass)}
+    class={twMerge("h-[calc(100%-2rem)] min-h-50 overflow-hidden rounded-xl shadow-sm transition duration-200 hover:shadow-md", roleRingClass)}
     style={isDarkMode ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json" : "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"}
     zoom={1.5}
     center={{ lat: 30, lng: 0 }}
@@ -157,7 +172,7 @@
     <FullScreenControl />
 
     <CustomControl position="top-left">
-      <div class="flex flex-wrap items-center gap-3 px-2 py-1 text-black">
+      <div class={twMerge("flex flex-wrap items-center gap-3 rounded-lg px-2 py-1 text-black", roleBgClass)}>
         <label class="flex items-center gap-1.5 text-sm font-medium">
           <input type="checkbox" bind:checked={trackEnabled} />
           {$T("constructor.props.map.track")}
@@ -240,7 +255,7 @@
               <h6 class="text-sm leading-none font-bold">{device.DevName}</h6>
             </div>
 
-            <div class="grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg bg-(--container-color) p-2 text-xs">
+            <div class={twMerge("grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg bg-(--container-color) p-2 text-xs", roleBgClass)}>
               <div>
                 <p class="text-[0.6rem] font-semibold tracking-wide uppercase opacity-60">Lat / Lon</p>
                 <p class="font-medium">{device.NavLat.toFixed(5)}, {device.NavLon.toFixed(5)}</p>

package/dist/VideoViewer/VideoViewer.svelte

@@ -20,10 +20,13 @@
   const isRemote = $derived(source === "remote")
 
   /* Мастер-цвет (тот же bg-* из optionsStore.COLOR_OPTIONS, что и у остальных примитивов) —
-     проявляется как акцентная рамка кадра, см. Map.svelte для того же приёма. */
+     проявляется как акцентное кольцо вокруг кадра. Namеренно ring, а не border — border меняет
+     content-box контейнера (см. Map.svelte, где это ломало рендер MapLibre при смене цвета);
+     ring (box-shadow) размеры не меняет, тот же приём здесь для единообразия и на случай
+     будущей смены video/img на что-то более чувствительное к ресайзу контейнера. */
   const roleBorderClass = $derived.by(() => {
     const role = wrapperClass?.match(/bg-(\w+)/)?.[1]
-    return role && role !== "max" ? `border-2 border-(--border-color) border-${role}` : ""
+    return role && role !== "max" ? `ring-2 ring-inset ring-(--border-color) border-${role}` : ""
   })
 
   let videoElement = $state<HTMLVideoElement | null>(null)

package/dist/locales/translations.js

@@ -31,9 +31,9 @@ const translations = {
     "constructor.props.height.medium": ["Средняя", "Medium", "中等"],
     "constructor.props.height.large": ["Большая", "Large", "大"],
     "constructor.props.align.left": ["Слева", "Left", "左"],
-    "constructor.props.align.center": ["По центру", "Center", "居中"],
+    "constructor.props.align.center": ["Центр", "Center", "居中"],
     "constructor.props.align.right": ["Справа", "Right", "右"],
-    "constructor.props.align.justify": ["По ширине", "Justify", "两端对齐"],
+    "constructor.props.align.justify": ["Ширина", "Justify", "两端对齐"],
     "constructor.props.type.main": ["Основной", "Main", "主要"],
     "constructor.props.type.sub": ["Вложенный", "Nested", "嵌套"],
     "constructor.props.type.text": ["Текст", "Text", "文本"],
@@ -49,7 +49,7 @@ const translations = {
     "constructor.props.type.huge": ["L", "L", "L"],
     "constructor.props.type.massive": ["XL", "XL", "XL"],
     "constructor.props.type.select": ["Список", "List", "列表"],
-    "constructor.props.type.buttons": ["Группа кнопок", "Button group", "按钮组"],
+    "constructor.props.type.buttons": ["Кнопки", "Buttons", "按钮组"],
     "constructor.props.type.selectput": ["Список+ввод", "List+input", "列表+输入"],
     "constructor.props.valuetype.text": ["Строка", "String", "字符串"],
     "constructor.props.valuetype.number": ["Число", "Number", "数字"],
@@ -189,9 +189,9 @@ const translations = {
     "constructor.props.divider.type.line": ["Полоса", "Line", "线条"],
     "constructor.props.divider.type.empty": ["Пустота", "Empty", "空白"],
     "constructor.props.divider.anchor": ["Привязка", "Anchor", "对齐位置"],
-    "constructor.props.divider.anchor.top": ["К верху", "To top", "顶部"],
-    "constructor.props.divider.anchor.center": ["По центру", "Center", "居中"],
-    "constructor.props.divider.anchor.bottom": ["К низу", "To bottom", "底部"],
+    "constructor.props.divider.anchor.top": ["Верх", "Top", "顶部"],
+    "constructor.props.divider.anchor.center": ["Центр", "Center", "居中"],
+    "constructor.props.divider.anchor.bottom": ["Низ", "Bottom", "底部"],
     "constructor.props.divider.width": ["Толщина полосы", "Line width", "线条粗细"],
     "constructor.props.disabled": ["Отключить", "Disable", "禁用"],
     "constructor.props.readonly": ["Только чтение", "Read only", "只读"],
@@ -253,8 +253,8 @@ const translations = {
     "constructor.props.showSelect": ["Выбор источника", "Source selection", "来源选择"],
     "constructor.props.widget.mode": ["Зацикленный", "Looped", "循环"],
     "constructor.props.table.type": ["Тип таблицы", "Table type", "表格类型"],
-    "constructor.props.table.type.table": ["Статическая таблица", "Static table", "静态表格"],
-    "constructor.props.table.type.logger": ["Таблица для логов", "Log table", "日志表格"],
+    "constructor.props.table.type.table": ["Статическая", "Static", "静态表格"],
+    "constructor.props.table.type.logger": ["Логи", "Logs", "日志表格"],
     "constructor.props.table.columns": ["Колонки таблицы", "Table columns", "表格列"],
     "constructor.props.table.text.key": ["Ключ текста", "Text key", "文本键"],
     "constructor.props.table.select.key": ["Ключ селектора", "Selector key", "选择器键"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.28.2",
+  "version": "1.28.4",
   "license": "MIT",
   "type": "module",
   "scripts": {