From b0645c0ac394b0e355fdddd287bd48675f3b62c2 Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Fri, 21 Aug 2026 01:04:03 +0300
Subject: [PATCH] feat(mobile): replace blocking modal with inline live
 inspector for instantaneous visual editing feedback

---
 apps/mobile/src/app/menu/qr.tsx    | 688 +++++++++++++----------------
 apps/mobile/svgcomponentlist/7.tsx |   0
 2 files changed, 298 insertions(+), 390 deletions(-)
 create mode 100644 apps/mobile/svgcomponentlist/7.tsx

diff --git a/apps/mobile/src/app/menu/qr.tsx b/apps/mobile/src/app/menu/qr.tsx
index 235aa40..09d9280 100644
--- a/apps/mobile/src/app/menu/qr.tsx
+++ b/apps/mobile/src/app/menu/qr.tsx
@@ -410,44 +410,78 @@ export default function QrScreen() {
           </ViewShot>
         </View>
 
-        {/* Hızlı Katman Seçici (Tıklayınca Modal Açar) */}
-        <View style={{ width: "100%", marginBottom: 16 }}>
-          <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700", marginBottom: 8, letterSpacing: 0.5 }}>
-            DÜZENLEMEK VE KONUMUNU DEĞİŞTİRMEK İÇİN TIKLAYIN:
-          </Text>
+        {/* Hızlı Katman Seçici (Canlı Seçim) */}
+        <View style={{ width: "100%", marginBottom: 12 }}>
+          <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+            <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "800", letterSpacing: 0.5 }}>
+              CANLI DÜZENLENECEK ALANI SEÇİN:
+            </Text>
+            {selectedEditField && (
+              <Pressable
+                onPress={() => setSelectedEditField(null)}
+                style={{
+                  backgroundColor: "rgba(255,255,255,0.08)",
+                  paddingHorizontal: 8,
+                  paddingVertical: 3,
+                  borderRadius: 6,
+                }}
+              >
+                <Text style={{ color: "#A1A1AA", fontSize: 11, fontWeight: "600" }}>Kapat</Text>
+              </Pressable>
+            )}
+          </View>
+
           <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
             {FIELD_DEFINITIONS.map(({ key, label, icon }) => {
               const item = fields[key];
+              const isSelected = selectedEditField === key;
               return (
                 <Pressable
                   key={key}
-                  onPress={() => setSelectedEditField(key)}
+                  onPress={() => setSelectedEditField(isSelected ? null : key)}
                   style={({ pressed }) => ({
-                    backgroundColor: item.visible ? "#242429" : "#1A1A1E",
+                    backgroundColor: isSelected ? "#D4AF37" : item.visible ? "#242429" : "#1A1A1E",
                     paddingHorizontal: 12,
                     paddingVertical: 9,
                     borderRadius: 12,
                     borderWidth: 1.5,
-                    borderColor: item.visible ? "rgba(212, 175, 55, 0.4)" : "#2B2B32",
+                    borderColor: isSelected ? "#D4AF37" : item.visible ? "rgba(212, 175, 55, 0.3)" : "#2B2B32",
                     flexDirection: "row",
                     alignItems: "center",
                     gap: 6,
                     opacity: pressed ? 0.8 : 1,
                   })}
                 >
-                  <Ionicons name={icon as any} size={14} color={item.visible ? "#D4AF37" : "#71717A"} />
+                  <Ionicons
+                    name={icon as any}
+                    size={14}
+                    color={isSelected ? "#0C0C0E" : item.visible ? "#D4AF37" : "#71717A"}
+                  />
                   <Text
                     style={{
-                      color: item.visible ? "#FFFFFF" : "#71717A",
+                      color: isSelected ? "#0C0C0E" : item.visible ? "#FFFFFF" : "#71717A",
                       fontSize: 12,
-                      fontWeight: "700",
+                      fontWeight: isSelected ? "800" : "700",
                     }}
                   >
                     {label}
                   </Text>
                   {item.offsetY ? (
-                    <View style={{ backgroundColor: "#D4AF37", borderRadius: 6, paddingHorizontal: 4, paddingVertical: 1 }}>
-                      <Text style={{ color: "#0C0C0E", fontSize: 9, fontWeight: "800" }}>
+                    <View
+                      style={{
+                        backgroundColor: isSelected ? "#0C0C0E" : "#D4AF37",
+                        borderRadius: 6,
+                        paddingHorizontal: 4,
+                        paddingVertical: 1,
+                      }}
+                    >
+                      <Text
+                        style={{
+                          color: isSelected ? "#D4AF37" : "#0C0C0E",
+                          fontSize: 9,
+                          fontWeight: "800",
+                        }}
+                      >
                         {item.offsetY > 0 ? `+${item.offsetY}` : item.offsetY}px
                       </Text>
                     </View>
@@ -458,421 +492,295 @@ export default function QrScreen() {
           </ScrollView>
         </View>
 
-        {/* Metin & Font & Boyut Özelleştirme Kartı (Açılır/Kapanır Liste) */}
-        <View
-          style={{
-            backgroundColor: "#18181B",
-            borderRadius: 20,
-            borderWidth: 1,
-            borderColor: "rgba(255, 255, 255, 0.08)",
-            padding: 16,
-            marginBottom: 20,
-          }}
-        >
-          <Pressable
-            onPress={() => setShowCustomizePanel(!showCustomizePanel)}
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-            }}
-          >
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-              <View
-                style={{
-                  width: 34,
-                  height: 34,
-                  borderRadius: 10,
-                  backgroundColor: "rgba(212, 175, 55, 0.15)",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                <Ionicons name="text-outline" size={19} color="#D4AF37" />
-              </View>
-              <View>
-                <Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "700" }}>
-                  Tüm Katmanları Listele
-                </Text>
-                <Text style={{ color: "#A1A1AA", fontSize: 12 }}>
-                  Tıkla & Düzenle, dikey konum kaydırma ve font ayarı
-                </Text>
-              </View>
-            </View>
-            <Ionicons
-              name={showCustomizePanel ? "chevron-up" : "chevron-down"}
-              size={20}
-              color="#A1A1AA"
-            />
-          </Pressable>
+        {/* CANLI DÜZENLEYİCİ KARTI (Sayfa İçinde Anında Görsel Geri Bildirim) */}
+        {selectedEditField && (() => {
+          const def = FIELD_DEFINITIONS.find((d) => d.key === selectedEditField)!;
+          const item = fields[selectedEditField];
 
-          {showCustomizePanel && (
-            <View style={{ marginTop: 16, gap: 12, borderTopWidth: 1, borderTopColor: "rgba(255,255,255,0.06)", paddingTop: 16 }}>
-              {FIELD_DEFINITIONS.map(({ key, label, icon }) => {
-                const item = fields[key];
-                return (
-                  <Pressable
-                    key={key}
-                    onPress={() => setSelectedEditField(key)}
-                    style={({ pressed }) => ({
-                      backgroundColor: "#141417",
-                      borderRadius: 14,
-                      padding: 12,
-                      borderWidth: 1,
-                      borderColor: "rgba(255,255,255,0.06)",
-                      flexDirection: "row",
+          return (
+            <View
+              style={{
+                width: "100%",
+                backgroundColor: "#18181B",
+                borderRadius: 20,
+                borderWidth: 1.5,
+                borderColor: "#D4AF37",
+                padding: 16,
+                marginBottom: 20,
+                gap: 14,
+                shadowColor: "#D4AF37",
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.15,
+                shadowRadius: 10,
+                elevation: 4,
+              }}
+            >
+              {/* Başlık & Görünürlük */}
+              <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                  <View
+                    style={{
+                      width: 28,
+                      height: 28,
+                      borderRadius: 8,
+                      backgroundColor: "#D4AF37",
                       alignItems: "center",
-                      justifyContent: "space-between",
-                      opacity: pressed ? 0.8 : 1,
-                    })}
+                      justifyContent: "center",
+                    }}
                   >
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 10, flex: 1 }}>
-                      <Ionicons name={icon as any} size={18} color="#D4AF37" />
-                      <View style={{ flex: 1 }}>
-                        <Text style={{ color: "#FFFFFF", fontSize: 13, fontWeight: "700" }}>
-                          {label}
-                        </Text>
-                        <Text style={{ color: "#A1A1AA", fontSize: 11 }} numberOfLines={1}>
-                          {item.text || "Boş"}
-                        </Text>
-                      </View>
-                    </View>
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                      <View
-                        style={{
-                          backgroundColor: "#242429",
-                          paddingHorizontal: 8,
-                          paddingVertical: 4,
-                          borderRadius: 8,
-                        }}
-                      >
-                        <Text style={{ color: "#D4AF37", fontSize: 10, fontWeight: "700" }}>
-                          {item.fontSize || 12}px
-                        </Text>
-                      </View>
-                      <Ionicons name="create-outline" size={18} color="#D4AF37" />
-                    </View>
-                  </Pressable>
-                );
-              })}
-            </View>
-          )}
-        </View>
+                    <Ionicons name={def.icon as any} size={16} color="#0C0C0E" />
+                  </View>
+                  <Text style={{ color: "#FFFFFF", fontSize: 15, fontWeight: "800" }}>
+                    {def.label}
+                  </Text>
+                </View>
 
-        {/* Modal: Tıklanan Metin Katmanını Detaylı Düzenleme */}
-        <Modal
-          visible={!!selectedEditField}
-          animationType="slide"
-          transparent
-          onRequestClose={() => setSelectedEditField(null)}
-        >
-          <View
-            style={{
-              flex: 1,
-              backgroundColor: "rgba(0,0,0,0.75)",
-              justifyContent: "flex-end",
-            }}
-          >
-            {selectedEditField && (() => {
-              const def = FIELD_DEFINITIONS.find((d) => d.key === selectedEditField)!;
-              const item = fields[selectedEditField];
+                {/* Stantta Göster / Gizle */}
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                  <Text style={{ color: item.visible ? "#10B981" : "#71717A", fontSize: 11, fontWeight: "700" }}>
+                    {item.visible ? "Görünür" : "Gizli"}
+                  </Text>
+                  <Switch
+                    value={item.visible}
+                    onValueChange={(v) =>
+                      setFields((prev) => ({
+                        ...prev,
+                        [selectedEditField]: { ...prev[selectedEditField], visible: v },
+                      }))
+                    }
+                    trackColor={{ false: "#27272A", true: "#D4AF37" }}
+                    thumbColor="#FFFFFF"
+                    ios_backgroundColor="#27272A"
+                  />
+                </View>
+              </View>
 
-              return (
-                <View
-                  style={{
-                    backgroundColor: "#18181B",
-                    borderTopLeftRadius: 28,
-                    borderTopRightRadius: 28,
-                    padding: 20,
-                    maxHeight: "85%",
-                    gap: 16,
-                    borderTopWidth: 1,
-                    borderColor: "rgba(212, 175, 55, 0.3)",
-                  }}
-                >
-                  {/* Modal Başlığı & Kapat Butonu */}
-                  <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                      <Ionicons name={def.icon as any} size={20} color="#D4AF37" />
-                      <Text style={{ color: "#FFFFFF", fontSize: 17, fontWeight: "800" }}>
-                        {def.label}
-                      </Text>
-                    </View>
-                    <Pressable
-                      onPress={() => setSelectedEditField(null)}
+              {item.visible && (
+                <>
+                  {/* Metin Girişi (Enter ile alt satır destekli) */}
+                  <View style={{ gap: 4 }}>
+                    <Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
+                      METİN İÇERİĞİ (ENTER İLE YENİ SATIRA GEÇEBİLİR):
+                    </Text>
+                    <TextInput
+                      value={item.text}
+                      onChangeText={(t) =>
+                        setFields((prev) => ({
+                          ...prev,
+                          [selectedEditField]: { ...prev[selectedEditField], text: t },
+                        }))
+                      }
+                      placeholder={def.placeholder}
+                      placeholderTextColor="#71717A"
+                      multiline
                       style={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: 16,
-                        backgroundColor: "#242429",
-                        alignItems: "center",
-                        justifyContent: "center",
+                        backgroundColor: "#121215",
+                        borderWidth: 1,
+                        borderColor: "rgba(255,255,255,0.12)",
+                        borderRadius: 12,
+                        paddingHorizontal: 12,
+                        paddingVertical: 10,
+                        color: "#FFFFFF",
+                        fontSize: 14,
+                        minHeight: 46,
                       }}
-                    >
-                      <Ionicons name="close" size={18} color="#FFFFFF" />
-                    </Pressable>
+                    />
                   </View>
 
-                  <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ gap: 16, paddingBottom: 20 }}>
-                    {/* Görünürlük Anahtarı */}
-                    <View
-                      style={{
-                        flexDirection: "row",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        backgroundColor: "#121215",
-                        padding: 12,
-                        borderRadius: 14,
-                      }}
-                    >
-                      <Text style={{ color: "#FFFFFF", fontSize: 13, fontWeight: "700" }}>
-                        Stantta Göster
+                  {/* DİKEY KONUM / YUKARI - AŞAĞI TAŞIMA (offsetY) */}
+                  <View style={{ gap: 6, backgroundColor: "#121215", padding: 12, borderRadius: 12 }}>
+                    <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
+                      <Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
+                        DİKEY KONUM (YUKARI / AŞAĞI TAŞIMA)
+                      </Text>
+                      <Text style={{ color: "#E5C378", fontSize: 11, fontWeight: "800" }}>
+                        {item.offsetY ? `${item.offsetY > 0 ? "+" : ""}${item.offsetY} px` : "Orijinal (0px)"}
                       </Text>
-                      <Switch
-                        value={item.visible}
-                        onValueChange={(v) =>
-                          setFields((prev) => ({
-                            ...prev,
-                            [selectedEditField]: { ...prev[selectedEditField], visible: v },
-                          }))
-                        }
-                        trackColor={{ false: "#27272A", true: "#D4AF37" }}
-                        thumbColor="#FFFFFF"
-                        ios_backgroundColor="#27272A"
-                      />
                     </View>
-
-                    {/* Metin Girişi (Multiline / Enter Destekli) */}
-                    <View style={{ gap: 6 }}>
-                      <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
-                        METİN İÇERİĞİ (ENTER İLE YENİ SATIR)
-                      </Text>
-                      <TextInput
-                        value={item.text}
-                        onChangeText={(t) =>
+                    <View style={{ flexDirection: "row", gap: 8 }}>
+                      <Pressable
+                        onPress={() =>
                           setFields((prev) => ({
                             ...prev,
-                            [selectedEditField]: { ...prev[selectedEditField], text: t },
+                            [selectedEditField]: {
+                              ...prev[selectedEditField],
+                              offsetY: (prev[selectedEditField].offsetY || 0) - 3,
+                            },
                           }))
                         }
-                        placeholder={def.placeholder}
-                        placeholderTextColor="#71717A"
-                        multiline
                         style={{
-                          backgroundColor: "#121215",
-                          borderWidth: 1,
-                          borderColor: "rgba(255,255,255,0.12)",
-                          borderRadius: 14,
-                          paddingHorizontal: 14,
-                          paddingVertical: 12,
-                          color: "#FFFFFF",
-                          fontSize: 14,
-                          minHeight: 60,
+                          flex: 1,
+                          backgroundColor: "#242429",
+                          paddingVertical: 8,
+                          borderRadius: 8,
+                          alignItems: "center",
+                          flexDirection: "row",
+                          justifyContent: "center",
+                          gap: 4,
                         }}
-                      />
+                      >
+                        <Ionicons name="arrow-up" size={14} color="#D4AF37" />
+                        <Text style={{ color: "#FFFFFF", fontSize: 12, fontWeight: "700" }}>Yukarı (-3px)</Text>
+                      </Pressable>
+
+                      <Pressable
+                        onPress={() =>
+                          setFields((prev) => ({
+                            ...prev,
+                            [selectedEditField]: {
+                              ...prev[selectedEditField],
+                              offsetY: (prev[selectedEditField].offsetY || 0) + 3,
+                            },
+                          }))
+                        }
+                        style={{
+                          flex: 1,
+                          backgroundColor: "#242429",
+                          paddingVertical: 8,
+                          borderRadius: 8,
+                          alignItems: "center",
+                          flexDirection: "row",
+                          justifyContent: "center",
+                          gap: 4,
+                        }}
+                      >
+                        <Ionicons name="arrow-down" size={14} color="#D4AF37" />
+                        <Text style={{ color: "#FFFFFF", fontSize: 12, fontWeight: "700" }}>Aşağı (+3px)</Text>
+                      </Pressable>
+
+                      {item.offsetY ? (
+                        <Pressable
+                          onPress={() =>
+                            setFields((prev) => ({
+                              ...prev,
+                              [selectedEditField]: {
+                                ...prev[selectedEditField],
+                                offsetY: 0,
+                              },
+                            }))
+                          }
+                          style={{
+                            backgroundColor: "#3A2A2A",
+                            paddingHorizontal: 12,
+                            paddingVertical: 8,
+                            borderRadius: 8,
+                            alignItems: "center",
+                            justifyContent: "center",
+                          }}
+                        >
+                          <Text style={{ color: "#EF4444", fontSize: 11, fontWeight: "700" }}>Sıfırla</Text>
+                        </Pressable>
+                      ) : null}
                     </View>
+                  </View>
 
-                    {/* DİKEY KONUM / YUKARI - AŞAĞI TAŞIMA (offsetY) */}
-                    <View style={{ gap: 8, backgroundColor: "#121215", padding: 12, borderRadius: 14 }}>
-                      <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
-                        <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
-                          DİKEY KONUM (YUKARI / AŞAĞI)
-                        </Text>
-                        <Text style={{ color: "#E5C378", fontSize: 12, fontWeight: "800" }}>
-                          {item.offsetY ? `${item.offsetY > 0 ? "+" : ""}${item.offsetY} px` : "Orijinal (0px)"}
-                        </Text>
-                      </View>
-                      <View style={{ flexDirection: "row", gap: 8 }}>
-                        <Pressable
-                          onPress={() =>
-                            setFields((prev) => ({
-                              ...prev,
-                              [selectedEditField]: {
-                                ...prev[selectedEditField],
-                                offsetY: (prev[selectedEditField].offsetY || 0) - 3,
-                              },
-                            }))
-                          }
-                          style={{
-                            flex: 1,
-                            backgroundColor: "#242429",
-                            paddingVertical: 10,
-                            borderRadius: 10,
-                            alignItems: "center",
-                            flexDirection: "row",
-                            justifyContent: "center",
-                            gap: 4,
-                          }}
-                        >
-                          <Ionicons name="arrow-up" size={14} color="#D4AF37" />
-                          <Text style={{ color: "#FFFFFF", fontSize: 12, fontWeight: "700" }}>Yukarı (-3px)</Text>
-                        </Pressable>
-
-                        <Pressable
-                          onPress={() =>
-                            setFields((prev) => ({
-                              ...prev,
-                              [selectedEditField]: {
-                                ...prev[selectedEditField],
-                                offsetY: (prev[selectedEditField].offsetY || 0) + 3,
-                              },
-                            }))
-                          }
-                          style={{
-                            flex: 1,
-                            backgroundColor: "#242429",
-                            paddingVertical: 10,
-                            borderRadius: 10,
-                            alignItems: "center",
-                            flexDirection: "row",
-                            justifyContent: "center",
-                            gap: 4,
-                          }}
-                        >
-                          <Ionicons name="arrow-down" size={14} color="#D4AF37" />
-                          <Text style={{ color: "#FFFFFF", fontSize: 12, fontWeight: "700" }}>Aşağı (+3px)</Text>
-                        </Pressable>
-
-                        {item.offsetY ? (
+                  {/* YAZI TİPİ (FONT) & BOYUT YAN YANA */}
+                  <View style={{ gap: 6 }}>
+                    <Text style={{ color: "#D4AF37", fontSize: 11, fontWeight: "700" }}>
+                      YAZI TİPİ (TÜRKÇE DESTEKLİ FONT)
+                    </Text>
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6 }}>
+                      {FONT_OPTIONS.map((f) => {
+                        const isSelected = item.fontId === f.id;
+                        return (
                           <Pressable
+                            key={f.id}
                             onPress={() =>
                               setFields((prev) => ({
                                 ...prev,
-                                [selectedEditField]: {
-                                  ...prev[selectedEditField],
-                                  offsetY: 0,
-                                },
+                                [selectedEditField]: { ...prev[selectedEditField], fontId: f.id },
                               }))
                             }
                             style={{
-                              backgroundColor: "#3A2A2A",
+                              backgroundColor: isSelected ? "#D4AF37" : "#242429",
                               paddingHorizontal: 12,
-                              paddingVertical: 10,
+                              paddingVertical: 7,
                               borderRadius: 10,
-                              alignItems: "center",
-                              justifyContent: "center",
+                              borderWidth: 1.5,
+                              borderColor: isSelected ? "#D4AF37" : "rgba(255,255,255,0.06)",
                             }}
                           >
-                            <Text style={{ color: "#EF4444", fontSize: 11, fontWeight: "700" }}>Sıfırla</Text>
-                          </Pressable>
-                        ) : null}
-                      </View>
-                    </View>
-
-                    {/* YAZI TİPİ (FONT) SEÇİMİ */}
-                    <View style={{ gap: 8 }}>
-                      <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
-                        YAZI TİPİ (TÜRKÇE DESTEKLİ FONT)
-                      </Text>
-                      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
-                        {FONT_OPTIONS.map((f) => {
-                          const isSelected = item.fontId === f.id;
-                          return (
-                            <Pressable
-                              key={f.id}
-                              onPress={() =>
-                                setFields((prev) => ({
-                                  ...prev,
-                                  [selectedEditField]: { ...prev[selectedEditField], fontId: f.id },
-                                }))
-                              }
+                            <Text
                               style={{
-                                backgroundColor: isSelected ? "#D4AF37" : "#242429",
-                                paddingHorizontal: 14,
-                                paddingVertical: 10,
-                                borderRadius: 12,
-                                borderWidth: 1.5,
-                                borderColor: isSelected ? "#D4AF37" : "rgba(255,255,255,0.06)",
+                                color: isSelected ? "#0C0C0E" : "#FFFFFF",
+                                fontSize: 11.5,
+                                fontWeight: isSelected ? "800" : "600",
                               }}
                             >
-                              <Text
-                                style={{
-                                  color: isSelected ? "#0C0C0E" : "#FFFFFF",
-                                  fontSize: 12,
-                                  fontWeight: isSelected ? "800" : "500",
-                                }}
-                              >
-                                {f.label}
-                              </Text>
-                            </Pressable>
-                          );
-                        })}
-                      </View>
-                    </View>
+                              {f.label}
+                            </Text>
+                          </Pressable>
+                        );
+                      })}
+                    </ScrollView>
+                  </View>
 
-                    {/* YAZI BOYUTU (FONT SIZE) */}
-                    <View style={{ gap: 8, backgroundColor: "#121215", padding: 12, borderRadius: 14 }}>
-                      <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
-                        YAZI BOYUTU
+                  {/* YAZI BOYUTU (FONT SIZE) */}
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      backgroundColor: "#121215",
+                      padding: 10,
+                      borderRadius: 12,
+                    }}
+                  >
+                    <Text style={{ color: "#D4AF37", fontSize: 12, fontWeight: "700" }}>
+                      YAZI BOYUTU:
+                    </Text>
+                    <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                      <Pressable
+                        onPress={() =>
+                          setFields((prev) => ({
+                            ...prev,
+                            [selectedEditField]: {
+                              ...prev[selectedEditField],
+                              fontSize: Math.max(def.min, (prev[selectedEditField].fontSize || 12) - 1),
+                            },
+                          }))
+                        }
+                        style={{
+                          backgroundColor: "#242429",
+                          paddingHorizontal: 14,
+                          paddingVertical: 6,
+                          borderRadius: 8,
+                        }}
+                      >
+                        <Ionicons name="remove" size={16} color="#FFFFFF" />
+                      </Pressable>
+
+                      <Text style={{ color: "#D4AF37", fontSize: 16, fontWeight: "800", minWidth: 40, textAlign: "center" }}>
+                        {item.fontSize || 12} px
                       </Text>
-                      <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
-                        <Pressable
-                          onPress={() =>
-                            setFields((prev) => ({
-                              ...prev,
-                              [selectedEditField]: {
-                                ...prev[selectedEditField],
-                                fontSize: Math.max(def.min, (prev[selectedEditField].fontSize || 12) - 1),
-                              },
-                            }))
-                          }
-                          style={{
-                            backgroundColor: "#242429",
-                            paddingHorizontal: 16,
-                            paddingVertical: 10,
-                            borderRadius: 10,
-                          }}
-                        >
-                          <Ionicons name="remove" size={18} color="#FFFFFF" />
-                        </Pressable>
 
-                        <Text style={{ color: "#D4AF37", fontSize: 18, fontWeight: "800" }}>
-                          {item.fontSize || 12} px
-                        </Text>
-
-                        <Pressable
-                          onPress={() =>
-                            setFields((prev) => ({
-                              ...prev,
-                              [selectedEditField]: {
-                                ...prev[selectedEditField],
-                                fontSize: Math.min(def.max, (prev[selectedEditField].fontSize || 12) + 1),
-                              },
-                            }))
-                          }
-                          style={{
-                            backgroundColor: "#242429",
-                            paddingHorizontal: 16,
-                            paddingVertical: 10,
-                            borderRadius: 10,
-                          }}
-                        >
-                          <Ionicons name="add" size={18} color="#FFFFFF" />
-                        </Pressable>
-                      </View>
+                      <Pressable
+                        onPress={() =>
+                          setFields((prev) => ({
+                            ...prev,
+                            [selectedEditField]: {
+                              ...prev[selectedEditField],
+                              fontSize: Math.min(def.max, (prev[selectedEditField].fontSize || 12) + 1),
+                            },
+                          }))
+                        }
+                        style={{
+                          backgroundColor: "#242429",
+                          paddingHorizontal: 14,
+                          paddingVertical: 6,
+                          borderRadius: 8,
+                        }}
+                      >
+                        <Ionicons name="add" size={16} color="#FFFFFF" />
+                      </Pressable>
                     </View>
+                  </View>
+                </>
+              )}
+            </View>
+          );
+        })()}
 
-                    {/* Kaydet & Tamamla Butonu */}
-                    <Pressable
-                      onPress={() => setSelectedEditField(null)}
-                      style={{
-                        backgroundColor: "#D4AF37",
-                        borderRadius: 14,
-                        paddingVertical: 14,
-                        alignItems: "center",
-                        marginTop: 6,
-                      }}
-                    >
-                      <Text style={{ color: "#0C0C0E", fontSize: 15, fontWeight: "800" }}>
-                        Tamamla & Uygula
-                      </Text>
-                    </Pressable>
-                  </ScrollView>
-                </View>
-              );
-            })()}
-          </View>
-        </Modal>
 
 
 
diff --git a/apps/mobile/svgcomponentlist/7.tsx b/apps/mobile/svgcomponentlist/7.tsx
new file mode 100644
index 0000000..e69de29