poe-svelte-ui-lib 1.26.3 → 1.28.0

package/dist/Accordion/AccordionProps.svelte

@@ -53,7 +53,7 @@
     />
     {#if currentImage}
       <Button
-        wrapperClass="w-8.5 mt-6"
+        wrapperClass="w-8 mt-6"
         componentClass="p-0.5 bg-red"
         content={{ icon: CrossIcon }}
         onClick={() => {

package/dist/Button/Button.svelte

@@ -3,7 +3,7 @@
      Что изменилось внутри:
        • роль определяется значением bg-* (намерение), а не фактом его наличия;
        • убрано автоподчёркивание текста — кнопка больше не выглядит ссылкой;
-       • единый радиус 10px (иконка без подписи — круг), высота 36px, кегль 14/600;
+       • единый радиус 10px (иконка без подписи — круг), высота 32px (стандарт полей h-8), кегль 14/600;
        • кольцо фокуса вместо размытой тени;
        • disabled через токены, а не opacity: 0.5;
        • иконка встала в поток (flex + gap) вместо absolute left-3. -->
@@ -108,7 +108,7 @@
       `relative inline-flex w-full items-center justify-center gap-2 leading-none font-semibold text-[14px] select-none
        transition-[background-color,filter,box-shadow] duration-150
        focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--accent-color)
-       ${isIconOnly ? "aspect-square rounded-full p-0" : "min-h-9 rounded-[10px] px-4 py-2"}
+       ${isIconOnly ? "aspect-square rounded-full p-0" : "h-8 rounded-[10px] px-4 py-2"}
        ${disabled ? "" : "cursor-pointer active:scale-[0.97]"}`,
       roleClass,
       componentClass,

package/dist/CommonSnippets.svelte

@@ -257,7 +257,7 @@
   updateProperty: (icon: string | string[]) => {}
 })}
   <div class="relative mt-6 flex w-full gap-2">
-    <UI.Button content={{ name: initialValue.name }} componentClass="h-8 min-h-8 bg-blue" onClick={() => (showIconLib = true)} />
+    <UI.Button content={{ name: initialValue.name }} componentClass="bg-blue" onClick={() => (showIconLib = true)} />
     {#if showIconLib}
       <UI.Modal bind:isOpen={showIconLib} wrapperClass="w-130">
         {#snippet main()}
@@ -288,7 +288,7 @@
       </UI.Modal>
     {/if}
     {#if initialValue.icon}
-      <UI.Button wrapperClass="w-8.5" componentClass="p-0.5 bg-red" content={{ icon: CrossIcon }} onClick={() => initialValue.updateProperty("")} />
+      <UI.Button wrapperClass="w-8" componentClass="p-0.5 bg-red" content={{ icon: CrossIcon }} onClick={() => initialValue.updateProperty("")} />
     {/if}
   </div>
 {/snippet}

package/dist/FileAttach/FileAttach.svelte

@@ -82,13 +82,13 @@
       <input
         id={ID}
         type="file"
-        class="absolute left-0 z-1 h-9 w-full opacity-0 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'}"
+        class="absolute left-0 z-1 h-8 w-full opacity-0 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'}"
         {accept}
         {disabled}
         onchange={handleFileChange}
       />
       <div
-        class="flex h-9 w-full overflow-hidden rounded-[10px] border border-(--border-color) text-[14px] transition-colors duration-150
+        class="flex h-8 w-full overflow-hidden rounded-[10px] border border-(--border-color) text-[14px] transition-colors duration-150
              {disabled ? 'opacity-45' : 'hover:border-(--faint-color)'}"
       >
         <div class="flex shrink-0 items-center justify-center bg-(--accent-color) px-3 font-semibold whitespace-nowrap text-(--on-accent)">

package/dist/Input/Input.svelte

@@ -92,7 +92,7 @@
     {#if type === "number"}
       <input
         bind:value
-        class={twMerge(fieldBase, "h-9 pr-9", componentClass)}
+        class={twMerge(fieldBase, "h-8 pr-9", componentClass)}
         id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         {placeholder}
         {disabled}
@@ -109,7 +109,7 @@
     {:else if type !== "text-area"}
       <input
         bind:value
-        class={twMerge(fieldBase, `h-9 ${help.copyButton || type === "password" ? "pr-9" : ""}`, componentClass)}
+        class={twMerge(fieldBase, `h-8 ${help.copyButton || type === "password" ? "pr-9" : ""}`, componentClass)}
         id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         {placeholder}
         {disabled}
@@ -190,7 +190,7 @@
 
     {#if (type === "number" || type === "bitMode") && !readonly && !disabled}
       <!-- Счётчик: узкая колонка со стрелками, отделена волосяной линией -->
-      <div class="absolute right-0 flex h-9 w-8 flex-col overflow-hidden rounded-r-[10px] border-l border-(--hairline-color)">
+      <div class="absolute right-0 flex h-8 w-8 flex-col overflow-hidden rounded-r-[10px] border-l border-(--hairline-color)">
         <button
           class="flex h-1/2 w-full items-center justify-center border-b border-(--hairline-color) text-[11px] leading-none text-(--muted-color) transition-colors duration-150 hover:bg-(--container-color) hover:text-(--font-color)"
           onclick={() => {

package/dist/Map/Map.svelte

@@ -8,6 +8,7 @@
 
   let {
     id = crypto.randomUUID(),
+    wrapperClass = "",
     label = { name: "", class: "" },
     data = $bindable(),
     markerIcon,
@@ -15,6 +16,15 @@
     trackLength = $bindable(1000),
   }: IMapProps = $props()
 
+  /* Мастер-цвет (тот же bg-* из optionsStore.COLOR_OPTIONS, что и у остальных примитивов) —
+     проявляется как акцентная рамка карты, т.к. заливать фон самой карты цветом нет смысла. */
+  const roleBorderClass = $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}` : ""
+  })
+
   interface MapDevice extends IDeviceGNSS {
     isFresh: boolean
     staleTimeoutId: number | null
@@ -131,12 +141,12 @@
   }
 </script>
 
-<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="h-full min-h-50">
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge("h-full min-h-50", wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
   <MapLibre
-    class="h-[calc(100%-2rem)] min-h-50 overflow-hidden rounded-xl shadow-sm transition duration-200 hover:shadow-md"
+    class={twMerge("h-[calc(100%-2rem)] min-h-50 overflow-hidden rounded-xl shadow-sm transition duration-200 hover:shadow-md", roleBorderClass)}
     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 }}

package/dist/Map/MapProps.svelte

@@ -28,6 +28,12 @@
       (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
     ),
   )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
+    ),
+  )
 </script>
 
 {#if forConstructor}
@@ -67,6 +73,7 @@
           onUpdate={(option) => updateProperty("trackLength", (option as { value: number }).value, component, onPropertyChange)}
         />
       {/if}
+      <CommonSnippets snippet="Colors" initialValue={{ color: initialColor }} {component} {onPropertyChange} />
     </PropsGroup>
   </div>
 {:else}
@@ -106,6 +113,7 @@
           onUpdate={(option) => updateProperty("trackLength", (option as { value: number }).value, component, onPropertyChange)}
         />
       {/if}
+      <CommonSnippets snippet="Colors" initialValue={{ color: initialColor }} {component} {onPropertyChange} />
     </PropsGroup>
   </div>
 {/if}

package/dist/PeriodChart/PeriodChartProps.svelte

@@ -77,28 +77,17 @@
 
     <div bind:this={itemsContainer} class="flex flex-col gap-2">
       {#each component.properties.levels || [] as level, index}
-        <div id="item-{index}" class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
-          <div class="flex items-center gap-2">
-            <UI.Dragging
-              wrapperClass="shrink-0"
-              container={itemsContainer}
-              array={component.properties.levels}
-              elementIndex={index}
-              onUpdate={(updatedArray) => updateLevels(updatedArray)}
-            />
-            <span class="flex-1"></span>
-            {#if (component.properties.levels?.length ?? 0) > 1}
-              <UI.Button
-                wrapperClass="w-8 shrink-0"
-                content={{ icon: ButtonDelete }}
-                onClick={() => {
-                  const levels = [...(component.properties?.levels || [])]
-                  levels.splice(index, 1)
-                  updateLevels(levels)
-                }}
-              />
-            {/if}
-          </div>
+        <div
+          id="item-{index}"
+          class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2"
+        >
+          <UI.Dragging
+            wrapperClass="shrink-0"
+            container={itemsContainer}
+            array={component.properties.levels}
+            elementIndex={index}
+            onUpdate={(updatedArray) => updateLevels(updatedArray)}
+          />
           <div class="flex flex-wrap items-end gap-2">
             <UI.Input
               label={{ name: $T("constructor.props.optionname") }}
@@ -143,6 +132,17 @@
               }}
             />
           </div>
+          {#if (component.properties.levels?.length ?? 0) > 1}
+            <UI.Button
+              wrapperClass="w-8 shrink-0"
+              content={{ icon: ButtonDelete }}
+              onClick={() => {
+                const levels = [...(component.properties?.levels || [])]
+                levels.splice(index, 1)
+                updateLevels(levels)
+              }}
+            />
+          {/if}
         </div>
       {/each}
       <div id="item-{component.properties.levels?.length ?? 0}" class="min-h-4"></div>

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -74,28 +74,19 @@
 
         <div bind:this={itemsContainer} class="flex flex-col gap-2">
           {#each component.properties.items || [] as progress, index}
-            <div id="item-{index}" class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
-              <div class="flex items-center gap-2">
-                <UI.Dragging
-                  wrapperClass="shrink-0"
-                  container={itemsContainer}
-                  array={component.properties.items}
-                  elementIndex={index}
-                  onUpdate={(updatedArray) => {
-                    updateProperty("items", updatedArray, component, onPropertyChange)
-                  }}
-                />
-                <span class="flex-1"></span>
-                <UI.Button
-                  wrapperClass="w-8 shrink-0"
-                  content={{ icon: ButtonDelete }}
-                  onClick={() => {
-                    const progresses = [...(component.properties?.items || [])]
-                    progresses.splice(index, 1)
-                    updateProperty("items", progresses, component, onPropertyChange)
-                  }}
-                />
-              </div>
+            <div
+              id="item-{index}"
+              class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2"
+            >
+              <UI.Dragging
+                wrapperClass="shrink-0"
+                container={itemsContainer}
+                array={component.properties.items}
+                elementIndex={index}
+                onUpdate={(updatedArray) => {
+                  updateProperty("items", updatedArray, component, onPropertyChange)
+                }}
+              />
               <div class="flex flex-wrap items-end gap-2">
                 <UI.Input
                   label={{ name: $T("constructor.props.optionname") }}
@@ -110,7 +101,7 @@
                 {#if forConstructor}
                   <UI.Select
                     label={{ name: $T("constructor.props.colors") }}
-                    wrapperClass="min-w-56 flex-[2] h-13.5"
+                    wrapperClass="min-w-56 flex-[2]"
                     type="buttons"
                     options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
                     value={$optionsStore.COLOR_OPTIONS.find((c) =>
@@ -154,6 +145,15 @@
                   />
                 {/if}
               </div>
+              <UI.Button
+                wrapperClass="w-8 shrink-0"
+                content={{ icon: ButtonDelete }}
+                onClick={() => {
+                  const progresses = [...(component.properties?.items || [])]
+                  progresses.splice(index, 1)
+                  updateProperty("items", progresses, component, onPropertyChange)
+                }}
+              />
             </div>
           {/each}
           <div id="item-{component.properties.items.length}" class="min-h-4"></div>

package/dist/Select/Select.svelte

@@ -130,7 +130,7 @@
   }
 
   /* Общая база поля — та же, что у Input */
-  const fieldBase = `h-9 w-full rounded-[10px] border border-(--border-color) bg-(--field-color) px-3 text-left text-[14px]
+  const fieldBase = `h-8 w-full rounded-[10px] border border-(--border-color) bg-(--field-color) px-3 text-left text-[14px]
     transition-[border-color,box-shadow] duration-150 outline-none
     focus:border-(--accent-color) focus:shadow-(--focus-shadow-color)`
 
@@ -222,7 +222,7 @@
           <button
             id={option.id}
             class="{twMerge(
-              `min-h-8 min-w-0 flex-1 px-3 py-2 text-[13px] font-semibold transition-colors duration-150
+              `h-8 min-w-0 flex-1 px-3 py-2 text-[13px] font-semibold transition-colors duration-150
                ${index === 0 ? 'rounded-l-[9px]' : ''} ${index === options.length - 1 ? 'rounded-r-[9px]' : ''}
                ${index > 0 ? 'border-l border-(--border-color)' : ''}
                ${

package/dist/Select/SelectProps.svelte

@@ -191,28 +191,19 @@
 
         <div bind:this={itemsContainer} class="flex flex-col gap-2">
           {#each component.properties.options || [] as option, index (option.id)}
-            <div id="item-{index}" class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
-              <div class="flex items-center gap-2">
-                <UI.Dragging
-                  wrapperClass="shrink-0"
-                  container={itemsContainer}
-                  array={component.properties.options}
-                  elementIndex={index}
-                  onUpdate={(updatedArray) => {
-                    updateProperty("options", updatedArray, component, onPropertyChange)
-                  }}
-                />
-                <span class="flex-1"></span>
-                <UI.Button
-                  wrapperClass="w-8 shrink-0"
-                  content={{ icon: ButtonDelete }}
-                  onClick={() => {
-                    const options = [...(component.properties?.options || [])]
-                    options.splice(index, 1)
-                    updateProperty("options", options, component, onPropertyChange)
-                  }}
-                />
-              </div>
+            <div
+              id="item-{index}"
+              class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2"
+            >
+              <UI.Dragging
+                wrapperClass="shrink-0"
+                container={itemsContainer}
+                array={component.properties.options}
+                elementIndex={index}
+                onUpdate={(updatedArray) => {
+                  updateProperty("options", updatedArray, component, onPropertyChange)
+                }}
+              />
               <div class="flex flex-wrap items-end gap-2">
                 <UI.Input
                   label={{ name: $T("constructor.props.optionname") }}
@@ -240,7 +231,7 @@
                 />
                 {#if forConstructor}
                   <UI.Select
-                    wrapperClass="min-w-56 flex-[2] h-13.5"
+                    wrapperClass="min-w-56 flex-[2]"
                     label={{ name: $T("constructor.props.colors") }}
                     type="buttons"
                     options={$optionsStore.COLOR_OPTIONS}
@@ -266,6 +257,15 @@
                   />
                 {/if}
               </div>
+              <UI.Button
+                wrapperClass="w-8 shrink-0"
+                content={{ icon: ButtonDelete }}
+                onClick={() => {
+                  const options = [...(component.properties?.options || [])]
+                  options.splice(index, 1)
+                  updateProperty("options", options, component, onPropertyChange)
+                }}
+              />
             </div>
           {/each}
           <div id="item-{component.properties.options.length}" class="min-h-4"></div>

package/dist/Switch/SwitchProps.svelte

@@ -109,19 +109,7 @@
         {/snippet}
 
         {#each component.properties.options || [] as option, index (option.id)}
-          <div class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
-            <div class="flex items-center gap-2">
-              <span class="flex-1"></span>
-              <UI.Button
-                wrapperClass="w-8 shrink-0"
-                content={{ icon: ButtonDelete }}
-                onClick={() => {
-                  const options = [...(component.properties?.options || [])]
-                  options.splice(index, 1)
-                  updateProperty("options", options, component, onPropertyChange)
-                }}
-              />
-            </div>
+          <div class="grid grid-cols-[1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
             <div class="flex flex-wrap items-end gap-2">
               <UI.Input
                 label={{ name: $T("constructor.props.optionname") }}
@@ -147,7 +135,7 @@
                 }}
               />
               <UI.Select
-                wrapperClass="min-w-56 flex-[2] h-13.5"
+                wrapperClass="min-w-56 flex-[2]"
                 label={{ name: $T("constructor.props.colors") }}
                 type="buttons"
                 options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max" && option.value !== "bg-gray")}
@@ -172,6 +160,15 @@
                 }}
               />
             </div>
+            <UI.Button
+              wrapperClass="w-8 shrink-0"
+              content={{ icon: ButtonDelete }}
+              onClick={() => {
+                const options = [...(component.properties?.options || [])]
+                options.splice(index, 1)
+                updateProperty("options", options, component, onPropertyChange)
+              }}
+            />
           </div>
         {/each}
       </PropsGroup>

package/dist/Table/TableProps.svelte

@@ -238,36 +238,25 @@
               <div class="flex flex-col gap-2" bind:this={settingsContainer[columnIndex]}>
                 {#if typeof column.content !== "function"}
                   {#each column.content as content, index}
-                    <div id={`item-${index}-${columnIndex}`} class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--back-color)/60 p-2">
-                      <!-- Тулбар карточки: перетаскивание слева, удаление справа — поля контента никогда
-                           не переносятся поверх этих кнопок, в отличие от прежней абсолютной раскладки -->
-                      <div class="flex items-center gap-2">
-                        <Dragging
-                          wrapperClass="shrink-0"
-                          container={settingsContainer[columnIndex]}
-                          array={column.content}
-                          elementIndex={index}
-                          containerIndex={columnIndex}
-                          onUpdate={(updatedArray, index) => {
-                            if (index === columnIndex) {
-                              const headers = [...component.properties.header]
-                              headers[columnIndex].content = updatedArray
-                              updateProperty("header", headers, component, onPropertyChange)
-                            }
-                          }}
-                        />
-                        <span class="flex-1"></span>
-                        <UI.Button
-                          wrapperClass="w-8 shrink-0"
-                          content={{ icon: ButtonDelete }}
-                          onClick={() => {
-                            const headers = [...(component.properties.header || [])]
-                            ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
+                    <div
+                      id={`item-${index}-${columnIndex}`}
+                      class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--back-color)/60 p-2"
+                    >
+                      <Dragging
+                        wrapperClass="shrink-0"
+                        container={settingsContainer[columnIndex]}
+                        array={column.content}
+                        elementIndex={index}
+                        containerIndex={columnIndex}
+                        onUpdate={(updatedArray, index) => {
+                          if (index === columnIndex) {
+                            const headers = [...component.properties.header]
+                            headers[columnIndex].content = updatedArray
                             updateProperty("header", headers, component, onPropertyChange)
-                          }}
-                        />
-                      </div>
-
+                          }
+                        }}
+                      />
+                      <div class="flex min-w-0 flex-col gap-2">
                       {#if content.type == "text"}
                         {@const text = content.data}
                         <div class="flex flex-wrap items-end gap-2">
@@ -359,7 +348,7 @@
                               content={{ icon: InfoIcon, info: { text: $T("constructor.props.button.colors.hint"), side: "right" } }}
                             />
                             <UI.Select
-                              wrapperClass="min-w-0 flex-1 h-13.5"
+                              wrapperClass="min-w-0 flex-1"
                               label={{ name: $T("constructor.props.colors") }}
                               type="buttons"
                               options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
@@ -495,6 +484,16 @@
                           />
                         </div>
                       {/if}
+                      </div>
+                      <UI.Button
+                        wrapperClass="w-8 shrink-0"
+                        content={{ icon: ButtonDelete }}
+                        onClick={() => {
+                          const headers = [...(component.properties.header || [])]
+                          ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
+                          updateProperty("header", headers, component, onPropertyChange)
+                        }}
+                      />
                     </div>
                   {/each}
                 {/if}

package/dist/Tabs/TabsProps.svelte

@@ -112,34 +112,19 @@
 
         <div bind:this={itemsContainer} class="flex flex-col gap-2">
           {#each component.properties.items || [] as tab, index}
-            <div id="item-{index}" class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
-              <div class="flex items-center gap-2">
-                <UI.Dragging
-                  wrapperClass="shrink-0"
-                  container={itemsContainer}
-                  array={component.properties.items}
-                  elementIndex={index}
-                  onUpdate={(updatedArray) => {
-                    updateProperty("items", updatedArray, component, onPropertyChange)
-                  }}
-                />
-                <span class="flex-1"></span>
-                {#if component.properties.items.length > 1}
-                  <UI.Button
-                    wrapperClass="w-8 shrink-0"
-                    content={{ icon: ButtonDelete }}
-                    onClick={() => {
-                      const items = [...(component.properties?.items || [])]
-                      items.splice(index, 1)
-                      items.forEach((_item: any, index: number) => {
-                        items[index]["class"] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
-                        updateProperty("items", items, component, onPropertyChange)
-                      })
-                      updateProperty("items", items, component, onPropertyChange)
-                    }}
-                  />
-                {/if}
-              </div>
+            <div
+              id="item-{index}"
+              class="grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2"
+            >
+              <UI.Dragging
+                wrapperClass="shrink-0"
+                container={itemsContainer}
+                array={component.properties.items}
+                elementIndex={index}
+                onUpdate={(updatedArray) => {
+                  updateProperty("items", updatedArray, component, onPropertyChange)
+                }}
+              />
               <div class="flex flex-wrap items-end gap-2">
                 <UI.Input
                   label={{ name: $T("constructor.props.optionname") }}
@@ -181,6 +166,21 @@
                   }}
                 />
               </div>
+              {#if component.properties.items.length > 1}
+                <UI.Button
+                  wrapperClass="w-8 shrink-0"
+                  content={{ icon: ButtonDelete }}
+                  onClick={() => {
+                    const items = [...(component.properties?.items || [])]
+                    items.splice(index, 1)
+                    items.forEach((_item: any, index: number) => {
+                      items[index]["class"] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
+                      updateProperty("items", items, component, onPropertyChange)
+                    })
+                    updateProperty("items", items, component, onPropertyChange)
+                  }}
+                />
+              {/if}
             </div>
           {/each}
           <div id="item-{component.properties.items.length}" class="min-h-4"></div>

package/dist/VideoViewer/VideoViewer.svelte

@@ -19,6 +19,13 @@
 
   const isRemote = $derived(source === "remote")
 
+  /* Мастер-цвет (тот же bg-* из optionsStore.COLOR_OPTIONS, что и у остальных примитивов) —
+     проявляется как акцентная рамка кадра, см. Map.svelte для того же приёма. */
+  const roleBorderClass = $derived.by(() => {
+    const role = wrapperClass?.match(/bg-(\w+)/)?.[1]
+    return role && role !== "max" ? `border-2 border-(--border-color) border-${role}` : ""
+  })
+
   let videoElement = $state<HTMLVideoElement | null>(null)
   let stream = $state<MediaStream | null>(null)
   let error = $state<string | null>(null)
@@ -139,7 +146,7 @@
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
-  <div class="relative flex flex-1 w-full items-center justify-center">
+  <div class={twMerge("relative flex flex-1 w-full items-center justify-center rounded-2xl", roleBorderClass)}>
     {#if isRemote}
       {#if status !== "live" || !remoteImgSrc}
         <div class="absolute h-full w-full rounded-2xl px-40 py-15 flex flex-col items-center justify-center bg-(--border-color)/50 gap-4 z-10">

package/dist/VideoViewer/VideoViewerProps.svelte

@@ -4,6 +4,7 @@
   import * as UI from ".."
   import CommonSnippets from "../CommonSnippets.svelte"
   import PropsGroup from "../PropsGroup.svelte"
+  import { optionsStore } from "../options"
 
   const {
     component,
@@ -14,6 +15,12 @@
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     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-"))),
+    ),
+  )
 </script>
 
 {#snippet VideoViewershowSelect()}
@@ -60,6 +67,7 @@
       {#if component.properties?.source === "remote"}
         {@render VideoViewerStreamKey()}
       {/if}
+      <CommonSnippets snippet="Colors" initialValue={{ color: initialColor }} {component} {onPropertyChange} />
     </PropsGroup>
   </div>
 {:else}
@@ -78,6 +86,7 @@
       {#if component.properties?.source === "remote"}
         {@render VideoViewerStreamKey()}
       {/if}
+      <CommonSnippets snippet="Colors" initialValue={{ color: initialColor }} {component} {onPropertyChange} />
     </PropsGroup>
   </div>
 {/if}

package/dist/Widget/WidgetProps.svelte

@@ -27,6 +27,15 @@
       (c.value as string).includes(component.properties.settings.class?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
     ),
   )
+
+  /* Один мастер-цвет вместо двух независимых пикеров: цвет иконки больше не выбирается отдельно,
+     а выводится из того же bg-* (COLOR_OPTIONS и TEXT_COLOR_OPTIONS — одна и та же ролевая палитра
+     red/yellow/green/blue/purple/gray, см. options.ts). */
+  const deriveIconColorClass = (bgClass: string): string => {
+    const role = bgClass.match(/bg-(\w+)/)?.[1]
+    const match = role && role !== "max" ? $optionsStore.TEXT_COLOR_OPTIONS.find((c) => c.id === `TEXT_COLOR_${role.toUpperCase()}`) : null
+    return (match ?? $optionsStore.TEXT_COLOR_OPTIONS[0]).value as string
+  }
 </script>
 
 {#snippet WidgetSettingsLabel()}
@@ -45,22 +54,9 @@
     options={$optionsStore.COLOR_OPTIONS}
     value={initialColor}
     onUpdate={(option) => {
-      updateProperty("settings.class", twMerge(component.properties.settings.class, (option as UI.IOption<string>).value), component, onPropertyChange)
-    }}
-  />
-{/snippet}
-
-{#snippet WidgetIconColor()}
-  <UI.Select
-    wrapperClass="!h-14"
-    label={{ name: $T("constructor.props.iconcolor") }}
-    type="buttons"
-    options={$optionsStore.TEXT_COLOR_OPTIONS}
-    value={$optionsStore.TEXT_COLOR_OPTIONS.find((c) =>
-      (c.value as string).includes(component.properties.icons.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
-    )}
-    onUpdate={(option) => {
-      updateProperty("icons.class", twMerge(component.properties.icons.class, (option as UI.IOption<string>).value), component, onPropertyChange)
+      const bgClass = (option as UI.IOption<string>).value as string
+      updateProperty("settings.class", twMerge(component.properties.settings.class, bgClass), component, onPropertyChange)
+      updateProperty("icons.class", twMerge(component.properties.icons.class, deriveIconColorClass(bgClass)), component, onPropertyChange)
     }}
   />
 {/snippet}
@@ -132,7 +128,6 @@
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       {@render WidgetUnits()}
       {@render WidgetIcons()}
-      {@render WidgetIconColor()}
       {@render WidgetSwitchingMode()}
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.appearance")}>
@@ -169,7 +164,6 @@
     <PropsGroup label={$T("constructor.props.group.content")}>
       {@render WidgetSettingsLabel()}
       {@render WidgetIcons()}
-      {@render WidgetIconColor()}
       {@render WidgetSwitchingMode()}
     </PropsGroup>
     <PropsGroup label={$T("constructor.props.group.appearance")}>

package/dist/WidgetHeader.svelte

@@ -1,7 +1,9 @@
 <!-- $lib/WidgetHeader.svelte — общая шапка смарт-виджетов конструктора: значок + заголовок
      сворачивают/разворачивают тело виджета по клику (как аккордеон), справа — снипет с любым
      содержимым шапки конкретного виджета (переключатель режима, кнопка "Перезагрузить" и т.п.),
-     клик по нему сворачивание не триггерит. -->
+     клик по нему сворачивание не триггерит. Визуально — та же полоса-заголовок, что и у Accordion
+     (px-3/py-2, bg-container, мелкая 18px иконка без бейджа) вместо прежнего тяжёлого 32px
+     значка-бейджа, который делал шапку заметно выше аккордеона. -->
 <script lang="ts">
   import type { Component, Snippet } from "svelte"
   import ArrowIcon from "./libIcons/ArrowIcon.svelte"
@@ -21,19 +23,19 @@
   const Icon = $derived(icon)
 </script>
 
-<div class="flex flex-wrap items-center justify-between gap-3">
+<div class="flex flex-wrap items-center justify-between gap-3 rounded-[10px] bg-(--container-color) px-3 py-2">
   <button
     type="button"
-    class="flex min-w-0 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left"
+    class="flex min-w-0 flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left"
     onclick={() => (collapsed = !collapsed)}
     aria-expanded={!collapsed}
   >
-    <span class="flex size-8 shrink-0 items-center justify-center rounded-xl bg-(--accent-soft) text-(--accent-color)">
+    <span class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-(--accent-color) [&_svg]:h-full [&_svg]:w-full">
       <Icon />
     </span>
     <span class="min-w-0 truncate text-[14px] font-semibold">{label}</span>
     <span
-      class="flex size-4 shrink-0 items-center justify-center text-(--faint-color) transition-transform duration-150 [&_svg]:h-full [&_svg]:w-full"
+      class="flex h-[14px] w-[14px] shrink-0 items-center justify-center text-(--faint-color) transition-transform duration-150 [&_svg]:h-full [&_svg]:w-full"
       style="transform: rotate({collapsed ? 0 : 90}deg)"
     >
       <ArrowIcon />

package/dist/WidgetWiFi/WidgetWiFi.svelte

@@ -153,7 +153,7 @@
               onUpdate={(option) => (cfg.StaSSID = (option as IOption<string>).name ?? "")}
             />
             <UI.Button
-              wrapperClass="w-9"
+              wrapperClass="w-8"
               componentClass="p-1"
               content={{ icon: scanning ? LoaderIcon : SearchIcon, info: { text: "Сканировать сети", side: "top" } }}
               disabled={scanning || !onScan}

package/dist/options.js

@@ -57,17 +57,18 @@ export const optionsStore = derived(T, ($T) => {
         /* Единая семантическая палитра (app.css: --X-color/--X-soft, светлая и тёмная тема уже учтены) —
            тот же набор ролей, что и в "мастер-цвете" виджетов конструктора (widgetAccent.ts на стороне
            приложения). bg-max — нейтральный вариант (= --back-color), с ним свотч отмечается рамкой
-           (Select.svelte: hasOwnColor), а не акцентной синей заливкой, как обычный сегмент-контрол. */
+           (Select.svelte: hasOwnColor), а не акцентной синей заливкой, как обычный сегмент-контрол.
+           7 пунктов вместо прежних 9: orange/cyan/pink убраны — на глаз сливались с yellow/green/red
+           соответственно; состав теперь 1:1 с TEXT_COLOR_OPTIONS (red/yellow/green/blue/purple/gray) —
+           там уже давно только явно различимые цвета. */
         COLOR_OPTIONS: [
             { id: id(), name: "-", value: "bg-max", class: "bg-max text-transparent" },
             { id: id(), name: "", value: "bg-red", class: "bg-red" },
-            { id: id(), name: "", value: "bg-orange", class: "bg-orange" },
             { id: id(), name: "", value: "bg-yellow", class: "bg-yellow" },
             { id: id(), name: "", value: "bg-green", class: "bg-green" },
-            { id: id(), name: "", value: "bg-cyan", class: "bg-cyan" },
             { id: id(), name: "", value: "bg-blue", class: "bg-blue" },
             { id: id(), name: "", value: "bg-purple", class: "bg-purple" },
-            { id: id(), name: "", value: "bg-pink", class: "bg-pink" },
+            { id: id(), name: "", value: "bg-gray", class: "bg-gray" },
         ],
         TEXT_COLOR_OPTIONS: [
             {

package/package.json

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