poe-svelte-ui-lib 1.9.21 → 1.9.23

package/dist/Input/InputProps.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { getContext } from "svelte"
-  import { t } from "../locales/i18n"
+  import { T } from "../locales/i18n"
   import type { IInputProps, UIComponent, IOption, IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { optionsStore } from "../options"
   import { twMerge } from "tailwind-merge"
   import Library from "../libIcons/Library.svelte"
+  import CommonSnippets from "../CommonSnippets.svelte"
 
   const {
     component,
@@ -91,7 +92,7 @@
 
 {#snippet InputVariable()}
   <UI.Select
-    label={{ name: $t("constructor.props.variable") }}
+    label={{ name: $T("constructor.props.variable") }}
     type="input"
     options={VARIABLE_OPTIONS}
     value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
@@ -104,7 +105,7 @@
 
 {#snippet InputAccess()}
   <UI.Select
-    label={{ name: $t("constructor.props.access") }}
+    label={{ name: $T("constructor.props.access") }}
     type="buttons"
     options={$optionsStore.ACCESS_OPTION}
     value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
@@ -114,7 +115,7 @@
 
 {#snippet InputLabel()}
   <UI.Input
-    label={{ name: $t("constructor.props.label") }}
+    label={{ name: $T("constructor.props.label") }}
     value={component.properties.label.name}
     onUpdate={(value) => updateProperty("label.name", value as string)}
   />
@@ -122,7 +123,7 @@
 
 {#snippet InputLabelAlign()}
   <UI.Select
-    label={{ name: $t("constructor.props.align") }}
+    label={{ name: $T("constructor.props.align") }}
     type="buttons"
     value={initialAlign}
     options={$optionsStore.TEXT_ALIGN_OPTIONS}
@@ -132,7 +133,7 @@
 
 {#snippet InputType()}
   <UI.Select
-    label={{ name: $t("constructor.props.type") }}
+    label={{ name: $T("constructor.props.type") }}
     options={$optionsStore.INPUT_TYPE_OPTIONS}
     type="buttons"
     value={$optionsStore.INPUT_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || "text"))}
@@ -143,7 +144,7 @@
         updateProperty("number.minNum", 0)
         updateProperty("number.maxNum", Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1)
         updateProperty("number.step", 1)
-        updateProperty("help.info", `${$t("constructor.props.maxnum")}: ${component.properties.number.maxNum}`)
+        updateProperty("help.info", `${$T("constructor.props.maxnum")}: ${component.properties.number.maxNum}`)
       } else {
         updateProperty("help.info", "")
       }
@@ -153,7 +154,7 @@
   />
   {#if component.properties.type === "text" || component.properties.type === "password" || component.properties.type === "text-area"}
     <UI.Input
-      label={{ name: $t("constructor.props.maxlength") }}
+      label={{ name: $T("constructor.props.maxlength") }}
       type="number"
       number={{ minNum: 1, maxNum: 1000000, step: 1 }}
       value={component.properties.maxlength}
@@ -161,7 +162,7 @@
     />
     <div class="flex items-end">
       <UI.Input
-        label={{ name: $t("constructor.props.regexp") }}
+        label={{ name: $T("constructor.props.regexp") }}
         value={component.properties.help.regExp}
         maxlength={150}
         componentClass={isValidRegExp === false ? "!border-2 !border-red-400" : ""}
@@ -169,13 +170,13 @@
       />
       <UI.Button
         wrapperClass="w-8"
-        content={{ icon: Library, info: { text: $t("constructor.props.regexp.library.info"), side: "top" } }}
+        content={{ icon: Library, info: { text: $T("constructor.props.regexp.library.info"), side: "top" } }}
         onClick={() => {
           showRegExpLibrary = !showRegExpLibrary
         }}
       />
       {#if showRegExpLibrary}
-        <UI.Modal title={$t("constructor.props.regexp.library.info")} bind:isOpen={showRegExpLibrary} wrapperClass="w-200 h-[80%]">
+        <UI.Modal title={$T("constructor.props.regexp.library.info")} bind:isOpen={showRegExpLibrary} wrapperClass="w-200 h-[80%]">
           {#snippet main()}
             {#each $optionsStore.INPUT_REGEXP_OPTIONS as regexp}
               <div
@@ -196,14 +197,14 @@
 
     {#if component.properties.type === "text-area"}
       <UI.Input
-        label={{ name: $t("constructor.props.textarea.rows") }}
+        label={{ name: $T("constructor.props.textarea.rows") }}
         value={component.properties.textareaRows}
         onUpdate={(value) => updateProperty("textareaRows", value as string)}
       />
     {/if}
     {#if component.properties.type === "text" || component.properties.type === "text-area"}
       <UI.Select
-        label={{ name: $t("constructor.props.align.content") }}
+        label={{ name: $T("constructor.props.align.content") }}
         options={$optionsStore.TEXT_ALIGN_OPTIONS}
         type="buttons"
         value={$optionsStore.TEXT_ALIGN_OPTIONS.find(
@@ -217,7 +218,7 @@
   {:else if component.properties.type === "number" && !component.properties.readonly && !component.properties.disabled}
     <div class="flex">
       <UI.Input
-        label={{ name: $t("constructor.props.min") }}
+        label={{ name: $T("constructor.props.min") }}
         value={component.properties.number.minNum as number}
         type="number"
         onUpdate={(value) => {
@@ -225,7 +226,7 @@
         }}
       />
       <UI.Input
-        label={{ name: $t("constructor.props.max") }}
+        label={{ name: $T("constructor.props.max") }}
         value={component.properties.number.maxNum as number}
         type="number"
         onUpdate={(value) => {
@@ -233,7 +234,7 @@
         }}
       />
       <UI.Input
-        label={{ name: $t("constructor.props.step") }}
+        label={{ name: $T("constructor.props.step") }}
         value={component.properties.number.step as number}
         type="number"
         onUpdate={(value) => updateProperty("number.step", Number(value))}
@@ -241,7 +242,7 @@
     </div>
   {:else if component.properties.type === "bitMode"}
     <UI.Slider
-      label={{ name: $t("constructor.props.range") }}
+      label={{ name: $T("constructor.props.range") }}
       type="range"
       number={{ minNum: 0, maxNum: 31, step: 1 }}
       value={[component.properties.range.start, component.properties.range.end]}
@@ -252,7 +253,7 @@
           updateProperty("number.minNum", 0)
           updateProperty("number.maxNum", Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1)
           updateProperty("number.step", 1)
-          updateProperty("help.info", `${$t("constructor.props.maxnum")}: ${component.properties.number.maxNum}`)
+          updateProperty("help.info", `${$T("constructor.props.maxnum")}: ${component.properties.number.maxNum}`)
         }
       }}
     />
@@ -261,7 +262,7 @@
 
 {#snippet InputPlaceholder()}
   <UI.Input
-    label={{ name: $t("constructor.props.placeholder") }}
+    label={{ name: $T("constructor.props.placeholder") }}
     value={component.properties.placeholder as string}
     onUpdate={(value) => updateProperty("placeholder", value)}
   />
@@ -269,7 +270,7 @@
 
 {#snippet InputInfo()}
   <UI.Input
-    label={{ name: $t("constructor.props.info") }}
+    label={{ name: $T("constructor.props.info") }}
     value={component.properties.help.info as string}
     onUpdate={(value) => updateProperty("help.info", value)}
   />
@@ -311,7 +312,7 @@
 
 {#snippet InputAutocomplete()}
   <UI.Select
-    label={{ name: $t("constructor.props.autocomplete") }}
+    label={{ name: $T("constructor.props.autocomplete") }}
     options={$optionsStore.AUTOCOMPLETE_CONSTRUCTOR_OPTIONS}
     value={$optionsStore.AUTOCOMPLETE_CONSTRUCTOR_OPTIONS.find((opt) => opt.value === (component.properties.help.autocomplete || "off"))}
     onUpdate={(option) => updateProperty("help.autocomplete", (option as UI.IOption).value as string)}
@@ -321,7 +322,7 @@
 {#snippet InputColors()}
   <UI.Select
     wrapperClass="h-14"
-    label={{ name: $t("constructor.props.colors") }}
+    label={{ name: $T("constructor.props.colors") }}
     type="buttons"
     options={$optionsStore.COLOR_OPTIONS}
     value={initialColor}
@@ -330,12 +331,12 @@
 {/snippet}
 
 {#snippet InputIdentificator()}
-  <UI.Input label={{ name: $t("constructor.props.id") }} value={component.properties.id} onUpdate={(value) => updateProperty("id", value as string)} />
+  <UI.Input label={{ name: $T("constructor.props.id") }} value={component.properties.id} onUpdate={(value) => updateProperty("id", value as string)} />
 {/snippet}
 
 {#snippet InputWrapperClass()}
   <UI.Input
-    label={{ name: $t("constructor.props.wrapperclass") }}
+    label={{ name: $T("constructor.props.wrapperclass") }}
     value={component.properties.wrapperClass}
     onUpdate={(value) => updateProperty("wrapperClass", value as string)}
   />
@@ -343,7 +344,7 @@
 
 {#snippet InputLabelClass()}
   <UI.Input
-    label={{ name: $t("constructor.props.label.class") }}
+    label={{ name: $T("constructor.props.label.class") }}
     value={component.properties.label.class}
     onUpdate={(value) => updateProperty("label.class", value as string)}
   />
@@ -351,19 +352,23 @@
 
 {#snippet InputComponentClass()}
   <UI.Input
-    label={{ name: $t("constructor.props.componentclass") }}
+    label={{ name: $T("constructor.props.componentclass") }}
     value={component.properties.componentClass}
     onUpdate={(value) => updateProperty("componentClass", twMerge(component.properties.componentClass, value as string))}
   />
 {/snippet}
 
 {#snippet InputValue()}
-  <UI.Input label={{ name: $t("constructor.props.value") }} value={component.properties.value} onUpdate={(value) => updateProperty("value", value as string)} />
+  <UI.Input
+    label={{ name: $T("constructor.props.defaultvalue") }}
+    value={component.properties.value}
+    onUpdate={(value) => updateProperty("value", value as string)}
+  />
 {/snippet}
 
 {#snippet InputDisabled()}
   <UI.Switch
-    label={{ name: $t("constructor.props.disabled") }}
+    label={{ name: $T("constructor.props.disabled") }}
     value={component.properties.disabled}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
     onChange={(value) => updateProperty("disabled", value)}
@@ -378,9 +383,11 @@
       {@render InputType()}
     </div>
     <div class="flex w-1/3 flex-col px-2">
+      {@render InputValue()}
       {@render InputPlaceholder()}
       {@render InputInfo()}
       {@render InputSettings()}
+      <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render InputLabel()}
@@ -403,6 +410,7 @@
       {@render InputAccess()}
       {@render InputValue()}
       {@render InputType()}
+      <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render InputPlaceholder()}

package/dist/Joystick/JoystickProps.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte"
-  import { t } from "../locales/i18n"
+  import { T } from "../locales/i18n"
   import { type UIComponent, type IGraphProps, updateProperty, type IOption, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { ICONS } from "../icons"
@@ -37,9 +37,9 @@
   <div class="mt-2 flex w-full justify-around gap-2">
     {#each component.properties.axes as axe, index}
       {@const axesOptions = [
-        { name: $t("constructor.props.joystick.pitch.axe"), info: "", regExp: /^[\p{L}0-9\-_"':{}]+$/u },
-        { name: $t("constructor.props.joystick.yaw.axe"), info: "", regExp: /^[\p{L}0-9\-_"':{}]+$/u },
-        { name: $t("constructor.props.joystick.roll.axe"), info: $t("constructor.props.joystick.axes.info"), regExp: /^[\p{L}0-9\-_"':{}]*$/u },
+        { name: $T("constructor.props.joystick.pitch.axe"), info: "", regExp: /^[\p{L}0-9\-_"':{}]+$/u },
+        { name: $T("constructor.props.joystick.yaw.axe"), info: "", regExp: /^[\p{L}0-9\-_"':{}]+$/u },
+        { name: $T("constructor.props.joystick.roll.axe"), info: $T("constructor.props.joystick.axes.info"), regExp: /^[\p{L}0-9\-_"':{}]*$/u },
       ]}
       <div class="flex flex-col gap-1">
         <UI.Input
@@ -95,7 +95,7 @@
         <CommonSnippets
           snippet="IconsLib"
           initialValue={{
-            name: $t("constructor.props.buttonIcon"),
+            name: $T("constructor.props.buttonIcon"),
             icon: component.properties.buttonIcon,
             updateProperty: (icon: string) => updateProperty("buttonIcon", icon as string, component, onPropertyChange),
             icons: { array: ICONS },
@@ -124,7 +124,7 @@
         <CommonSnippets
           snippet="IconsLib"
           initialValue={{
-            name: $t("constructor.props.buttonIcon"),
+            name: $T("constructor.props.buttonIcon"),
             icon: component.properties.buttonIcon,
             updateProperty: (icon: string) => updateProperty("buttonIcon", icon as string, component, onPropertyChange),
             icons: { array: ICONS },

package/dist/Joystick/README.md

@@ -124,7 +124,7 @@
 - Поддерживает настройку осей управления (названия, диапазоны значений)
 - Включает настройки чувствительности и иконки центральной кнопки
 - Имеет различные наборы полей в зависимости от режима (`forConstructor`)
-- Использует систему локализации через `$t('constructor.props.*')`
+- Использует систему локализации через `$T('constructor.props.*')`
 
 ## Заметки
 

package/dist/Map/Map.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from "../locales/i18n"
+  import { T } from "../locales/i18n"
   import type { IDeviceGNSS, IMapProps } from "../types"
   import { onDestroy, onMount } from "svelte"
   import { fade } from "svelte/transition"
@@ -112,7 +112,7 @@
 
     <CustomControl position="top-left">
       <div class="flex items-center gap-2 px-2 py-1 text-black">
-        <label for="timeout" class="text-sm font-medium">{$t("constructor.props.map.timeout")}</label>
+        <label for="timeout" class="text-sm font-medium">{$T("constructor.props.map.timeout")}</label>
         <select
           id="timeout"
           class="rounded px-2 py-1 text-sm"

package/dist/Map/MapProps.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { t } from "../locales/i18n"
+  import { T } from "../locales/i18n"
   import { type UIComponent, type IGraphProps, updateProperty, type IUIComponentHandler } from "../types"
   import { ICONS } from "../icons"
   import { optionsStore } from "../options"
@@ -40,7 +40,7 @@
       <CommonSnippets
         snippet="IconsLib"
         initialValue={{
-          name: $t("constructor.props.markerIcon"),
+          name: $T("constructor.props.markerIcon"),
           icon: component.properties.markerIcon,
           updateProperty: (icon: string) => updateProperty("markerIcon", icon as string, component, onPropertyChange),
           icons: { array: ICONS },
@@ -65,7 +65,7 @@
       <CommonSnippets
         snippet="IconsLib"
         initialValue={{
-          name: $t("constructor.props.markerIcon"),
+          name: $T("constructor.props.markerIcon"),
           icon: component.properties.markerIcon,
           updateProperty: (icon: string) => updateProperty("markerIcon", icon as string, component, onPropertyChange),
           icons: { array: ICONS },

package/dist/Map/README.md

@@ -129,7 +129,7 @@
 - Поддерживает выбор иконки для маркера устройства
 - Включает настройки доступа и переменной устройства
 - Имеет различные наборы полей в зависимости от режима (`forConstructor`)
-- Использует систему локализации через `$t('constructor.props.*')`
+- Использует систему локализации через `$T('constructor.props.*')`
 
 ## Заметки
 

package/dist/Map/mapWrapper/MapLibre.svelte

@@ -2,7 +2,7 @@
   import { onDestroy, onMount, type Snippet } from "svelte"
   import { prepareMapContext } from "./contexts.svelte.js"
   import { loadMapLibre } from "./utils.js"
-  import { t } from "../../locales/i18n"
+  import { T } from "../../locales/i18n"
 
   interface Props {
     class?: string
@@ -72,7 +72,7 @@
 <div class="{className} {!hasConnection ? 'bg-(--border-color)/50' : ''}" bind:this={container}>
   {#if isLoading || !hasConnection}
     <div class="h-full w-full flex items-center justify-center">
-      <h2>{isLoading ? $t("constructor.props.map.loading") : $t("constructor.props.map.noconnection")}</h2>
+      <h2>{isLoading ? $T("constructor.props.map.loading") : $T("constructor.props.map.noconnection")}</h2>
     </div>{/if}
 
   {#if map}

package/dist/ModalStackStore.d.ts

@@ -2,6 +2,4 @@ export declare const ModalStack: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     open: (id: string) => void;
     close: (id: string) => void;
-    getTopmost: () => string;
-    isInStack: (id: string) => boolean;
 };

package/dist/ModalStackStore.js

@@ -1,4 +1,4 @@
-import { writable, get } from "svelte/store";
+import { writable } from "svelte/store";
 const ModalStore = writable([]);
 export const ModalStack = {
     subscribe: ModalStore.subscribe,
@@ -8,12 +8,4 @@ export const ModalStack = {
     close: (id) => {
         ModalStore.update((state) => state.filter((item) => item !== id));
     },
-    getTopmost: () => {
-        const state = get(ModalStore);
-        return state[state.length - 1];
-    },
-    isInStack: (id) => {
-        const state = get(ModalStore);
-        return state.includes(id);
-    },
 };

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte"
-  import { t } from "../locales/i18n"
+  import { T } from "../locales/i18n"
   import { type UIComponent, type IProgressBarProps, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { optionsStore } from "../options"
@@ -26,7 +26,7 @@
 {#snippet ProgressBarType()}
   <UI.Select
     wrapperClass="!h-14"
-    label={{ name: $t("constructor.props.type") }}
+    label={{ name: $T("constructor.props.type") }}
     disabled={component.properties.bitMode}
     type="buttons"
     options={$optionsStore.SWITCH_OPTIONS.filter((o) => o.value !== "checkbox")}
@@ -37,7 +37,7 @@
 
 {#snippet ProgressBarUnits()}
   <UI.Input
-    label={{ name: $t("constructor.props.units") }}
+    label={{ name: $T("constructor.props.units") }}
     value={component.properties.number.units}
     onUpdate={(value) => updateProperty("number.units", value, component, onPropertyChange)}
   />
@@ -46,7 +46,7 @@
 {#snippet ProgressBarOptions()}
   <div class="space-y-4" bind:this={itemsContainer}>
     <div class="m-0 flex items-center justify-center gap-2">
-      <h4>{$t("constructor.props.progressbar.title")}</h4>
+      <h4>{$T("constructor.props.progressbar.title")}</h4>
       <UI.Button
         wrapperClass="w-8"
         content={{ icon: ButtonAdd }}
@@ -81,7 +81,7 @@
           }}
         />
         <UI.Input
-          label={{ name: $t("constructor.props.optionname") }}
+          label={{ name: $T("constructor.props.optionname") }}
           wrapperClass="w-1/4"
           value={progress.name}
           onUpdate={(value) => {
@@ -92,7 +92,7 @@
         />
         {#if forConstructor}
           <UI.Select
-            label={{ name: $t("constructor.props.colors") }}
+            label={{ name: $T("constructor.props.colors") }}
             wrapperClass="w-1/2 h-14.5"
             type="buttons"
             options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
@@ -107,7 +107,7 @@
           />
         {:else}
           <UI.Input
-            label={{ name: $t("constructor.props.optionvalue") }}
+            label={{ name: $T("constructor.props.optionvalue") }}
             wrapperClass="w-1/4"
             value={(component.properties.value || [])[index]?.Value}
             type="number"
@@ -126,7 +126,7 @@
             }}
           />
           <UI.Input
-            label={{ name: $t("constructor.props.optionclass") }}
+            label={{ name: $T("constructor.props.optionclass") }}
             wrapperClass="w-1/3"
             value={progress.class}
             onUpdate={(value) => {

package/dist/ProgressBar/README.md

@@ -134,7 +134,7 @@
 - Поддерживает добавление и удаление элементов индикатора
 - Включает настройки типа, диапазона значений и единиц измерения
 - Имеет различные наборы полей в зависимости от режима (`forConstructor`)
-- Использует систему локализации через `$t('constructor.props.*')`
+- Использует систему локализации через `$T('constructor.props.*')`
 
 ## Заметки
 

package/dist/Select/README.md

@@ -153,7 +153,7 @@
 - Поддерживает настройку типа отображения, значения и мультивыбора
 - Включает управление списком опций с возможностью добавления/удаления
 - Имеет различные наборы полей в зависимости от режима (`forConstructor`)
-- Использует систему локализации через `$t('constructor.props.*')`
+- Использует систему локализации через `$T('constructor.props.*')`
 
 ## Заметки
 

package/dist/Select/Select.svelte

@@ -4,7 +4,7 @@
   import { onMount } from "svelte"
   import type { IOption, ISelectProps } from "../types"
   import { twMerge } from "tailwind-merge"
-  import { t } from "../locales/i18n"
+  import { T } from "../locales/i18n"
 
   let isDropdownOpen = $state(false)
   let dropdownElement: HTMLDivElement
@@ -120,7 +120,7 @@
         aria-expanded={isDropdownOpen}
         {disabled}
       >
-        {value?.name || $t("common.select_tag")}
+        {value?.name || $T("common.select_tag")}
       </button>
 
       {#if isDropdownOpen}

package/dist/Select/SelectProps.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import { getContext, onMount } from "svelte"
-  import { t } from "../locales/i18n"
+  import { T } from "../locales/i18n"
   import { type UIComponent, type ISelectProps, type IOption, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import ButtonDelete from "../libIcons/ButtonDelete.svelte"
   import ButtonAdd from "../libIcons/ButtonAdd.svelte"
   import { optionsStore } from "../options.js"
-  import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
 
   const {
@@ -58,7 +57,7 @@
 
 {#snippet SelectArgument()}
   <UI.Select
-    label={{ name: $t("constructor.props.argument") }}
+    label={{ name: $T("constructor.props.argument") }}
     type="buttons"
     value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.eventHandler.Argument) ??
       $optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === "")}
@@ -73,14 +72,14 @@
     value={component.eventHandler.Argument}
     maxlength={32}
     disabled={component.eventHandler.Argument == "Save" || component.eventHandler.Argument == "NoSave"}
-    help={{ info: $t("constructor.props.argument.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
+    help={{ info: $T("constructor.props.argument.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
     onUpdate={(value) => onPropertyChange({ eventHandler: { Argument: value as string } })}
   />
 {/snippet}
 
 {#snippet SelectType()}
   <UI.Select
-    label={{ name: $t("constructor.props.type") }}
+    label={{ name: $T("constructor.props.type") }}
     type="buttons"
     value={currentType}
     options={$optionsStore.SELECT_TYPE_OPTIONS}
@@ -96,7 +95,7 @@
 {#snippet SelectValueType()}
   <UI.Select
     wrapperClass="h-14"
-    label={{ name: $t("constructor.props.valuetype") }}
+    label={{ name: $T("constructor.props.valuetype") }}
     type="buttons"
     disabled={component.properties.bitMode}
     options={$optionsStore.SELECT_VALUE_TYPE_OPTIONS}
@@ -116,7 +115,7 @@
 
 {#snippet SelectSettings()}
   <UI.Switch
-    label={{ name: $t("constructor.props.bitMode") }}
+    label={{ name: $T("constructor.props.bitMode") }}
     value={component.properties.bitMode}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
     onChange={(value) => {
@@ -132,7 +131,7 @@
 
   {#if component.properties.type === "buttons" && !component.properties.bitMode}
     <UI.Switch
-      label={{ name: $t("constructor.props.multiselect") }}
+      label={{ name: $T("constructor.props.multiselect") }}
       value={component.properties.multiSelect}
       options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
       onChange={(value) => {
@@ -143,7 +142,7 @@
 
   {#if component.properties.bitMode}
     <UI.Slider
-      label={{ name: $t("constructor.props.range") }}
+      label={{ name: $T("constructor.props.range") }}
       type="range"
       number={{ minNum: 0, maxNum: 31, step: 1 }}
       value={[component.properties.range.start, component.properties.range.end]}
@@ -162,7 +161,7 @@
 
   <div class="space-y-4" bind:this={itemsContainer}>
     <div class="m-0 flex items-center justify-center gap-2">
-      <h4>{$t("constructor.props.options.title")}</h4>
+      <h4>{$T("constructor.props.options.title")}</h4>
       <UI.Button
         wrapperClass="w-8"
         content={{ icon: ButtonAdd }}
@@ -191,7 +190,7 @@
           }}
         />
         <UI.Input
-          label={{ name: $t("constructor.props.optionname") }}
+          label={{ name: $T("constructor.props.optionname") }}
           wrapperClass="w-3/10"
           value={option.name}
           onUpdate={(value) => {
@@ -201,7 +200,7 @@
           }}
         />
         <UI.Input
-          label={{ name: $t("constructor.props.optionvalue") }}
+          label={{ name: $T("constructor.props.optionvalue") }}
           wrapperClass="w-3/10"
           value={option.value}
           type={currentValueType.value}
@@ -217,7 +216,7 @@
         {#if forConstructor}
           <UI.Select
             wrapperClass="w-80 h-14.5"
-            label={{ name: $t("constructor.props.colors") }}
+            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-"))))}
@@ -229,7 +228,7 @@
           />
         {:else}
           <UI.Input
-            label={{ name: $t("constructor.props.optionclass") }}
+            label={{ name: $T("constructor.props.optionclass") }}
             wrapperClass="w-3/10"
             value={option.class}
             onUpdate={(value) => {
@@ -265,6 +264,7 @@
     <div class="flex w-1/3 flex-col px-2">
       {@render SelectType()}
       {@render SelectValueType()}
+      <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
@@ -284,6 +284,7 @@
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />
       <CommonSnippets snippet="LabelClass" {component} {onPropertyChange} />
       <CommonSnippets snippet="Disabled" {component} {onPropertyChange} />
+      <CommonSnippets snippet="BitModeInfo" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       {@render SelectType()}

package/dist/Slider/README.md

@@ -154,7 +154,7 @@
 - Поддерживает настройку типа слайдера (одиночный или диапазонный)
 - Включает настройки диапазона значений и шага
 - Имеет различные наборы полей в зависимости от режима (`forConstructor`)
-- Использует систему локализации через `$t('constructor.props.*')`
+- Использует систему локализации через `$T('constructor.props.*')`
 
 ## Заметки