From fb742d57272eef6fdc695669dbdfa0f79cca984e Mon Sep 17 00:00:00 2001
From: 4eb0da <4eb0da@yandex-team.com>
Date: Tue, 17 Mar 2026 10:12:42 +0300
Subject: [PATCH] Shadow and clip
 commit_hash:bfd361a610c63161ce51f1659caf74b99ec67761

---
 visual-editor/src/auto/lang.json              | 14 +++
 .../lib/components/controls/ColorInput.svelte | 37 ++++----
 .../components/simple-props/ColorProp.svelte  |  5 +-
 visual-editor/src/lib/data/componentProps.ts  | 87 +++++++++++++++++--
 4 files changed, 118 insertions(+), 25 deletions(-)

diff --git a/visual-editor/src/auto/lang.json b/visual-editor/src/auto/lang.json
index c730425ee..c382e73c8 100644
--- a/visual-editor/src/auto/lang.json
+++ b/visual-editor/src/auto/lang.json
@@ -149,6 +149,13 @@
         "props.track_active_style": "Стиль активной части шкалы",
         "props.track_inactive_style": "Стиль неактивной части шкалы",
         "props.thumb_text_style": "Текст указателя",
+        "props.shadow": "Тень",
+        "props.shadow_color": "Цвет тени",
+        "props.shadow_alpha": "Дополнительная прозрачность",
+        "props.shadow_blur": "Сила размытия",
+        "props.shadow_offset_x": "Смещение по X",
+        "props.shadow_offset_y": "Смещение по Y",
+        "props.clip_to_bounds": "Обрезка по границе",
         "actions_count": [
             "%s действие",
             "%s действия",
@@ -520,6 +527,13 @@
         "props.track_active_style": "Track active style",
         "props.track_inactive_style": "Track inactive style",
         "props.thumb_text_style": "Thumb text style",
+        "props.shadow": "Shadow",
+        "props.shadow_color": "Shadow color",
+        "props.shadow_alpha": "Extra alpha",
+        "props.shadow_blur": "Shadow blur",
+        "props.shadow_offset_x": "X offset",
+        "props.shadow_offset_y": "Y offset",
+        "props.clip_to_bounds": "Clip to bounds",
         "actions_count": [
             "%s action",
             "%s actions",
diff --git a/visual-editor/src/lib/components/controls/ColorInput.svelte b/visual-editor/src/lib/components/controls/ColorInput.svelte
index 4edf7b8f4..1bf262fa8 100644
--- a/visual-editor/src/lib/components/controls/ColorInput.svelte
+++ b/visual-editor/src/lib/components/controls/ColorInput.svelte
@@ -9,6 +9,7 @@
     export let value: string;
     export let hasDialog = false;
     export let readOnly = false;
+    export let showAlpha = true;
 
     // todo validate input
 
@@ -140,24 +141,26 @@
 
         <div class="color-input__separator"></div>
 
-        <input
-            class="color-input__second-input"
-            type="number"
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            min="0"
-            {max}
-            disabled={readOnly}
-            bind:value={secondVal}
-            on:input={rebuildVal}
-            title={$l10nString('background.solid_second_title')}
-        >
+        {#if showAlpha}
+            <input
+                class="color-input__second-input"
+                type="number"
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                min="0"
+                {max}
+                disabled={readOnly}
+                bind:value={secondVal}
+                on:input={rebuildVal}
+                title={$l10nString('background.solid_second_title')}
+            >
 
-        <div class="color-input__symbol">
-            %
-        </div>
+            <div class="color-input__symbol">
+                %
+            </div>
+        {/if}
     {/if}
 </div>
 
diff --git a/visual-editor/src/lib/components/simple-props/ColorProp.svelte b/visual-editor/src/lib/components/simple-props/ColorProp.svelte
index bfb79cfa5..8f003cb3a 100644
--- a/visual-editor/src/lib/components/simple-props/ColorProp.svelte
+++ b/visual-editor/src/lib/components/simple-props/ColorProp.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { createEventDispatcher, getContext } from 'svelte';
-    import type { ComponentProperty } from '../../data/componentProps';
+    import type { ColorProperty } from '../../data/componentProps';
     import ColorInput from '../controls/ColorInput.svelte';
     import { APP_CTX, type AppContext } from '../../ctx/appContext';
 
     export let value: string;
-    export let item: ComponentProperty;
+    export let item: ColorProperty;
 
     const { state } = getContext<AppContext>(APP_CTX);
     const { readOnly } = state;
@@ -25,4 +25,5 @@
     on:change={onChange}
     hasDialog={true}
     readOnly={$readOnly}
+    showAlpha={item.showAlpha}
 />
diff --git a/visual-editor/src/lib/data/componentProps.ts b/visual-editor/src/lib/data/componentProps.ts
index 4803d8cc3..873f83da4 100644
--- a/visual-editor/src/lib/data/componentProps.ts
+++ b/visual-editor/src/lib/data/componentProps.ts
@@ -38,6 +38,21 @@ export const containerComponents = new Set([
     'custom'
 ]);
 
+const SHADOW_EDIT_ENABLED: ConditionObject = {
+    not: {
+        or: [{
+            prop: 'border.has_shadow',
+            isEmpty: true
+        }, {
+            prop: 'border.has_shadow',
+            equal: false
+        }, {
+            prop: 'border.has_shadow',
+            equal: 0
+        }]
+    }
+};
+
 export interface BaseProperty {
     name?: string;
     rawName?: string;
@@ -51,6 +66,10 @@ export interface BaseProperty {
     enableSources?: boolean;
     enablePerTheme?: boolean;
     required?: boolean;
+    related?: {
+        prop: string;
+        value: string | number;
+    }[];
 }
 
 export interface RadioProperty extends BaseProperty {
@@ -113,6 +132,7 @@ export interface StringProperty extends BaseProperty {
 
 export interface ColorProperty extends BaseProperty {
     type: 'color';
+    showAlpha?: boolean;
 }
 
 export interface Actions2Property extends BaseProperty {
@@ -201,12 +221,7 @@ export type ComponentProperty = RadioProperty | IntegerProperty | BooleanPropert
     SelectOptionsProperty | SelectFontFamily | ItemsProperty | StateDefaultIdProperty |
     TabsSelectedTabProperty;
 
-export type SiblingComponentProperty = ComponentProperty & {
-    related?: {
-        prop: string;
-        value: string;
-    }[];
-}
+export type SiblingComponentProperty = ComponentProperty;
 
 export const BASE_COMPONENT_PROPS: ComponentProperty[] = [{
     type: 'group',
@@ -402,6 +417,60 @@ export const BASE_COMPONENT_PROPS: ComponentProperty[] = [{
         name: 'props.background',
         prop: 'background',
         type: 'background2'
+    }, {
+        name: 'props.shadow',
+        prop: 'border.has_shadow',
+        type: 'boolean',
+        enableSources: true,
+        related: [{
+            prop: 'border.shadow.offset.x',
+            value: 0
+        }, {
+            prop: 'border.shadow.offset.y',
+            value: 0
+        }]
+    }, {
+        type: 'split',
+        list: [{
+            name: 'props.shadow_color',
+            prop: 'border.shadow.color',
+            type: 'color',
+            default: '#000000',
+            showAlpha: false,
+            enableSources: true,
+            enabled: SHADOW_EDIT_ENABLED
+        }, {
+            name: 'props.shadow_alpha',
+            prop: 'border.shadow.alpha',
+            type: 'percent',
+            default: 0.19,
+            enableSources: true,
+            enabled: SHADOW_EDIT_ENABLED
+        }]
+    }, {
+        name: 'props.shadow_blur',
+        prop: 'border.shadow.blur',
+        type: 'integer',
+        min: 0,
+        max: 1000,
+        default: 2,
+        enableSources: true,
+        enabled: SHADOW_EDIT_ENABLED
+    }, {
+        type: 'split',
+        list: [{
+            name: 'props.shadow_offset_x',
+            prop: 'border.shadow.offset.x.value',
+            type: 'number',
+            enableSources: true,
+            enabled: SHADOW_EDIT_ENABLED
+        }, {
+            name: 'props.shadow_offset_y',
+            prop: 'border.shadow.offset.y.value',
+            type: 'number',
+            enableSources: true,
+            enabled: SHADOW_EDIT_ENABLED
+        }]
     }]
 }];
 
@@ -657,6 +726,12 @@ export const COMPONENT_PROPS: Record<string, ComponentProperty[]> = {
             verticalProp: 'content_alignment_vertical',
             orientationProp: 'orientation',
             isContent: true
+        }, {
+            name: 'props.clip_to_bounds',
+            prop: 'clip_to_bounds',
+            type: 'boolean',
+            default: true,
+            enableSources: true
         }]
     }],
     grid: [...BASE_COMPONENT_PROPS, {