From daa949e9e335b1e779dfb3b6efbec3fb2a795221 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 28 Feb 2026 20:12:37 +0300
Subject: [PATCH] Add Effects section to properties panel

Support adding, removing, and editing drop shadows, inner shadows,
layer blurs, background blurs, and foreground blurs. Each effect row
has visibility toggle, type dropdown, and remove button. Expanded
view shows offset, blur, spread, and color controls for shadows,
or just blur radius for blur effects.
---
 components.d.ts                              |   1 +
 src/components/PropertiesPanel.vue           |   7 +-
 src/components/properties/EffectsSection.vue | 194 +++++++++++++++++++
 3 files changed, 197 insertions(+), 5 deletions(-)
 create mode 100644 src/components/properties/EffectsSection.vue

diff --git a/components.d.ts b/components.d.ts
index 460f0cd77..e174cd2a5 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     CanvasContextMenu: typeof import('./src/components/CanvasContextMenu.vue')['default']
     ColorPicker: typeof import('./src/components/ColorPicker.vue')['default']
     EditorCanvas: typeof import('./src/components/EditorCanvas.vue')['default']
+    EffectsSection: typeof import('./src/components/properties/EffectsSection.vue')['default']
     FillPicker: typeof import('./src/components/FillPicker.vue')['default']
     FillSection: typeof import('./src/components/properties/FillSection.vue')['default']
     IconLucideALargeSmall: typeof import('~icons/lucide/a-large-small')['default']
diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index 1f439bef1..e53017c16 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -9,6 +9,7 @@ import LayoutSection from './properties/LayoutSection.vue'
 import PageSection from './properties/PageSection.vue'
 import PositionSection from './properties/PositionSection.vue'
 import StrokeSection from './properties/StrokeSection.vue'
+import EffectsSection from './properties/EffectsSection.vue'
 import TypographySection from './properties/TypographySection.vue'
 
 const store = useEditorStore()
@@ -74,11 +75,7 @@ const isComponentType = computed(() => {
       <TypographySection v-if="node.type === 'TEXT'" />
       <FillSection />
       <StrokeSection />
-
-      <!-- Effects -->
-      <div class="border-b border-border px-3 py-2">
-        <label class="mb-1.5 block text-[11px] text-muted">Effects</label>
-      </div>
+      <EffectsSection />
 
       <!-- Export -->
       <div class="border-b border-border px-3 py-2">
diff --git a/src/components/properties/EffectsSection.vue b/src/components/properties/EffectsSection.vue
new file mode 100644
index 000000000..c7e87b98a
--- /dev/null
+++ b/src/components/properties/EffectsSection.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ColorPicker from '../ColorPicker.vue'
+import ScrubInput from '../ScrubInput.vue'
+import { useNodeProps } from '../../composables/use-node-props'
+import { colorToHexRaw, parseColor } from '../../engine/color'
+
+import type { Color, Effect } from '../../engine/scene-graph'
+
+const { store, node } = useNodeProps()
+
+const expandedIndex = ref<number | null>(null)
+
+type EffectType = Effect['type']
+
+const EFFECT_LABELS: Record<EffectType, string> = {
+  DROP_SHADOW: 'Drop shadow',
+  INNER_SHADOW: 'Inner shadow',
+  LAYER_BLUR: 'Layer blur',
+  BACKGROUND_BLUR: 'Background blur',
+  FOREGROUND_BLUR: 'Foreground blur',
+}
+
+const EFFECT_TYPES = Object.keys(EFFECT_LABELS) as EffectType[]
+
+function isShadow(type: EffectType) {
+  return type === 'DROP_SHADOW' || type === 'INNER_SHADOW'
+}
+
+function defaultEffect(): Effect {
+  return {
+    type: 'DROP_SHADOW',
+    color: { r: 0, g: 0, b: 0, a: 0.25 },
+    offset: { x: 0, y: 4 },
+    radius: 4,
+    spread: 0,
+    visible: true,
+  }
+}
+
+function updateEffect(index: number, changes: Partial<Effect>) {
+  const effects = [...node.value!.effects]
+  effects[index] = { ...effects[index], ...changes }
+  store.updateNodeWithUndo(node.value!.id, { effects }, 'Change effect')
+}
+
+function updateColor(index: number, color: Color) {
+  updateEffect(index, { color })
+}
+
+function updateHex(index: number, hex: string) {
+  const color = parseColor(hex.startsWith('#') ? hex : `#${hex}`)
+  if (!color) return
+  const existing = node.value!.effects[index]
+  updateColor(index, { ...color, a: existing.color.a })
+}
+
+function updateColorOpacity(index: number, opacity: number) {
+  const existing = node.value!.effects[index]
+  updateColor(index, { ...existing.color, a: Math.max(0, Math.min(1, opacity / 100)) })
+}
+
+function toggleVisibility(index: number) {
+  updateEffect(index, { visible: !node.value!.effects[index].visible })
+}
+
+function updateType(index: number, type: EffectType) {
+  const changes: Partial<Effect> = { type }
+  if (!isShadow(type)) {
+    changes.offset = { x: 0, y: 0 }
+    changes.spread = 0
+  }
+  updateEffect(index, changes)
+}
+
+function add() {
+  const effects = [...node.value!.effects, defaultEffect()]
+  store.updateNodeWithUndo(node.value!.id, { effects }, 'Add effect')
+  expandedIndex.value = effects.length - 1
+}
+
+function remove(index: number) {
+  store.updateNodeWithUndo(
+    node.value!.id,
+    { effects: node.value!.effects.filter((_, i) => i !== index) },
+    'Remove effect',
+  )
+  if (expandedIndex.value === index) expandedIndex.value = null
+  else if (expandedIndex.value !== null && expandedIndex.value > index) expandedIndex.value--
+}
+
+function toggleExpand(index: number) {
+  expandedIndex.value = expandedIndex.value === index ? null : index
+}
+</script>
+
+<template>
+  <div v-if="node" class="border-b border-border px-3 py-2">
+    <div class="flex items-center justify-between">
+      <label class="mb-1 block text-[11px] text-muted">Effects</label>
+      <button
+        class="cursor-pointer rounded border-none bg-transparent px-1 text-base leading-none text-muted hover:bg-hover hover:text-surface"
+        @click="add"
+      >+</button>
+    </div>
+
+    <div v-for="(effect, i) in node.effects" :key="i">
+      <div class="group flex items-center gap-1.5 py-0.5">
+        <button
+          class="cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
+          @click="toggleVisibility(i)"
+        >
+          <icon-lucide-eye v-if="effect.visible" class="size-3.5" />
+          <icon-lucide-eye-off v-else class="size-3.5" />
+        </button>
+
+        <button
+          class="min-w-0 flex-1 cursor-pointer truncate border-none bg-transparent p-0 text-left text-xs text-surface hover:text-accent"
+          @click="toggleExpand(i)"
+        >{{ EFFECT_LABELS[effect.type] }}</button>
+
+        <button
+          class="cursor-pointer border-none bg-transparent p-0 text-sm leading-none text-muted hover:text-surface"
+          @click="remove(i)"
+        >−</button>
+      </div>
+
+      <div v-if="expandedIndex === i" class="mt-1 mb-1 flex flex-col gap-1.5 pl-5">
+        <select
+          class="h-[26px] rounded border border-border bg-input px-1.5 text-xs text-surface outline-none"
+          :value="effect.type"
+          @change="updateType(i, ($event.target as HTMLSelectElement).value as EffectType)"
+        >
+          <option v-for="t in EFFECT_TYPES" :key="t" :value="t">{{ EFFECT_LABELS[t] }}</option>
+        </select>
+
+        <template v-if="isShadow(effect.type)">
+          <div class="flex items-center gap-1.5">
+            <ScrubInput
+              icon="X"
+              :model-value="effect.offset.x"
+              @update:model-value="updateEffect(i, { offset: { ...effect.offset, x: $event } })"
+            />
+            <ScrubInput
+              icon="Y"
+              :model-value="effect.offset.y"
+              @update:model-value="updateEffect(i, { offset: { ...effect.offset, y: $event } })"
+            />
+          </div>
+
+          <div class="flex items-center gap-1.5">
+            <ScrubInput
+              icon="B"
+              :model-value="effect.radius"
+              :min="0"
+              @update:model-value="updateEffect(i, { radius: $event })"
+            />
+            <ScrubInput
+              icon="S"
+              :model-value="effect.spread"
+              @update:model-value="updateEffect(i, { spread: $event })"
+            />
+          </div>
+
+          <div class="flex items-center gap-1.5">
+            <ColorPicker :color="effect.color" @update="updateColor(i, $event)" />
+            <input
+              class="min-w-0 flex-1 border-none bg-transparent font-mono text-xs text-surface outline-none"
+              :value="colorToHexRaw(effect.color)"
+              @change="updateHex(i, ($event.target as HTMLInputElement).value)"
+            />
+            <ScrubInput
+              class="w-12"
+              suffix="%"
+              :model-value="Math.round(effect.color.a * 100)"
+              :min="0"
+              :max="100"
+              @update:model-value="updateColorOpacity(i, $event)"
+            />
+          </div>
+        </template>
+
+        <template v-else>
+          <ScrubInput
+            icon="B"
+            :model-value="effect.radius"
+            :min="0"
+            @update:model-value="updateEffect(i, { radius: $event })"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>