From a1f5e5e539a8975a2f034725ce4c289bfb3370ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Sun, 9 Aug 2026 01:14:57 +0300
Subject: [PATCH] =?UTF-8?q?Claude=20g=C3=BCncellemesi=20Editor=20Options?=
 =?UTF-8?q?=20Builder=20Modal=20g=C3=BCncellemeleri?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../edit/form-fields/FormFieldTabDetails.tsx  |   38 +-
 .../EditorOptionsBuilderDialog.tsx            | 1523 +++++++----------
 .../editor-options/OptionField.tsx            |  256 +++
 .../editor-options/jsonUtils.ts               |  181 ++
 .../editor-options/optionSpecs.ts             |  902 ++++++++++
 .../editor-options/presets.ts                 |  267 +++
 ui/src/views/list/CardView.tsx                |    4 +-
 ui/src/views/list/Tree.tsx                    |    2 +
 ui/src/views/list/useListFormColumns.ts       |   10 +-
 9 files changed, 2233 insertions(+), 950 deletions(-)
 create mode 100644 ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx
 create mode 100644 ui/src/views/admin/listForm/edit/json-row-operations/editor-options/jsonUtils.ts
 create mode 100644 ui/src/views/admin/listForm/edit/json-row-operations/editor-options/optionSpecs.ts
 create mode 100644 ui/src/views/admin/listForm/edit/json-row-operations/editor-options/presets.ts

diff --git a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
index 2a683dc7..0d45d55d 100644
--- a/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/form-fields/FormFieldTabDetails.tsx
@@ -8,21 +8,31 @@ import { FaSlidersH } from 'react-icons/fa'
 import { bool, number, object, string } from 'yup'
 import { dbSourceTypeOptions, listFormAlignmentOptions } from '../options'
 import EditorOptionsBuilderDialog from '../json-row-operations/EditorOptionsBuilderDialog'
+import { isValidJsonText } from '../json-row-operations/editor-options/jsonUtils'
 import { FormFieldEditProps } from './FormFields'
 import { tooltipFormatListOptions } from '@/proxy/admin/list-form/options'
 
 const schema = object().shape({
   fieldName: string().required().max(100),
-  captionName: string(),
-  placeHolder: string(),
-  bandName: string(),
-  isActive: bool().required(),
-  visible: bool().required(),
-  allowSearch: bool().required(),
+  captionName: string().nullable(),
+  placeHolder: string().nullable(),
+  bandName: string().nullable(),
+  // Bu alanlar veritabanında null olabiliyor; `required()` bırakıldığında form
+  // sessizce submit edilmiyor ve "kaydettim ama değişmedi" durumu oluşuyordu.
+  isActive: bool().nullable(),
+  visible: bool().nullable(),
+  allowSearch: bool().nullable(),
   sourceDbType: number().required(),
-  alignment: string(),
-  format: string(),
-  editorOptions: string(),
+  // Format listesindeki "None" seçeneği null döndürüyor.
+  alignment: string().nullable(),
+  format: string().nullable(),
+  editorOptions: string()
+    .nullable()
+    .test(
+      'is-json-object',
+      'editorOptions geçerli bir JSON nesnesi olmalıdır.',
+      (value) => !value?.trim() || isValidJsonText(value),
+    ),
 })
 
 function FormFieldTabDetails({
@@ -103,13 +113,18 @@ function FormFieldTabDetails({
               </div>
             </Card>
             <Card>
-              <FormItem label={translate('::ListForms.ListFormEdit.CustomValueType')}>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.CustomValueType')}
+                invalid={!!errors.sourceDbType && !!touched.sourceDbType}
+                errorMessage={errors.sourceDbType as string}
+              >
+                {/* Temizlenirse zorunlu alan doğrulaması formu sessizce bloke ediyordu. */}
                 <Field type="text" name="sourceDbType">
                   {({ field, form }: FieldProps<SelectBoxOption>) => (
                     <Select
                       field={field}
                       form={form}
-                      isClearable={true}
+                      isClearable={false}
                       options={dbSourceTypeOptions}
                       value={dbSourceTypeOptions.filter(
                         (option: any) => option.value === values.sourceDbType,
@@ -180,6 +195,7 @@ function FormFieldTabDetails({
           <EditorOptionsBuilderDialog
             isOpen={isEditorOptionsDialogOpen}
             value={values.editorOptions}
+            editorType={values.editorType2}
             onClose={() => setIsEditorOptionsDialogOpen(false)}
             onApply={(val) => setFieldValue('editorOptions', val)}
           />
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
index e34c4ac7..6c6d5020 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/EditorOptionsBuilderDialog.tsx
@@ -1,214 +1,130 @@
 import { Button, Dialog } from '@/components/ui'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useEffect, useMemo, useState } from 'react'
-import { FaCheck, FaCode, FaPlus, FaTimes, FaTrash } from 'react-icons/fa'
-
-type CustomOption = {
-  id: string
-  path: string
-  value: string
-  type: 'string' | 'number' | 'boolean' | 'json'
-}
+import type { IconType } from 'react-icons'
+import {
+  FaCalendarAlt,
+  FaCaretSquareDown,
+  FaCheck,
+  FaCheckSquare,
+  FaChevronDown,
+  FaChevronRight,
+  FaCode,
+  FaCog,
+  FaColumns,
+  FaCopy,
+  FaEraser,
+  FaFont,
+  FaHashtag,
+  FaImage,
+  FaMagic,
+  FaPalette,
+  FaPlus,
+  FaPuzzlePiece,
+  FaSlidersH,
+  FaTable,
+  FaTags,
+  FaTimes,
+  FaTrash,
+} from 'react-icons/fa'
+import OptionField, { controlClass } from './editor-options/OptionField'
+import {
+  applyPathValue,
+  collectLeafPaths,
+  getByPath,
+  inferLeafType,
+  leafToText,
+  parseOptionsJson,
+  prettyStringifyOptions,
+  stringifyOptions,
+  textToLeaf,
+  unsetByPath,
+  type JsonObject,
+  type LeafValueType,
+} from './editor-options/jsonUtils'
+import { editorOptionsPresets } from './editor-options/presets'
+import {
+  isSpecRelevant,
+  optionGroups,
+  resolveSpecs,
+  type OptionGroupKey,
+} from './editor-options/optionSpecs'
 
 type EditorOptionsBuilderDialogProps = {
   isOpen: boolean
   value?: string
+  /** Kolonun editorType2 değeri. Verilirse alanlar bu editöre göre süzülür. */
   editorType?: string
   onClose: () => void
   onApply: (value: string) => void
 }
 
-const baseInputClass =
-  'w-full min-w-0 h-9 px-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-100 focus:outline-none focus:border-indigo-400'
+const leafTypes: LeafValueType[] = ['string', 'number', 'boolean', 'json']
 
-const boolOptions = [
-  { key: 'showClearButton', label: 'showClearButton' },
-  { key: 'readOnly', label: 'readOnly' },
-  { key: 'searchEnabled', label: 'searchEnabled' },
-  { key: 'acceptCustomValue', label: 'acceptCustomValue' },
-  { key: 'showSpinButtons', label: 'showSpinButtons' },
-  { key: 'useMaskBehavior', label: 'useMaskBehavior' },
-  { key: 'useMaskedValue', label: 'useMaskedValue' },
-  { key: 'spellcheck', label: 'spellcheck' },
-]
+const PRESETS_KEY = '__presets'
+const UNMANAGED_KEY = '__unmanaged'
 
-const htmlToolbarItems = [
-  'undo',
-  'redo',
-  'separator',
-  'size',
-  'font',
-  'separator',
-  'bold',
-  'italic',
-  'strike',
-  'underline',
-  'separator',
-  'alignLeft',
-  'alignCenter',
-  'alignRight',
-  'alignJustify',
-  'separator',
-  'orderedList',
-  'bulletList',
-  'separator',
-  'header',
-  'separator',
-  'color',
-  'background',
-  'separator',
-  'link',
-  'image',
-  'separator',
-  'clear',
-  'codeBlock',
-  'blockquote',
-  'separator',
-  'insertTable',
-  'deleteTable',
-  'insertRowAbove',
-  'insertRowBelow',
-  'deleteRow',
-  'insertColumnLeft',
-  'insertColumnRight',
-  'deleteColumn',
-  'cellProperties',
-  'tableProperties',
-]
-
-function parseJsonObject(value?: string) {
-  if (!value?.trim() || value.trim().toLowerCase() === 'null') return {}
-  try {
-    const parsed = JSON.parse(value)
-    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {}
-  } catch {
-    return {}
-  }
+const groupIcons: Record<OptionGroupKey, IconType> = {
+  common: FaCog,
+  appearance: FaPalette,
+  text: FaFont,
+  number: FaHashtag,
+  date: FaCalendarAlt,
+  dropdown: FaCaretSquareDown,
+  tagBox: FaTags,
+  gridBox: FaTable,
+  image: FaImage,
+  choice: FaCheckSquare,
+  slider: FaSlidersH,
+  html: FaCode,
+  grid: FaColumns,
 }
 
-function isEmptyObject(value: Record<string, unknown>) {
-  return Object.keys(value).length === 0
-}
+const cardClass =
+  'rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900'
 
-function setByPath(target: Record<string, unknown>, path: string, value: unknown) {
-  const keys = path
-    .split('.')
-    .map((key) => key.trim())
-    .filter(Boolean)
-  if (!keys.length) return
-
-  let cursor: Record<string, unknown> = target
-  keys.slice(0, -1).forEach((key) => {
-    if (!cursor[key] || typeof cursor[key] !== 'object' || Array.isArray(cursor[key])) {
-      cursor[key] = {}
-    }
-    cursor = cursor[key] as Record<string, unknown>
-  })
-  cursor[keys[keys.length - 1]] = value
-}
-
-function unsetByPath(target: Record<string, unknown>, path: string) {
-  const keys = path
-    .split('.')
-    .map((key) => key.trim())
-    .filter(Boolean)
-  if (!keys.length) return
-
-  let cursor: Record<string, unknown> | undefined = target
-  for (const key of keys.slice(0, -1)) {
-    const next = cursor?.[key]
-    if (!next || typeof next !== 'object' || Array.isArray(next)) return
-    cursor = next as Record<string, unknown>
-  }
-
-  if (cursor && typeof cursor === 'object' && !Array.isArray(cursor)) {
-    delete cursor[keys[keys.length - 1]]
-  }
-}
-
-function getByPath(target: Record<string, unknown>, path: string) {
-  return path
-    .split('.')
-    .map((key) => key.trim())
-    .filter(Boolean)
-    .reduce<unknown>((cursor, key) => {
-      if (!cursor || typeof cursor !== 'object' || Array.isArray(cursor)) return undefined
-      return (cursor as Record<string, unknown>)[key]
-    }, target)
-}
-
-function toInputValue(value: unknown): string | number {
-  return typeof value === 'string' || typeof value === 'number' ? value : ''
-}
-
-function toSelectValue(value: unknown): string {
-  return typeof value === 'string' ? value : ''
-}
-
-function toEncodeHtmlSelectValue(value: unknown): string {
-  if (value === true) return 'true'
-  if (value === false) return 'false'
-  return value === 'auto' ? 'auto' : ''
-}
-
-function readEncodeHtmlSelectValue(value: string) {
-  if (value === 'true') return true
-  if (value === 'false') return false
-  return undefined
-}
-
-function readCustomValue(option: CustomOption) {
-  if (option.type === 'boolean') return option.value === 'true'
-  if (option.type === 'number') return Number(option.value || 0)
-  if (option.type === 'json') {
-    try {
-      return JSON.parse(option.value)
-    } catch {
-      return option.value
-    }
-  }
-  return option.value
-}
-
-function buildHtmlEditorOptions() {
-  return {
-    mediaResizing: { enabled: true },
-    imageUpload: {
-      tabs: ['file', 'url'],
-      fileUploadMode: 'base64',
-    },
-    toolbar: {
-      multiline: true,
-      items: htmlToolbarItems.map((name) => {
-        if (name === 'size') {
-          return {
-            name,
-            acceptedValues: ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'],
-            options: { inputAttr: { 'aria-label': 'Font size' } },
-          }
-        }
-        if (name === 'font') {
-          return {
-            name,
-            acceptedValues: [
-              'Arial',
-              'Courier New',
-              'Georgia',
-              'Impact',
-              'Lucida Console',
-              'Tahoma',
-              'Times New Roman',
-              'Verdana',
-            ],
-            options: { inputAttr: { 'aria-label': 'Font family' } },
-          }
-        }
-        if (name === 'header') return { name, acceptedValues: [false, 1, 2, 3, 4, 5] }
-        return { name }
-      }),
-    },
-  }
-}
+/** Açılır/kapanır bölüm başlığı. */
+const SectionHeader = ({
+  icon: Icon,
+  title,
+  description,
+  badge,
+  accent,
+  open,
+  onToggle,
+}: {
+  icon: IconType
+  title: string
+  description?: string
+  badge?: string
+  accent?: boolean
+  open: boolean
+  onToggle: () => void
+}) => (
+  <button
+    type="button"
+    title={description}
+    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
+    onClick={onToggle}
+  >
+    <span className="shrink-0 text-gray-400">
+      {open ? <FaChevronDown size={11} /> : <FaChevronRight size={11} />}
+    </span>
+    <Icon className={accent ? 'text-indigo-500' : 'text-gray-400'} size={13} />
+    <span className="min-w-0 flex-1 truncate text-sm font-semibold">{title}</span>
+    {badge && (
+      <span
+        className={`shrink-0 rounded-full px-2 py-[1px] text-[11px] ${
+          accent
+            ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200'
+            : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
+        }`}
+      >
+        {badge}
+      </span>
+    )}
+  </button>
+)
 
 function EditorOptionsBuilderDialog({
   isOpen,
@@ -217,803 +133,538 @@ function EditorOptionsBuilderDialog({
   onClose,
   onApply,
 }: EditorOptionsBuilderDialogProps) {
-  const parsedValue = useMemo(() => parseJsonObject(value), [value])
-  const [options, setOptions] = useState<Record<string, unknown>>({})
-  const [customOptions, setCustomOptions] = useState<CustomOption[]>([])
-  const [parseError, setParseError] = useState('')
   const { translate } = useLocalization()
 
+  const [options, setOptions] = useState<JsonObject>({})
+  const [tab, setTab] = useState<'builder' | 'json'>('builder')
+  const [search, setSearch] = useState('')
+  const [showAll, setShowAll] = useState(false)
+  const [onlySet, setOnlySet] = useState(false)
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
+  const [rawDraft, setRawDraft] = useState('')
+  const [rawError, setRawError] = useState('')
+  const [copied, setCopied] = useState(false)
+  const [newPath, setNewPath] = useState('')
+  const [newType, setNewType] = useState<LeafValueType>('string')
+  const [newValue, setNewValue] = useState('')
+
+  const specs = useMemo(() => resolveSpecs(editorType), [editorType])
+  const managedPaths = useMemo(() => new Set(specs.map((spec) => spec.path)), [specs])
+
+  // Dialog her açılışta kaydedilmiş değerden yeniden kurulur.
   useEffect(() => {
     if (!isOpen) return
-    setOptions(parsedValue)
-    setCustomOptions([])
-    setParseError(
-      value?.trim() && value.trim().toLowerCase() !== 'null' && isEmptyObject(parsedValue)
-        ? 'Current value is not valid JSON.'
-        : '',
-    )
-  }, [isOpen, parsedValue, value])
 
-  const toggleOption = (key: string, checked: boolean) => {
-    setOptions((current) => {
-      const next = { ...current }
-      if (checked) next[key] = true
-      else delete next[key]
+    const { data, error } = parseOptionsJson(value)
+    setOptions(data)
+    setSearch('')
+    setShowAll(false)
+    setOnlySet(false)
+    setCopied(false)
+    setNewPath('')
+    setNewType('string')
+    setNewValue('')
+
+    // Başlangıçta yalnızca anlamlı bölümler açılır; geri kalanı katlanmış gelir.
+    const seed: Record<string, boolean> = { [PRESETS_KEY]: true }
+    optionGroups.forEach((group) => {
+      const groupSpecs = specs.filter((spec) => spec.group === group.key)
+      const hasValue = groupSpecs.some((spec) => getByPath(data, spec.path) !== undefined)
+      const targeted = !!editorType && groupSpecs.some((spec) => spec.editors?.includes(editorType))
+      const fallback = !editorType && (group.key === 'common' || group.key === 'appearance')
+      seed[group.key] = hasValue || targeted || fallback
+    })
+    seed[UNMANAGED_KEY] = collectLeafPaths(data).some((path) => !managedPaths.has(path))
+    setOpenSections(seed)
+
+    if (error) {
+      // Bozuk JSON'u sessizce silmiyoruz; kullanıcı ham sekmede düzeltmeli.
+      setRawDraft(value ?? '')
+      setRawError(error)
+      setTab('json')
+    } else {
+      setRawDraft(prettyStringifyOptions(data))
+      setRawError('')
+      setTab('builder')
+    }
+  }, [editorType, isOpen, managedPaths, specs, value])
+
+  const setPath = (path: string, next: unknown) =>
+    setOptions((current) => applyPathValue(current, path, next))
+
+  const toggleSection = (key: string) =>
+    setOpenSections((current) => ({ ...current, [key]: !(current[key] ?? true) }))
+
+  const searching = search.trim().length > 0
+  const isSectionOpen = (key: string) => searching || (openSections[key] ?? true)
+
+  const setAllSections = (open: boolean) =>
+    setOpenSections(() => {
+      const next: Record<string, boolean> = { [PRESETS_KEY]: open, [UNMANAGED_KEY]: open }
+      optionGroups.forEach((group) => {
+        next[group.key] = open
+      })
       return next
     })
-  }
 
-  const setOptionValue = (key: string, optionValue: unknown) => {
-    setOptions((current) => {
-      const next = { ...current }
-      if (optionValue === '' || optionValue === undefined || optionValue === null) delete next[key]
-      else next[key] = optionValue
-      return next
+  const visibleSpecs = useMemo(() => {
+    const needle = search.trim().toLowerCase()
+
+    return specs.filter((spec) => {
+      const isSet = getByPath(options, spec.path) !== undefined
+      if (onlySet && !isSet) return false
+      // Ayarlanmış bir alan, editöre uymasa bile gizlenmez; aksi halde
+      // "kaydettim ama göremiyorum" durumu oluşur.
+      if (!showAll && !isSet && !isSpecRelevant(spec, editorType)) return false
+      if (needle && !`${spec.path} ${spec.label}`.toLowerCase().includes(needle)) return false
+      return true
     })
+  }, [editorType, onlySet, options, search, showAll, specs])
+
+  const groupedSpecs = useMemo(
+    () =>
+      optionGroups
+        .map((group) => {
+          const groupSpecs = visibleSpecs.filter((spec) => spec.group === group.key)
+          return {
+            ...group,
+            specs: groupSpecs,
+            setCount: groupSpecs.filter((spec) => getByPath(options, spec.path) !== undefined)
+              .length,
+          }
+        })
+        .filter((group) => group.specs.length > 0),
+    [options, visibleSpecs],
+  )
+
+  /** Sözlükte karşılığı olmayan, ama JSON'da bulunan tüm yollar. */
+  const unmanagedPaths = useMemo(
+    () => collectLeafPaths(options).filter((path) => !managedPaths.has(path)),
+    [managedPaths, options],
+  )
+
+  const setCount = useMemo(() => collectLeafPaths(options).length, [options])
+
+  const visiblePresets = useMemo(
+    () =>
+      editorOptionsPresets.filter(
+        (preset) => showAll || !preset.editors || !editorType || preset.editors.includes(editorType),
+      ),
+    [editorType, showAll],
+  )
+
+  const preview = useMemo(() => prettyStringifyOptions(options), [options])
+
+  const applyRawDraft = (text: string) => {
+    setRawDraft(text)
+    if (!text.trim()) {
+      setRawError('')
+      setOptions({})
+      return
+    }
+
+    const { data, error } = parseOptionsJson(text)
+    setRawError(error ?? '')
+    if (!error) setOptions(data)
   }
 
-  const setOptionPathValue = (path: string, optionValue: unknown) => {
-    setOptions((current) => {
-      const next = { ...current }
-      if (optionValue === '' || optionValue === undefined || optionValue === null) {
-        unsetByPath(next, path)
-      } else {
-        setByPath(next, path, optionValue)
-      }
-      return next
-    })
+  const goToTab = (next: 'builder' | 'json') => {
+    // JSON bozukken Ayarlar sekmesi boş görünür ve yanıltıcı olur.
+    if (next === 'builder' && rawError) return
+    if (next === 'json') setRawDraft(prettyStringifyOptions(options))
+    setTab(next)
   }
 
-  const addPreset = (preset: Record<string, unknown>) => {
-    setOptions((current) => ({ ...current, ...preset }))
+  const copyPreview = () => {
+    navigator.clipboard?.writeText(tab === 'json' ? rawDraft : preview)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
   }
 
+  const addCustomOption = () => {
+    const path = newPath.trim()
+    if (!path) return
+    setPath(path, textToLeaf(newValue, newType))
+    setNewPath('')
+    setNewValue('')
+  }
+
+  const canApply = !rawError
+
   const applyOptions = () => {
-    const next = { ...options }
-    customOptions.forEach((option) => {
-      if (option.path.trim()) setByPath(next, option.path, readCustomValue(option))
-    })
-    onApply(isEmptyObject(next) ? '' : JSON.stringify(next))
+    if (!canApply) return
+    onApply(stringifyOptions(options))
     onClose()
   }
 
-  const clearOptions = () => {
-    setOptions({})
-    setCustomOptions([])
-  }
-
-  const preview = useMemo(() => {
-    const next = { ...options }
-    customOptions.forEach((option) => {
-      if (option.path.trim()) setByPath(next, option.path, readCustomValue(option))
-    })
-    return isEmptyObject(next) ? '' : JSON.stringify(next, null, 2)
-  }, [customOptions, options])
-
-  const presetButtons = (
-    <div className="flex flex-wrap gap-2">
-      <Button
-        type="button"
-        size="sm"
-        title="editorOptions alanını boşaltır. Backend'e boş string kaydedilir."
-        onClick={clearOptions}
-      >
-        NULL / Empty
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title='{"disabled": true} ekler.'
-        onClick={() => addPreset({ disabled: true })}
-      >
-        disabled
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title='{"tooltip": {"enabled": true}} ekler.'
-        onClick={() => addPreset({ tooltip: { enabled: true } })}
-      >
-        Tooltip
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="Ondalık format precision 2 ekler."
-        onClick={() => addPreset({ format: { type: 'fixedPoint', precision: 2 } })}
-      >
-        fixedPoint precision 2
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="Pasif ve precision 2 fixedPoint formatını birlikte ekler."
-        onClick={() =>
-          addPreset({
-            disabled: true,
-            format: { type: 'fixedPoint', precision: 2 },
-          })
-        }
-      >
-        disabled fixedPoint 2
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="Precision 1, mask behavior, spin buttons ve pasif ayarını ekler."
-        onClick={() =>
-          addPreset({
-            format: { type: 'fixedPoint', precision: 1 },
-            useMaskBehavior: true,
-            showSpinButtons: true,
-            disabled: true,
-          })
-        }
-      >
-        disabled fixedPoint 1
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="NumberBox için precision 2, mask behavior ve spin buttons ekler."
-        onClick={() =>
-          addPreset({
-            format: { type: 'fixedPoint', precision: 2 },
-            useMaskBehavior: true,
-            showSpinButtons: true,
-          })
-        }
-      >
-        numberSpin precision 2
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="DateBox için gün/ay/yıl formatını ekler."
-        onClick={() => addPreset({ format: 'dd/MM/yyyy', displayFormat: 'dd/MM/yyyy' })}
-      >
-        date dd/MM/yyyy
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="DateBox için gün/ay/yıl saat:dakika formatını ekler."
-        onClick={() =>
-          addPreset({
-            format: 'dd/MM/yyyy HH:mm',
-            displayFormat: 'dd/MM/yyyy HH:mm',
-          })
-        }
-      >
-        dateTime dd/MM/yyyy HH:mm
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="Telefon maskesi, yer tutucu ve Türkçe hata mesajı ekler."
-        onClick={() =>
-          addPreset({
-            format: 'phoneGlobal',
-            mask: '(000) 000-0000',
-            maskInvalidMessage: 'Lütfen geçerli bir telefon numarası girin',
-            useMaskedValue: false,
-            maskRules: { X: '[0-9]' },
-            placeholder: '(555) 123-4567',
-          })
-        }
-      >
-        phoneGlobal mask
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="Saat seçimi için dxDateBox time picker ayarları ekler."
-        onClick={() =>
-          addPreset({
-            type: 'time',
-            pickerType: 'list',
-            displayFormat: 'HH:mm',
-            dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
-            interval: 5,
-            width: '100%',
-          })
-        }
-      >
-        time picker
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="ImageUpload için 80x80 ve multiple ayarlarını ekler."
-        onClick={() => addPreset({ width: 80, height: 80, multiple: true })}
-      >
-        multi image
-      </Button>
-      <Button type="button" size="sm" title='{"height": 60} ekler.' onClick={() => addPreset({ height: 60 })}>
-        Height 60
-      </Button>
-      <Button type="button" size="sm" title='{"height": 100} ekler.' onClick={() => addPreset({ height: 100 })}>
-        Height 100
-      </Button>
-      <Button type="button" size="sm" title='{"height": 200} ekler.' onClick={() => addPreset({ height: 200 })}>
-        Height 200
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        title="HtmlEditor toolbar, image upload ve media resizing ayarlarını ekler."
-        onClick={() => addPreset(buildHtmlEditorOptions())}
-      >
-        htmlEditor toolbar
-      </Button>
-    </div>
-  )
+  const tabButtonClass = (active: boolean) =>
+    `flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-40 ${
+      active ? 'bg-indigo-500 text-white' : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
+    }`
 
   return (
     <Dialog
       preventScroll
       isOpen={isOpen}
-      width={1320}
-      height="88vh"
+      width={1360}
+      height="90vh"
       contentClassName="flex flex-col"
       style={{ overlay: { zIndex: 1300 } }}
       onClose={onClose}
       onRequestClose={onClose}
     >
       <Dialog.Body className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
-        <div className="flex items-center justify-between gap-3">
-          <h5
-            title={`${
-              editorType || 'DevExpress editor'
-            } için DevExtreme editorOptions JSON'u oluşturur. Üstten hazır ayarları seç, sağdaki JSON önizleme alanından sonucu kontrol et.`}
+        {/* ── Başlık ─────────────────────────────────────────────── */}
+        <div className="flex flex-wrap items-center gap-2 border-b border-gray-200 pb-3 dark:border-gray-700">
+          <FaMagic className="text-indigo-500" />
+          <h5 className="mr-1">Editor Options</h5>
+          <span
+            className="rounded-full bg-indigo-100 px-2.5 py-[2px] text-[11px] font-medium text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200"
+            title="Alanlar bu editör tipine göre süzülüyor. Editör tipi Seçenekler sekmesinden değiştirilir."
           >
-            Editor Options Builder
-          </h5>
+            {editorType || 'editör tipi seçilmemiş'}
+          </span>
+          <span
+            className={`rounded-full px-2.5 py-[2px] text-[11px] font-medium ${
+              setCount
+                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200'
+                : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
+            }`}
+            title="JSON'a yazılacak ayar sayısı"
+          >
+            {setCount} ayar
+          </span>
+
+          <div className="ml-auto flex items-center gap-2">
+            <div className="flex overflow-hidden rounded-md border border-gray-200 dark:border-gray-700">
+              <button
+                disabled={!!rawError}
+                type="button"
+                title={rawError ? 'Önce JSON hatasını düzelt.' : undefined}
+                className={tabButtonClass(tab === 'builder')}
+                onClick={() => goToTab('builder')}
+              >
+                <FaSlidersH /> Ayarlar
+              </button>
+              <button
+                type="button"
+                className={tabButtonClass(tab === 'json')}
+                onClick={() => goToTab('json')}
+              >
+                <FaCode /> Ham JSON
+              </button>
+            </div>
+          </div>
         </div>
 
-        {parseError && (
-          <div className="rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
-            Geçerli JSON okunamadı.
+        {rawError && (
+          <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
+            JSON geçersiz: {rawError} — düzeltilene kadar kaydedilemez. Mevcut değer korunuyor.
           </div>
         )}
 
-        <section className="rounded border border-gray-200 dark:border-gray-700 bg-gray-50/70 dark:bg-gray-900/30 p-3">
-          <div
-            className="mb-3 text-sm font-semibold"
-            title="Daha önce kullandığın hazır editorOptions örnekleri. Tıkladığın preset mevcut JSON ile birleştirilir, yani başka seçenekleri silmeden üzerine ekler."
-          >
-            Hazır Ayarlar
+        {tab === 'json' ? (
+          <div className="flex min-h-0 flex-1 flex-col gap-2">
+            <div className="flex items-center justify-between gap-2 text-xs text-gray-500">
+              <span>
+                Buradaki JSON doğrudan editorOptions alanına yazılır. Geçerli olduğu anda Ayarlar
+                sekmesi de güncellenir.
+              </span>
+              <Button size="sm" type="button" icon={<FaCopy />} onClick={copyPreview}>
+                {copied ? 'Kopyalandı' : 'Kopyala'}
+              </Button>
+            </div>
+            <textarea
+              spellCheck={false}
+              className={`min-h-0 flex-1 rounded-lg border p-4 font-mono text-xs leading-5 ${
+                rawError ? 'border-red-400' : 'border-gray-200 dark:border-gray-700'
+              } bg-gray-950 text-emerald-100`}
+              value={rawDraft}
+              placeholder="{}"
+              onChange={(event) => applyRawDraft(event.target.value)}
+            />
           </div>
-          {presetButtons}
-        </section>
-
-        <div className="grid grid-cols-12 min-h-0 gap-4 overflow-hidden">
-          <section className="col-span-7 flex min-h-0 flex-col gap-3 overflow-y-auto pr-1">
-            <div className="rounded border border-gray-200 dark:border-gray-700 p-3">
-              <div
-                className="mb-3 text-sm font-semibold"
-                title="En sık kullanılan boolean özellikler. İşaretlersen JSON'a true olarak eklenir, kaldırırsan JSON'dan silinir."
+        ) : (
+          <>
+            {/* ── Araç çubuğu ──────────────────────────────────────── */}
+            <div className="flex flex-wrap items-center gap-2">
+              <input
+                className={`${controlClass} !w-64`}
+                value={search}
+                placeholder="Ayar ara (mask, format, search…)"
+                onChange={(event) => setSearch(event.target.value)}
+              />
+              <label
+                className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-300"
+                title="Kapalıyken yalnızca seçili editöre uyan ve halihazırda dolu olan ayarlar listelenir."
               >
-                1. Hızlı Anahtarlar
-              </div>
-              <div className="grid grid-cols-2 gap-x-3 gap-y-2">
-                {boolOptions.map((option) => (
-                  <label
-                    key={option.key}
-                    className="flex min-w-0 items-center gap-2 rounded px-1 py-1 text-xs"
-                    title={`${option.key}: true/false olarak editorOptions içine yazılır.`}
-                  >
-                    <input
-                      className="shrink-0"
-                      type="checkbox"
-                      checked={options[option.key] === true}
-                      onChange={(event) => toggleOption(option.key, event.target.checked)}
-                    />
-                    <span className="min-w-0 truncate">{option.label}</span>
-                  </label>
-                ))}
-                <label
-                  className="col-span-2 grid min-w-0 grid-cols-[110px_1fr] items-center gap-2 rounded px-1 py-1 text-xs"
-                  title="encodeHtml değerini true, false veya auto olarak editorOptions içine yazar."
-                >
-                  <span className="min-w-0 truncate">encodeHtml</span>
-                  <select
-                    className={baseInputClass}
-                    value={toEncodeHtmlSelectValue(options.encodeHtml)}
-                    onChange={(event) =>
-                      setOptionValue('encodeHtml', readEncodeHtmlSelectValue(event.target.value))
-                    }
-                  >
-                    <option value="">Seç</option>
-                    <option value="true">true</option>
-                    <option value="false">false</option>
-                  </select>
-                </label>
-              </div>
-            </div>
-
-            <div className="rounded border border-gray-200 dark:border-gray-700 p-3">
-              <div
-                className="mb-3 text-sm font-semibold"
-                title="Width, height ve placeholder gibi editorün görünümünü etkileyen genel alanlar. Width için 100%, height için 200 gibi değerler kullanabilirsin."
+                <input
+                  type="checkbox"
+                  checked={showAll}
+                  onChange={(event) => setShowAll(event.target.checked)}
+                />
+                Tüm ayarlar
+              </label>
+              <label
+                className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-300"
+                title="Yalnızca JSON'da değeri olan ayarları göster."
               >
-                2. Boyut ve Görünüm
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 [&>label]:min-w-0">
-                <label className="text-xs text-gray-500">
-                  {translate('::ListForms.ListFormEdit.DetailsWidth')}
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.width)}
-                    placeholder="100% veya 240"
-                    title="Örnek: 100%, 240, 80"
-                    onChange={(event) => setOptionValue('width', event.target.value)}
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  {translate('::ListForms.ListFormEdit.DetailsHeight')}
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.height)}
-                    placeholder="200"
-                    type="number"
-                    title="Editor yüksekliği. Örnek: 60, 100, 200"
-                    onChange={(event) =>
-                      setOptionValue(
-                        'height',
-                        event.target.value ? Number(event.target.value) : undefined,
-                      )
-                    }
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  {translate('::ListForms.ListFormFieldEdit.PlaceHolder')}
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.placeholder)}
-                    placeholder="Placeholder"
-                    title="Editor boşken görünecek metin."
-                    onChange={(event) => setOptionValue('placeholder', event.target.value)}
-                  />
-                </label>
-              </div>
-            </div>
+                <input
+                  type="checkbox"
+                  checked={onlySet}
+                  onChange={(event) => setOnlySet(event.target.checked)}
+                />
+                Sadece dolu
+              </label>
 
-            <div className="rounded border border-gray-200 dark:border-gray-700 p-3">
-              <div
-                className="mb-3 text-sm font-semibold"
-                title="DevExtreme editor bileşenlerinde ortak kullanılan görünüm ve davranış seçenekleri."
-              >
-                3. Genel Editor Davranışı
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 [&>label]:min-w-0">
-                <label className="text-xs text-gray-500">
-                  label
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.label)}
-                    placeholder="Alan etiketi"
-                    title="Editor içi label metni."
-                    onChange={(event) => setOptionValue('label', event.target.value)}
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  labelMode
-                  <select
-                    className={baseInputClass}
-                    value={toSelectValue(options.labelMode)}
-                    title="Label gösterim modu."
-                    onChange={(event) => setOptionValue('labelMode', event.target.value)}
-                  >
-                    <option value="">Seç</option>
-                    <option value="static">static</option>
-                    <option value="floating">floating</option>
-                    <option value="hidden">hidden</option>
-                    <option value="outside">outside</option>
-                  </select>
-                </label>
-                <label className="text-xs text-gray-500">
-                  stylingMode
-                  <select
-                    className={baseInputClass}
-                    value={toSelectValue(options.stylingMode)}
-                    title="DevExtreme editor görünüm stili."
-                    onChange={(event) => setOptionValue('stylingMode', event.target.value)}
-                  >
-                    <option value="">Seç</option>
-                    <option value="outlined">outlined</option>
-                    <option value="filled">filled</option>
-                    <option value="underlined">underlined</option>
-                  </select>
-                </label>
-                <label className="text-xs text-gray-500">
-                  hint
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.hint)}
-                    placeholder="Tooltip/hint metni"
-                    title="Editor üzerine gelince gösterilecek hint."
-                    onChange={(event) => setOptionValue('hint', event.target.value)}
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  valueChangeEvent
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.valueChangeEvent)}
-                    placeholder="change veya input"
-                    title="Değer değişimini tetikleyecek DOM event adı. Örnek: change, input, keyup."
-                    onChange={(event) => setOptionValue('valueChangeEvent', event.target.value)}
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  inputAttr.aria-label
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(getByPath(options, 'inputAttr.aria-label'))}
-                    placeholder="Erişilebilir ad"
-                    title="Input için aria-label."
-                    onChange={(event) =>
-                      setOptionPathValue('inputAttr.aria-label', event.target.value)
-                    }
-                  />
-                </label>
-              </div>
-            </div>
-
-            <div className="rounded border border-gray-200 dark:border-gray-700 p-3">
-              <div
-                className="mb-3 text-sm font-semibold"
-                title="TextBox için mask, maxLength ve input mode gibi options."
-              >
-                4. TextBox / Mask
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 [&>label]:min-w-0">
-                <label className="text-xs text-gray-500">
-                  mode
-                  <select
-                    className={baseInputClass}
-                    value={toSelectValue(options.mode)}
-                    title="Input mode. TextBox/NumberBox için kullanılabilir."
-                    onChange={(event) => setOptionValue('mode', event.target.value)}
-                  >
-                    <option value="">Seç</option>
-                    <option value="text">text</option>
-                    <option value="email">email</option>
-                    <option value="password">password</option>
-                    <option value="search">search</option>
-                    <option value="tel">tel</option>
-                    <option value="url">url</option>
-                    <option value="number">number</option>
-                  </select>
-                </label>
-                <label className="text-xs text-gray-500">
-                  maxLength
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.maxLength)}
-                    placeholder="50"
-                    type="number"
-                    title="Maksimum karakter sayısı."
-                    onChange={(event) =>
-                      setOptionValue(
-                        'maxLength',
-                        event.target.value ? Number(event.target.value) : undefined,
-                      )
-                    }
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  mask
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.mask)}
-                    placeholder="(000) 000-0000"
-                    title="TextBox mask değeri."
-                    onChange={(event) => setOptionValue('mask', event.target.value)}
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  maskInvalidMessage
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.maskInvalidMessage)}
-                    placeholder="Geçerli değer girin"
-                    title="Mask geçersiz olduğunda gösterilecek mesaj."
-                    onChange={(event) => setOptionValue('maskInvalidMessage', event.target.value)}
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  showMaskMode
-                  <select
-                    className={baseInputClass}
-                    value={toSelectValue(options.showMaskMode)}
-                    title="Mask ne zaman gösterilsin?"
-                    onChange={(event) => setOptionValue('showMaskMode', event.target.value)}
-                  >
-                    <option value="">Seç</option>
-                    <option value="always">always</option>
-                    <option value="onFocus">onFocus</option>
-                  </select>
-                </label>
-                <label className="text-xs text-gray-500">
-                  maskRules.X
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(getByPath(options, 'maskRules.X'))}
-                    placeholder="[0-9]"
-                    title="Custom mask rule. Örnek: X -> [0-9]"
-                    onChange={(event) => setOptionPathValue('maskRules.X', event.target.value)}
-                  />
-                </label>
-              </div>
-            </div>
-
-            <div className="rounded border border-gray-200 dark:border-gray-700 p-3">
-              <div
-                className="mb-3 text-sm font-semibold"
-                title="NumberBox için min/max/step/format options."
-              >
-                5. NumberBox
-              </div>
-              <div className="grid grid-cols-2 md:grid-cols-5 gap-3 [&>label]:min-w-0">
-                {['min', 'max', 'step'].map((key) => (
-                  <label key={key} className="text-xs text-gray-500">
-                    {key}
-                    <input
-                      className={baseInputClass}
-                      value={toInputValue(options[key])}
-                      placeholder={key === 'step' ? '1' : '0'}
-                      type="number"
-                      title={`${key} numeric option.`}
-                      onChange={(event) =>
-                        setOptionValue(
-                          key,
-                          event.target.value ? Number(event.target.value) : undefined,
-                        )
-                      }
-                    />
-                  </label>
-                ))}
-                <label className="text-xs text-gray-500">
-                  type
-                  <select
-                    className={baseInputClass}
-                    value={toSelectValue(getByPath(options, 'format.type'))}
-                    title="NumberBox format type."
-                    onChange={(event) => setOptionPathValue('format.type', event.target.value)}
-                  >
-                    <option value="">Seç</option>
-                    <option value="fixedPoint">fixedPoint</option>
-                    <option value="decimal">decimal</option>
-                    <option value="currency">currency</option>
-                    <option value="percent">percent</option>
-                  </select>
-                </label>
-                <label className="text-xs text-gray-500">
-                  precision
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(getByPath(options, 'format.precision'))}
-                    placeholder="2"
-                    type="number"
-                    title="Ondalık hassasiyeti."
-                    onChange={(event) =>
-                      setOptionPathValue(
-                        'format.precision',
-                        event.target.value ? Number(event.target.value) : undefined,
-                      )
-                    }
-                  />
-                </label>
-              </div>
-            </div>
-
-            <div className="rounded border border-gray-200 dark:border-gray-700 p-3">
-              <div
-                className="mb-3 text-sm font-semibold"
-                title="DateBox için type, pickerType, displayFormat ve interval options."
-              >
-                6. DateBox
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 [&>label]:min-w-0">
-                <label className="text-xs text-gray-500">
-                  type
-                  <select
-                    className={baseInputClass}
-                    value={toSelectValue(options.type)}
-                    title="DateBox type."
-                    onChange={(event) => setOptionValue('type', event.target.value)}
-                  >
-                    <option value="">Seç</option>
-                    <option value="date">date</option>
-                    <option value="datetime">datetime</option>
-                    <option value="time">time</option>
-                  </select>
-                </label>
-                <label className="text-xs text-gray-500">
-                  pickerType
-                  <select
-                    className={baseInputClass}
-                    value={toSelectValue(options.pickerType)}
-                    title="DateBox picker type."
-                    onChange={(event) => setOptionValue('pickerType', event.target.value)}
-                  >
-                    <option value="">Seç</option>
-                    <option value="calendar">calendar</option>
-                    <option value="list">list</option>
-                    <option value="native">native</option>
-                    <option value="rollers">rollers</option>
-                  </select>
-                </label>
-                <label className="text-xs text-gray-500">
-                  displayFormat
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.displayFormat)}
-                    placeholder="dd/MM/yyyy veya HH:mm"
-                    title="DateBox display format."
-                    onChange={(event) => setOptionValue('displayFormat', event.target.value)}
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  dateSerializationFormat
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.dateSerializationFormat)}
-                    placeholder="yyyy-MM-ddTHH:mm:ss"
-                    title="Kaydedilecek date serialization format."
-                    onChange={(event) =>
-                      setOptionValue('dateSerializationFormat', event.target.value)
-                    }
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  interval
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.interval)}
-                    placeholder="5"
-                    type="number"
-                    title="Time list aralığı dakika cinsinden."
-                    onChange={(event) =>
-                      setOptionValue(
-                        'interval',
-                        event.target.value ? Number(event.target.value) : undefined,
-                      )
-                    }
-                  />
-                </label>
-                <label className="text-xs text-gray-500">
-                  invalidDateMessage
-                  <input
-                    className={baseInputClass}
-                    value={toInputValue(options.invalidDateMessage)}
-                    placeholder="Geçerli tarih/saat girin"
-                    title="Geçersiz tarih mesajı."
-                    onChange={(event) => setOptionValue('invalidDateMessage', event.target.value)}
-                  />
-                </label>
-              </div>
-            </div>
-
-            <div className="rounded border border-gray-200 dark:border-gray-700 p-3">
-              <div className="flex items-center justify-between gap-2 mb-3">
-                <div>
-                  <div
-                    className="text-sm font-semibold"
-                    title="DevExtreme dokümanındaki herhangi bir editorOptions path'ini eklemek için kullan. Örnek path: toolbar.multiline, maskRules.X, inputAttr.aria-label."
-                  >
-                    7. Özel Ayarlar
-                  </div>
-                </div>
+              <div className="ml-auto flex items-center gap-1">
+                <Button size="sm" type="button" onClick={() => setAllSections(true)}>
+                  Tümünü aç
+                </Button>
+                <Button size="sm" type="button" onClick={() => setAllSections(false)}>
+                  Tümünü kapat
+                </Button>
                 <Button
-                  type="button"
                   size="sm"
-                  icon={<FaPlus />}
-                  onClick={() =>
-                    setCustomOptions((current) => [
-                      ...current,
-                      {
-                        id: `${Date.now()}_${Math.random().toString(36).slice(2)}`,
-                        path: '',
-                        value: '',
-                        type: 'string',
-                      },
-                    ])
-                  }
+                  type="button"
+                  title="Tüm ayarları temizler. Kaydedilirse editorOptions boşalır."
+                  icon={<FaEraser />}
+                  onClick={() => setOptions({})}
                 >
-                  Ekle
+                  Temizle
                 </Button>
               </div>
-              <div className="flex flex-col gap-2">
-                {customOptions.map((option) => (
-                  <div key={option.id} className="grid grid-cols-12 gap-2">
-                    <input
-                      className={`${baseInputClass} col-span-4`}
-                      value={option.path}
-                      placeholder="path.to.option"
-                      title="Nokta ile nested path yaz. Örnek: toolbar.multiline"
-                      onChange={(event) =>
-                        setCustomOptions((current) =>
-                          current.map((item) =>
-                            item.id === option.id ? { ...item, path: event.target.value } : item,
-                          ),
-                        )
-                      }
-                    />
-                    <select
-                      className={`${baseInputClass} col-span-2`}
-                      value={option.type}
-                      onChange={(event) =>
-                        setCustomOptions((current) =>
-                          current.map((item) =>
-                            item.id === option.id
-                              ? { ...item, type: event.target.value as CustomOption['type'] }
-                              : item,
-                          ),
-                        )
-                      }
-                    >
-                      <option value="string">string</option>
-                      <option value="number">number</option>
-                      <option value="boolean">boolean</option>
-                      <option value="json">json</option>
-                    </select>
-                    <input
-                      className={`${baseInputClass} col-span-5`}
-                      value={option.value}
-                      placeholder={option.type === 'boolean' ? 'true / false' : 'value'}
-                      title="Tip JSON ise object/array yazabilirsin. Tip boolean ise true veya false yaz."
-                      onChange={(event) =>
-                        setCustomOptions((current) =>
-                          current.map((item) =>
-                            item.id === option.id ? { ...item, value: event.target.value } : item,
-                          ),
-                        )
-                      }
-                    />
+            </div>
+
+            <div className="grid min-h-0 grid-cols-12 gap-4 overflow-hidden">
+              {/* ── Ayar bölümleri ─────────────────────────────────── */}
+              <section className="col-span-8 flex min-h-0 flex-col gap-2 overflow-y-auto pr-1">
+                <div className={cardClass}>
+                  <SectionHeader
+                    icon={FaMagic}
+                    title="Hazır Ayarlar"
+                    description="Seçilen kalıp mevcut JSON ile birleştirilir; diğer ayarlarını silmez."
+                    badge={`${visiblePresets.length}`}
+                    open={isSectionOpen(PRESETS_KEY)}
+                    onToggle={() => toggleSection(PRESETS_KEY)}
+                  />
+                  {isSectionOpen(PRESETS_KEY) && (
+                    <div className="flex flex-wrap gap-2 border-t border-gray-100 px-3 py-3 dark:border-gray-800">
+                      {visiblePresets.map((preset) => (
+                        <Button
+                          key={preset.key}
+                          size="sm"
+                          type="button"
+                          title={preset.description}
+                          onClick={() => setOptions((current) => ({ ...current, ...preset.value }))}
+                        >
+                          {preset.label}
+                        </Button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {groupedSpecs.map((group) => {
+                  const open = isSectionOpen(group.key)
+                  return (
+                    <div key={group.key} className={cardClass}>
+                      <SectionHeader
+                        accent={group.setCount > 0}
+                        icon={groupIcons[group.key]}
+                        title={group.title}
+                        description={group.description}
+                        badge={`${group.setCount}/${group.specs.length}`}
+                        open={open}
+                        onToggle={() => toggleSection(group.key)}
+                      />
+                      {open && (
+                        <div className="border-t border-gray-100 px-3 py-3 dark:border-gray-800">
+                          <p className="mb-3 text-[11px] text-gray-400">{group.description}</p>
+                          <div className="grid grid-cols-1 gap-x-4 gap-y-3 md:grid-cols-3">
+                            {group.specs.map((spec) => (
+                              <OptionField
+                                key={`${group.key}:${spec.path}`}
+                                spec={spec}
+                                value={getByPath(options, spec.path)}
+                                onChange={(next) => setPath(spec.path, next)}
+                              />
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+
+                {!groupedSpecs.length && (
+                  <div className="rounded-lg border border-dashed border-gray-300 p-8 text-center text-xs text-gray-400 dark:border-gray-700">
+                    Filtreye uyan ayar yok. &quot;Tüm ayarlar&quot; kutusunu işaretleyerek tüm
+                    sözlüğü görebilirsin.
+                  </div>
+                )}
+
+                {/* ── Sözlük dışı ayarlar ──────────────────────────── */}
+                <div className={cardClass}>
+                  <SectionHeader
+                    accent={unmanagedPaths.length > 0}
+                    icon={FaPuzzlePiece}
+                    title="Sözlükte Olmayan Ayarlar"
+                    description="JSON'da bulunan ama listede karşılığı olmayan her şey burada görünür."
+                    badge={`${unmanagedPaths.length}`}
+                    open={isSectionOpen(UNMANAGED_KEY)}
+                    onToggle={() => toggleSection(UNMANAGED_KEY)}
+                  />
+                  {isSectionOpen(UNMANAGED_KEY) && (
+                    <div className="border-t border-gray-100 px-3 py-3 dark:border-gray-800">
+                      <p className="mb-3 text-[11px] text-gray-400">
+                        Hiçbir ayar gizli kalmaz. DevExtreme dokümanındaki herhangi bir yolu buradan
+                        ekleyebilirsin (örn: toolbar.multiline).
+                      </p>
+                      <div className="flex flex-col gap-2">
+                        {unmanagedPaths.map((path) => {
+                          const current = getByPath(options, path)
+                          const type = inferLeafType(current)
+                          return (
+                            <div key={path} className="grid grid-cols-12 items-center gap-2">
+                              <span
+                                className="col-span-4 min-w-0 truncate font-mono text-xs text-gray-500"
+                                title={path}
+                              >
+                                {path}
+                              </span>
+                              <select
+                                className={`${controlClass} col-span-2`}
+                                value={type}
+                                onChange={(event) =>
+                                  setPath(
+                                    path,
+                                    textToLeaf(
+                                      leafToText(current),
+                                      event.target.value as LeafValueType,
+                                    ),
+                                  )
+                                }
+                              >
+                                {leafTypes.map((item) => (
+                                  <option key={item} value={item}>
+                                    {item}
+                                  </option>
+                                ))}
+                              </select>
+                              <input
+                                className={`${controlClass} col-span-5`}
+                                value={leafToText(current)}
+                                onChange={(event) =>
+                                  setPath(path, textToLeaf(event.target.value, type))
+                                }
+                              />
+                              <Button
+                                className="col-span-1"
+                                shape="circle"
+                                size="sm"
+                                type="button"
+                                variant="plain"
+                                title="Bu ayarı sil"
+                                icon={<FaTrash />}
+                                onClick={() =>
+                                  setOptions((previous) => unsetByPath(previous, path))
+                                }
+                              />
+                            </div>
+                          )
+                        })}
+
+                        <div className="grid grid-cols-12 items-center gap-2 border-t border-dashed border-gray-200 pt-2 dark:border-gray-700">
+                          <input
+                            className={`${controlClass} col-span-4`}
+                            value={newPath}
+                            placeholder="path.to.option"
+                            onChange={(event) => setNewPath(event.target.value)}
+                          />
+                          <select
+                            className={`${controlClass} col-span-2`}
+                            value={newType}
+                            onChange={(event) => setNewType(event.target.value as LeafValueType)}
+                          >
+                            {leafTypes.map((item) => (
+                              <option key={item} value={item}>
+                                {item}
+                              </option>
+                            ))}
+                          </select>
+                          <input
+                            className={`${controlClass} col-span-5`}
+                            value={newValue}
+                            placeholder={newType === 'boolean' ? 'true / false' : 'değer'}
+                            onChange={(event) => setNewValue(event.target.value)}
+                            onKeyDown={(event) => {
+                              if (event.key === 'Enter') {
+                                event.preventDefault()
+                                addCustomOption()
+                              }
+                            }}
+                          />
+                          <Button
+                            className="col-span-1"
+                            shape="circle"
+                            size="sm"
+                            type="button"
+                            variant="plain"
+                            title="Ayarı ekle"
+                            icon={<FaPlus />}
+                            onClick={addCustomOption}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </section>
+
+              {/* ── Önizleme ───────────────────────────────────────── */}
+              <section className={`col-span-4 flex min-h-0 flex-col ${cardClass} p-3`}>
+                <div className="mb-3 flex items-center justify-between gap-2">
+                  <span className="flex items-center gap-2 text-sm font-semibold">
+                    <FaCode className="text-gray-400" />
+                    JSON Önizleme
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <span className="rounded-full bg-gray-100 px-2 py-[2px] text-[11px] font-normal text-gray-500 dark:bg-gray-800 dark:text-gray-300">
+                      {preview ? `${stringifyOptions(options).length} karakter` : 'boş'}
+                    </span>
                     <Button
-                      type="button"
                       shape="circle"
+                      size="sm"
+                      type="button"
                       variant="plain"
-                      icon={<FaTrash />}
-                      onClick={() =>
-                        setCustomOptions((current) =>
-                          current.filter((item) => item.id !== option.id),
-                        )
-                      }
+                      title="JSON'u panoya kopyala"
+                      icon={copied ? <FaCheck /> : <FaCopy />}
+                      onClick={copyPreview}
                     />
                   </div>
-                ))}
-              </div>
+                </div>
+                <pre className="min-h-0 flex-1 overflow-auto whitespace-pre-wrap rounded-lg border border-gray-200 bg-gray-950 p-4 font-mono text-xs leading-5 text-emerald-100 shadow-inner dark:border-gray-700">
+                  {preview || '{}'}
+                </pre>
+              </section>
             </div>
-          </section>
-
-          <section className="col-span-5 flex min-h-0 flex-col rounded border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-900">
-            <div
-              className="mb-3 flex items-center justify-between gap-2 text-sm font-semibold"
-              title="Kaydet/Uygula sonrası editorOptions alanına yazılacak net JSON budur."
-            >
-              <span className="flex items-center gap-2">
-                <FaCode />
-                JSON Önizleme
-              </span>
-              <span className="rounded bg-gray-100 px-2 py-1 text-[11px] font-normal text-gray-500 dark:bg-gray-800 dark:text-gray-300">
-                {preview ? `${preview.length} karakter` : 'boş'}
-              </span>
-            </div>
-            <pre className="min-h-0 flex-1 overflow-auto rounded border border-gray-200 bg-gray-950 p-4 font-mono text-xs leading-5 text-emerald-100 shadow-inner dark:border-gray-700 whitespace-pre-wrap">
-              {preview || '{}'}
-            </pre>
-          </section>
-        </div>
+          </>
+        )}
       </Dialog.Body>
-      <Dialog.Footer className="flex justify-end gap-2 border-t border-gray-200 pt-3 mt-1 dark:border-gray-700">
+
+      <Dialog.Footer className="mt-1 flex items-center justify-end gap-2 border-t border-gray-200 pt-3 dark:border-gray-700">
         <Button size="sm" type="button" variant="plain" icon={<FaTimes />} onClick={onClose}>
           {translate('::Cancel')}
         </Button>
-        <Button size="sm" type="button" variant="solid" icon={<FaCheck />} onClick={applyOptions}>
+        <Button
+          disabled={!canApply}
+          size="sm"
+          type="button"
+          variant="solid"
+          icon={<FaCheck />}
+          onClick={applyOptions}
+        >
           {translate('::Save')}
         </Button>
       </Dialog.Footer>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx
new file mode 100644
index 00000000..3a6ff298
--- /dev/null
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/OptionField.tsx
@@ -0,0 +1,256 @@
+import { useEffect, useState } from 'react'
+import { FaExclamationTriangle, FaUndo } from 'react-icons/fa'
+import { coerceNumber, coerceSize, leafToText } from './jsonUtils'
+import type { OptionSpec } from './optionSpecs'
+
+export const controlClass =
+  'w-full min-w-0 h-9 px-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-100 focus:outline-none focus:border-indigo-400 disabled:opacity-60'
+
+const textAreaClass = controlClass.replace('h-9', 'h-24 py-1 font-mono text-xs')
+
+type OptionFieldProps = {
+  spec: OptionSpec
+  value: unknown
+  onChange: (value: unknown) => void
+}
+
+/** Değerin spec ile uyuşup uyuşmadığını söyler; uyuşmuyorsa alan kilitlenir. */
+const detectMismatch = (spec: OptionSpec, value: unknown): string | undefined => {
+  if (value === undefined || value === null) return undefined
+
+  const isObjectLike = typeof value === 'object'
+
+  if (spec.type === 'json') return undefined
+  if (spec.type === 'stringList') {
+    return Array.isArray(value) ? undefined : 'Bu alan dizi bekliyor, mevcut değer dizi değil.'
+  }
+  if (isObjectLike) {
+    return 'Bu yol şu anda nesne/dizi değeri tutuyor. Ham JSON sekmesinden düzenleyin.'
+  }
+  if (spec.type === 'number' && typeof value !== 'number') {
+    return `Sayı bekleniyor, mevcut değer ${typeof value}. Yeni değer girildiğinde sayıya çevrilir.`
+  }
+  if (spec.type === 'boolean' && typeof value !== 'boolean') {
+    return `Boolean bekleniyor, mevcut değer ${typeof value}. Listeden seçim yaparsan düzelir.`
+  }
+  return undefined
+}
+
+const BooleanControl = ({ value, onChange }: { value: unknown; onChange: (v: unknown) => void }) => {
+  const current = value === true || value === 'true' ? 'true' : value === false || value === 'false' ? 'false' : ''
+
+  return (
+    <select
+      className={controlClass}
+      value={current}
+      onChange={(event) => {
+        if (!event.target.value) return onChange(undefined)
+        onChange(event.target.value === 'true')
+      }}
+    >
+      <option value="">— tanımsız —</option>
+      <option value="true">true</option>
+      <option value="false">false</option>
+    </select>
+  )
+}
+
+const SelectControl = ({
+  spec,
+  value,
+  onChange,
+}: {
+  spec: OptionSpec
+  value: unknown
+  onChange: (v: unknown) => void
+}) => {
+  const current = value === undefined || value === null ? '' : String(value)
+  const known = spec.choices?.some((choice) => String(choice.value) === current)
+
+  return (
+    <select
+      className={controlClass}
+      value={current}
+      onChange={(event) => {
+        const raw = event.target.value
+        if (!raw) return onChange(undefined)
+        const choice = spec.choices?.find((item) => String(item.value) === raw)
+        onChange(choice ? choice.value : raw)
+      }}
+    >
+      <option value="">— tanımsız —</option>
+      {spec.choices?.map((choice) => (
+        <option key={String(choice.value)} value={String(choice.value)}>
+          {choice.label}
+        </option>
+      ))}
+      {current && !known && <option value={current}>{current} (mevcut değer)</option>}
+    </select>
+  )
+}
+
+const JsonControl = ({ value, onChange }: { value: unknown; onChange: (v: unknown) => void }) => {
+  const serialized = value === undefined ? '' : JSON.stringify(value, null, 2)
+  const [draft, setDraft] = useState(serialized)
+  const [invalid, setInvalid] = useState(false)
+
+  useEffect(() => {
+    setDraft(serialized)
+    setInvalid(false)
+  }, [serialized])
+
+  return (
+    <div>
+      <textarea
+        className={`${textAreaClass} ${invalid ? '!border-red-400' : ''}`}
+        value={draft}
+        spellCheck={false}
+        placeholder='{"enabled": true}'
+        onChange={(event) => setDraft(event.target.value)}
+        onBlur={() => {
+          const trimmed = draft.trim()
+          if (!trimmed) {
+            setInvalid(false)
+            onChange(undefined)
+            return
+          }
+          try {
+            onChange(JSON.parse(trimmed))
+            setInvalid(false)
+          } catch {
+            setInvalid(true)
+          }
+        }}
+      />
+      {invalid && <p className="mt-1 text-[11px] text-red-500">Geçersiz JSON, değer kaydedilmedi.</p>}
+    </div>
+  )
+}
+
+const StringListControl = ({
+  spec,
+  value,
+  onChange,
+}: {
+  spec: OptionSpec
+  value: unknown
+  onChange: (v: unknown) => void
+}) => (
+  <input
+    className={controlClass}
+    value={Array.isArray(value) ? value.join(', ') : leafToText(value)}
+    placeholder={spec.placeholder}
+    onChange={(event) => {
+      const items = event.target.value
+        .split(',')
+        .map((item) => item.trim())
+        .filter(Boolean)
+      onChange(items.length ? items : undefined)
+    }}
+  />
+)
+
+const OptionField = ({ spec, value, onChange }: OptionFieldProps) => {
+  const mismatch = detectMismatch(spec, value)
+  const isSet = value !== undefined
+  // Nesne/dizi tutan bir yol basit girdiyle düzenlenemez; ham JSON'a yönlendiriyoruz.
+  // Basit tip uyuşmazlıkları (metin yazılmış sayı gibi) düzenlenebilir kalır.
+  const locked = !!mismatch && spec.type !== 'json' && !!value && typeof value === 'object'
+
+  const renderControl = () => {
+    if (locked) {
+      return <input disabled readOnly className={controlClass} value={leafToText(value)} />
+    }
+
+    switch (spec.type) {
+      case 'boolean':
+        return <BooleanControl value={value} onChange={onChange} />
+      case 'select':
+        return <SelectControl spec={spec} value={value} onChange={onChange} />
+      case 'json':
+        return <JsonControl value={value} onChange={onChange} />
+      case 'stringList':
+        return <StringListControl spec={spec} value={value} onChange={onChange} />
+      case 'number':
+        return (
+          <input
+            className={controlClass}
+            type="number"
+            value={typeof value === 'number' ? value : leafToText(value)}
+            placeholder={spec.placeholder}
+            onChange={(event) => onChange(coerceNumber(event.target.value))}
+          />
+        )
+      case 'size':
+        return (
+          <input
+            className={controlClass}
+            value={leafToText(value)}
+            placeholder={spec.placeholder}
+            onChange={(event) => onChange(coerceSize(event.target.value))}
+          />
+        )
+      default:
+        return (
+          <input
+            className={controlClass}
+            value={leafToText(value)}
+            placeholder={spec.placeholder}
+            onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}
+          />
+        )
+    }
+  }
+
+  return (
+    <div
+      className={`min-w-0 rounded-md py-0.5 pl-2 transition-colors ${
+        isSet
+          ? 'border-l-2 border-indigo-400 bg-indigo-50/40 dark:bg-indigo-950/20'
+          : 'border-l-2 border-transparent'
+      }`}
+    >
+      <div className="mb-1 flex items-center gap-1">
+        <span
+          className={`min-w-0 truncate text-xs ${isSet ? 'font-semibold text-indigo-600 dark:text-indigo-300' : 'text-gray-500'}`}
+          title={spec.help ? `${spec.path} — ${spec.help}` : spec.path}
+        >
+          {spec.label}
+        </span>
+        {spec.platform && (
+          <span
+            className="rounded bg-emerald-100 px-1 text-[10px] text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200"
+            title="Bu alan backend tarafından tipli olarak okunur; yanlış tipte yazılırsa yok sayılır."
+          >
+            platform
+          </span>
+        )}
+        {isSet && (
+          <button
+            type="button"
+            className="ml-auto shrink-0 text-[10px] text-gray-400 hover:text-red-500"
+            title="Bu ayarı JSON'dan kaldır"
+            onClick={() => onChange(undefined)}
+          >
+            <FaUndo />
+          </button>
+        )}
+      </div>
+      {renderControl()}
+      {mismatch && (
+        <p className="mt-1 flex items-start gap-1 text-[11px] text-amber-600">
+          <FaExclamationTriangle className="mt-[2px] shrink-0" />
+          <span>{mismatch}</span>
+        </p>
+      )}
+      {/* Yardım metni tek satıra kısaltılır; tamamı tooltip'te durur. */}
+      {!mismatch && spec.help && (
+        <p className="mt-1 truncate text-[11px] text-gray-400" title={spec.help}>
+          {spec.help}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default OptionField
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/jsonUtils.ts b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/jsonUtils.ts
new file mode 100644
index 00000000..5ed53643
--- /dev/null
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/jsonUtils.ts
@@ -0,0 +1,181 @@
+/**
+ * editorOptions JSON'u üzerinde güvenli okuma/yazma yardımcıları.
+ *
+ * Builder her değişiklikte tüm nesneyi immutable şekilde yeniden üretir; böylece
+ * React state güncellemeleri kaçmaz ve "değeri sildim ama JSON'da duruyor"
+ * türünden hatalar oluşmaz.
+ */
+
+export type JsonObject = Record<string, unknown>
+
+export type LeafValueType = 'string' | 'number' | 'boolean' | 'json'
+
+export type ParseResult = {
+  /** Ayrıştırılabildiyse nesne, aksi halde boş nesne. */
+  data: JsonObject
+  /** Ayrıştırma başarısızsa kullanıcıya gösterilecek mesaj. */
+  error?: string
+}
+
+const isPlainObject = (value: unknown): value is JsonObject =>
+  !!value && typeof value === 'object' && !Array.isArray(value)
+
+/** `a.b.c` yolunu parçalara ayırır, boş parçaları eler. */
+export const splitPath = (path: string) =>
+  path
+    .split('.')
+    .map((key) => key.trim())
+    .filter(Boolean)
+
+export const parseOptionsJson = (value?: string): ParseResult => {
+  const trimmed = value?.trim()
+  if (!trimmed || trimmed.toLowerCase() === 'null') {
+    return { data: {} }
+  }
+
+  try {
+    const parsed = JSON.parse(trimmed)
+    if (!isPlainObject(parsed)) {
+      return { data: {}, error: 'editorOptions bir JSON nesnesi ({ ... }) olmalıdır.' }
+    }
+    return { data: parsed }
+  } catch (error) {
+    return { data: {}, error: (error as Error).message }
+  }
+}
+
+export const getByPath = (target: JsonObject, path: string): unknown =>
+  splitPath(path).reduce<unknown>((cursor, key) => {
+    if (!isPlainObject(cursor)) return undefined
+    return cursor[key]
+  }, target)
+
+/** Yol üzerindeki değeri yazar; ara nesneler yoksa oluşturur. Yeni nesne döner. */
+export const setByPath = (target: JsonObject, path: string, value: unknown): JsonObject => {
+  const keys = splitPath(path)
+  if (!keys.length) return target
+
+  const root: JsonObject = { ...target }
+  let cursor: JsonObject = root
+
+  for (let index = 0; index < keys.length - 1; index++) {
+    const key = keys[index]
+    const next = cursor[key]
+    cursor[key] = isPlainObject(next) ? { ...next } : {}
+    cursor = cursor[key] as JsonObject
+  }
+
+  cursor[keys[keys.length - 1]] = value
+  return root
+}
+
+/**
+ * Yol üzerindeki değeri siler ve geride kalan boş ara nesneleri de temizler.
+ * Aksi halde `{"format":{}}` gibi DevExtreme'in anlamadığı artıklar kalıyordu.
+ */
+export const unsetByPath = (target: JsonObject, path: string): JsonObject => {
+  const keys = splitPath(path)
+  if (!keys.length) return target
+
+  const remove = (node: JsonObject, index: number): JsonObject => {
+    const key = keys[index]
+    if (!Object.prototype.hasOwnProperty.call(node, key)) return node
+
+    if (index === keys.length - 1) {
+      const { [key]: _removed, ...rest } = node
+      return rest
+    }
+
+    const child = node[key]
+    if (!isPlainObject(child)) return node
+
+    const nextChild = remove(child, index + 1)
+    if (Object.keys(nextChild).length === 0) {
+      const { [key]: _removed, ...rest } = node
+      return rest
+    }
+
+    return { ...node, [key]: nextChild }
+  }
+
+  return remove(target, 0)
+}
+
+/** `undefined` yazmak yerine yolu tamamen kaldırır. */
+export const applyPathValue = (target: JsonObject, path: string, value: unknown): JsonObject =>
+  value === undefined ? unsetByPath(target, path) : setByPath(target, path, value)
+
+/**
+ * Nesnedeki tüm yaprak yolları döner. Diziler yaprak kabul edilir; aksi halde
+ * `toolbar.items.0.name` gibi kullanışsız yollar üretilirdi.
+ */
+export const collectLeafPaths = (node: JsonObject, prefix = ''): string[] =>
+  Object.entries(node).flatMap(([key, value]) => {
+    const path = prefix ? `${prefix}.${key}` : key
+    if (isPlainObject(value)) {
+      const children = collectLeafPaths(value, path)
+      // Boş nesne de kaybolmasın diye kendisini yaprak sayıyoruz.
+      return children.length ? children : [path]
+    }
+    return [path]
+  })
+
+/** Sayı gibi görünen metni sayıya çevirir; `100%` gibi CSS değerlerini korur. */
+export const coerceSize = (raw: string): number | string | undefined => {
+  const trimmed = raw.trim()
+  if (!trimmed) return undefined
+  return /^-?\d+(\.\d+)?$/.test(trimmed) ? Number(trimmed) : trimmed
+}
+
+export const coerceNumber = (raw: string): number | undefined => {
+  const trimmed = raw.trim()
+  if (!trimmed) return undefined
+  const parsed = Number(trimmed)
+  return Number.isNaN(parsed) ? undefined : parsed
+}
+
+export const inferLeafType = (value: unknown): LeafValueType => {
+  if (typeof value === 'boolean') return 'boolean'
+  if (typeof value === 'number') return 'number'
+  if (typeof value === 'string') return 'string'
+  return 'json'
+}
+
+/** Yaprak değerini serbest metin girdisinde göstermek için metne çevirir. */
+export const leafToText = (value: unknown): string => {
+  if (value === undefined || value === null) return ''
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+  return JSON.stringify(value)
+}
+
+/** Serbest metni seçilen tipe göre değere çevirir. */
+export const textToLeaf = (text: string, type: LeafValueType): unknown => {
+  if (type === 'boolean') return text === 'true'
+  if (type === 'number') return coerceNumber(text)
+  if (type === 'json') {
+    try {
+      return JSON.parse(text)
+    } catch {
+      return text
+    }
+  }
+  return text
+}
+
+export const isValidJsonText = (text: string) => {
+  const trimmed = text.trim()
+  if (!trimmed) return true
+  try {
+    const parsed = JSON.parse(trimmed)
+    return isPlainObject(parsed)
+  } catch {
+    return false
+  }
+}
+
+export const stringifyOptions = (options: JsonObject) =>
+  Object.keys(options).length ? JSON.stringify(options) : ''
+
+export const prettyStringifyOptions = (options: JsonObject) =>
+  Object.keys(options).length ? JSON.stringify(options, null, 2) : ''
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/optionSpecs.ts b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/optionSpecs.ts
new file mode 100644
index 00000000..076d89bc
--- /dev/null
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/optionSpecs.ts
@@ -0,0 +1,902 @@
+/**
+ * editorOptions builder'ın veri sözlüğü.
+ *
+ * Buradaki her kayıt, DevExtreme editörüne (veya platformun kendi editörlerine)
+ * gerçekten geçirilen bir ayarı tarif eder. UI tamamen bu listeden üretilir;
+ * yeni bir ayar eklemek için tek yapılması gereken buraya bir satır yazmaktır.
+ */
+
+export type OptionInputType =
+  | 'boolean' // üç durumlu: tanımsız / true / false
+  | 'number'
+  | 'text'
+  | 'select'
+  | 'size' // sayı ya da `100%` gibi CSS değeri
+  | 'stringList' // virgülle ayrılmış -> string[]
+  | 'json'
+
+export type OptionChoice = { value: string | number; label: string }
+
+export type OptionSpec = {
+  /** editorOptions içindeki yol. Örn: `format.precision` */
+  path: string
+  label: string
+  type: OptionInputType
+  group: OptionGroupKey
+  /**
+   * Bu ayarın anlamlı olduğu editör tipleri. Boş bırakılırsa tüm editörlerde
+   * gösterilir.
+   */
+  editors?: string[]
+  help?: string
+  placeholder?: string
+  choices?: OptionChoice[]
+  /**
+   * Backend'in tipli DTO'ya (GridBoxOptionsDto / TagBoxOptionsDto /
+   * ImageUploadOptionsDto) deserialize ettiği alanlar. Bunlar yanlış tipte
+   * yazılırsa sessizce yok sayılır, bu yüzden ayrıca işaretliyoruz.
+   */
+  platform?: boolean
+}
+
+export type OptionGroupKey =
+  | 'common'
+  | 'appearance'
+  | 'text'
+  | 'number'
+  | 'date'
+  | 'dropdown'
+  | 'tagBox'
+  | 'gridBox'
+  | 'image'
+  | 'choice'
+  | 'slider'
+  | 'html'
+  | 'grid'
+
+export const optionGroups: { key: OptionGroupKey; title: string; description: string }[] = [
+  {
+    key: 'common',
+    title: 'Genel Davranış',
+    description: 'Tüm editörlerde geçerli olan durum, yetki ve doğrulama ayarları.',
+  },
+  {
+    key: 'appearance',
+    title: 'Görünüm ve Boyut',
+    description: 'Etiket, boyut ve stil ayarları. Boyutlar sayı veya 100% gibi CSS değeri olabilir.',
+  },
+  { key: 'text', title: 'Metin / Maske', description: 'TextBox, TextArea ve Autocomplete ayarları.' },
+  { key: 'number', title: 'Sayı', description: 'NumberBox için sınır, adım ve format ayarları.' },
+  { key: 'date', title: 'Tarih / Saat', description: 'DateBox, Calendar ve DateRangeBox ayarları.' },
+  {
+    key: 'dropdown',
+    title: 'Açılır Liste / Arama',
+    description: 'SelectBox, Lookup, TagBox ve GridBox için ortak liste ve arama ayarları.',
+  },
+  { key: 'tagBox', title: 'TagBox', description: 'Çoklu seçim editörüne özel ayarlar.' },
+  {
+    key: 'gridBox',
+    title: 'GridBox',
+    description: 'Tablo görünümlü açılır seçici. Bu alanlar backend tarafından GridBoxOptions olarak okunur.',
+  },
+  {
+    key: 'image',
+    title: 'Görsel Yükleme / Önizleme',
+    description: 'ImageUpload ve ImageViewer editörleri için yükleme ve küçük resim ayarları.',
+  },
+  { key: 'choice', title: 'Onay / Seçim', description: 'CheckBox, Switch, RadioGroup ve ColorBox ayarları.' },
+  { key: 'slider', title: 'Kaydırıcı', description: 'Slider ve RangeSlider ayarları.' },
+  { key: 'html', title: 'HTML Editör', description: 'dxHtmlEditor araç çubuğu ve görsel ayarları.' },
+  {
+    key: 'grid',
+    title: 'Liste Sütunu Etkisi',
+    description:
+      'Bu alanlar düzenleme editörünün yanı sıra listedeki sütun gösterimini de etkiler.',
+  },
+]
+
+/* ------------------------------------------------------------------ *
+ * Editör tipi kümeleri
+ * ------------------------------------------------------------------ */
+
+const TEXT_EDITORS = ['dxTextBox', 'dxTextArea', 'dxAutocomplete']
+const DROPDOWN_EDITORS = [
+  'dxSelectBox',
+  'dxLookup',
+  'dxTagBox',
+  'dxDropDownBox',
+  'dxGridBox',
+  'dxAutocomplete',
+]
+const DATE_EDITORS = ['dxDateBox', 'dxCalendar', 'dxDateRangeBox']
+const IMAGE_EDITORS = ['dxImageUpload', 'dxImageViewer']
+const SLIDER_EDITORS = ['dxSlider', 'dxRangeSlider']
+
+/** Metin girişi olmayan editörlerde placeholder/mask alanlarını gizlemek için. */
+const NON_INPUT_EDITORS = ['dxCheckBox', 'dxSwitch', 'dxRadioGroup', ...SLIDER_EDITORS]
+
+const booleanHelp = 'Boş bırakılırsa JSON\'a yazılmaz ve DevExtreme varsayılanı geçerli olur.'
+
+/* ------------------------------------------------------------------ *
+ * Ayar sözlüğü
+ * ------------------------------------------------------------------ */
+
+export const optionSpecs: OptionSpec[] = [
+  // ── Genel ────────────────────────────────────────────────────────
+  {
+    path: 'readOnly',
+    label: 'readOnly',
+    type: 'boolean',
+    group: 'common',
+    help: 'Alan görünür ama değiştirilemez. ' + booleanHelp,
+  },
+  {
+    path: 'disabled',
+    label: 'disabled',
+    type: 'boolean',
+    group: 'common',
+    help: 'Alan pasifleşir ve forma dahil edilmez. ' + booleanHelp,
+  },
+  {
+    path: 'visible',
+    label: 'visible',
+    type: 'boolean',
+    group: 'common',
+    help: 'Editörü tamamen gizler. ' + booleanHelp,
+  },
+  { path: 'hint', label: 'hint', type: 'text', group: 'common', help: 'Fare ile üzerine gelince çıkan ipucu.' },
+  { path: 'tabIndex', label: 'tabIndex', type: 'number', group: 'common', help: 'Tab ile gezinme sırası.' },
+  {
+    path: 'valueChangeEvent',
+    label: 'valueChangeEvent',
+    type: 'text',
+    group: 'common',
+    placeholder: 'change / input / keyup',
+    help: 'Değerin hangi DOM olayında işleneceği. Anlık kaydetme için input.',
+  },
+  {
+    path: 'validationMessageMode',
+    label: 'validationMessageMode',
+    type: 'select',
+    group: 'common',
+    choices: [
+      { value: 'auto', label: 'auto' },
+      { value: 'always', label: 'always' },
+      { value: 'hidden', label: 'hidden' },
+    ],
+  },
+  {
+    path: 'validationMessagePosition',
+    label: 'validationMessagePosition',
+    type: 'select',
+    group: 'common',
+    choices: [
+      { value: 'top', label: 'top' },
+      { value: 'left', label: 'left' },
+      { value: 'right', label: 'right' },
+      { value: 'bottom', label: 'bottom' },
+    ],
+  },
+  {
+    path: 'elementAttr.class',
+    label: 'elementAttr.class',
+    type: 'text',
+    group: 'common',
+    placeholder: 'my-editor-class',
+    help: 'Editör kök elemanına eklenecek CSS sınıfı.',
+  },
+  {
+    path: 'inputAttr.aria-label',
+    label: 'inputAttr.aria-label',
+    type: 'text',
+    group: 'common',
+    help: 'Erişilebilirlik etiketi.',
+  },
+  {
+    path: 'inputAttr.style',
+    label: 'inputAttr.style',
+    type: 'text',
+    group: 'common',
+    placeholder: 'text-align: right',
+    help: 'Girdi alanına doğrudan inline CSS uygular. Sayısal alanları sağa yaslamak için kullanışlıdır.',
+  },
+
+  // ── Görünüm ──────────────────────────────────────────────────────
+  {
+    path: 'width',
+    label: 'width',
+    type: 'size',
+    group: 'appearance',
+    placeholder: '100% veya 240',
+    help: 'Sadece rakam yazarsan sayı olarak kaydedilir (240). Yüzde için 100% yaz.',
+  },
+  { path: 'height', label: 'height', type: 'size', group: 'appearance', placeholder: '200' },
+  {
+    path: 'placeholder',
+    label: 'placeholder',
+    type: 'text',
+    group: 'appearance',
+    help: 'Alan boşken görünen metin. Sütunun PlaceHolder alanını ezer.',
+  },
+  { path: 'label', label: 'label', type: 'text', group: 'appearance', help: 'Editör içi etiket metni.' },
+  {
+    path: 'labelMode',
+    label: 'labelMode',
+    type: 'select',
+    group: 'appearance',
+    choices: [
+      { value: 'static', label: 'static' },
+      { value: 'floating', label: 'floating' },
+      { value: 'hidden', label: 'hidden' },
+      { value: 'outside', label: 'outside' },
+    ],
+  },
+  {
+    path: 'stylingMode',
+    label: 'stylingMode',
+    type: 'select',
+    group: 'appearance',
+    choices: [
+      { value: 'outlined', label: 'outlined' },
+      { value: 'filled', label: 'filled' },
+      { value: 'underlined', label: 'underlined' },
+    ],
+  },
+  {
+    path: 'showClearButton',
+    label: 'showClearButton',
+    type: 'boolean',
+    group: 'appearance',
+    help: 'Temizleme (x) butonu. ' + booleanHelp,
+  },
+
+  // ── Metin / Maske ────────────────────────────────────────────────
+  {
+    path: 'mode',
+    label: 'mode',
+    type: 'select',
+    group: 'text',
+    editors: TEXT_EDITORS,
+    choices: [
+      { value: 'text', label: 'text' },
+      { value: 'email', label: 'email' },
+      { value: 'password', label: 'password' },
+      { value: 'search', label: 'search' },
+      { value: 'tel', label: 'tel' },
+      { value: 'url', label: 'url' },
+    ],
+  },
+  { path: 'maxLength', label: 'maxLength', type: 'number', group: 'text', editors: TEXT_EDITORS },
+  {
+    path: 'mask',
+    label: 'mask',
+    type: 'text',
+    group: 'text',
+    editors: TEXT_EDITORS,
+    placeholder: '(000) 000-0000',
+  },
+  { path: 'maskChar', label: 'maskChar', type: 'text', group: 'text', editors: TEXT_EDITORS, placeholder: '_' },
+  {
+    path: 'maskInvalidMessage',
+    label: 'maskInvalidMessage',
+    type: 'text',
+    group: 'text',
+    editors: TEXT_EDITORS,
+  },
+  {
+    path: 'showMaskMode',
+    label: 'showMaskMode',
+    type: 'select',
+    group: 'text',
+    editors: TEXT_EDITORS,
+    choices: [
+      { value: 'always', label: 'always' },
+      { value: 'onFocus', label: 'onFocus' },
+    ],
+  },
+  {
+    path: 'useMaskedValue',
+    label: 'useMaskedValue',
+    type: 'boolean',
+    group: 'text',
+    editors: TEXT_EDITORS,
+    help: 'true ise maske karakterleri de veritabanına yazılır. ' + booleanHelp,
+  },
+  {
+    path: 'maskRules.X',
+    label: 'maskRules.X',
+    type: 'text',
+    group: 'text',
+    editors: TEXT_EDITORS,
+    placeholder: '[0-9]',
+    help: 'Maskede X karakterinin karşılığı olan düzenli ifade.',
+  },
+  { path: 'spellcheck', label: 'spellcheck', type: 'boolean', group: 'text', editors: TEXT_EDITORS },
+  {
+    path: 'autoResizeEnabled',
+    label: 'autoResizeEnabled',
+    type: 'boolean',
+    group: 'text',
+    editors: ['dxTextArea'],
+    help: 'İçerik büyüdükçe alan uzar. ' + booleanHelp,
+  },
+  { path: 'minHeight', label: 'minHeight', type: 'size', group: 'text', editors: ['dxTextArea'] },
+  { path: 'maxHeight', label: 'maxHeight', type: 'size', group: 'text', editors: ['dxTextArea'] },
+
+  // ── Sayı ─────────────────────────────────────────────────────────
+  { path: 'min', label: 'min', type: 'number', group: 'number', editors: ['dxNumberBox'] },
+  { path: 'max', label: 'max', type: 'number', group: 'number', editors: ['dxNumberBox'] },
+  { path: 'step', label: 'step', type: 'number', group: 'number', editors: ['dxNumberBox'] },
+  {
+    path: 'showSpinButtons',
+    label: 'showSpinButtons',
+    type: 'boolean',
+    group: 'number',
+    editors: ['dxNumberBox'],
+  },
+  {
+    path: 'useLargeSpinButtons',
+    label: 'useLargeSpinButtons',
+    type: 'boolean',
+    group: 'number',
+    editors: ['dxNumberBox'],
+  },
+  {
+    path: 'format.type',
+    label: 'format.type',
+    type: 'select',
+    group: 'number',
+    editors: ['dxNumberBox'],
+    help: 'Sayısal format tipi. Seçilirse format alanı nesne olur.',
+    choices: [
+      { value: 'fixedPoint', label: 'fixedPoint' },
+      { value: 'decimal', label: 'decimal' },
+      { value: 'currency', label: 'currency' },
+      { value: 'percent', label: 'percent' },
+      { value: 'exponential', label: 'exponential' },
+      { value: 'largeNumber', label: 'largeNumber' },
+      { value: 'thousands', label: 'thousands' },
+      { value: 'millions', label: 'millions' },
+      { value: 'billions', label: 'billions' },
+    ],
+  },
+  {
+    path: 'format.precision',
+    label: 'format.precision',
+    type: 'number',
+    group: 'number',
+    editors: ['dxNumberBox'],
+    help: 'Ondalık basamak sayısı.',
+  },
+  {
+    path: 'format.currency',
+    label: 'format.currency',
+    type: 'text',
+    group: 'number',
+    editors: ['dxNumberBox'],
+    placeholder: 'TRY / USD / EUR',
+  },
+  {
+    path: 'invalidValueMessage',
+    label: 'invalidValueMessage',
+    type: 'text',
+    group: 'number',
+    editors: ['dxNumberBox'],
+  },
+  {
+    path: 'useMaskBehavior',
+    label: 'useMaskBehavior',
+    type: 'boolean',
+    group: 'number',
+    editors: ['dxNumberBox', 'dxDateBox'],
+    help: 'Girdiyi formatlı maske olarak yönetir. ' + booleanHelp,
+  },
+
+  // ── Tarih ────────────────────────────────────────────────────────
+  {
+    path: 'type',
+    label: 'type',
+    type: 'select',
+    group: 'date',
+    editors: DATE_EDITORS,
+    choices: [
+      { value: 'date', label: 'date' },
+      { value: 'datetime', label: 'datetime' },
+      { value: 'time', label: 'time' },
+    ],
+  },
+  {
+    path: 'pickerType',
+    label: 'pickerType',
+    type: 'select',
+    group: 'date',
+    editors: DATE_EDITORS,
+    choices: [
+      { value: 'calendar', label: 'calendar' },
+      { value: 'list', label: 'list' },
+      { value: 'native', label: 'native' },
+      { value: 'rollers', label: 'rollers' },
+    ],
+  },
+  {
+    path: 'displayFormat',
+    label: 'displayFormat',
+    type: 'text',
+    group: 'date',
+    editors: DATE_EDITORS,
+    placeholder: 'dd/MM/yyyy',
+    help: 'Ekranda gösterilecek biçim. Listedeki sütun biçimini de ezer.',
+  },
+  {
+    path: 'dateSerializationFormat',
+    label: 'dateSerializationFormat',
+    type: 'text',
+    group: 'date',
+    editors: DATE_EDITORS,
+    placeholder: 'yyyy-MM-ddTHH:mm:ss',
+    help: 'Veritabanına yazılacak biçim. Tarih kaymalarının çoğu bu alandan kaynaklanır.',
+  },
+  {
+    path: 'interval',
+    label: 'interval',
+    type: 'number',
+    group: 'date',
+    editors: DATE_EDITORS,
+    help: 'Saat listesinde dakika aralığı.',
+  },
+  {
+    path: 'min',
+    label: 'min (tarih)',
+    type: 'text',
+    group: 'date',
+    editors: DATE_EDITORS,
+    placeholder: '2020-01-01',
+  },
+  {
+    path: 'max',
+    label: 'max (tarih)',
+    type: 'text',
+    group: 'date',
+    editors: DATE_EDITORS,
+    placeholder: '2030-12-31',
+  },
+  {
+    path: 'openOnFieldClick',
+    label: 'openOnFieldClick',
+    type: 'boolean',
+    group: 'date',
+    editors: DATE_EDITORS,
+  },
+  {
+    path: 'applyValueMode',
+    label: 'applyValueMode',
+    type: 'select',
+    group: 'date',
+    editors: DATE_EDITORS,
+    choices: [
+      { value: 'instantly', label: 'instantly' },
+      { value: 'useButtons', label: 'useButtons' },
+    ],
+  },
+  {
+    path: 'invalidDateMessage',
+    label: 'invalidDateMessage',
+    type: 'text',
+    group: 'date',
+    editors: DATE_EDITORS,
+  },
+  {
+    path: 'calendarOptions.firstDayOfWeek',
+    label: 'calendarOptions.firstDayOfWeek',
+    type: 'number',
+    group: 'date',
+    editors: DATE_EDITORS,
+    help: '0 Pazar, 1 Pazartesi.',
+  },
+  {
+    path: 'calendarOptions.zoomLevel',
+    label: 'calendarOptions.zoomLevel',
+    type: 'select',
+    group: 'date',
+    editors: DATE_EDITORS,
+    choices: [
+      { value: 'month', label: 'month' },
+      { value: 'year', label: 'year' },
+      { value: 'decade', label: 'decade' },
+      { value: 'century', label: 'century' },
+    ],
+  },
+
+  // ── Açılır liste / arama ─────────────────────────────────────────
+  {
+    path: 'searchEnabled',
+    label: 'searchEnabled',
+    type: 'boolean',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+    platform: true,
+    help: 'Listede arama kutusu. TagBox için backend TagBoxOptions olarak da okur. ' + booleanHelp,
+  },
+  {
+    path: 'searchMode',
+    label: 'searchMode',
+    type: 'select',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+    choices: [
+      { value: 'contains', label: 'contains' },
+      { value: 'startswith', label: 'startswith' },
+    ],
+  },
+  {
+    path: 'searchExpr',
+    label: 'searchExpr',
+    type: 'text',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+    placeholder: 'name',
+    help: 'Aramanın hangi alanda yapılacağı.',
+  },
+  {
+    path: 'searchTimeout',
+    label: 'searchTimeout',
+    type: 'number',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+  },
+  {
+    path: 'minSearchLength',
+    label: 'minSearchLength',
+    type: 'number',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+  },
+  {
+    path: 'showDataBeforeSearch',
+    label: 'showDataBeforeSearch',
+    type: 'boolean',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+  },
+  {
+    path: 'acceptCustomValue',
+    label: 'acceptCustomValue',
+    type: 'boolean',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+    platform: true,
+    help: 'Listede olmayan değerin yazılmasına izin verir. ' + booleanHelp,
+  },
+  {
+    path: 'noDataText',
+    label: 'noDataText',
+    type: 'text',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+    placeholder: 'Kayıt bulunamadı',
+  },
+  {
+    path: 'deferRendering',
+    label: 'deferRendering',
+    type: 'boolean',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+    help: 'Liste yalnızca açıldığında render edilir. ' + booleanHelp,
+  },
+  {
+    path: 'wrapItemText',
+    label: 'wrapItemText',
+    type: 'boolean',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+  },
+  {
+    path: 'dropDownOptions.width',
+    label: 'dropDownOptions.width',
+    type: 'size',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+  },
+  {
+    path: 'dropDownOptions.height',
+    label: 'dropDownOptions.height',
+    type: 'size',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+  },
+  {
+    path: 'dropDownOptions.hideOnOutsideClick',
+    label: 'dropDownOptions.hideOnOutsideClick',
+    type: 'boolean',
+    group: 'dropdown',
+    editors: DROPDOWN_EDITORS,
+  },
+
+  // ── TagBox ───────────────────────────────────────────────────────
+  {
+    path: 'showSelectionControls',
+    label: 'showSelectionControls',
+    type: 'boolean',
+    group: 'tagBox',
+    editors: ['dxTagBox'],
+    platform: true,
+    help: 'Liste öğelerinde onay kutusu gösterir. Boş bırakılırsa platform varsayılanı true. ',
+  },
+  {
+    path: 'maxDisplayedTags',
+    label: 'maxDisplayedTags',
+    type: 'number',
+    group: 'tagBox',
+    editors: ['dxTagBox'],
+    platform: true,
+  },
+  {
+    path: 'showMultiTagOnly',
+    label: 'showMultiTagOnly',
+    type: 'boolean',
+    group: 'tagBox',
+    editors: ['dxTagBox'],
+    platform: true,
+  },
+  {
+    path: 'applyValueMode',
+    label: 'applyValueMode',
+    type: 'select',
+    group: 'tagBox',
+    editors: ['dxTagBox'],
+    platform: true,
+    help: 'Boş bırakılırsa platform varsayılanı useButtons.',
+    choices: [
+      { value: 'instantly', label: 'instantly' },
+      { value: 'useButtons', label: 'useButtons' },
+    ],
+  },
+  { path: 'multiline', label: 'multiline', type: 'boolean', group: 'tagBox', editors: ['dxTagBox'] },
+  {
+    path: 'hideSelectedItems',
+    label: 'hideSelectedItems',
+    type: 'boolean',
+    group: 'tagBox',
+    editors: ['dxTagBox'],
+  },
+
+  // ── GridBox (platform) ───────────────────────────────────────────
+  {
+    path: 'columns',
+    label: 'columns',
+    type: 'stringList',
+    group: 'gridBox',
+    editors: ['dxGridBox'],
+    platform: true,
+    placeholder: 'key, name, group',
+    help: 'Açılır tabloda gösterilecek sütunlar. Virgülle ayır; JSON\'a dizi olarak yazılır.',
+  },
+  {
+    path: 'selectionMode',
+    label: 'selectionMode',
+    type: 'select',
+    group: 'gridBox',
+    editors: ['dxGridBox'],
+    platform: true,
+    help: 'multiple seçilirse liste sütunu da çoklu değer olarak çalışır.',
+    choices: [
+      { value: 'single', label: 'single' },
+      { value: 'multiple', label: 'multiple' },
+      { value: 'none', label: 'none' },
+    ],
+  },
+  {
+    path: 'filterRowVisible',
+    label: 'filterRowVisible',
+    type: 'boolean',
+    group: 'gridBox',
+    editors: ['dxGridBox'],
+    platform: true,
+    help: 'Açılır tabloda filtre satırı. ' + booleanHelp,
+  },
+
+  // ── Görsel ───────────────────────────────────────────────────────
+  {
+    path: 'uploadUrl',
+    label: 'uploadUrl',
+    type: 'text',
+    group: 'image',
+    editors: IMAGE_EDITORS,
+    platform: true,
+    help: 'Boş bırakılırsa görsel base64 olarak saklanır.',
+  },
+  {
+    path: 'fileFieldName',
+    label: 'fileFieldName',
+    type: 'text',
+    group: 'image',
+    editors: IMAGE_EDITORS,
+    placeholder: 'file',
+    help: 'Yükleme isteğindeki form alan adı.',
+  },
+  {
+    path: 'accept',
+    label: 'accept',
+    type: 'text',
+    group: 'image',
+    editors: IMAGE_EDITORS,
+    platform: true,
+    placeholder: 'image/*',
+  },
+  {
+    path: 'multiple',
+    label: 'multiple',
+    type: 'boolean',
+    group: 'image',
+    editors: IMAGE_EDITORS,
+    platform: true,
+    help: 'Çoklu görsel. Metin olarak "true" yazılırsa da çalışır ama boolean tercih edilmeli.',
+  },
+  {
+    path: 'maxFileSize',
+    label: 'maxFileSize',
+    type: 'number',
+    group: 'image',
+    editors: IMAGE_EDITORS,
+    platform: true,
+  },
+
+  // ── Onay / seçim ─────────────────────────────────────────────────
+  {
+    path: 'text',
+    label: 'text',
+    type: 'text',
+    group: 'choice',
+    editors: ['dxCheckBox'],
+    help: 'Onay kutusunun yanında görünen metin.',
+  },
+  { path: 'switchedOnText', label: 'switchedOnText', type: 'text', group: 'choice', editors: ['dxSwitch'] },
+  { path: 'switchedOffText', label: 'switchedOffText', type: 'text', group: 'choice', editors: ['dxSwitch'] },
+  {
+    path: 'layout',
+    label: 'layout',
+    type: 'select',
+    group: 'choice',
+    editors: ['dxRadioGroup'],
+    choices: [
+      { value: 'horizontal', label: 'horizontal' },
+      { value: 'vertical', label: 'vertical' },
+    ],
+  },
+  {
+    path: 'editAlphaChannel',
+    label: 'editAlphaChannel',
+    type: 'boolean',
+    group: 'choice',
+    editors: ['dxColorBox'],
+  },
+  { path: 'keyStep', label: 'keyStep', type: 'number', group: 'choice', editors: ['dxColorBox'] },
+
+  // ── Kaydırıcı ────────────────────────────────────────────────────
+  { path: 'min', label: 'min', type: 'number', group: 'slider', editors: SLIDER_EDITORS },
+  { path: 'max', label: 'max', type: 'number', group: 'slider', editors: SLIDER_EDITORS },
+  { path: 'step', label: 'step', type: 'number', group: 'slider', editors: SLIDER_EDITORS },
+  {
+    path: 'tooltip.enabled',
+    label: 'tooltip.enabled',
+    type: 'boolean',
+    group: 'slider',
+    editors: SLIDER_EDITORS,
+  },
+  {
+    path: 'tooltip.showMode',
+    label: 'tooltip.showMode',
+    type: 'select',
+    group: 'slider',
+    editors: SLIDER_EDITORS,
+    choices: [
+      { value: 'onHover', label: 'onHover' },
+      { value: 'always', label: 'always' },
+    ],
+  },
+  { path: 'showRange', label: 'showRange', type: 'boolean', group: 'slider', editors: SLIDER_EDITORS },
+
+  // ── HTML editör ──────────────────────────────────────────────────
+  {
+    path: 'valueType',
+    label: 'valueType',
+    type: 'select',
+    group: 'html',
+    editors: ['dxHtmlEditor'],
+    choices: [
+      { value: 'html', label: 'html' },
+      { value: 'markdown', label: 'markdown' },
+    ],
+  },
+  {
+    path: 'toolbar.multiline',
+    label: 'toolbar.multiline',
+    type: 'boolean',
+    group: 'html',
+    editors: ['dxHtmlEditor'],
+  },
+  {
+    path: 'toolbar.items',
+    label: 'toolbar.items',
+    type: 'json',
+    group: 'html',
+    editors: ['dxHtmlEditor'],
+    help: 'Araç çubuğu tanımı. Hazır ayarlardaki "htmlEditor toolbar" bunu doldurur.',
+  },
+  {
+    path: 'mediaResizing.enabled',
+    label: 'mediaResizing.enabled',
+    type: 'boolean',
+    group: 'html',
+    editors: ['dxHtmlEditor'],
+  },
+  {
+    path: 'imageUpload.fileUploadMode',
+    label: 'imageUpload.fileUploadMode',
+    type: 'select',
+    group: 'html',
+    editors: ['dxHtmlEditor'],
+    choices: [
+      { value: 'base64', label: 'base64' },
+      { value: 'server', label: 'server' },
+      { value: 'both', label: 'both' },
+    ],
+  },
+  {
+    path: 'imageUpload.uploadUrl',
+    label: 'imageUpload.uploadUrl',
+    type: 'text',
+    group: 'html',
+    editors: ['dxHtmlEditor'],
+  },
+
+  // ── Liste sütununu da etkileyenler ───────────────────────────────
+  {
+    path: 'format',
+    label: 'format (metin)',
+    type: 'text',
+    group: 'grid',
+    placeholder: 'dd/MM/yyyy veya currency',
+    help: 'Metin olarak yazılırsa listedeki sütun biçimini de ezer. Sayı formatı için Sayı bölümündeki format.type alanını kullan.',
+  },
+  {
+    path: 'encodeHtml',
+    label: 'encodeHtml',
+    type: 'boolean',
+    group: 'grid',
+    help: 'false yapılırsa hücre içeriği HTML olarak render edilir. ' + booleanHelp,
+  },
+  {
+    path: 'buttons',
+    label: 'buttons',
+    type: 'json',
+    group: 'grid',
+    help: 'Editör içi butonlar. options.onClick metin olarak yazılırsa çalışma anında fonksiyona çevrilir.',
+  },
+]
+
+/** Aynı yolu paylaşan spec'lerden aktif editöre en uygun olanı seçer. */
+export const resolveSpecs = (editorType?: string): OptionSpec[] => {
+  const matches = (spec: OptionSpec) =>
+    !spec.editors || (!!editorType && spec.editors.includes(editorType))
+
+  const chosen = new Map<string, OptionSpec>()
+
+  optionSpecs.forEach((spec) => {
+    const current = chosen.get(spec.path)
+    if (!current) {
+      chosen.set(spec.path, spec)
+      return
+    }
+
+    // Editöre özel tanım, genel tanımı ezer.
+    if (matches(spec) && !matches(current)) {
+      chosen.set(spec.path, spec)
+    }
+  })
+
+  return [...chosen.values()]
+}
+
+export const isSpecRelevant = (spec: OptionSpec, editorType?: string) =>
+  !spec.editors || !editorType || spec.editors.includes(editorType)
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/presets.ts b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/presets.ts
new file mode 100644
index 00000000..6057f165
--- /dev/null
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/editor-options/presets.ts
@@ -0,0 +1,267 @@
+/**
+ * Hazır editorOptions kalıpları. Her kalıp mevcut JSON ile birleştirilir,
+ * diğer ayarları silmez.
+ */
+import type { JsonObject } from './jsonUtils'
+
+export type EditorOptionsPreset = {
+  key: string
+  label: string
+  description: string
+  /** Yalnızca bu editör tiplerinde önerilir. Boşsa her zaman gösterilir. */
+  editors?: string[]
+  value: JsonObject
+}
+
+const htmlToolbarItems = [
+  'undo',
+  'redo',
+  'separator',
+  'size',
+  'font',
+  'separator',
+  'bold',
+  'italic',
+  'strike',
+  'underline',
+  'separator',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
+  'separator',
+  'orderedList',
+  'bulletList',
+  'separator',
+  'header',
+  'separator',
+  'color',
+  'background',
+  'separator',
+  'link',
+  'image',
+  'separator',
+  'clear',
+  'codeBlock',
+  'blockquote',
+  'separator',
+  'insertTable',
+  'deleteTable',
+  'insertRowAbove',
+  'insertRowBelow',
+  'deleteRow',
+  'insertColumnLeft',
+  'insertColumnRight',
+  'deleteColumn',
+  'cellProperties',
+  'tableProperties',
+]
+
+const buildHtmlEditorOptions = (): JsonObject => ({
+  mediaResizing: { enabled: true },
+  imageUpload: { tabs: ['file', 'url'], fileUploadMode: 'base64' },
+  toolbar: {
+    multiline: true,
+    items: htmlToolbarItems.map((name) => {
+      if (name === 'size') {
+        return {
+          name,
+          acceptedValues: ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'],
+          options: { inputAttr: { 'aria-label': 'Font size' } },
+        }
+      }
+      if (name === 'font') {
+        return {
+          name,
+          acceptedValues: [
+            'Arial',
+            'Courier New',
+            'Georgia',
+            'Impact',
+            'Lucida Console',
+            'Tahoma',
+            'Times New Roman',
+            'Verdana',
+          ],
+          options: { inputAttr: { 'aria-label': 'Font family' } },
+        }
+      }
+      if (name === 'header') return { name, acceptedValues: [false, 1, 2, 3, 4, 5] }
+      return { name }
+    }),
+  },
+})
+
+export const editorOptionsPresets: EditorOptionsPreset[] = [
+  {
+    key: 'readOnly',
+    label: 'Salt okunur',
+    description: 'readOnly: true — alan görünür ama değiştirilemez.',
+    value: { readOnly: true },
+  },
+  {
+    key: 'disabled',
+    label: 'Pasif',
+    description: 'disabled: true — alan tamamen pasifleşir.',
+    value: { disabled: true },
+  },
+  {
+    key: 'rightAligned',
+    label: 'Sağa yaslı',
+    description: 'Girdi metnini sağa yaslar. Tutar/miktar alanları için.',
+    value: { inputAttr: { style: 'text-align: right' } },
+  },
+  {
+    key: 'fixedPoint2',
+    label: 'Ondalık (2 hane)',
+    description: 'format.type fixedPoint, precision 2.',
+    editors: ['dxNumberBox'],
+    value: { format: { type: 'fixedPoint', precision: 2 } },
+  },
+  {
+    key: 'numberSpin2',
+    label: 'Ondalık + spin',
+    description: 'precision 2, mask davranışı ve artır/azalt butonları.',
+    editors: ['dxNumberBox'],
+    value: {
+      format: { type: 'fixedPoint', precision: 2 },
+      useMaskBehavior: true,
+      showSpinButtons: true,
+    },
+  },
+  {
+    key: 'currency',
+    label: 'Para birimi (TRY)',
+    description: 'currency formatı, 2 ondalık.',
+    editors: ['dxNumberBox'],
+    value: { format: { type: 'currency', precision: 2, currency: 'TRY' } },
+  },
+  {
+    key: 'date',
+    label: 'Tarih dd/MM/yyyy',
+    description: 'Görünüm ve veritabanı biçimini birlikte ayarlar.',
+    editors: ['dxDateBox', 'dxCalendar', 'dxDateRangeBox'],
+    value: {
+      type: 'date',
+      displayFormat: 'dd/MM/yyyy',
+      dateSerializationFormat: 'yyyy-MM-dd',
+    },
+  },
+  {
+    key: 'dateTime',
+    label: 'Tarih + saat',
+    description: 'dd/MM/yyyy HH:mm görünümü, ISO serileştirme.',
+    editors: ['dxDateBox', 'dxCalendar', 'dxDateRangeBox'],
+    value: {
+      type: 'datetime',
+      displayFormat: 'dd/MM/yyyy HH:mm',
+      dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
+    },
+  },
+  {
+    key: 'timePicker',
+    label: 'Saat seçici',
+    description: '5 dakika aralıklı liste tipi saat seçimi.',
+    editors: ['dxDateBox'],
+    value: {
+      type: 'time',
+      pickerType: 'list',
+      displayFormat: 'HH:mm',
+      dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ss',
+      interval: 5,
+      width: '100%',
+    },
+  },
+  {
+    key: 'phoneMask',
+    label: 'Telefon maskesi',
+    description: 'Maske, yer tutucu ve hata mesajı.',
+    editors: ['dxTextBox', 'dxAutocomplete'],
+    value: {
+      mask: '(000) 000-0000',
+      maskInvalidMessage: 'Lütfen geçerli bir telefon numarası girin',
+      useMaskedValue: false,
+      maskRules: { X: '[0-9]' },
+      placeholder: '(555) 123-4567',
+    },
+  },
+  {
+    key: 'textAreaAuto',
+    label: 'Otomatik büyüyen alan',
+    description: 'autoResizeEnabled ve minimum yükseklik.',
+    editors: ['dxTextArea'],
+    value: { autoResizeEnabled: true, minHeight: 80, maxHeight: 320 },
+  },
+  {
+    key: 'searchableList',
+    label: 'Aranabilir liste',
+    description: 'İçinde geçen kayıtları arar, 300 ms gecikme.',
+    editors: ['dxSelectBox', 'dxLookup', 'dxTagBox', 'dxDropDownBox', 'dxGridBox', 'dxAutocomplete'],
+    value: { searchEnabled: true, searchMode: 'contains', searchTimeout: 300, showClearButton: true },
+  },
+  {
+    key: 'tagBoxInstant',
+    label: 'TagBox anlık seçim',
+    description: 'Onay kutulu, butonsuz, anında uygulanan çoklu seçim.',
+    editors: ['dxTagBox'],
+    value: {
+      showSelectionControls: true,
+      applyValueMode: 'instantly',
+      searchEnabled: true,
+      showClearButton: true,
+    },
+  },
+  {
+    key: 'gridBoxSingle',
+    label: 'GridBox tekli seçim',
+    description: 'key/name sütunları, filtre satırı açık, tek seçim.',
+    editors: ['dxGridBox'],
+    value: {
+      columns: ['key', 'name'],
+      selectionMode: 'single',
+      filterRowVisible: true,
+      height: 320,
+      width: 520,
+      showClearButton: true,
+    },
+  },
+  {
+    key: 'gridBoxMulti',
+    label: 'GridBox çoklu seçim',
+    description: 'Çoklu seçim; liste sütunu da çoklu değer olarak çalışır.',
+    editors: ['dxGridBox'],
+    value: {
+      columns: ['key', 'name'],
+      selectionMode: 'multiple',
+      filterRowVisible: true,
+      height: 360,
+      width: 560,
+    },
+  },
+  {
+    key: 'imageMulti',
+    label: 'Çoklu görsel 80x80',
+    description: 'Çoklu yükleme ve 80x80 küçük resim.',
+    editors: ['dxImageUpload', 'dxImageViewer'],
+    value: { width: 80, height: 80, multiple: true, accept: 'image/*' },
+  },
+  {
+    key: 'htmlToolbar',
+    label: 'HtmlEditor araç çubuğu',
+    description: 'Tam araç çubuğu, görsel yükleme ve boyutlandırma.',
+    editors: ['dxHtmlEditor'],
+    value: buildHtmlEditorOptions(),
+  },
+  {
+    key: 'height100',
+    label: 'Yükseklik 100',
+    description: 'height: 100',
+    value: { height: 100 },
+  },
+  {
+    key: 'height200',
+    label: 'Yükseklik 200',
+    description: 'height: 200',
+    value: { height: 200 },
+  },
+]
diff --git a/ui/src/views/list/CardView.tsx b/ui/src/views/list/CardView.tsx
index 32734423..c0a52848 100644
--- a/ui/src/views/list/CardView.tsx
+++ b/ui/src/views/list/CardView.tsx
@@ -801,7 +801,9 @@ const CardView = (props: CardViewProps) => {
         }
       }
 
-      if (column.placeHolder) {
+      // Grid ve Form'da editorOptions.placeholder kolonun PlaceHolder alanını ezer;
+      // burada tersi olduğu için aynı yapılandırma CardView'da farklı davranıyordu.
+      if (column.placeHolder && editorOptions.placeholder === undefined) {
         editorOptions.placeholder = translate('::' + column.placeHolder)
       }
 
diff --git a/ui/src/views/list/Tree.tsx b/ui/src/views/list/Tree.tsx
index 53524d46..47385fc7 100644
--- a/ui/src/views/list/Tree.tsx
+++ b/ui/src/views/list/Tree.tsx
@@ -32,6 +32,7 @@ import { RowMode } from '../form/types'
 import { GridColumnData } from './GridColumnData'
 import GridFilterDialogs from './GridFilterDialogs'
 import { GridBoxEditorComponent } from './editors/GridBoxEditorComponent'
+import { ImageUploadEditorComponent } from './editors/ImageUploadEditorComponent'
 import { ImageViewerEditorComponent } from './editors/ImageViewerEditorComponent'
 import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent'
 import { useFilters } from './useFilters'
@@ -635,6 +636,7 @@ const Tree = (props: TreeProps) => {
               />
               <Template name="cellEditTagBox" render={TagBoxEditorComponent} />
               <Template name="cellEditGridBox" render={GridBoxEditorComponent} />
+              <Template name="cellEditImageUpload" render={ImageUploadEditorComponent} />
               <Template
                 name="cellEditImageViewer"
                 render={(data: any) => (
diff --git a/ui/src/views/list/useListFormColumns.ts b/ui/src/views/list/useListFormColumns.ts
index 1e82501f..911d78a7 100644
--- a/ui/src/views/list/useListFormColumns.ts
+++ b/ui/src/views/list/useListFormColumns.ts
@@ -697,7 +697,11 @@ const useListFormColumns = ({
         // #region lookup ayarlari
         if (colData.lookupDto?.dataSourceType) {
           // UiColumnEditorTemplateTypeEnum : None:0, Table:1, TagBox:2
-          const formItem = colData.editOrderNo != null ? colData : undefined
+          // NOT: Buradaki seçim yalnızca editorType2'ye bakar. Önceden ek olarak
+          // `editOrderNo != null` şartı vardı; düzenleme formunda yer almayan
+          // kolonlarda TagBox/GridBox seçenekleri sessizce yok sayılıyor ve
+          // hücre içi düzenleme çalışmıyordu.
+          const formItem = colData
           if (formItem?.editorType2 === PlatformEditorTypes.dxTagBox) {
             column.extras = {
               multiValue: true,
@@ -746,7 +750,9 @@ const useListFormColumns = ({
 
         // #region image upload editor
         if (!colData.lookupDto?.dataSourceType) {
-          const imageFormItem = colData.editOrderNo != null ? colData : undefined
+          // Görsel kolonları da düzenleme formunda olmasa bile küçük resim
+          // gösterebilmeli; bu yüzden editOrderNo şartı kaldırıldı.
+          const imageFormItem = colData
           const isImageUploadEditor =
             imageFormItem?.editorType2 === PlatformEditorTypes.dxImageUpload
           const isImageViewerEditor =