poe-svelte-ui-lib 1.28.4 → 1.28.6

package/dist/Button/ButtonProps.svelte

@@ -3,7 +3,7 @@
   import { T } from "../locales/i18n"
   import { type UIComponent, type IButtonProps, type IOption, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import { twMerge } from "tailwind-merge"
   import { ICONS } from "../icons"
   import CommonSnippets from "../CommonSnippets.svelte"
@@ -31,11 +31,7 @@
     $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.eventHandler.Header) ?? { id: "", name: "", value: "", class: "!w-1/4" },
   )
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.componentClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.componentClass))
 
   const initialHeight = $derived(
     $optionsStore.HEIGHT_OPTIONS.find((h) =>

package/dist/Dragging.svelte

@@ -1,4 +1,8 @@
-<script lang="ts" module>
+<script lang="ts">
+  import { tick } from "svelte"
+  import MoveVerticalIcon from "./libIcons/MoveVerticalIcon.svelte"
+  import { twMerge } from "tailwind-merge"
+
   let dragState = $state({
     isDragging: false,
     element: null as any,
@@ -13,12 +17,6 @@
   })
 
   let commandItems: Element[] = $state([])
-</script>
-
-<script lang="ts">
-  import { tick } from "svelte"
-  import MoveVerticalIcon from "./libIcons/MoveVerticalIcon.svelte"
-  import { twMerge } from "tailwind-merge"
 
   let {
     wrapperClass,
@@ -41,7 +39,7 @@
   /* Перетаскивание с MouseEvent */
   const startDrag = async (e: MouseEvent) => {
     const movedElement = document.querySelector(
-      containerIndex == null ? `#${elementsId}-${elementIndex}` : `#${elementsId}-${elementIndex}-${dragState.containerIndex || containerIndex}`,
+      containerIndex == null ? `#${elementsId}-${elementIndex}` : `#${elementsId}-${elementIndex}-${containerIndex}`,
     ) as HTMLElement
 
     if (!movedElement) return

package/dist/Input/Input.svelte

@@ -1,4 +1,4 @@
-<!-- $lib/Input/Input.svelte — радиус 10, высота 36, выравнивание по левому краю,
+<!-- $lib/Input/Input.svelte — радиус 10, высота 32 (h-8), выравнивание по левому краю,
      кольцо фокуса вместо размытой тени. Вся логика (regExp, roundToClean,
      handleInputChange, счётчик, копирование) не тронута. -->
 <script lang="ts">
@@ -39,13 +39,17 @@
 
   $effect(() => {
     if (help.regExp && type !== "number") isValid = RegExpObj().test(typeof value === "string" ? value : String(value))
+    else isValid = true
   })
 
   const handleInputChange = (value: string | number) => {
     if (type === "number") {
-      const numValue = typeof value === "string" ? parseFloat(value.replace(",", ".")) : Number(value)
-      if (!isNaN(numValue)) onUpdate?.(numValue)
-      else onUpdate?.(value as string)
+      let numValue = typeof value === "string" ? parseFloat(value.replace(",", ".")) : Number(value)
+      if (!isNaN(numValue)) {
+        if (typeof number?.minNum === "number") numValue = Math.max(numValue, number.minNum)
+        if (typeof number?.maxNum === "number") numValue = Math.min(numValue, number.maxNum)
+        onUpdate?.(numValue)
+      } else onUpdate?.(value as string)
     } else {
       onUpdate?.(value as string)
     }

package/dist/Input/InputProps.svelte

@@ -3,7 +3,7 @@
   import { T } from "../locales/i18n"
   import type { IInputProps, UIComponent, IOption, IUIComponentHandler } from "../types"
   import * as UI from ".."
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import { twMerge } from "tailwind-merge"
   import Library from "../libIcons/Library.svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
@@ -24,11 +24,7 @@
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.componentClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.componentClass))
 
   const initialAlign = $derived(
     $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>

package/dist/Joystick/JoystickProps.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { getContext } from "svelte"
   import { T } from "../locales/i18n"
-  import { type UIComponent, type IGraphProps, updateProperty, type IOption, type IUIComponentHandler } from "../types"
+  import { type UIComponent, type IJoystickProps, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { ICONS } from "../icons"
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
 
@@ -13,7 +13,7 @@
     onPropertyChange,
     forConstructor = true,
   } = $props<{
-    component: UIComponent & { properties: Partial<IGraphProps> }
+    component: UIComponent & { properties: Partial<IJoystickProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
@@ -27,11 +27,7 @@
     ),
   )
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 </script>
 
 {#snippet JoystickAxesMinMax()}

package/dist/Joystick/JoystickProps.svelte.d.ts

@@ -1,7 +1,7 @@
-import { type UIComponent, type IGraphProps, type IUIComponentHandler } from "../types";
+import { type UIComponent, type IJoystickProps, type IUIComponentHandler } from "../types";
 type $$ComponentProps = {
     component: UIComponent & {
-        properties: Partial<IGraphProps>;
+        properties: Partial<IJoystickProps>;
     };
     onPropertyChange: (updates: Partial<{
         properties?: string | object;

package/dist/Map/Map.svelte

@@ -19,15 +19,18 @@
   /* Мастер-цвет (тот же bg-* из optionsStore.COLOR_OPTIONS, что и у остальных примитивов) —
      красить саму карту цветом смысла нет (это базовая карта MapLibre), поэтому проявляется на
      ФОНЕ наших собственных оверлеев поверх неё: панели управления (CustomControl) и карточки
-     устройства (Popup) — см. roleBgClass ниже, применяется прямо в разметке. */
+     устройства (Popup) — см. roleBgClass/roleBgPaint ниже, применяются прямо в разметке. */
   const roleBgClass = $derived.by(() => {
     const role = wrapperClass.match(/bg-(\w+)/)?.[1]
-    /* 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)` : ""
+    /* bg-{role} лишь задаёт переменную --bg-color (см. app.css); text-(--on-accent) — иначе
+       тёмный текст (задуман под белую подложку control'ов MapLibre по умолчанию) нечитаем на
+       цветной заливке. Красящая bg-(--bg-color) — НЕ здесь, см. roleBgPaint: если оставить обе
+       bg-* утилиты в одной строке, twMerge видит конфликт одной группы и вырезает одну из них
+       (та же ловушка, что и в Button.svelte, см. его комментарий про roleBg/roleClass). */
+    return role && role !== "max" ? `bg-${role} text-(--on-accent)` : ""
   })
+  /* Приклеивается к className СНАРУЖИ twMerge — иначе конфликтует с bg-{role} внутри roleBgClass. */
+  const roleBgPaint = $derived(roleBgClass ? "bg-(--bg-color)" : "")
 
   /* Акцентное кольцо вокруг самой карты. Намеренно ring, а не border: border меняет content-box
      контейнера MapLibre уже ПОСЛЕ монтажа, а сама MapLibre не переотрисовывает canvas при таком
@@ -172,7 +175,7 @@
     <FullScreenControl />
 
     <CustomControl position="top-left">
-      <div class={twMerge("flex flex-wrap items-center gap-3 rounded-lg px-2 py-1 text-black", roleBgClass)}>
+      <div class={`${twMerge("flex flex-wrap items-center gap-3 rounded-lg px-2 py-1 text-black", roleBgClass)} ${roleBgPaint}`}>
         <label class="flex items-center gap-1.5 text-sm font-medium">
           <input type="checkbox" bind:checked={trackEnabled} />
           {$T("constructor.props.map.track")}
@@ -255,7 +258,9 @@
               <h6 class="text-sm leading-none font-bold">{device.DevName}</h6>
             </div>
 
-            <div class={twMerge("grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg bg-(--container-color) p-2 text-xs", roleBgClass)}>
+            <div
+              class={`${twMerge("grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg bg-(--container-color) p-2 text-xs", roleBgClass)} ${roleBgPaint}`}
+            >
               <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/Map/MapProps.svelte

@@ -2,7 +2,7 @@
   import { T } from "../locales/i18n"
   import { type UIComponent, type IMapProps, updateProperty, type IUIComponentHandler } from "../types"
   import { ICONS } from "../icons"
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import { getContext } from "svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
@@ -30,9 +30,7 @@
   )
 
   const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
+    findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass),
   )
 </script>
 

package/dist/Modal.svelte

@@ -40,6 +40,7 @@
   $effect(() => {
     if (isOpen) ModalStack.open(modalId)
     else ModalStack.close(modalId)
+    return () => ModalStack.close(modalId)
   })
 
   $effect(() => {

package/dist/PeriodChart/PeriodChartProps.svelte

@@ -3,7 +3,7 @@
   import { T } from "../locales/i18n"
   import { updateProperty, type IOption, type IPeriodChartLevel, type IPeriodChartProps, type IUIComponentHandler, type UIComponent } from "../types"
   import * as UI from ".."
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
@@ -24,11 +24,7 @@
 
   let itemsContainer: HTMLDivElement | null = $state(null)
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 
   /* levels[].data/labels хранятся как number[]/string[], редактируются одной строкой через запятую (fallback для литеральных демо-данных) */
   const parseNumbers = (text: string): number[] =>

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -3,7 +3,7 @@
   import { T } from "../locales/i18n"
   import { type UIComponent, type IProgressBarProps, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
   import PropsListModal from "../PropsListModal.svelte"
@@ -104,9 +104,7 @@
                     wrapperClass="min-w-56 flex-[2]"
                     type="buttons"
                     options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
-                    value={$optionsStore.COLOR_OPTIONS.find((c) =>
-                      (c.value as string).includes(progress.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-                    )}
+                    value={findColorOption($optionsStore.COLOR_OPTIONS, progress.class)}
                     onUpdate={(value) => {
                       const progresses = [...(component.properties?.items || [])]
                       progresses[index]["class"] = (value as UI.IOption).value

package/dist/Select/Select.svelte

@@ -102,10 +102,9 @@
   const selectOption = (option: IOption<T>, event: MouseEvent) => {
     event.stopPropagation()
 
-    if (type === "buttons" && multiSelect && value) {
-      if (!Array.isArray(value)) value = [value]
-      if (value.find((v) => v.value === option.value)) value = value.filter((op) => op.value !== option.value)
-      else value.push(option)
+    if (type === "buttons" && multiSelect) {
+      const current = Array.isArray(value) ? value : value ? [value] : []
+      value = current.find((v) => v.value === option.value) ? current.filter((op) => op.value !== option.value) : [...current, option]
     } else {
       value = option
     }
@@ -123,7 +122,9 @@
       id: `input-${Date.now()}`,
       name: searchValue,
       value:
-        typeof options[0]?.value == "number" ? ((Number(searchValue) as T) == undefined ? (Number(searchValue) as T) : (searchValue as T)) : (searchValue as T),
+        typeof options[0]?.value == "number" && searchValue !== "" && !isNaN(Number(searchValue))
+          ? (Number(searchValue) as T)
+          : (searchValue as T),
     }
     value = selectedOption
     onUpdate?.(selectedOption)
@@ -256,6 +257,7 @@
           componentClass,
         )}
         id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+        autocomplete="off"
         {disabled}
         oninput={handleSearch}
         onclick={(e) => toggleDropdown(e)}

package/dist/Select/SelectProps.svelte

@@ -5,7 +5,7 @@
   import * as UI from ".."
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
-  import { optionsStore } from "../options.js"
+  import { optionsStore, findColorOption } from "../options.js"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
   import PropsListModal from "../PropsListModal.svelte"
@@ -235,9 +235,7 @@
                     label={{ name: $T("constructor.props.colors") }}
                     type="buttons"
                     options={$optionsStore.COLOR_OPTIONS}
-                    value={$optionsStore.COLOR_OPTIONS.find((c) =>
-                      (c.value as string).includes(option.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-                    )}
+                    value={findColorOption($optionsStore.COLOR_OPTIONS, option.class)}
                     onUpdate={(option) => {
                       const options = [...(component.properties?.options || [])]
                       options[index]["class"] = (option as UI.IOption).value

package/dist/Slider/SliderProps.svelte

@@ -3,7 +3,7 @@
   import { T } from "../locales/i18n"
   import { type UIComponent, type ISliderProps, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
 
@@ -26,11 +26,7 @@
     ),
   )
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 </script>
 
 {#snippet SliderType()}

package/dist/Switch/SwitchProps.svelte

@@ -3,7 +3,7 @@
   import { T } from "../locales/i18n"
   import { type UIComponent, type ISwitchProps, updateProperty, type IOption, type IUIComponentHandler } from "../types"
   import * as UI from ".."
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
@@ -21,9 +21,7 @@
   }>()
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
-  let initialColor = $optionsStore.COLOR_OPTIONS.find((c) =>
-    (c.value as string).includes(component.properties.options[0].class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-  )
+  let initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.options[0].class))
   const initialAlign = $derived(
     $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
       (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
@@ -139,9 +137,7 @@
                 label={{ name: $T("constructor.props.colors") }}
                 type="buttons"
                 options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max" && option.value !== "bg-gray")}
-                value={$optionsStore.COLOR_OPTIONS.find((c) =>
-                  (c.value as string).includes(option.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-                )}
+                value={findColorOption($optionsStore.COLOR_OPTIONS, option.class)}
                 onUpdate={(option) => {
                   const options = [...(component.properties?.options || [])]
                   options[index]["class"] = (option as UI.IOption).value

package/dist/Table/Table.svelte

@@ -105,7 +105,7 @@
     if (button.onClick) button.onClick(row)
     else if (button.eventHandler && onClick) {
       let value: Record<string, boolean | string | number | number[] | object | null> = {}
-      button.eventHandler.Variables.forEach((v: string) => {
+      ;(button.eventHandler.Variables ?? []).forEach((v: string) => {
         if (
           header.some(
             (h) =>
@@ -124,7 +124,7 @@
   const selectOption = async (index: number, key: any, selectIndex: number, option: IOption<string | number>, event: MouseEvent) => {
     event.stopPropagation()
 
-    let existingItem = body[index][key]
+    let existingItem = body[index][key.slice(0, -2)]
     isDropdownOpen = null
 
     setTimeout(() => {
@@ -163,7 +163,7 @@
 
     let min = progressBar?.minNum ?? 0
     let max = progressBar?.maxNum ?? 100
-    if (value) return (((Math.min(Math.max(value, min), max) - min) / (max - min)) * 100) as number
+    if (value != null && !isNaN(value)) return (((Math.min(Math.max(value, min), max) - min) / (max - min)) * 100) as number
   }
 
   const roundToClean = (num: number): number => {

package/dist/Table/TableProps.svelte

@@ -5,7 +5,7 @@
   import * as UI from ".."
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import { ICONS } from "../icons"
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
@@ -29,11 +29,7 @@
 
   let isDropdownOpen = $state(-1)
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 
   const initialAlign = $derived(
     $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
@@ -352,11 +348,7 @@
                               label={{ name: $T("constructor.props.colors") }}
                               type="buttons"
                               options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
-                              value={$optionsStore.COLOR_OPTIONS.find((c) =>
-                                (c.value as string).includes(
-                                  (button.class ?? component.properties.wrapperClass).split(" ").find((cls: string) => cls.startsWith("bg-")),
-                                ),
-                              )}
+                              value={findColorOption($optionsStore.COLOR_OPTIONS, button.class ?? component.properties.wrapperClass)}
                               onUpdate={(option) => {
                                 if (button.class === (option as UI.IOption).value) updateContentProperty(columnIndex, index, "class", "bg-transparent")
                                 else updateContentProperty(columnIndex, index, "class", (option as UI.IOption).value)

package/dist/Tabs/TabsProps.svelte

@@ -2,7 +2,7 @@
   import { T } from "../locales/i18n"
   import { updateProperty, type IOption, type ITabsProps, type IUIComponentHandler, type UIComponent } from "../types"
   import * as UI from ".."
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import { ICONS } from "../icons"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
@@ -23,11 +23,7 @@
 
   let itemsContainer: HTMLDivElement | null = $state(null)
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 
   const initialPosition = $derived(
     $optionsStore.ICON_TEXT_POSITION_OPTIONS.find((c) =>

package/dist/TextField/TextFieldProps.svelte

@@ -2,7 +2,7 @@
   import { T } from "../locales/i18n"
   import { updateProperty, type ITextFieldProps, type IUIComponentHandler, type UIComponent } from "../types"
   import * as UI from "../index"
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import { getContext } from "svelte"
   import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
@@ -27,11 +27,7 @@
       (a.value as string).includes(component.properties.content?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
     ),
   )
-  const initialColor = $derived(
-    $optionsStore.TEXT_COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("text-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.TEXT_COLOR_OPTIONS, component.properties.wrapperClass, "text-"))
 </script>
 
 {#snippet TextFieldSize()}

package/dist/VideoViewer/VideoViewerProps.svelte

@@ -4,7 +4,7 @@
   import * as UI from ".."
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
 
   const {
     component,
@@ -16,11 +16,7 @@
     forConstructor?: boolean
   }>()
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 </script>
 
 {#snippet VideoViewershowSelect()}

package/dist/Widget/WidgetProps.svelte

@@ -2,7 +2,7 @@
   import { T } from "../locales/i18n"
   import { updateProperty, type IUIComponentHandler, type UIComponent } from "../types"
   import * as UI from ".."
-  import { optionsStore } from "../options"
+  import { optionsStore, findColorOption } from "../options"
   import { ICONS_ARRAY } from "../icons"
   import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
@@ -22,11 +22,7 @@
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  const initialColor = $derived(
-    $optionsStore.COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.settings.class?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
-    ),
-  )
+  const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.settings.class))
 
   /* Один мастер-цвет вместо двух независимых пикеров: цвет иконки больше не выбирается отдельно,
      а выводится из того же bg-* (COLOR_OPTIONS и TEXT_COLOR_OPTIONS — одна и та же ролевая палитра

package/dist/locales/translations.js

@@ -34,8 +34,6 @@ const translations = {
     "constructor.props.align.center": ["Центр", "Center", "居中"],
     "constructor.props.align.right": ["Справа", "Right", "右"],
     "constructor.props.align.justify": ["Ширина", "Justify", "两端对齐"],
-    "constructor.props.type.main": ["Основной", "Main", "主要"],
-    "constructor.props.type.sub": ["Вложенный", "Nested", "嵌套"],
     "constructor.props.type.text": ["Текст", "Text", "文本"],
     "constructor.props.type.password": ["Пароль", "Password", "密码"],
     "constructor.props.type.number": ["Число", "Number", "数字"],
@@ -252,9 +250,6 @@ const translations = {
     "constructor.props.source": ["Источник", "Source", "来源"],
     "constructor.props.showSelect": ["Выбор источника", "Source selection", "来源选择"],
     "constructor.props.widget.mode": ["Зацикленный", "Looped", "循环"],
-    "constructor.props.table.type": ["Тип таблицы", "Table type", "表格类型"],
-    "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", "选择器键"],
@@ -320,60 +315,19 @@ const translations = {
     "constructor.props.icon.battery": ["Аккумулятор", "Battery", "电池"],
     "constructor.props.autocomplete.on": ["Включено", "On", "开启"],
     "constructor.props.autocomplete.off": ["Выключено", "Off", "关闭"],
-    "constructor.props.autocomplete.name": ["Полное имя", "Full name", "全名"],
-    "constructor.props.autocomplete.honorific-prefix": ["Обращение (г-н, г-жа, др.)", "Honorific prefix (Mr., Ms., etc.)", "尊称前缀（先生、女士等）"],
     "constructor.props.autocomplete.given-name": ["Имя", "Given name", "名"],
-    "constructor.props.autocomplete.additional-name": ["Отчество", "Additional name", "中间名"],
     "constructor.props.autocomplete.family-name": ["Фамилия", "Family name", "姓"],
-    "constructor.props.autocomplete.honorific-suffix": ["Постфикс (мл., ст.)", "Honorific suffix (Jr., Sr.)", "尊称后缀（小、老）"],
     "constructor.props.autocomplete.nickname": ["Псевдоним", "Nickname", "昵称"],
     "constructor.props.autocomplete.username": ["Имя пользователя", "Username", "用户名"],
     "constructor.props.autocomplete.new-password": ["Новый пароль", "New password", "新密码"],
     "constructor.props.autocomplete.current-password": ["Текущий пароль", "Current password", "当前密码"],
-    "constructor.props.autocomplete.one-time-code": ["Одноразовый код", "One-time code", "一次性验证码"],
     "constructor.props.autocomplete.organization-title": ["Должность", "Job title", "职位"],
-    "constructor.props.autocomplete.organization": ["Организация", "Organization", "组织"],
     "constructor.props.autocomplete.street-address": ["Адрес, начиная с улицы", "Street address", "街道地址"],
-    "constructor.props.autocomplete.address-line1": ["Адресная строка 1", "Address line 1", "地址第一行"],
-    "constructor.props.autocomplete.address-line2": ["Адресная строка 2", "Address line 2", "地址第二行"],
-    "constructor.props.autocomplete.address-line3": ["Адресная строка 3", "Address line 3", "地址第三行"],
-    "constructor.props.autocomplete.address-level4": ["Уровень адреса 4", "Address level 4", "地址级别 4"],
-    "constructor.props.autocomplete.address-level3": ["Уровень адреса 3", "Address level 3", "地址级别 3"],
     "constructor.props.autocomplete.address-level2": ["Населённый пункт", "City", "城市"],
     "constructor.props.autocomplete.address-level1": ["Область, регион или штат", "State, province or region", "省/州/地区"],
-    "constructor.props.autocomplete.country": ["Код страны", "Country code", "国家代码"],
     "constructor.props.autocomplete.country-name": ["Страна", "Country", "国家"],
     "constructor.props.autocomplete.postal-code": ["Почтовый индекс", "Postal code", "邮政编码"],
-    "constructor.props.autocomplete.cc-name": ["Имя владельца карты", "Cardholder name", "持卡人姓名"],
-    "constructor.props.autocomplete.cc-given-name": ["Имя владельца карты", "Cardholder given name", "持卡人名"],
-    "constructor.props.autocomplete.cc-additional-name": ["Отчество владельца карты", "Cardholder additional name", "持卡人中间名"],
-    "constructor.props.autocomplete.cc-family-name": ["Фамилия владельца карты", "Cardholder family name", "持卡人姓"],
-    "constructor.props.autocomplete.cc-number": ["Номер карты", "Card number", "卡号"],
-    "constructor.props.autocomplete.cc-exp": ["Срок действия", "Expiration date", "有效期"],
-    "constructor.props.autocomplete.cc-exp-month": ["Месяц срока действия", "Expiration month", "有效期月份"],
-    "constructor.props.autocomplete.cc-exp-year": ["Год срока действия", "Expiration year", "有效期年份"],
-    "constructor.props.autocomplete.cc-csc": ["Код безопасности", "Security code", "安全码"],
-    "constructor.props.autocomplete.cc-type": ["Тип карты", "Card type", "卡类型"],
-    "constructor.props.autocomplete.transaction-currency": ["Валюта транзакции", "Transaction currency", "交易货币"],
-    "constructor.props.autocomplete.transaction-amount": ["Сумма транзакции", "Transaction amount", "交易金额"],
-    "constructor.props.autocomplete.language": ["Язык", "Language", "语言"],
-    "constructor.props.autocomplete.bday": ["Дата рождения", "Date of birth", "出生日期"],
-    "constructor.props.autocomplete.bday-day": ["День рождения", "Birth day", "出生日"],
-    "constructor.props.autocomplete.bday-month": ["Месяц рождения", "Birth month", "出生月"],
-    "constructor.props.autocomplete.bday-year": ["Год рождения", "Birth year", "出生年"],
-    "constructor.props.autocomplete.sex": ["Пол", "Sex", "性别"],
-    "constructor.props.autocomplete.url": ["URL-адрес", "URL", "URL 地址"],
-    "constructor.props.autocomplete.photo": ["Фото", "Photo", "照片"],
     "constructor.props.autocomplete.email": ["Адрес электронной почты", "Email address", "电子邮箱地址"],
     "constructor.props.autocomplete.tel": ["Полный номер телефона", "Full phone number", "完整电话号码"],
-    "constructor.props.autocomplete.tel-country-code": ["Код страны телефона", "Phone country code", "电话国家代码"],
-    "constructor.props.autocomplete.tel-national": ["Национальный номер телефона", "National phone number", "国内电话号码"],
-    "constructor.props.autocomplete.tel-area-code": ["Код региона/области", "Area code", "区号"],
-    "constructor.props.autocomplete.tel-local": ["Местный номер", "Local number", "本地号码"],
-    "constructor.props.autocomplete.tel-local-prefix": ["Префикс местного номера", "Local number prefix", "本地号码前缀"],
-    "constructor.props.autocomplete.tel-local-suffix": ["Суффикс местного номера", "Local number suffix", "本地号码后缀"],
-    "constructor.props.autocomplete.tel-extension": ["Добавочный номер", "Extension", "分机号"],
-    "constructor.props.autocomplete.impp": ["Мессенджер", "Messenger", "即时通讯"],
-    "constructor.props.autocomplete.fax": ["Номер факса", "Fax number", "传真号码"],
 };
 export default translations;

package/dist/options.d.ts

@@ -1,3 +1,6 @@
+export declare const findColorOption: <T extends {
+    value: string;
+}>(options: T[], classString?: string, prefix?: string) => T | undefined;
 export declare const optionsStore: import("svelte/store").Readable<{
     HEADER_OPTIONS: {
         id: string;
@@ -90,11 +93,6 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
-    ACCORDION_TYPE_OPTIONS: {
-        id: string;
-        value: boolean;
-        name: string;
-    }[];
     FILE_ATTACH_TYPE_OPTIONS: {
         id: string;
         value: string;
@@ -130,11 +128,6 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
-    TABLE_TYPE_OPTIONS: {
-        id: string;
-        value: string;
-        name: string;
-    }[];
     TABLE_CONTENT_TYPE_OPTIONS: {
         id: string;
         value: string;
@@ -170,9 +163,4 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
-    AUTOCOMPLETE_OPTIONS: {
-        id: string;
-        value: string;
-        name: string;
-    }[];
 }>;

package/dist/options.js

@@ -4,6 +4,12 @@ import { T } from "./locales/i18n";
 function id() {
     return crypto.randomUUID();
 }
+/* Достаёт роль master-цвета (класс bg-*) из строки классов компонента и находит соответствующую
+   запись в COLOR_OPTIONS — общий хелпер для всех *Props-панелей, где нужно предзаполнить пикер цвета. */
+export const findColorOption = (options, classString, prefix = "bg-") => {
+    const colorClass = classString?.split(" ").find((cls) => cls.startsWith(prefix));
+    return colorClass ? options.find((c) => c.value.includes(colorClass)) : undefined;
+};
 export const optionsStore = derived(T, ($T) => {
     return {
         HEADER_OPTIONS: [
@@ -143,10 +149,6 @@ export const optionsStore = derived(T, ($T) => {
             { id: id(), value: "py-2", name: $T("constructor.props.height.medium") },
             { id: id(), value: "py-3", name: $T("constructor.props.height.large") },
         ],
-        ACCORDION_TYPE_OPTIONS: [
-            { id: id(), value: false, name: $T("constructor.props.type.main") },
-            { id: id(), value: true, name: $T("constructor.props.type.sub") },
-        ],
         FILE_ATTACH_TYPE_OPTIONS: [
             { id: id(), value: "file", name: $T("constructor.props.type.file") },
             { id: id(), value: "image", name: $T("constructor.props.type.image") },
@@ -179,10 +181,6 @@ export const optionsStore = derived(T, ($T) => {
             { id: id(), value: "square", name: $T("constructor.props.type.square") },
             { id: id(), value: "circle", name: $T("constructor.props.type.circle") },
         ],
-        TABLE_TYPE_OPTIONS: [
-            { id: id(), value: "table", name: $T("constructor.props.table.type.table") },
-            { id: id(), value: "logger", name: $T("constructor.props.table.type.logger") },
-        ],
         TABLE_CONTENT_TYPE_OPTIONS: [
             { id: id(), value: "text", name: $T("constructor.props.table.type.text") },
             { id: id(), value: "select", name: $T("constructor.props.table.type.select") },
@@ -247,73 +245,5 @@ export const optionsStore = derived(T, ($T) => {
             { id: id(), value: "email", name: $T("constructor.props.autocomplete.email") },
             { id: id(), value: "tel", name: $T("constructor.props.autocomplete.tel") },
         ],
-        AUTOCOMPLETE_OPTIONS: [
-            // Основные значения
-            { id: id(), value: "on", name: $T("constructor.props.autocomplete.on") },
-            { id: id(), value: "off", name: $T("constructor.props.autocomplete.off") },
-            // Имя и фамилия
-            { id: id(), value: "name", name: $T("constructor.props.autocomplete.name") },
-            { id: id(), value: "honorific-prefix", name: $T("constructor.props.autocomplete.honorific-prefix") },
-            { id: id(), value: "given-name", name: $T("constructor.props.autocomplete.given-name") },
-            { id: id(), value: "additional-name", name: $T("constructor.props.autocomplete.additional-name") },
-            { id: id(), value: "family-name", name: $T("constructor.props.autocomplete.family-name") },
-            { id: id(), value: "honorific-suffix", name: $T("constructor.props.autocomplete.honorific-suffix") },
-            { id: id(), value: "nickname", name: $T("constructor.props.autocomplete.nickname") },
-            // Пользовательская информация
-            { id: id(), value: "username", name: $T("constructor.props.autocomplete.username") },
-            { id: id(), value: "new-password", name: $T("constructor.props.autocomplete.new-password") },
-            { id: id(), value: "current-password", name: $T("constructor.props.autocomplete.current-password") },
-            { id: id(), value: "one-time-code", name: $T("constructor.props.autocomplete.one-time-code") },
-            // Организация
-            { id: id(), value: "organization-title", name: $T("constructor.props.autocomplete.organization-title") },
-            { id: id(), value: "organization", name: $T("constructor.props.autocomplete.organization") },
-            // Адрес
-            { id: id(), value: "street-address", name: $T("constructor.props.autocomplete.street-address") },
-            { id: id(), value: "address-line1", name: $T("constructor.props.autocomplete.address-line1") },
-            { id: id(), value: "address-line2", name: $T("constructor.props.autocomplete.address-line2") },
-            { id: id(), value: "address-line3", name: $T("constructor.props.autocomplete.address-line3") },
-            { id: id(), value: "address-level4", name: $T("constructor.props.autocomplete.address-level4") },
-            { id: id(), value: "address-level3", name: $T("constructor.props.autocomplete.address-level3") },
-            { id: id(), value: "address-level2", name: $T("constructor.props.autocomplete.address-level2") },
-            { id: id(), value: "address-level1", name: $T("constructor.props.autocomplete.address-level1") },
-            { id: id(), value: "country", name: $T("constructor.props.autocomplete.country") },
-            { id: id(), value: "country-name", name: $T("constructor.props.autocomplete.country-name") },
-            { id: id(), value: "postal-code", name: $T("constructor.props.autocomplete.postal-code") },
-            // Контактная информация
-            { id: id(), value: "cc-name", name: $T("constructor.props.autocomplete.cc-name") },
-            { id: id(), value: "cc-given-name", name: $T("constructor.props.autocomplete.cc-given-name") },
-            { id: id(), value: "cc-additional-name", name: $T("constructor.props.autocomplete.cc-additional-name") },
-            { id: id(), value: "cc-family-name", name: $T("constructor.props.autocomplete.cc-family-name") },
-            { id: id(), value: "cc-number", name: $T("constructor.props.autocomplete.cc-number") },
-            { id: id(), value: "cc-exp", name: $T("constructor.props.autocomplete.cc-exp") },
-            { id: id(), value: "cc-exp-month", name: $T("constructor.props.autocomplete.cc-exp-month") },
-            { id: id(), value: "cc-exp-year", name: $T("constructor.props.autocomplete.cc-exp-year") },
-            { id: id(), value: "cc-csc", name: $T("constructor.props.autocomplete.cc-csc") },
-            { id: id(), value: "cc-type", name: $T("constructor.props.autocomplete.cc-type") },
-            // Контакт
-            { id: id(), value: "transaction-currency", name: $T("constructor.props.autocomplete.transaction-currency") },
-            { id: id(), value: "transaction-amount", name: $T("constructor.props.autocomplete.transaction-amount") },
-            { id: id(), value: "language", name: $T("constructor.props.autocomplete.language") },
-            { id: id(), value: "bday", name: $T("constructor.props.autocomplete.bday") },
-            { id: id(), value: "bday-day", name: $T("constructor.props.autocomplete.bday-day") },
-            { id: id(), value: "bday-month", name: $T("constructor.props.autocomplete.bday-month") },
-            { id: id(), value: "bday-year", name: $T("constructor.props.autocomplete.bday-year") },
-            // Связь
-            { id: id(), value: "sex", name: $T("constructor.props.autocomplete.sex") },
-            { id: id(), value: "url", name: $T("constructor.props.autocomplete.url") },
-            { id: id(), value: "photo", name: $T("constructor.props.autocomplete.photo") },
-            // Email и телефон
-            { id: id(), value: "email", name: $T("constructor.props.autocomplete.email") },
-            { id: id(), value: "tel", name: $T("constructor.props.autocomplete.tel") },
-            { id: id(), value: "tel-country-code", name: $T("constructor.props.autocomplete.tel-country-code") },
-            { id: id(), value: "tel-national", name: $T("constructor.props.autocomplete.tel-national") },
-            { id: id(), value: "tel-area-code", name: $T("constructor.props.autocomplete.tel-area-code") },
-            { id: id(), value: "tel-local", name: $T("constructor.props.autocomplete.tel-local") },
-            { id: id(), value: "tel-local-prefix", name: $T("constructor.props.autocomplete.tel-local-prefix") },
-            { id: id(), value: "tel-local-suffix", name: $T("constructor.props.autocomplete.tel-local-suffix") },
-            { id: id(), value: "tel-extension", name: $T("constructor.props.autocomplete.tel-extension") },
-            { id: id(), value: "impp", name: $T("constructor.props.autocomplete.impp") },
-            { id: id(), value: "fax", name: $T("constructor.props.autocomplete.fax") },
-        ],
     };
 });

package/dist/widgetAccent.js

@@ -6,10 +6,8 @@
 /* componentClass — значение вида "bg-red" из optionsStore.COLOR_OPTIONS (или "" — без роли,
    обычный акцент темы). Возвращает inline-style для корня виджета; пустая строка ничего не переопределяет. */
 export const widgetAccentStyle = (componentClass) => {
-    if (!componentClass)
-        return "";
-    const role = componentClass.replace(/^bg-/, "");
-    if (role === "max")
+    const role = componentClass.match(/(?:^|\s)bg-(\w+)/)?.[1];
+    if (!role || role === "max")
         return "";
     return (`--accent-color: var(--${role}-color); --accent-soft: var(--${role}-soft); --accent-hover: var(--${role}-color);` +
         `--focus-shadow-color: 0 0 0 3px color-mix(in srgb, var(--${role}-color) 18%, transparent);`);

package/package.json

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