Responsive Page Builder Editor Layout

<div class="relative w-full overflow-hidden shadow-black/50 bg-gradient-to-b from-white/[0.04] to-white/[0.02] border-white/10 border rounded-2xl mr-auto ml-auto shadow-2xl backdrop-blur-lg">
          <!-- Topbar -->
          <div class="flex items-center justify-between border-b border-white/10 px-3 py-2">
            <div class="flex items-center gap-2">
              <span class="h-3 w-3 rounded-full bg-red-500/80"></span>
              <span class="h-3 w-3 rounded-full bg-yellow-400/80"></span>
              <span class="h-3 w-3 rounded-full bg-green-500/80"></span>
              <div class="ml-3 hidden items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs text-slate-300 sm:flex">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layout-panel-left" class="lucide lucide-layout-panel-left h-3.5 w-3.5 text-slate-200"><rect width="7" height="18" x="3" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="14" rx="1" class=""></rect></svg>
                Nebula Studio — Project: Aurora
              </div>
            </div>
            <div class="flex items-center gap-2">
              <button class="hidden rounded-md border border-white/10 bg-white/5 p-1.5 text-slate-200 hover:bg-white/10 sm:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="share-2" class="lucide lucide-share-2 h-4 w-4"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg></button>
              <button class="hidden rounded-md border border-white/10 bg-white/5 p-1.5 text-slate-200 hover:bg-white/10 sm:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg></button>
              <button class="rounded-md bg-sky-500/90 px-3 py-1.5 text-xs font-medium text-white hover:bg-sky-500">Publish</button>
            </div>
          </div>

          <!-- Editor body -->
          <div class="grid grid-cols-1 md:grid-cols-12">
            <!-- Left panel -->
            <aside class="hidden md:block md:col-span-3 bg-black/30 border-white/10 border-r pt-3 pr-3 pb-3 pl-3">
              <div class="mb-3 flex items-center justify-between">
                <div class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="panel-left" class="lucide lucide-panel-left h-3.5 w-3.5"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M9 3v18" class=""></path></svg>
                  Outline
                </div>
                <button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search h-4 w-4"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
                </button>
              </div>

              <div class="space-y-1 text-slate-300">
                <div class="bg-white/5 rounded-lg pt-2 pr-2 pb-2 pl-2 space-y-3">
                  <div class="mb-1 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="laptop" class="lucide lucide-laptop h-4 w-4 text-sky-400"><path d="M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z" class=""></path><path d="M20.054 15.987H3.946" class=""></path></svg>
                      <span class="text-xs font-medium">Desktop — 1200</span>
                    </div>
                    <span class="rounded-md bg-white/5 px-1.5 py-0.5 text-[10px] text-slate-400">Primary</span>
                  </div>
                  <ul class="space-y-1 pl-6 text-xs">
                    <li class="flex items-center gap-2 rounded-md bg-sky-500/10 px-2 py-1">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers h-3.5 w-3.5 text-sky-400"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
                      Header
                    </li>
                    <li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="image" class="lucide lucide-image h-3.5 w-3.5 text-purple-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
                      Hero
                    </li>
                    <li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grid" class="lucide lucide-grid h-3.5 w-3.5 text-emerald-400"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M3 15h18" class=""></path><path d="M9 3v18" class=""></path><path d="M15 3v18" class=""></path></svg>
                      Features
                    </li>
                    <li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="credit-card" class="lucide lucide-credit-card h-3.5 w-3.5 text-amber-400"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
                      Pricing
                    </li>
                    <li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="messages-square" class="lucide lucide-messages-square h-3.5 w-3.5 text-pink-400"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" class=""></path><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" class=""></path></svg>
                      Testimonials
                    </li>
                  </ul>
                </div>
                <div class="bg-white/5 rounded-lg pt-2 pr-2 pb-2 pl-2 space-y-3">
                  <div class="mb-1 flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="package" class="lucide lucide-package h-4 w-4 text-indigo-400"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" class=""></path><path d="M12 22V12" class=""></path><polyline points="3.29 7 12 12 20.71 7" class=""></polyline><path d="m7.5 4.27 9 5.15" class=""></path></svg>
                    <span class="text-xs font-medium">Assets</span>
                  </div>
                  <div class="grid grid-cols-3 gap-2">
                    <div class="aspect-video overflow-hidden rounded-md bg-white/5">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0950426a-fd01-4dc5-a916-33b7c3a94646_320w.jpg" class="h-full w-full object-cover opacity-90" alt="" style="">
                    </div>
                    <div class="aspect-video overflow-hidden rounded-md bg-white/5">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/859fc099-059b-4ec4-b0f1-06e736a8bdf4_320w.jpg" class="h-full w-full object-cover opacity-90" alt="" style="">
                    </div>
                    <div class="aspect-video overflow-hidden rounded-md bg-white/5">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f17ac654-630a-4fb6-ae2e-e2c4a8fe9274_320w.jpg" class="h-full w-full object-cover opacity-90" alt="" style="">
                    </div>
                  </div>
                </div>
              </div>
            </aside>

            <!-- Canvas -->
            <main class="relative md:col-span-6 bg-black/20">
              <div class="flex items-center gap-2 border-b border-white/10 px-3 py-2 text-xs text-slate-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="monitor-smartphone" class="lucide lucide-monitor-smartphone h-4 w-4 text-sky-400"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" class=""></path><path d="M10 19v-3.96 3.15" class=""></path><path d="M7 19h5" class=""></path><rect width="6" height="10" x="16" y="12" rx="2" class=""></rect></svg>
                <span>Breakpoint</span>
                <span class="rounded-md bg-white/5 px-1.5 py-0.5">Desktop</span>
                <span class="text-slate-500">|</span>
                <span>1200</span>
                <div class="ml-auto flex items-center gap-1">
                  <button class="rounded-md border border-white/10 bg-white/5 p-1 hover:bg-white/10"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="undo-2" class="lucide lucide-undo-2 h-4 w-4"><path d="M9 14 4 9l5-5" class=""></path><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" class=""></path></svg></button>
                  <button class="rounded-md border border-white/10 bg-white/5 p-1 hover:bg-white/10"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="redo-2" class="lucide lucide-redo-2 h-4 w-4"><path d="m15 14 5-5-5-5" class=""></path><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13" class=""></path></svg></button>
                </div>
              </div>

              <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4">
                <div class="relative overflow-hidden rounded-xl border border-white/10 bg-white/5 ring-1 ring-white/10">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9fb3eba2-d3b1-4a3c-9feb-29a0b47b70c6_1600w.jpg" class="h-[360px] w-full object-cover sm:h-[460px]" alt="">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
                  <div class="absolute bottom-6 left-6 right-6">
                    <div class="max-w-xl rounded-xl border border-white/10 bg-black/40 p-4 backdrop-blur">
                      <h3 class="text-3xl sm:text-4xl font-semibold tracking-tight">Orion Canvas</h3>
                      <p class="mt-1 text-sm text-slate-300">A limitless canvas with modern layout, motion, and type features—ready for production.</p>
                      <div class="mt-3 flex items-center gap-2">
                        <button class="inline-flex items-center gap-2 rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black hover:bg-white/90">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wand-2" class="lucide lucide-wand-2 h-4 w-4"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" class=""></path><path d="m14 7 3 3" class=""></path><path d="M5 6v4" class=""></path><path d="M19 14v4" class=""></path><path d="M10 2v2" class=""></path><path d="M7 8H3" class=""></path><path d="M21 16h-4" class=""></path><path d="M11 3H9" class=""></path></svg>
                          Auto layout
                        </button>
                        <button class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 hover:bg-white/10">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="move" class="lucide lucide-move h-4 w-4"><path d="M12 2v20" class=""></path><path d="m15 19-3 3-3-3" class=""></path><path d="m19 9 3 3-3 3" class=""></path><path d="M2 12h20" class=""></path><path d="m5 9-3 3 3 3" class=""></path><path d="m9 5 3-3 3 3" class=""></path></svg>
                          Drag
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Mini device preview -->
                <div class="pointer-events-none absolute -bottom-6 right-4 hidden w-64 rounded-xl border border-white/10 bg-white/5 p-2 backdrop-blur lg:block">
                  <div class="rounded-lg border border-white/10 bg-black/50 p-2">
                    <div class="aspect-[9/16] overflow-hidden rounded-md">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e080ec8d-304b-41cc-a8e7-c2b6efc8ab07_800w.jpg" class="h-full w-full object-cover" alt="">
                    </div>
                    <div class="mt-2 flex items-center justify-between text-[10px] text-slate-400">
                      <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="smartphone" class="lucide lucide-smartphone h-3 w-3"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg> Mobile 390</span>
                      <span class="rounded bg-white/5 px-1 py-0.5">Preview</span>
                    </div>
                  </div>
                </div>
              </div>
            </main>

            <!-- Right panel -->
            <aside class="hidden md:block md:col-span-3 border-l border-white/10 bg-black/30 p-3">
              <div class="mb-3 flex items-center justify-between">
                <div class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sliders-horizontal" class="lucide lucide-sliders-horizontal h-3.5 w-3.5"><line x1="21" x2="14" y1="4" y2="4" class=""></line><line x1="10" x2="3" y1="4" y2="4" class=""></line><line x1="21" x2="12" y1="12" y2="12" class=""></line><line x1="8" x2="3" y1="12" y2="12" class=""></line><line x1="21" x2="16" y1="20" y2="20" class=""></line><line x1="12" x2="3" y1="20" y2="20" class=""></line><line x1="14" x2="14" y1="2" y2="6" class=""></line><line x1="8" x2="8" y1="10" y2="14" class=""></line><line x1="16" x2="16" y1="18" y2="22" class=""></line></svg>
                  Properties
                </div>
                <button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-4 w-4"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
                </button>
              </div>

              <div class="space-y-3">
                <div class="bg-white/5 rounded-lg pt-3 pr-3 pb-3 pl-3 space-y-3">
                  <div class="mb-2 flex items-center justify-between text-xs">
                    <span class="text-slate-300">Position</span>
                    <span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400">Relative</span>
                  </div>
                  <div class="grid grid-cols-3 gap-2 text-[11px]">
                    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="align-start-vertical" class="lucide lucide-align-start-vertical mr-1 inline h-3.5 w-3.5"><rect width="9" height="6" x="6" y="14" rx="2" class=""></rect><rect width="16" height="6" x="6" y="4" rx="2" class=""></rect><path d="M2 2v20" class=""></path></svg>Top</button>
                    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="align-center-vertical" class="lucide lucide-align-center-vertical mr-1 inline h-3.5 w-3.5"><path d="M12 2v20" class=""></path><path d="M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4" class=""></path><path d="M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4" class=""></path><path d="M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1" class=""></path><path d="M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1" class=""></path></svg>Center</button>
                    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="align-end-vertical" class="lucide lucide-align-end-vertical mr-1 inline h-3.5 w-3.5"><rect width="16" height="6" x="2" y="4" rx="2" class=""></rect><rect width="9" height="6" x="9" y="14" rx="2" class=""></rect><path d="M22 22V2" class=""></path></svg>Bottom</button>
                  </div>
                </div>

                <div class="bg-white/5 rounded-lg pt-3 pr-3 pb-3 pl-3 space-y-3">
  <div class="mb-2 flex items-center justify-between text-xs">
    <span class="text-slate-300 font-medium">Size</span>
    <span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400">Auto</span>
  </div>
  <div class="grid grid-cols-2 gap-2 text-[11px]">
    <div class="rounded-md border border-white/10 bg-black/40 px-2 py-1 text-slate-300 font-medium text-center">W: 1200</div>
    <div class="rounded-md border border-white/10 bg-black/40 px-2 py-1 text-slate-300 font-medium text-center">H: Auto</div>
  </div>
  <div class="mt-2 grid grid-cols-4 gap-2 text-[11px]">
    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 font-medium hover:bg-white/10 transition focus:ring-2 focus:ring-sky-500 focus:outline-none">Fill</button>
    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 font-medium hover:bg-white/10 transition focus:ring-2 focus:ring-sky-500 focus:outline-none">Fit</button>
    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 font-medium hover:bg-white/10 transition focus:ring-2 focus:ring-sky-500 focus:outline-none">Fixed
    </button><button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 font-medium hover:bg-white/10 transition focus:ring-2 focus:ring-sky-500 focus:outline-none">Min</button>
  </div>
</div>

                <div class="bg-white/5 rounded-lg pt-3 pr-3 pb-3 pl-3 space-y-3">
                  <div class="mb-2 flex items-center justify-between text-xs">
                    <span class="text-slate-300">Effects</span>
                    <span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400">3</span>
                  </div>
                  <div class="space-y-2 text-[11px]">
                    <div class="flex items-center justify-between">
                      <span class="inline-flex items-center gap-1 text-slate-300"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="droplet" class="lucide lucide-droplet w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(56, 189, 248);"><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z" class=""></path></svg>Blur</span>
                      <span class="rounded bg-white/5 px-1.5 py-0.5 text-slate-400">8px</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="inline-flex items-center gap-1 text-slate-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sun" class="lucide lucide-sun h-3.5 w-3.5 text-amber-400"><circle cx="12" cy="12" r="4" class=""></circle><path d="M12 2v2" class=""></path><path d="M12 20v2" class=""></path><path d="m4.93 4.93 1.41 1.41" class=""></path><path d="m17.66 17.66 1.41 1.41" class=""></path><path d="M2 12h2" class=""></path><path d="M20 12h2" class=""></path><path d="m6.34 17.66-1.41 1.41" class=""></path><path d="m19.07 4.93-1.41 1.41" class=""></path></svg>Glow</span>
                      <span class="rounded bg-white/5 px-1.5 py-0.5 text-slate-400">20%</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="inline-flex items-center gap-1 text-slate-300"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers h-3.5 w-3.5 text-purple-400"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>Blend</span>
                      <span class="rounded bg-white/5 px-1.5 py-0.5 text-slate-400">Overlay</span>
                    </div>
                  </div>
                </div>
              </div>
            </aside>
          </div>
        </div>