poe-svelte-ui-lib 1.9.2 → 1.9.4

package/dist/Button/ButtonProps.svelte

@@ -21,12 +21,7 @@
   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(
@@ -48,10 +43,7 @@
     type="buttons"
     value={Header}
     options={$optionsStore.HEADER_OPTIONS}
-    onUpdate={(option) => {
-      Header = { ...(option as IOption<string>) }
-      onPropertyChange({ eventHandler: { Header: Header.value as string } })
-    }}
+    onUpdate={(option) => onPropertyChange({ eventHandler: { Header: (option as IOption<string>).value as string } })}
   />
   {#if Header.value === "SET"}
     <UI.Select
@@ -60,9 +52,7 @@
       value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.eventHandler.Argument) ??
         $optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === "")}
       options={$optionsStore.FULL_ARGUMENT_OPTION}
-      onUpdate={(option) => {
-        onPropertyChange({ eventHandler: { Argument: (option as IOption<string>).value as string } })
-      }}
+      onUpdate={(option) => onPropertyChange({ eventHandler: { Argument: (option as IOption<string>).value as string } })}
     />
   {/if}
   <UI.Input
@@ -74,6 +64,9 @@
     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 ButtonVariables()}
   {#if (component.eventHandler.Argument !== "Save" && component.eventHandler.Argument !== "NoSave") || Header.value === "SET"}
     <UI.Input
       label={{ name: $t("constructor.props.value") }}
@@ -83,20 +76,13 @@
       onUpdate={(value) => onPropertyChange({ eventHandler: { Value: value as string } })}
     />
   {/if}
-{/snippet}
-
-{#snippet ButtonVariables()}
   <UI.Input
     label={{ name: $t("constructor.props.variables") }}
     disabled={hasValue}
     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) => {
-      const parts = (value as string).trim().split(/\s+/)
-
-      onPropertyChange({ eventHandler: { Variables: parts } })
-    }}
+    onUpdate={(value) => onPropertyChange({ eventHandler: { Variables: (value as string).trim().split(/\s+/) } })}
   />
 {/snippet}
 
@@ -161,11 +147,11 @@
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       {@render ButtonHeaderArgument()}
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render ButtonVariables()}
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets
         snippet="IconsLib"
         initialValue={{

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -60,11 +60,11 @@
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
-      <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
-      <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
+      <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />

package/dist/CommonSnippets.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import * as UI from "./"
   import { t } from "./locales/i18n"
-  import { ICONS } from "./icons"
   import CrossIcon from "./libIcons/CrossIcon.svelte"
   import { optionsStore } from "./options"
   import { updateProperty } from "./types"
@@ -34,6 +33,7 @@
     | "EventHandlerArgument"
     | "IconsLib"
     | "Readonly"
+    | "MinMaxStep"
     | ""
 
   let showIconLib: boolean = $state(false)
@@ -204,6 +204,38 @@
   />
 {/snippet}
 
+{#snippet MinMaxStep(initialValue: {
+  number: { minNum: number; maxNum: number; step: number }
+  bitMode: boolean
+  updateProperty: (value: number, property: string) => {}
+})}
+  <div class="flex">
+    <UI.Input
+      label={{ name: $t("constructor.props.min") }}
+      value={initialValue.number.minNum}
+      type="number"
+      readonly={initialValue.bitMode}
+      onUpdate={(value) => initialValue.updateProperty(value as number, "number.minNum")}
+    />
+    <UI.Input
+      label={{ name: $t("constructor.props.max") }}
+      value={initialValue.number.maxNum}
+      type="number"
+      readonly={initialValue.bitMode}
+      onUpdate={(value) => initialValue.updateProperty(value as number, "number.maxNum")}
+    />
+    {#if component.type !== "ProgressBar"}
+      <UI.Input
+        label={{ name: $t("constructor.props.step") }}
+        value={initialValue.number.step}
+        type="number"
+        readonly={initialValue.bitMode}
+        onUpdate={(value) => initialValue.updateProperty(value as number, "number.step")}
+      />
+    {/if}
+  </div>
+{/snippet}
+
 {#snippet IconsLib(initialValue: {
   name: string
   icons: { array: [string, string[]][]; selectArray?: false }
@@ -271,4 +303,6 @@
   {@render Readonly()}
 {:else if snippet === "IconsLib"}
   {@render IconsLib(initialValue)}
+{:else if snippet === "MinMaxStep"}
+  {@render MinMaxStep(initialValue)}
 {/if}

package/dist/CommonSnippets.svelte.d.ts

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

package/dist/ComponentExample.svelte

@@ -1,65 +1,90 @@
 <script lang="ts">
-  import { Switch, t } from "./"
+  import { Select, Switch, t, type IOption } from "./"
   import type { Snippet } from "svelte"
   import { fade } from "svelte/transition"
 
   let {
     component,
     componentProps,
+    examples,
     codeText,
     forConstructor = $bindable(),
-  }: { component: Snippet; componentProps: Snippet; codeText: string; forConstructor: boolean } = $props()
+  }: { component: Snippet; componentProps: Snippet; examples?: Snippet; codeText: string; forConstructor: boolean } = $props()
 
   let isCopied = $state(false)
+  let snippetOptions = [
+    { id: crypto.randomUUID(), value: "overview", name: $t("library.overview") },
+    { id: crypto.randomUUID(), value: "examples", name: $t("library.examples") },
+  ]
+
+  let mainSnippet: string | undefined = $state("overview")
+
+  const renderCurrentSnippet = () => {
+    if (mainSnippet === "examples" && examples) return examples
+    else return overview
+  }
 </script>
 
-<div class="flex h-[calc(100vh-9rem)] flex-col">
-  <div class="flex-1">
-    {@render component()}
-  </div>
-  <Switch
-    wrapperClass="w-60 self-end p-2"
-    label={{ name: $t("library.for_constructor") }}
-    value={forConstructor ? 1 : 0}
-    options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
-    onChange={(value) => (forConstructor = value == 0 ? false : true)}
+{#if examples}
+  <Select
+    wrapperClass="w-1/2 mx-auto mb-3"
+    type="buttons"
+    options={snippetOptions}
+    value={snippetOptions.find((o) => o.value == mainSnippet)}
+    onUpdate={(value) => (mainSnippet = (value as IOption<string>).value)}
   />
-  <div class="border-t border-gray-500"></div>
-  <div class="max-h-[70%]" transition:fade={{ duration: 200 }}>
-    {@render componentProps()}
-    <div class="relative mt-3">
-      <button
-        class="absolute top-2 right-3 flex cursor-pointer border-none bg-transparent"
-        onclick={(e) => {
-          e.preventDefault()
-          navigator.clipboard.writeText(codeText)
-          isCopied = true
-          setTimeout(() => (isCopied = false), 1000)
-        }}
-        aria-label="Копировать текст"
-      >
-        <div class=" size-6 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
-          {#if isCopied}
-            <div
-              class="right-1..5 absolute top-1/2 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
-              transition:fade={{ duration: 200 }}
-            >
-              ✓
-            </div>
-          {:else}
-            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-              <g fill="none" stroke="currentColor" stroke-width="1.5">
-                <path
-                  d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
-                />
-                <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
-              </g>
-            </svg>
-          {/if}
-        </div>
-      </button>
-      <pre class="overflow-x-auto">{codeText}
+{/if}
+{@render renderCurrentSnippet()()}
+
+{#snippet overview()}
+  <div class="flex w-full h-[calc(100vh-9rem)] flex-col">
+    <div class="flex-1">
+      {@render component()}
+    </div>
+    <Switch
+      wrapperClass="w-60 self-end p-2"
+      label={{ name: $t("library.for_constructor") }}
+      value={forConstructor ? 1 : 0}
+      options={[{ id: crypto.randomUUID(), value: 0 }]}
+      onChange={(value) => (forConstructor = value == 0 ? false : true)}
+    />
+    <div class="border-t border-gray-500"></div>
+    <div class="max-h-[70%]" transition:fade={{ duration: 200 }}>
+      {@render componentProps()}
+      <div class="relative mt-3">
+        <button
+          class="absolute top-2 right-3 flex cursor-pointer border-none bg-transparent"
+          onclick={(e) => {
+            e.preventDefault()
+            navigator.clipboard.writeText(codeText)
+            isCopied = true
+            setTimeout(() => (isCopied = false), 1000)
+          }}
+          aria-label="Копировать текст"
+        >
+          <div class=" size-6 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
+            {#if isCopied}
+              <div
+                class="right-1..5 absolute top-1/2 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
+                transition:fade={{ duration: 200 }}
+              >
+                ✓
+              </div>
+            {:else}
+              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <g fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path
+                    d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
+                  />
+                  <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+                </g>
+              </svg>
+            {/if}
+          </div>
+        </button>
+        <pre class="overflow-x-auto">{codeText}
   </pre>
+      </div>
     </div>
   </div>
-</div>
+{/snippet}

package/dist/ComponentExample.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from "svelte";
 type $$ComponentProps = {
     component: Snippet;
     componentProps: Snippet;
+    examples?: Snippet;
     codeText: string;
     forConstructor: boolean;
 };

package/dist/IconsCatalog/battery/battery1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM3 16V8z"/></svg>

package/dist/IconsCatalog/battery/battery2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM5 15q-.425 0-.712-.288T4 14v-4q0-.425.288-.712T5 9t.713.288T6 10v4q0 .425-.288.713T5 15"/></svg>

package/dist/IconsCatalog/battery/battery3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h4q.425 0 .713.288T10 10v4q0 .425-.288.713T9 15H5q-.425 0-.712-.288T4 14"/></svg>

package/dist/IconsCatalog/battery/battery4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h8q.425 0 .713.288T14 10v4q0 .425-.288.713T13 15H5q-.425 0-.712-.288T4 14"/></svg>

package/dist/IconsCatalog/battery/battery5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h11.5q.425 0 .713.288T17.5 10v4q0 .425-.288.713T16.5 15H5q-.425 0-.712-.288T4 14"/></svg>

package/dist/IconsCatalog/bulb/bulb1.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M1 11h3v2H1zm18.1-7.5L17 5.6L18.4 7l2.1-2.1zM11 1h2v3h-2zM4.9 3.5L3.5 4.9L5.6 7L7 5.6zM10 22c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-1h-4zm2-16c-3.3 0-6 2.7-6 6c0 2.2 1.2 4.2 3 5.2V19c0 .6.4 1 1 1h4c.6 0 1-.4 1-1v-1.8c1.8-1 3-3 3-5.2c0-3.3-2.7-6-6-6m1 9.9V17h-2v-1.1c-1.7-.4-3-2-3-3.9c0-2.2 1.8-4 4-4s4 1.8 4 4c0 1.9-1.3 3.4-3 3.9m7-4.9h3v2h-3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11h3v2h-3zM1 11h3v2H1zM13 1v3h-2V1zM4.92 3.5l2.13 2.14l-1.42 1.41L3.5 4.93zm12.03 2.13l2.12-2.13l1.43 1.43l-2.13 2.12zM12 6a6 6 0 0 1 6 6c0 2.22-1.21 4.16-3 5.2V19a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1.8c-1.79-1.04-3-2.98-3-5.2a6 6 0 0 1 6-6m2 15v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1zm-3-3h2v-2.13c1.73-.44 3-2.01 3-3.87a4 4 0 0 0-4-4a4 4 0 0 0-4 4c0 1.86 1.27 3.43 3 3.87z"/></svg>

package/dist/IconsCatalog/common.binocular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M.75 18a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0"/><path d="M9.75 18V4.125a2.625 2.625 0 0 0-5.156-.7L.911 16.805M14.25 18a4.501 4.501 0 0 0 8.658 1.722a4.501 4.501 0 0 0-8.316-3.444A4.5 4.5 0 0 0 14.25 18"/><path d="M14.25 18V4.125a2.625 2.625 0 0 1 5.156-.7l3.683 13.377"/><path d="M9.75 9h4.5v3h-4.5z"/></g></svg>

package/dist/IconsCatalog/info.sinewave.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12c0-3.857 1.286-9 3.857-9c3.857 0 6.429 18 10.286 18C19.714 21 21 15.857 21 12M3 12h2m14 0h2m-5.5 0h1m-9 0h1"/></svg>

package/dist/IconsCatalog/media.display.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4q0 1 .25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75Q6 13 6 12H2s-2 0-2-2zm1.398-.855a.76.76 0 0 0-.254.302A1.5 1.5 0 0 0 1 4.01V10c0 .325.078.502.145.602q.105.156.302.254a1.5 1.5 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.76.76 0 0 0 .254-.302a1.5 1.5 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.76.76 0 0 0-.302-.254A1.5 1.5 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145"/></svg>

package/dist/IconsCatalog/media.soundwaves.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.75 9.938v4.124m3.7-7.217v10.31m3.7-13.918v17.526m3.7-13.631v9.736m3.7-7.302v4.868m3.7-3.465v2.062"/></svg>

package/dist/IconsCatalog/periphery.magneticfield.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M12 3v18m6-14c-.633-1.255-1.538-2-2.5-2c-1.933 0-3.5 3.134-3.5 7s1.567 7 3.5 7s3.5-3.134 3.5-7v-1M6 7c.633-1.255 1.538-2 2.5-2c1.933 0 3.5 3.134 3.5 7s-1.567 7-3.5 7S5 15.866 5 12v-1"/><path d="m3 13l2-2l2 2m10 0l2-2l2 2"/></g></svg>

package/dist/IconsCatalog/power.flash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 .5v5h3.5l-5.5 8v-5H2.5L8 .5z"/></svg>

package/dist/IconsCatalog/power.onoff.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1m5.14 2.86a.99.99 0 0 0-.01 1.39c1.13 1.2 1.83 2.8 1.87 4.57c.09 3.83-3.08 7.13-6.91 7.17A6.98 6.98 0 0 1 5 12c0-1.84.71-3.51 1.87-4.76c.37-.39.37-1-.01-1.38a.993.993 0 0 0-1.43.02A8.92 8.92 0 0 0 3 11.74c-.14 4.88 3.83 9.1 8.71 9.25c5.1.16 9.29-3.93 9.29-9c0-2.37-.92-4.51-2.42-6.11c-.38-.41-1.04-.42-1.44-.02"/></svg>

package/dist/IconsCatalog/scenarios.airplane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272l.313.937a.5.5 0 0 0 .948 0l.405-1.214l2.21-.369l.375 2.253l-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318l.375-2.253l2.21.369l.405 1.214a.5.5 0 0 0 .948 0l.313-.937l1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0M7 3c0-.432.11-.979.322-1.401C7.542 1.159 7.787 1 8 1s.458.158.678.599C8.889 2.02 9 2.569 9 3v4a.5.5 0 0 0 .276.447l5.448 2.724a.5.5 0 0 1 .276.447v.792l-5.418-.903a.5.5 0 0 0-.575.41l-.5 3a.5.5 0 0 0 .14.437l.646.646H6.707l.647-.646a.5.5 0 0 0 .14-.436l-.5-3a.5.5 0 0 0-.576-.411L1 11.41v-.792a.5.5 0 0 1 .276-.447l5.448-2.724A.5.5 0 0 0 7 7z"/></svg>

package/dist/IconsCatalog/scenarios.circlecompass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10 10L5 22m9-12l5 12M12 4V2"/><circle cx="12" cy="7" r="3"/><path stroke-linecap="round" d="M3 13c1.99 3.024 5.28 5 9 5s7.01-1.976 9-5"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 17v2"/></g></svg>

package/dist/IconsCatalog/scenarios.compass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z"/><path fill="currentColor" d="m350.67 150.93l-117.2 46.88a64 64 0 0 0-35.66 35.66l-46.88 117.2a8 8 0 0 0 10.4 10.4l117.2-46.88a64 64 0 0 0 35.66-35.66l46.88-117.2a8 8 0 0 0-10.4-10.4M256 280a24 24 0 1 1 24-24a24 24 0 0 1-24 24"/></svg>

package/dist/IconsCatalog/scenarios.engine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M240 104h-12.69L192 68.69A15.86 15.86 0 0 0 180.69 64H140V40h24a8 8 0 0 0 0-16h-64a8 8 0 0 0 0 16h24v24H64a16 16 0 0 0-16 16v52H24v-24a8 8 0 0 0-16 0v64a8 8 0 0 0 16 0v-24h24v20.69A15.86 15.86 0 0 0 52.69 180L92 219.31a15.86 15.86 0 0 0 11.31 4.69h77.38a15.86 15.86 0 0 0 11.31-4.69L227.31 184H240a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64h-16a8 8 0 0 0-5.66 2.34L180.69 208h-77.38L64 168.69V80h116.69l37.65 37.66A8 8 0 0 0 224 120h16Z"/></svg>

package/dist/Input/InputProps.svelte

@@ -5,7 +5,6 @@
   import * as UI from ".."
   import { optionsStore } from "../options"
   import { twMerge } from "tailwind-merge"
-  import CommonSnippets from "../CommonSnippets.svelte"
 
   const {
     component,

package/dist/Joystick/Joystick.svelte

@@ -134,21 +134,26 @@
         <!-- Основные кнопки (оси pitch и yaw) -->
         <div class="absolute h-full w-full overflow-hidden rounded-full">
           {#each directions as direction, index}
-            <button class="pointer-events-none absolute top-1/2 left-1/2 block w-1/2 -translate-y-1/2 cursor-pointer" onclick={direction.onClick} title="">
+            <button
+              class="btn-segment pointer-events-none absolute top-1/2 left-1/2 block w-1/2 -translate-y-1/2 cursor-pointer"
+              onclick={direction.onClick}
+              title=""
+            >
               <span
-                class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto active:scale-98 transition duration-200
-            {direction.mainButton ? 'bg-(--bg-color)' : ''}
-            "
-                style=" height: {direction.mainButton
-                  ? 2 * 5 * Math.sin((Math.PI * 65) / 360)
-                  : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem; transform: rotate({angle *
-                  index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)
-              "
+                class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto
+                {direction.mainButton ? 'bg-(--bg-color)' : ''}"
+                style=" height: {direction.mainButton ? 2 * 5 * Math.sin((Math.PI * 65) / 360) : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem; 
+                  transform: rotate({angle * index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)"
                 role="application"
                 onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 20%)")}
                 onmouseleave={(e) => (e.currentTarget.style.backgroundColor = "var(--bg-color)")}
               >
-                <svg xmlns="http://www.w3.org/2000/svg" width={direction.mainButton ? 32 : 16} height={direction.mainButton ? 32 : 16} viewBox="0 0 24 24"
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="segment-icon"
+                  width={direction.mainButton ? 32 : 16}
+                  height={direction.mainButton ? 32 : 16}
+                  viewBox="0 0 24 24"
                   ><path
                     fill="currentColor"
                     d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"
@@ -171,13 +176,11 @@
           {/each}
         </div>
         <!-- Кнопка по центру -->
-        <div class="z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)] transition hover:scale-103">
+        <div class="btn-segment z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)]">
           <button
             class="flex size-18 cursor-pointer items-center justify-center rounded-full p-3.5 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
             style="background: {value[3] == 1 ? 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)' : 'var(--bg-color)'}"
-            onclick={() => {
-              value[3] = value[3] == 0 ? 1 : 0
-            }}
+            onclick={() => (value[3] = value[3] == 0 ? 1 : 0)}
           >
             {#if buttonIcon}
               {#if typeof buttonIcon === "string"}
@@ -187,7 +190,7 @@
                 <IconComponent />
               {/if}
             {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+              <svg xmlns="http://www.w3.org/2000/svg" class="segment-icon" width="32" height="32" viewBox="0 0 24 24"
                 ><path
                   fill="currentColor"
                   d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"
@@ -204,7 +207,7 @@
           style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
         >
           <button
-            class="h-full cursor-pointer rounded-l-full px-3.5 active:scale-98 transition duration-200"
+            class="btn-segment h-full cursor-pointer rounded-l-full px-3.5"
             title=""
             onclick={() => {
               if (value[0] - sensitivity <= (axes[0].minNum ?? -360)) {
@@ -218,19 +221,17 @@
             onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)")}
             onmouseleave={(e) => (e.currentTarget.style.backgroundColor = "background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)")}
           >
-            <div class="rotate-270">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-                  ><path
-                    stroke-miterlimit="10"
-                    d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
-                  /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
-                ></svg
-              >
-            </div></button
-          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="segment-icon rotate-270" width="24" height="24" viewBox="0 0 24 24"
+              ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+                ><path
+                  stroke-miterlimit="10"
+                  d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
+                /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
+              ></svg
+            >
+          </button>
           <button
-            class="h-full cursor-pointer rounded-r-full px-3.5 active:scale-97 transition duration-200"
+            class="btn-segment h-full cursor-pointer rounded-r-full px-3.5"
             title=""
             onclick={() => {
               if (value[0] + sensitivity >= (axes[0].maxNum ?? 360)) {
@@ -244,17 +245,15 @@
             onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)")}
             onmouseleave={(e) => (e.currentTarget.style.backgroundColor = "vabackground: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)")}
           >
-            <div class="rotate-90">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-                  ><path
-                    stroke-miterlimit="10"
-                    d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
-                  /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
-                ></svg
-              >
-            </div></button
-          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="segment-icon rotate-90" width="24" height="24" viewBox="0 0 24 24"
+              ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+                ><path
+                  stroke-miterlimit="10"
+                  d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
+                /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
+              ></svg
+            >
+          </button>
         </div>
       {/if}
     </div>
@@ -312,3 +311,15 @@
     </div>
   </div>
 </div>
+
+<style>
+  .segment-icon {
+    transition: transform 0.2s ease;
+    transform-origin: center;
+    display: block;
+  }
+
+  .btn-segment:active .segment-icon {
+    transform: scale(0.8);
+  }
+</style>

package/dist/Joystick/JoystickProps.svelte

@@ -102,9 +102,9 @@
       <div class="flex w-1/3 flex-col px-2">
         <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
         <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
+        <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       </div>
       <div class="flex w-1/3 flex-col px-2">
-        <CommonSnippets snippet="Access" {component} {onPropertyChange} />
         <CommonSnippets snippet="Label" {component} {onPropertyChange} />
         <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
       </div>