poe-svelte-ui-lib 1.2.25 → 1.2.26

package/dist/Accordion/AccordionProps.svelte

@@ -46,10 +46,10 @@
 </script>
 
 {#if forConstructor}
-  <div class="flex items-center justify-center gap-8">
+  <div class="flex items-start justify-center gap-8">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
@@ -137,13 +137,20 @@
     </div>
   </div>
 {:else}
-  <div class="flex items-center justify-center gap-8">
+  <div class="flex items-start justify-center gap-8">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
         label={{ name: $t('constructor.props.id') }}
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -175,7 +182,7 @@
         onChange={(value) => updateProperty('isOpen', value, component, onPropertyChange)}
       />
     </div>
-    <div class="flex w-1/3 flex-col items-center px-2">
+    <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/Button/ButtonProps.svelte

@@ -76,7 +76,8 @@
         help={{ info: $t('constructor.props.argument.info'), autocomplete: 'on', regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
         onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
       />
-
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
       {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value === 'SET'}
         <UI.Input
           label={{ name: $t('constructor.props.value') }}
@@ -97,15 +98,15 @@
           updateProperty('eventHandler.Variables', parts, component, onPropertyChange)
         }}
       />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string, component, onPropertyChange)}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Input
         label={{ name: $t('constructor.props.name') }}
         value={component.properties.content.name}
@@ -139,6 +140,13 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -35,8 +35,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Select
@@ -51,11 +52,11 @@
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string, component, onPropertyChange)}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -82,10 +83,12 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
-      <UI.Input
-        label={{ name: $t('constructor.props.wrapperclass') }}
-        value={component.properties.wrapperClass}
-        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -101,6 +104,11 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
       <UI.TextField content={{ name: $t('constructor.props.defaultcolor'), class: 'font-bold' }} />
       <div class="flex items-center gap-3">
         <UI.TextField wrapperClass="w-4" content={{ name: 'R', class: 'font-bold' }} />

package/dist/FileAttach/FileAttach.svelte

@@ -25,6 +25,7 @@
     onChange = () => {},
   }: IFileInputProps = $props()
 
+  let ID = `${id}-${crypto.randomUUID().slice(0, 6)}`
   let selectedFile = $state<File | null>(null)
   let previewUrl = $derived(currentImage ? (currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`) : null)
 
@@ -44,7 +45,7 @@
   }
 
   const triggerFileInput = () => {
-    const input = document.getElementById(id)
+    const input = document.getElementById(ID)
     input?.click()
   }
 </script>
@@ -77,19 +78,12 @@
           <span class="text-sm text-gray-500">Image</span>
         {/if}
       </button>
-      <input
-        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-        type="file"
-        class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0"
-        {accept}
-        {disabled}
-        onchange={handleFileChange}
-      />
+      <input id={ID} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
     </div>
   {:else}
     <label class="relative inline-block w-full">
       <input
-        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+        id={ID}
         type="file"
         class={`h-8.5 w-full rounded-2xl bg-(--back-color) font-semibold shadow-sm transition duration-250 hover:shadow-md
           ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} invalid:shadow-[0_0_6px(--red-color) file:h-full file:w-1/3 

package/dist/Graph/GraphProps.svelte

@@ -27,8 +27,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
     </div>

package/dist/Input/InputProps.svelte

@@ -101,11 +101,11 @@
         }}
       />
       <UI.Select
-        label={{ name: $t('constructor.props.icon.access') }}
+        label={{ name: $t('constructor.props.access') }}
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
-        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.properties.access)}
-        onUpdate={(option) => updateProperty('acces', option.value as string)}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
       />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
@@ -247,6 +247,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.value') }}
         value={component.properties.value}

package/dist/Joystick/Joystick.svelte

@@ -305,7 +305,7 @@
     </div>
   </div>
 
-  <div class="absolute right-10 flex items-center">
+  <div class="right-10 flex items-center md:absolute">
     <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full flex-col justify-center rounded-full p-10">
       {#each sensitivityOptions as option, index}
         <button

package/dist/Select/SelectProps.svelte

@@ -105,6 +105,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
         type="buttons"
@@ -131,30 +138,17 @@
         }}
       />
       {#if component.properties.bitMode}
-        <div class="flex w-full gap-4">
-          <UI.Input
-            label={{ name: $t('constructor.props.range.start') }}
-            value={component.properties.range.start}
-            onUpdate={(value) => {
-              updateProperty('range.start', value as number, component, onPropertyChange)
-              generateBitOptions(component.properties.range.start, component.properties.range.end)
-            }}
-            number={{ minNum: 0, maxNum: 31, step: 1 }}
-            help={{ info: $t('constructor.props.range.start.help') }}
-            type="number"
-          />
-          <UI.Input
-            label={{ name: $t('constructor.props.range.end') }}
-            value={component.properties.range.end}
-            onUpdate={(value) => {
-              updateProperty('range.end', value as number, component, onPropertyChange)
-              generateBitOptions(component.properties.range.start, component.properties.range.end)
-            }}
-            number={{ minNum: 0, maxNum: 31, step: 1 }}
-            help={{ info: $t('constructor.props.range.end.help') }}
-            type="number"
-          />
-        </div>
+        <UI.Slider
+          label={{ name: $t('constructor.props.range') }}
+          type="range"
+          number={{ minNum: 0, maxNum: 31, step: 1 }}
+          value={[component.properties.range.start, component.properties.range.end]}
+          onUpdate={(value) => {
+            updateProperty('range.start', value[0] as [number, number], component, onPropertyChange)
+            updateProperty('range.end', value as number[][1] as number, component, onPropertyChange)
+            generateBitOptions(component.properties.range.start, component.properties.range.end)
+          }}
+        />
       {/if}
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -271,6 +265,13 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/Slider/Slider.svelte

@@ -1,10 +1,8 @@
 <!-- $lib/ElementsUI/Slider.svelte -->
 <script lang="ts">
   import type { ISliderProps } from '../types'
-  import IconGripVerticalLeft from '../libIcons/IconGripVerticalLeft.svelte'
-  import IconGripVerticalRight from '../libIcons/IconGripVerticalRight.svelte'
-  import IconGripVerticalDual from '../libIcons/IconGripVerticalDual.svelte'
   import { twMerge } from 'tailwind-merge'
+  import { onDestroy, onMount } from 'svelte'
 
   let {
     id = crypto.randomUUID(),
@@ -27,11 +25,6 @@
   let lowerValue = $derived(isRange && Array.isArray(value) ? value[0] : number.minNum)
   let upperValue = $derived(isRange && Array.isArray(value) ? value[1] : number.maxNum)
 
-  /* Расчет позиций */
-  const singlePosition = $derived(((singleValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
-  const lowerPosition = $derived(((lowerValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
-  const upperPosition = $derived(((upperValue - number.minNum) / (number.maxNum - number.minNum)) * 100)
-
   $effect(() => {
     if (value === undefined || value === null) {
       if (type === 'single' && !value) value = number.minNum
@@ -44,8 +37,10 @@
     if (isRange && target !== 'single') {
       if (target === 'lower') {
         lowerValue = Math.max(number.minNum, Math.min(lowerValue + stepValue, upperValue))
+        lowerValue = lowerValue == upperValue ? upperValue - number.step : lowerValue
       } else {
         upperValue = Math.min(number.maxNum, Math.max(upperValue + stepValue, lowerValue))
+        upperValue = upperValue == lowerValue ? upperValue + number.step : upperValue
       }
       onUpdate([lowerValue, upperValue])
     } else {
@@ -80,19 +75,65 @@
 
       if (activeThumb === 'lower') {
         lowerValue = Math.max(number.minNum, Math.min(clickValue, upperValue))
+        lowerValue = lowerValue == upperValue ? upperValue - number.step : lowerValue
       } else {
         upperValue = Math.min(number.maxNum, Math.max(clickValue, lowerValue))
+        upperValue = upperValue == lowerValue ? upperValue + number.step : upperValue
       }
-
       onUpdate([lowerValue, upperValue])
     } else {
       singleValue = Math.max(number.minNum, Math.min(clickValue, number.maxNum))
       onUpdate(singleValue)
     }
   }
+
+  let rangeRefLower: HTMLElement | null = $state(null)
+  let rangeRefUpper: HTMLElement | null = $state(null)
+  let shadowWidth = $state()
+
+  const updateShadowWidth = () => {
+    let thumbCenterLower
+    let thumbCenterUpper
+
+    if (rangeRefLower) {
+      const rect = rangeRefLower.getBoundingClientRect()
+      const percent = (lowerValue - number.minNum) / (number.maxNum - number.minNum)
+      thumbCenterLower = rect.left + rect.width * percent
+    }
+
+    if (rangeRefUpper) {
+      const rect = rangeRefUpper.getBoundingClientRect()
+      const percent = (upperValue - number.minNum) / (number.maxNum - number.minNum)
+      thumbCenterUpper = rect.left + rect.width * percent
+    }
+
+    if (thumbCenterUpper && thumbCenterLower) {
+      shadowWidth = (thumbCenterUpper - thumbCenterLower) / 3.5
+    }
+  }
+
+  $effect(() => {
+    lowerValue
+    upperValue
+    updateShadowWidth()
+  })
+
+  onMount(() => {
+    if (window.visualViewport) {
+      const handleResize = () => {
+        updateShadowWidth()
+      }
+
+      window.visualViewport.addEventListener('resize', handleResize)
+
+      onDestroy(() => {
+        if (window.visualViewport) window.visualViewport.removeEventListener('resize', handleResize)
+      })
+    }
+  })
 </script>
 
-<div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
+<div class={twMerge(`bg-blue relative flex w-full flex-col items-center `, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
@@ -100,22 +141,24 @@
   <!-- Слайдер -->
   <div
     id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-    class="relative flex h-7 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
+    class="relative flex h-9 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
   >
     {#if isRange}
+      {@const userAgent = navigator.userAgent}
       <!-- Трек и активная зона -->
       <div
-        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
+        class={`absolute z-10 h-full w-full rounded-full bg-transparent ${disabled ? '' : 'cursor-pointer'}`}
         role="button"
         tabindex={null}
         onkeydown={null}
-        onclick={disabled ? undefined : handleTrackClick}
-      >
-        <div class="absolute h-full rounded-full bg-(--bg-color)" style={`left: ${lowerPosition}%; right: ${100 - upperPosition}%;`}></div>
-      </div>
+        onclick={(e) => {
+          disabled ? undefined : handleTrackClick(e)
+        }}
+      ></div>
 
       <!-- Ползунки -->
       <input
+        bind:this={rangeRefLower}
         type="range"
         min={number.minNum}
         max={number.maxNum}
@@ -126,20 +169,47 @@
           : (e) => {
               const newValue = Math.min(Number((e.target as HTMLInputElement).value), upperValue)
               lowerValue = newValue
-              activeThumb = 'lower'
+              lowerValue = newValue == upperValue ? upperValue - number.step : newValue
             }}
-        onmouseup={disabled ? undefined : () => onUpdate([lowerValue, upperValue])}
+        onmouseup={(e) => {
+          handleTrackClick(e)
+          disabled ? undefined : () => onUpdate([lowerValue, upperValue])
+        }}
         {disabled}
-        class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'lower' ? 'z-30' : 'z-20'}`}
+        class={twMerge(
+          `slider-bg absolute h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-full 
+              [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-thumb]:relative 
+              [&::-webkit-slider-thumb]:z-100 
+              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
+              [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
+                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+          `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(${shadowWidth}px+0.5rem)_0_0_${shadowWidth}px]`,
+        )}
       />
-      <div
-        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
-        style={`left: calc(${lowerPosition}% + 0rem); top: 50%; transform: translateY(-50%)`}
-      >
-        <IconGripVerticalLeft />
-      </div>
 
       <input
+        bind:this={rangeRefUpper}
         type="range"
         min={number.minNum}
         max={number.maxNum}
@@ -150,59 +220,90 @@
           : (e) => {
               const newValue = Math.max(Number((e.target as HTMLInputElement).value), lowerValue)
               upperValue = newValue
-              activeThumb = 'upper'
+              upperValue = newValue == lowerValue ? newValue + number.step : upperValue
             }}
-        onmouseup={disabled ? undefined : () => onUpdate([lowerValue, upperValue])}
+        onmouseup={(e) => {
+          handleTrackClick(e)
+          disabled ? undefined : () => onUpdate([lowerValue, upperValue])
+        }}
         {disabled}
-        class={`absolute h-full w-full appearance-none bg-transparent ${activeThumb === 'upper' ? 'z-30' : 'z-20'}`}
+        class={twMerge(
+          `slider-bg absolute h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-full
+              [&::-webkit-slider-thumb]:relative 
+              [&::-webkit-slider-thumb]:z-100
+              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
+              [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
+                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+          `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+            ${shadowWidth ? '' : ''}  [&::-webkit-slider-thumb]:shadow-[calc(${shadowWidth}px*-1-0.5rem)_0_0_${shadowWidth}px]`,
+        )}
       />
-      <div
-        class="pointer-events-none absolute z-40 rounded-full bg-(--field-color)"
-        style={`left: calc(${upperPosition}% - 2rem); top: 50%; transform: translateY(-50%)`}
-      >
-        <IconGripVerticalRight />
-      </div>
     {:else}
+      {@const userAgent = navigator.userAgent}
       <!-- Одиночный слайдер -->
-      <div
-        class={`absolute h-full w-full rounded-full bg-(--gray-color) ${disabled ? '' : 'cursor-pointer'}`}
-        role="button"
-        tabindex={null}
-        onkeydown={null}
-        onclick={disabled ? undefined : handleTrackClick}
-      >
-        <div
-          class="absolute z-10 h-full {singlePosition === 100 ? ' rounded-full' : 'rounded-l-full'}"
-          style={`width: ${singlePosition}%; background-color: var(--bg-color)`}
-        ></div>
-      </div>
+      <div class="absolute h-full w-full">
+        <input
+          type="range"
+          class={twMerge(
+            `slider-bg  h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-full
+              [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-thumb]:relative 
 
-      <input
-        type="range"
-        min={number.minNum}
-        max={number.maxNum}
-        step={number.step}
-        bind:value={singleValue}
-        oninput={disabled
-          ? undefined
-          : (e) => {
-              singleValue = Number((e.target as HTMLInputElement).value)
-            }}
-        onmouseup={disabled ? undefined : () => onUpdate(singleValue)}
-        {disabled}
-        class="absolute z-20 h-full w-full appearance-none"
-      />
-      <div
-        class="pointer-events-none absolute z-30 rounded-full bg-(--field-color)"
-        style={`left: clamp(1rem, ${singlePosition}%, calc(100% - 1rem)); top: 50%; transform: translate(-50%, -50%)`}
-      >
-        <IconGripVerticalDual />
+              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
+              [&::-webkit-slider-thumb]:h-4
+              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:cursor-pointer
+              [&::-webkit-slider-thumb]:rounded-full
+            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+            ${
+              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
+                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
+                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+            }
+            [&::-moz-range-thumb]:relative 
+            [&::-moz-range-thumb]:ml-[-0.4rem]
+            [&::-moz-range-thumb]:size-4 
+            [&::-moz-range-thumb]:cursor-pointer 
+            [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:shadow-[var(--focus-shadow),] 
+            [&::-moz-range-thumb]:ring-[6px] 
+            [&::-moz-range-track]:rounded-full
+            [&::-moz-range-track]:bg-(--gray-color)
+             `,
+            `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
+          )}
+          min={number.minNum}
+          max={number.maxNum}
+          step={number.step}
+          bind:value={singleValue}
+        />
       </div>
     {/if}
   </div>
 
   <!-- Кнопки управления -->
-  <div class={`mt-2 flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
+  <div class={`mt-3 flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
     {#if isRange}
       {#each ['lower', 'upper'] as type (type)}
         <div
@@ -246,64 +347,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  input[type='range'] {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-    padding: 0;
-    pointer-events: none;
-    outline: none;
-  }
-
-  /* Webkit thumb */
-  input[type='range']::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: transparent;
-    cursor: pointer;
-    pointer-events: auto;
-    border: none;
-  }
-
-  /* Firefox thumb */
-  input[type='range']::-moz-range-thumb {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    background: transparent;
-    cursor: pointer;
-    pointer-events: auto;
-    border: none;
-  }
-
-  /* Webkit track */
-  input[type='range']::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    border-radius: 0;
-    border: none;
-  }
-
-  /* Firefox track */
-  input[type='range']::-moz-range-track {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    border-radius: 0;
-    border: none;
-  }
-
-  input[type='range']:disabled::-webkit-slider-thumb {
-    cursor: not-allowed;
-  }
-
-  input[type='range']:disabled::-moz-range-thumb {
-    cursor: not-allowed;
-  }
-</style>

package/dist/Slider/SliderProps.svelte

@@ -40,8 +40,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Select
@@ -53,6 +54,13 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
@@ -144,6 +152,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}

package/dist/Switch/SwitchProps.svelte

@@ -36,8 +36,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Select
@@ -49,6 +50,16 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
+    </div>
+
+    <div class="flex w-1/3 flex-col px-2">
       <UI.Select
         wrapperClass="!h-14"
         label={{ name: $t('constructor.props.type') }}
@@ -58,9 +69,7 @@
         value={$optionsStore.SWITCH_OPTIONS.find((option) => option.value == component.properties.type)}
         onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
       />
-    </div>
-    {#if !component.properties.bitMode}
-      <div class="flex w-1/3 flex-col px-2">
+      {#if !component.properties.bitMode}
         <UI.Input
           label={{ name: $t('constructor.props.caption.left') }}
           value={component.properties.label.captionLeft}
@@ -83,8 +92,9 @@
             updateProperty('options', options, component, onPropertyChange)
           }}
         />
-      </div>
-    {/if}
+      {/if}
+    </div>
+
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
@@ -215,6 +225,13 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}

package/dist/Table/Table.svelte

@@ -166,13 +166,13 @@
       {#each header as column, index (column)}
         <div
           class={twMerge(
-            `justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
+            `items-center justify-center border-l ${outline && index !== 0 ? ' border-(--border-color)' : 'border-transparent'} ${
               column.align?.header === 'center'
                 ? 'flex justify-center text-center'
                 : column.align?.header === 'right'
                   ? 'flex justify-end text-right'
                   : 'flex justify-start text-left'
-            } bg-(--bg-color) p-2 text-left`,
+            } gap-1 bg-(--bg-color) p-2 text-left`,
             column.label?.class,
           )}
         >

package/dist/Table/TableProps.svelte

@@ -81,10 +81,18 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Select
@@ -145,6 +153,7 @@
       <div class="mr-2 flex items-end justify-around gap-6">
         <UI.Input
           label={{ name: $t('constructor.props.table.columns.key') }}
+          wrapperClass="w-170"
           value={column.key}
           help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
           onUpdate={(value) => {
@@ -161,21 +170,30 @@
         />
         <UI.Input
           label={{ name: $t('constructor.props.table.columns.width') }}
-          wrapperClass="w-120"
+          wrapperClass="w-150"
           type="number"
           value={Number(column.width.replace('%', ''))}
           onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
         />
+        <UI.Select
+          label={{ name: $t('constructor.props.align.content') }}
+          type="buttons"
+          value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
+          options={$optionsStore.ALIGN_OPTIONS}
+          onUpdate={(option) => {
+            updateTableHeader(columnIndex, 'align', { header: option.value, content: option.value })
+          }}
+        />
         <UI.Switch
-          wrapperClass="w-2/10"
-          label={{ name: $t('constructor.props.table.columns.sortable') }}
+          wrapperClass="w-30"
+          label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
           options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
           value={column.sortable}
           onChange={(value) => updateTableHeader(columnIndex, 'sortable', value)}
         />
         <UI.Switch
-          wrapperClass="w-2/10"
-          label={{ name: $t('constructor.props.copy') }}
+          wrapperClass="w-30"
+          label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
           options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
           value={column.overflow?.copy}
           onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value })}
@@ -263,6 +281,7 @@
         value={component.properties.id}
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
+
       <UI.Input
         label={{ name: $t('constructor.props.wrapperclass') }}
         value={component.properties.wrapperClass}
@@ -285,6 +304,13 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.access') }}
+        type="buttons"
+        options={$optionsStore.ACCESS_OPTION}
+        value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
+        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+      />
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}

package/dist/TextField/TextFieldProps.svelte

@@ -30,8 +30,8 @@
       (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
-  const initialBold = $derived(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('font-bold')))
-  const initialItalic = $derived(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('italic')))
+  const initialBold = $derived(component.properties.content?.class?.split(' ').some((cls: string) => cls.includes('font-bold')))
+  const initialItalic = $derived(component.properties.content?.class?.split(' ').some((cls: string) => cls.startsWith('italic')))
 </script>
 
 {#if forConstructor}
@@ -42,8 +42,9 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, component, onPropertyChange, value.name?.split('—')[1].trim())
+          updateProperty('id', value.value as string, component, onPropertyChange)
           updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
         }}
       />
       <UI.Input
@@ -77,6 +78,7 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      <!-- <p>{component.properties.content?.class?.split(' ').includes((cls: string) => cls.startsWith('font-bold'))}</p> -->
       <UI.Switch
         label={{ name: $t('constructor.props.bold') }}
         value={initialBold}
@@ -84,7 +86,7 @@
         onChange={(value) =>
           updateProperty(
             'content.class',
-            `${component.properties.content.class} ${value ? 'font-bold' : 'font-normal'}`,
+            twMerge(`${component.properties.content.class} ${value ? 'font-bold' : 'font-normal'}`),
             component,
             onPropertyChange,
           )}
@@ -94,7 +96,12 @@
         value={initialItalic}
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
-          updateProperty('content.class', `${component.properties.content.class} ${value ? 'italic' : 'not-italic'}`, component, onPropertyChange)}
+          updateProperty(
+            'content.class',
+            twMerge(`${component.properties.content.class} ${value ? 'italic' : 'not-italic'}`),
+            component,
+            onPropertyChange,
+          )}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.background') }}

package/dist/locales/translations.js

@@ -41,7 +41,7 @@ const translations = {
         'constructor.props.type.vertical': 'Вертикально',
         'constructor.props.type.checkbox': 'Галочка',
         'constructor.props.type.full': 'Полный',
-        'constructor.props.type.viewOnly': 'Только просмотр',
+        'constructor.props.type.viewOnly': 'Просмотр',
         'constructor.props.type.hidden': 'Скрыто',
         /* Общие для редактора свойств */
         'constructor.props.id': 'Идентификатор',
@@ -67,7 +67,7 @@ const translations = {
         'constructor.props.variables.info': 'Поле для ввода имён переменных, разделенных пробелами',
         'constructor.props.value': 'Значение',
         'constructor.props.value.info': 'Поле для ввода Value пакета в формате JSON',
-        'constructor.props.align': 'Выравнивание',
+        'constructor.props.align': 'Выравнивание надписи',
         'constructor.props.align.header': 'Выравнивание заголовка',
         'constructor.props.align.content': 'Выравнивание контента',
         'constructor.props.image': 'Фоновое изображение',
@@ -120,13 +120,11 @@ const translations = {
         'constructor.props.copy': 'Копирование',
         'constructor.props.size.height': 'Высота сетки',
         'constructor.props.size.width': 'Ширина сетки',
-        'constructor.props.range.start': 'Начальный бит ',
-        'constructor.props.range.end': 'Последний бит',
-        'constructor.props.range.start.help': 'Позиция начального бита диапазона ',
-        'constructor.props.range.end.help': 'Позиция последнего бита диапазона',
+        'constructor.props.range': 'Диапазон позиции битов ',
         'constructor.props.icon.text.position': 'Положение иконки',
         'constructor.props.equal': 'Равные',
         'constructor.props.bitmode': 'Битовый режим',
+        'constructor.props.access': 'Доступ (не для владельца)',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.2.25",
+  "version": "1.2.26",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -48,7 +48,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.43.10",
+    "svelte": "^5.43.12",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.2",
     "vite-plugin-compression": "^0.5.1"