From e67f82e153ab103a2e536e11f049fa0c6f3a6889 Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:17:10 +0330
Subject: [PATCH] Import source: src/components/RightPanel/CornerStyleSection

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 .../RightPanel/CornerStyleSection.tsx         | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/RightPanel/CornerStyleSection.tsx

diff --git a/src/components/RightPanel/CornerStyleSection.tsx b/src/components/RightPanel/CornerStyleSection.tsx
new file mode 100644
index 0000000..6580041
--- /dev/null
+++ b/src/components/RightPanel/CornerStyleSection.tsx
@@ -0,0 +1,62 @@
+import { useQR } from '../../context/QRContext';
+import type { CornerSquareStyle, CornerDotStyle } from '../../types';
+
+const CS_OPTIONS: { value: CornerSquareStyle; label: string; preview: string }[] = [
+  { value: 'square',        label: 'Square',   preview: 'M2,2 h12 v12 h-12 z M4,4 h8 v8 h-8 z' },
+  { value: 'extra-rounded', label: 'Rounded',  preview: 'M5,2 h6 a3,3 0 0 1 3,3 v6 a3,3 0 0 1 -3,3 h-6 a3,3 0 0 1 -3,-3 v-6 a3,3 0 0 1 3,-3 z M6,5 h4 a1,1 0 0 1 1,1 v4 a1,1 0 0 1 -1,1 h-4 a1,1 0 0 1 -1,-1 v-4 a1,1 0 0 1 1,-1 z' },
+  { value: 'dot',           label: 'Dot',      preview: 'M8,1 a7,7 0 1 1 0,14 a7,7 0 0 1 0,-14 z M8,4 a4,4 0 1 0 0,8 a4,4 0 0 0 0,-8 z' },
+];
+
+const CD_OPTIONS: { value: CornerDotStyle; label: string }[] = [
+  { value: 'square', label: 'Square' },
+  { value: 'dot',    label: 'Dot' },
+];
+
+export function CornerStyleSection() {
+  const { state, dispatch } = useQR();
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-[14px] font-semibold" style={{ color: 'var(--text-secondary)' }}>Corner Style</h3>
+
+      <div className="flex flex-col gap-2">
+        <span className="text-[12px]" style={{ color: 'var(--text-muted)' }}>Finder squares</span>
+        <div className="flex gap-2">
+          {CS_OPTIONS.map(opt => (
+            <button key={opt.value} onClick={() => dispatch({ type: 'SET_CORNER_SQUARE', payload: opt.value })}
+              className="flex-1 flex flex-col items-center gap-1.5 py-2.5 rounded-[10px] cursor-pointer transition-all"
+              style={{
+                border: state.cornerSquareStyle === opt.value ? '2px solid #7C6FE0' : '1px solid var(--border-sub)',
+                background: state.cornerSquareStyle === opt.value ? 'var(--sel-bg)' : 'var(--bg-card)',
+              }}>
+              <svg width="20" height="16" viewBox="0 0 16 16" fill="none"
+                style={{ color: state.cornerSquareStyle === opt.value ? '#7C6FE0' : 'var(--text-secondary)' }}>
+                <path d={opt.preview} fill="currentColor" fillRule="evenodd"/>
+              </svg>
+              <span className="text-[11px] font-medium" style={{ color: state.cornerSquareStyle === opt.value ? 'var(--sel-text)' : 'var(--text-muted)' }}>
+                {opt.label}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <span className="text-[12px]" style={{ color: 'var(--text-muted)' }}>Inner dot</span>
+        <div className="flex gap-2">
+          {CD_OPTIONS.map(opt => (
+            <button key={opt.value} onClick={() => dispatch({ type: 'SET_CORNER_DOT', payload: opt.value })}
+              className="flex-1 h-9 rounded-[9px] text-[13px] font-medium cursor-pointer transition-all"
+              style={{
+                border: state.cornerDotStyle === opt.value ? '2px solid #7C6FE0' : '1px solid var(--border-sub)',
+                background: state.cornerDotStyle === opt.value ? 'var(--sel-bg)' : 'var(--bg-card)',
+                color: state.cornerDotStyle === opt.value ? 'var(--sel-text)' : 'var(--text-secondary)',
+              }}>
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}