{{-- Block Palette (좌측 사이드바) --}}
<div class="block-palette bg-gray-50 border-r border-gray-200 overflow-y-auto shrink-0 p-3">
    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">기본</div>
    <div class="space-y-1 mb-4">
        <template x-for="(def, type) in blockTypes" :key="type">
            <button x-show="def.category === 'basic'"
                    @click="addBlock(type)"
                    class="palette-item w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-700 hover:bg-white hover:shadow-sm transition border border-transparent hover:border-gray-200">
                <span class="w-6 h-6 flex items-center justify-center bg-blue-100 text-blue-700 rounded text-xs font-bold shrink-0"
                      x-text="def.icon"></span>
                <span x-text="def.label"></span>
            </button>
        </template>
    </div>

    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">폼 필드</div>
    <div class="space-y-1 mb-4">
        <template x-for="(def, type) in blockTypes" :key="type + '_form'">
            <button x-show="def.category === 'form'"
                    @click="addBlock(type)"
                    class="palette-item w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-700 hover:bg-white hover:shadow-sm transition border border-transparent hover:border-gray-200">
                <span class="w-6 h-6 flex items-center justify-center bg-green-100 text-green-700 rounded text-xs font-bold shrink-0"
                      x-text="def.icon"></span>
                <span x-text="def.label"></span>
            </button>
        </template>
    </div>

    {{-- 블록 카운트 --}}
    <div class="mt-4 pt-3 border-t border-gray-200">
        <div class="text-xs text-gray-400">
            블록 <span x-text="blocks.length" class="font-medium text-gray-600"></span>개
        </div>
    </div>
</div>