From 8ad2009f4a5b827534a22bf770d0e3b2e84abcbe Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 23 Mar 2026 21:53:14 +0530
Subject: [PATCH] chore: add depth to ui components

---
 src/lib/components/Slider.svelte         |  2 +-
 src/lib/editor/PositionScalePanel.svelte | 22 ++++++++++++----------
 src/lib/styles/global.css                |  5 +++++
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/Slider.svelte b/src/lib/components/Slider.svelte
index cb3f7d3..86fa8cf 100644
--- a/src/lib/components/Slider.svelte
+++ b/src/lib/components/Slider.svelte
@@ -25,6 +25,6 @@
 	</span>
 	<Slider.Thumb
 		index={0}
-		class="size-5 rounded-full border bg-accent inset-shadow-[0_2px_4px_0] inset-shadow-bg/80"
+		class="focus-visible:ring-none size-5 rounded-full border bg-accent inset-shadow-[0_2px_4px_0] inset-shadow-bg/80 focus-visible:translate-y-1 focus-visible:shadow-[0_0_4px_4px] focus-visible:shadow-text/80 focus-visible:outline-transparent!"
 	/>
 </Slider.Root>
diff --git a/src/lib/editor/PositionScalePanel.svelte b/src/lib/editor/PositionScalePanel.svelte
index e1a2272..fe7464d 100644
--- a/src/lib/editor/PositionScalePanel.svelte
+++ b/src/lib/editor/PositionScalePanel.svelte
@@ -117,15 +117,17 @@
 	const setfixedMargin = (v: boolean) => mockupStore.setFixedMargin(v);
 
 	const positionBalls = [
-		{ style: 'left:25px; top:25px' },
-		{ style: 'right:25px; top:25px' },
-		{ style: 'left:25px; bottom:25px' },
-		{ style: 'right:25px; bottom:25px' },
-		{ style: 'left:50%; top:25px; transform:translateX(-50%)' },
-		{ style: 'left:50%; bottom:25px; transform:translateX(-50%)' },
-		{ style: 'left:25px; top:50%; transform:translateY(-50%)' },
-		{ style: 'right:25px; top:50%; transform:translateY(-50%)' },
-		{ style: 'left:50%; top:50%; transform:translate(-50%,-50%)' }
+		{ style: 'left:25px; top:25px' }, // top-left
+		{ style: 'left:50%; top:25px; transform:translateX(-50%)' }, // top-center
+		{ style: 'right:25px; top:25px' }, // top-right
+
+		{ style: 'left:25px; top:50%; transform:translateY(-50%)' }, // middle-left
+		{ style: 'left:50%; top:50%; transform:translate(-50%,-50%)' }, // center
+		{ style: 'right:25px; top:50%; transform:translateY(-50%)' }, // middle-right
+
+		{ style: 'left:25px; bottom:25px' }, // bottom-left
+		{ style: 'left:50%; bottom:25px; transform:translateX(-50%)' }, // bottom-center
+		{ style: 'right:25px; bottom:25px' } // bottom-right
 	];
 </script>
 
@@ -218,7 +220,7 @@
 								() => scale,
 								(value) => {
 									scale = value;
-									mockupStore.updateDevicePosition({ scale: v });
+									mockupStore.updateDevicePosition({ scale: value });
 								}
 							}
 						/>
diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css
index 1d516d6..ff2254c 100644
--- a/src/lib/styles/global.css
+++ b/src/lib/styles/global.css
@@ -46,3 +46,8 @@ body {
 		@apply underline hover:no-underline;
 	}
 }
+
+* :focus-visible {
+	outline: 2px solid var(--text);
+	outline-offset: 2px;
+}
-- 
2.51.2