poe-svelte-ui-lib 1.82.1 → 1.83.1

package/dist/Accordion/AccordionProps.svelte

@@ -1,7 +1,7 @@
 <!-- $lib/ElementsUI/AccordionProps.svelte -->
 <script lang="ts">
   import { T } from "../locales/i18n"
-  import { updateProperty, type IAccordionProps, type IUIComponentHandler, type UIComponent } from "../types"
+  import { findOptionByClass, updateProperty, type IAccordionProps, type IUIComponentHandler, type UIComponent } from "../types"
   import * as UI from ".."
   import { optionsStore } from "../options"
   import { ICONS } from "../icons"
@@ -15,17 +15,13 @@
     component,
     onPropertyChange,
     forConstructor = true,
-  } = $props<{
+  }: {
     component: UIComponent & { properties: Partial<IAccordionProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
-  }>()
+  } = $props()
 
-  const initialAlign = $derived(
-    $optionsStore.JUSTIFY_ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("justify-"))),
-    ),
-  )
+  const initialAlign = $derived(findOptionByClass($optionsStore.JUSTIFY_ALIGN_OPTIONS, component.properties.label?.class, "justify-"))
 
   const handleImageUpload = (event: Event) => {
     const input = event.target as HTMLInputElement
@@ -69,14 +65,14 @@
   <div class="flex w-full gap-4">
     <UI.Input
       label={{ name: $T("constructor.props.size.height") }}
-      value={component.properties.size.height}
+      value={component.properties.size?.height}
       onUpdate={(value) => updateProperty("size.height", value as number, component, onPropertyChange)}
       number={{ minNum: 1, maxNum: 1000, step: 1 }}
       type="number"
     />
     <UI.Input
       label={{ name: $T("constructor.props.size.width") }}
-      value={component.properties.size.width}
+      value={component.properties.size?.width}
       onUpdate={(value) => updateProperty("size.width", value as number, component, onPropertyChange)}
       number={{ minNum: 1, maxNum: 1000, step: 1 }}
       type="number"
@@ -87,7 +83,7 @@
 {#snippet AccordionIsOpen()}
   <UI.Switch
     label={{ name: $T("constructor.props.open") }}
-    value={component.properties.isOpen}
+    value={component.properties.isOpen ? 1 : 0}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
     onChange={(value) => updateProperty("isOpen", value === 1, component, onPropertyChange)}
   />
@@ -105,7 +101,7 @@
         snippet="IconsLib"
         initialValue={{
           name: $T("constructor.props.labelicon"),
-          icon: component.properties.label.icon,
+          icon: component.properties.label?.icon,
           updateProperty: (icon: string) => updateProperty("label.icon", icon as string, component, onPropertyChange),
           icons: { array: ICONS },
         }}
@@ -137,7 +133,7 @@
         initialValue={{
           name: $T("constructor.props.labelicon"),
           icons: { array: ICONS },
-          icon: component.properties.label.icon,
+          icon: component.properties.label?.icon,
           updateProperty: (icon: string) => updateProperty("label.icon", icon as string, component, onPropertyChange),
         }}
         {component}

package/dist/Button/ButtonProps.svelte

@@ -4,7 +4,7 @@
   import { localizeText } from "../locales/localize"
   import { DEFAULT_LANGUAGE } from "../locales/languages"
   import { T } from "../locales/i18n"
-  import { type UIComponent, type IButtonProps, type IOption, updateProperty, type IUIComponentHandler } from "../types"
+  import { type UIComponent, type IButtonProps, type IOption, updateProperty, findOptionByClass, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { optionsStore, findColorOption } from "../options"
   import { twMerge } from "tailwind-merge"
@@ -17,37 +17,33 @@
     component,
     onPropertyChange,
     forConstructor = true,
-  } = $props<{
+  }: {
     component: UIComponent & { properties: Partial<IButtonProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
-  }>()
+  } = $props()
 
   /* Argument пуст — поле ниже лишь визуально показывает "ModCfg", реальное значение нужно проставить в состояние */
   $effect(() => {
-    if (!component.eventHandler.Argument) onPropertyChange({ eventHandler: { Argument: "ModCfg" } })
+    if (!component.eventHandler?.Argument) onPropertyChange({ eventHandler: { Argument: "ModCfg" } })
   })
 
-  let hasValue: boolean = $derived(component.eventHandler.Value)
+  let hasValue: boolean = $derived(!!component.eventHandler?.Value)
 
   let Header: IOption = $derived(
-    $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.eventHandler.Header) ?? { id: "", name: "", value: "", class: "!w-1/4" },
+    $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.eventHandler?.Header) ?? { id: "", name: "", value: "", class: "!w-1/4" },
   )
 
   const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.componentClass))
 
-  const initialHeight = $derived(
-    $optionsStore.HEIGHT_OPTIONS.find((h) =>
-      (h.value as string).includes(component.properties.componentClass?.split(" ").find((cls: string) => cls.startsWith("py-"))),
-    ),
-  )
+  const initialHeight = $derived(findOptionByClass($optionsStore.HEIGHT_OPTIONS, component.properties.componentClass, "py-"))
   const updateIconProperty = (propertyName: string, value: string) => {
     updateProperty(propertyName, value, component, onPropertyChange)
-    if (component.properties.content.icon && !localizeText(component.properties.content.name, DEFAULT_LANGUAGE).trim())
+    if (component.properties.content?.icon && !localizeText(component.properties.content?.name, DEFAULT_LANGUAGE).trim())
       updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-fit p-2"), component, onPropertyChange)
     else if (
-      (component.properties.content.icon && localizeText(component.properties.content.name, DEFAULT_LANGUAGE).trim()) ||
-      (!component.properties.content.icon && !localizeText(component.properties.content.name, DEFAULT_LANGUAGE).trim())
+      (component.properties.content?.icon && localizeText(component.properties.content?.name, DEFAULT_LANGUAGE).trim()) ||
+      (!component.properties.content?.icon && !localizeText(component.properties.content?.name, DEFAULT_LANGUAGE).trim())
     )
       updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-full px-1 py-1"), component, onPropertyChange)
   }
@@ -75,7 +71,7 @@
   />
   <UI.Input
     label={{ name: $T("constructor.props.argument") }}
-    value={component.eventHandler.Argument || "ModCfg"}
+    value={component.eventHandler?.Argument || "ModCfg"}
     maxlength={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 } })}
@@ -83,10 +79,10 @@
 {/snippet}
 
 {#snippet ButtonVariables()}
-  {#if component.eventHandler.Argument !== "ModCfg" || Header.value === "SET"}
+  {#if component.eventHandler?.Argument !== "ModCfg" || Header.value === "SET"}
     <UI.Input
       label={{ name: $T("constructor.props.value") }}
-      value={component.eventHandler.Value}
+      value={component.eventHandler?.Value}
       help={{ info: $T("constructor.props.value.info") }}
       maxlength={500}
       onUpdate={(value) => onPropertyChange({ eventHandler: { Value: value as string } })}
@@ -95,7 +91,7 @@
   <UI.Input
     label={{ name: $T("constructor.props.variables") }}
     disabled={hasValue}
-    value={component.eventHandler.Variables.join(" ")}
+    value={component.eventHandler?.Variables?.join(" ")}
     help={{ info: $T("constructor.props.variables.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9.\-_ ":{}]{0,500}$/ }}
     maxlength={500}
     onUpdate={(value) => onPropertyChange({ eventHandler: { Variables: (value as string).trim().split(/\s+/) } })}
@@ -107,7 +103,7 @@
 {/snippet}
 
 {#snippet ButtonHeight()}
-  {#if !(!localizeText(component.properties.content.name, DEFAULT_LANGUAGE).trim() && component.properties.content.icon)}
+  {#if !(!localizeText(component.properties.content?.name, DEFAULT_LANGUAGE).trim() && component.properties.content?.icon)}
     <UI.Select
       label={{ name: $T("constructor.props.height") }}
       type="buttons"
@@ -124,7 +120,7 @@
     label={{ name: $T("constructor.props.info.side") }}
     type="buttons"
     options={$optionsStore.INFO_SIDE_OPTIONS}
-    value={$optionsStore.INFO_SIDE_OPTIONS.find((h) => h.value === component.properties.content.info.side)}
+    value={$optionsStore.INFO_SIDE_OPTIONS.find((h) => h.value === component.properties.content?.info?.side)}
     onUpdate={(option) => updateProperty("content.info.side", (option as IOption<string>).value as string, component, onPropertyChange)}
   />
 {/snippet}
@@ -168,7 +164,7 @@
         snippet="IconsLib"
         initialValue={{
           name: $T("constructor.props.buttonIcon"),
-          icon: component.properties.content.icon,
+          icon: component.properties.content?.icon,
           updateProperty: (icon: string) => updateIconProperty("content.icon", icon as string),
           icons: { array: ICONS },
         }}
@@ -197,7 +193,7 @@
         snippet="IconsLib"
         initialValue={{
           name: $T("constructor.props.buttonIcon"),
-          icon: component.properties.content.icon,
+          icon: component.properties.content?.icon,
           updateProperty: (icon: string) => updateIconProperty("content.icon", icon as string),
           icons: { array: ICONS },
         }}

package/dist/CommonSnippets.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as UI from "./"
+  import * as UI from "./index"
   import { T } from "./locales/i18n"
   import CrossIcon from "./libIcons/CrossIcon.svelte"
   import { optionsStore } from "./options"

package/dist/CommonSnippets.svelte.d.ts

@@ -1,4 +1,4 @@
-import * as UI from "./";
+import * as UI from "./index";
 type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "BitModeInfo" | "MinMaxStep" | "";
 type $$ComponentProps = {
     snippet: snippetNames;

package/dist/Divider/DividerProps.svelte

@@ -11,11 +11,11 @@
     component,
     onPropertyChange,
     forConstructor = true,
-  } = $props<{
+  }: {
     component: UIComponent & { properties: Partial<IDividerProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
-  }>()
+  } = $props()
 
   let currentType = $derived($optionsStore.DIVIDER_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
   let currentAnchor = $derived($optionsStore.DIVIDER_ANCHOR_OPTIONS.find((a) => a.value === component.properties.anchor))

package/dist/FileAttach/FileAttachProps.svelte

@@ -1,7 +1,7 @@
 <!-- $lib/ElementsUI/ButtonProps.svelte -->
 <script lang="ts">
   import { T } from "../locales/i18n"
-  import { type IFileAttachProps, type IUIComponentHandler, type UIComponent, updateProperty } from "../types"
+  import { type IFileAttachProps, type IUIComponentHandler, type UIComponent, updateProperty, findOptionByClass } from "../types"
   import * as UI from ".."
   import { optionsStore } from "../options"
   import { getContext } from "svelte"
@@ -13,20 +13,16 @@
     component,
     onPropertyChange,
     forConstructor = true,
-  } = $props<{
+  }: {
     component: UIComponent & { properties: Partial<IFileAttachProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
-  }>()
+  } = $props()
 
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  const initialAlign = $derived(
-    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
-    ),
-  )
+  const initialAlign = $derived(findOptionByClass($optionsStore.TEXT_ALIGN_OPTIONS, component.properties.label?.class, "text-"))
 </script>
 
 {#snippet FileAccept()}
@@ -42,7 +38,7 @@
   <UI.Select
     label={{ name: $T("constructor.props.type") }}
     type="buttons"
-    value={$optionsStore.FILE_ATTACH_TYPE_OPTIONS.find((c) => (c.value as string).includes(component.properties.type))}
+    value={$optionsStore.FILE_ATTACH_TYPE_OPTIONS.find((c) => !!component.properties.type && (c.value as string).includes(component.properties.type))}
     options={$optionsStore.FILE_ATTACH_TYPE_OPTIONS}
     onUpdate={(option) => updateProperty("type", (option as UI.IOption).value as string, component, onPropertyChange)}
   />
@@ -52,13 +48,13 @@
       <UI.Input
         label={{ name: $T("constructor.props.imageSize.height") }}
         type="number"
-        value={component.properties.imageSize.height.replace("rem", "")}
+        value={component.properties.imageSize?.height?.replace("rem", "")}
         onUpdate={(value) => updateProperty("imageSize.height", `${value as string}rem`, component, onPropertyChange)}
       />
       <UI.Input
         label={{ name: $T("constructor.props.imageSize.width") }}
         type="number"
-        value={component.properties.imageSize.width.replace("rem", "")}
+        value={component.properties.imageSize?.width?.replace("rem", "")}
         onUpdate={(value) => updateProperty("imageSize.width", `${value as string}rem`, component, onPropertyChange)}
       />
     </div>
@@ -66,14 +62,18 @@
       <UI.Select
         label={{ name: $T("constructor.props.fitmode") }}
         type="buttons"
-        value={$optionsStore.FITMODE_OPTIONS.find((c) => (c.value as string).includes(component.properties.imageSize.fitMode))}
+        value={$optionsStore.FITMODE_OPTIONS.find(
+          (c) => !!component.properties.imageSize?.fitMode && (c.value as string).includes(component.properties.imageSize?.fitMode),
+        )}
         options={$optionsStore.FITMODE_OPTIONS}
         onUpdate={(option) => updateProperty("imageSize.fitMode", (option as UI.IOption).value as string, component, onPropertyChange)}
       />
       <UI.Select
         label={{ name: $T("constructor.props.form") }}
         type="buttons"
-        value={$optionsStore.FORM_OPTIONS.find((c) => (c.value as string).includes(component.properties.imageSize.form))}
+        value={$optionsStore.FORM_OPTIONS.find(
+          (c) => !!component.properties.imageSize?.form && (c.value as string).includes(component.properties.imageSize?.form),
+        )}
         options={$optionsStore.FORM_OPTIONS}
         onUpdate={(option) => updateProperty("imageSize.form", (option as UI.IOption).value as string, component, onPropertyChange)}
       />

package/dist/Graph/GraphProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte"
   import { T } from "../locales/i18n"
-  import { type UIComponent, type IGraphProps, type IOption, updateProperty, type IUIComponentHandler } from "../types"
+  import { type UIComponent, type IGraphProps, type IOption, updateProperty, findOptionByClass, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { optionsStore } from "../options"
   import { twMerge } from "tailwind-merge"
@@ -13,27 +13,23 @@
     component,
     onPropertyChange,
     forConstructor = true,
-  } = $props<{
+  }: {
     component: UIComponent & { properties: Partial<IGraphProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
-  }>()
+  } = $props()
 
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  const initialAlign = $derived(
-    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
-    ),
-  )
+  const initialAlign = $derived(findOptionByClass($optionsStore.TEXT_ALIGN_OPTIONS, component.properties.label?.class, "text-"))
 </script>
 
 {#snippet GraphIsTest()}
   <UI.Switch
     wrapperClass="bg-blue"
     label={{ name: $T("constructor.props.istest") }}
-    value={component.properties.isTest}
+    value={component.properties.isTest ? 1 : 0}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
     onChange={(value) => updateProperty("isTest", value === 1, component, onPropertyChange)}
   />

package/dist/Input/InputProps.svelte

@@ -5,6 +5,7 @@
   import translations from "../locales/translations"
   import { DEFAULT_LANGUAGE, LANGUAGE_CODES } from "../locales/languages"
   import type { IInputProps, UIComponent, IOption, IUIComponentHandler } from "../types"
+  import { findOptionByClass } from "../types"
   import * as UI from ".."
   import { optionsStore, findColorOption } from "../options"
   import { twMerge } from "tailwind-merge"
@@ -16,11 +17,11 @@
     component,
     onPropertyChange,
     forConstructor = true,
-  } = $props<{
+  }: {
     component: UIComponent & { properties: Partial<IInputProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
-  }>()
+  } = $props()
 
   let isValidRegExp = $state(true)
   let showRegExpLibrary = $state(false)
@@ -29,11 +30,7 @@
 
   const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.componentClass))
 
-  const initialAlign = $derived(
-    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
-    ),
-  )
+  const initialAlign = $derived(findOptionByClass($optionsStore.TEXT_ALIGN_OPTIONS, component.properties.label?.class, "text-"))
 
   /* Обновление свойства */
   /* Подсказка битового режима «Максимальное число: N» сразу на всех языках — иначе записалась бы на языке интерфейса конструктора */
@@ -43,6 +40,9 @@
     return Object.fromEntries(LANGUAGE_CODES.map((lang) => [lang, `${row[lang] || row[DEFAULT_LANGUAGE]}: ${max}`]))
   }
 
+  /* Диапазон битов поля bitMode; без range в свойствах — один нулевой бит */
+  const bitRange = $derived(component.properties.range ?? { start: 0, end: 0 })
+
   const updateProperty = (path: string, value: string | object | boolean | number | RegExp) => {
     const newProperties = JSON.parse(JSON.stringify(component.properties))
     if (path === "regExp") {
@@ -116,7 +116,7 @@
     type="buttons"
     options={$optionsStore.ACCESS_OPTION}
     value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-    onUpdate={(option) => onPropertyChange({ access: (option as IOption).value })}
+    onUpdate={(option) => onPropertyChange({ access: (option as IOption).value as string })}
   />
 {/snippet}
 
@@ -130,7 +130,7 @@
     type="buttons"
     value={initialAlign}
     options={$optionsStore.TEXT_ALIGN_OPTIONS}
-    onUpdate={(option) => updateProperty("label.class", twMerge(component.properties.label.class, (option as IOption<string>).value))}
+    onUpdate={(option) => updateProperty("label.class", twMerge(component.properties.label?.class, (option as IOption<string>).value))}
   />
 {/snippet}
 
@@ -141,13 +141,13 @@
     type="buttons"
     value={$optionsStore.INPUT_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || "text"))}
     onUpdate={(option) => {
-      if ((option as IOption<string>).value == "password" && component.properties.help.copyButton) updateProperty("help.copyButton", false)
+      if ((option as IOption<string>).value == "password" && component.properties.help?.copyButton) updateProperty("help.copyButton", false)
       if ((option as IOption<string>).value === "bitMode") {
         updateProperty("type", "number")
         updateProperty("number.minNum", 0)
-        updateProperty("number.maxNum", Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1)
+        updateProperty("number.maxNum", Math.pow(2, bitRange.end - bitRange.start + 1) - 1)
         updateProperty("number.step", 1)
-        updateProperty("help.info", maxNumInfo(component.properties.range))
+        updateProperty("help.info", maxNumInfo(bitRange))
       } else {
         updateProperty("help.info", "")
       }
@@ -166,7 +166,7 @@
     <div class="flex items-end">
       <UI.Input
         label={{ name: $T("constructor.props.regexp") }}
-        value={component.properties.help.regExp}
+        value={component.properties.help?.regExp?.toString()}
         maxlength={150}
         componentClass={isValidRegExp === false ? "!border-2 !border-red-400" : ""}
         onUpdate={(value) => updateProperty("help.regExp", value as string)}
@@ -187,7 +187,7 @@
                 role="button"
                 tabindex={null}
                 onkeydown={null}
-                onclick={() => (component.properties.help.regExp = regexp.value)}
+                onclick={() => component.properties.help && (component.properties.help.regExp = regexp.value)}
               >
                 <h5>{regexp.name}</h5>
                 <span>{regexp.value}</span>
@@ -211,7 +211,7 @@
         options={$optionsStore.TEXT_ALIGN_OPTIONS}
         type="buttons"
         value={$optionsStore.TEXT_ALIGN_OPTIONS.find(
-          (opt) => opt.value === (component.properties.componentClass.split(" ").find((cl: string) => cl.startsWith("text-")) || "text-center"),
+          (opt) => opt.value === (component.properties.componentClass?.split(" ").find((cl: string) => cl.startsWith("text-")) || "text-center"),
         )}
         onUpdate={(option) => {
           updateProperty("componentClass", twMerge(component.properties.componentClass, (option as IOption<string>).value))
@@ -222,7 +222,7 @@
     <div class="flex">
       <UI.Input
         label={{ name: $T("constructor.props.min") }}
-        value={component.properties.number.minNum as number}
+        value={component.properties.number?.minNum as number}
         type="number"
         onUpdate={(value) => {
           updateProperty("number.minNum", Number(value))
@@ -230,7 +230,7 @@
       />
       <UI.Input
         label={{ name: $T("constructor.props.max") }}
-        value={component.properties.number.maxNum as number}
+        value={component.properties.number?.maxNum as number}
         type="number"
         onUpdate={(value) => {
           updateProperty("number.maxNum", Number(value))
@@ -238,7 +238,7 @@
       />
       <UI.Input
         label={{ name: $T("constructor.props.step") }}
-        value={component.properties.number.step as number}
+        value={component.properties.number?.step as number}
         type="number"
         onUpdate={(value) => updateProperty("number.step", Number(value))}
       />
@@ -248,13 +248,13 @@
       label={{ name: $T("constructor.props.range") }}
       type="range"
       number={{ minNum: 0, maxNum: 31, step: 1 }}
-      value={[component.properties.range.start, component.properties.range.end]}
+      value={[bitRange.start, bitRange.end]}
       onUpdate={(value) => {
         if (Array.isArray(value)) {
           updateProperty("range.start", value[0] as number)
           updateProperty("range.end", value[1] as number)
           updateProperty("number.minNum", 0)
-          updateProperty("number.maxNum", Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1)
+          updateProperty("number.maxNum", Math.pow(2, bitRange.end - bitRange.start + 1) - 1)
           updateProperty("number.step", 1)
           updateProperty("help.info", maxNumInfo({ start: value[0] as number, end: value[1] as number }))
         }
@@ -273,12 +273,12 @@
       type="buttons"
       multiSelect={true}
       value={$optionsStore.INPUT_SETTING_OPTIONS.filter((opt) => {
-        if (opt.value.split(".").reduce((o, key) => o?.[key], component.properties)) return opt
+        if (opt.value.split(".").reduce((o: any, key) => o?.[key], component.properties)) return opt
       })}
       onUpdate={(value) => {
         const currentActiveValues = $optionsStore.INPUT_SETTING_OPTIONS.filter((opt) => {
           if (!opt?.value) return false
-          return opt.value.split(".").reduce((o, key) => o?.[key], component.properties)
+          return opt.value.split(".").reduce((o: any, key) => o?.[key], component.properties)
         }).map((opt) => opt.value)
         if (Array.isArray(value)) {
           value.forEach((opt) => {
@@ -300,7 +300,7 @@
   <UI.Select
     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"))}
+    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)}
   />
 {/snippet}
@@ -331,7 +331,7 @@
 {#snippet InputLabelClass()}
   <UI.Input
     label={{ name: $T("constructor.props.label.class") }}
-    value={component.properties.label.class}
+    value={component.properties.label?.class}
     onUpdate={(value) => updateProperty("label.class", value as string)}
   />
 {/snippet}
@@ -356,7 +356,7 @@
 {#snippet InputDisabled()}
   <UI.Switch
     label={{ name: $T("constructor.props.disabled") }}
-    value={component.properties.disabled}
+    value={component.properties.disabled ? 1 : 0}
     options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
     onChange={(value) => updateProperty("disabled", value === 1)}
   />

package/dist/Joystick/JoystickProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte"
   import { T } from "../locales/i18n"
-  import { type UIComponent, type IJoystickProps, updateProperty, type IUIComponentHandler } from "../types"
+  import { type UIComponent, type IJoystickProps, updateProperty, findOptionByClass, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { ICONS } from "../icons"
   import { optionsStore, findColorOption } from "../options"
@@ -12,20 +12,16 @@
     component,
     onPropertyChange,
     forConstructor = true,
-  } = $props<{
+  }: {
     component: UIComponent & { properties: Partial<IJoystickProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
-  }>()
+  } = $props()
 
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
-  const initialAlign = $derived(
-    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(" ").find((cls: string) => cls.startsWith("text-"))),
-    ),
-  )
+  const initialAlign = $derived(findOptionByClass($optionsStore.TEXT_ALIGN_OPTIONS, component.properties.label?.class, "text-"))
 
   const initialColor = $derived(findColorOption($optionsStore.COLOR_OPTIONS, component.properties.wrapperClass))
 </script>
@@ -47,7 +43,7 @@
             updateProperty: (value: number, property: string) => {
               updateProperty(
                 "axes",
-                component.properties.axes.map((a: any, i: number) => (i === index ? { ...a, [property.split(".")[1]]: value } : a)),
+                (component.properties.axes ?? []).map((a: any, i: number) => (i === index ? { ...a, [property.split(".")[1]]: value } : a)),
                 component,
                 onPropertyChange,
               )

package/dist/PeriodChart/PeriodChartProps.svelte

@@ -16,11 +16,11 @@
     component,
     onPropertyChange,
     forConstructor = true,
-  } = $props<{
+  }: {
     component: UIComponent & { properties: Partial<IPeriodChartProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
-  }>()
+  } = $props()
 
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
@@ -91,7 +91,7 @@
             >
               <UI.Dragging
                 container={itemsContainer}
-                array={component.properties.levels}
+                array={component.properties.levels ?? []}
                 elementIndex={index}
                 onUpdate={(updatedArray) => updateLevels(updatedArray)}
               />