@morphika/webframe 0.1.0

package/components/builder/SettingsPanel.tsx

@@ -0,0 +1,911 @@
+"use client";
+
+/**
+ * SettingsPanel — Right panel shell with header, tabs, and content routing.
+ *
+ * Sub-components extracted in Session 64:
+ *   settings-panel/LayoutTab.tsx      — LayoutTab, BlockLayoutTab, TRBLInputs, RowLayoutPresetPicker
+ *   settings-panel/PageSettings.tsx   — Page general, appearance, SEO
+ *   settings-panel/RowSettings.tsx    — Row layout, appearance, responsive
+ *   settings-panel/ColumnSettings.tsx — Column width, alignment, gap
+ *   settings-panel/BlockSettings.tsx  — Block type editor router
+ *   settings-panel/responsive-helpers.ts — Viewport-aware setting resolution
+ */
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+import { ALL_BLOCK_INFO } from "../../lib/builder/types";
+import { BUILDER_VIOLET } from "../../lib/builder/constants";
+import { BLOCK_GRADIENTS, BLOCK_ICON_COMPONENTS } from "./blockStyles";
+import type { ContentBlock, ContentItem, PageSection, PageSectionV2, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2, SectionColumn, ProjectGridBlock, CardEntranceConfig } from "../../lib/sanity/types";
+import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+
+import type { HoverEffectConfig } from "../../lib/animation/hover-effect-types";
+import EnterAnimationPicker from "./editors/EnterAnimationPicker";
+import HoverEffectPicker from "./editors/HoverEffectPicker";
+import {
+  getBlockAnimationValue,
+  hasBlockAnimationOverride,
+  setBlockAnimationOverride,
+} from "./settings-panel/responsive-helpers";
+
+/** Safely extract hover_effect (new unified type) from any content block.
+ *  ProjectGridBlock has a legacy `hover_effect: "3d" | "scale" | "none"` string field
+ *  that collides — skip it (returns undefined). Other blocks have HoverEffectConfig. */
+function getBlockHoverEffect(block: ContentBlock): HoverEffectConfig | undefined {
+  // ProjectGridBlock hover_effect is the old per-card string — not HoverEffectConfig
+  if (block._type === "projectGridBlock") return undefined;
+  const val = (block as unknown as Record<string, unknown>).hover_effect;
+  if (val === undefined || val === null) return undefined;
+  if (typeof val === "object") return val as HoverEffectConfig;
+  return undefined;
+}
+import {
+  LayoutTab,
+  BlockLayoutTab,
+  PageSettings,
+  PageSeoSettings,
+  BlockSettings,
+  SectionV2Settings,
+  SectionV2LayoutTab,
+  SectionV2AnimationTab,
+  ColumnV2Settings,
+  ParallaxSlideSettings,
+  ParallaxGroupSettings,
+} from "./settings-panel";
+
+type SettingsTab = "settings" | "layout" | "seo" | "animation";
+
+export default function SettingsPanel() {
+  const store = useBuilderStore();
+  const [activeTab, setActiveTab] = useState<SettingsTab>("settings");
+
+  // Find selected elements — handle page sections, V2 sections, and parallax groups/slides
+  const selectedItem: ContentItem | undefined = store.rows.find((r) => r._key === store.selectedRowKey);
+  const selectedSection: PageSection | null = selectedItem && isPageSection(selectedItem) ? selectedItem : null;
+  const selectedSectionV2: PageSectionV2 | null = selectedItem && isPageSectionV2(selectedItem) ? selectedItem : null;
+  const selectedCustomSectionInstance: CustomSectionInstance | null = selectedItem && isCustomSectionInstance(selectedItem) ? selectedItem as CustomSectionInstance : null;
+
+  // Parallax detection: group selected directly, or slide selected (search inside groups)
+  const selectedParallaxGroup: ParallaxGroup | null = selectedItem && isParallaxGroup(selectedItem) ? selectedItem as ParallaxGroup : null;
+  const selectedParallaxSlide: { group: ParallaxGroup; slide: ParallaxSlideV2; virtualSection: PageSectionV2 } | null = (() => {
+    if (!store.selectedRowKey) return null;
+    for (const item of store.rows) {
+      if (!isParallaxGroup(item)) continue;
+      const group = item as ParallaxGroup;
+      const slide = group.slides.find((s) => s._key === store.selectedRowKey);
+      if (slide) {
+        // Create a virtual PageSectionV2 for the slide so we can delegate to SectionV2Settings etc.
+        const virtualSection: PageSectionV2 = {
+          _type: "pageSectionV2",
+          _key: slide._key,
+          section_type: "empty-v2",
+          columns: slide.columns,
+          settings: slide.section_settings,
+        };
+        return { group, slide, virtualSection };
+      }
+    }
+    return null;
+  })();
+
+  // V2 column: when a V2 section (or parallax slide) is selected and a column key is set
+  const effectiveSectionV2 = selectedSectionV2 || selectedParallaxSlide?.virtualSection || null;
+  const selectedColumnV2: SectionColumn | null = effectiveSectionV2 && store.selectedColumnKey
+    ? effectiveSectionV2.columns.find((c) => c._key === store.selectedColumnKey) || null
+    : null;
+
+  // For PageSections, the "block" is section.block[0] — selected automatically
+  const selectedBlock = (() => {
+    // If a PageSection is selected, its block is the section block
+    if (selectedSection) {
+      const block = selectedSection.block[0];
+      if (block) return { block, rowKey: selectedSection._key, colKey: "", isSection: true };
+      return null;
+    }
+    // Regular block search inside rows, V2 sections, and parallax slides
+    if (!store.selectedBlockKey) return null;
+    for (const item of store.rows) {
+      // V2 sections: search inside columns
+      if (isPageSectionV2(item)) {
+        for (const col of (item as PageSectionV2).columns || []) {
+          const block = (col.blocks || []).find(
+            (b) => b._key === store.selectedBlockKey
+          );
+          if (block) return { block, rowKey: item._key, colKey: col._key, isSection: false };
+        }
+      }
+      // Parallax groups: search inside slide columns
+      if (isParallaxGroup(item)) {
+        const group = item as ParallaxGroup;
+        for (const slide of group.slides) {
+          for (const col of slide.columns || []) {
+            const block = (col.blocks || []).find(
+              (b) => b._key === store.selectedBlockKey
+            );
+            if (block) return { block, rowKey: slide._key, colKey: col._key, isSection: false };
+          }
+        }
+      }
+    }
+    return null;
+  })();
+
+  // Derive the panel title + icon from what's selected
+  const blockInfo = selectedBlock
+    ? ALL_BLOCK_INFO.find((b) => b.type === selectedBlock.block._type)
+    : null;
+
+  // BUG-V2-003 fix: Block selection takes priority over V2 column/section
+  const panelTitle = selectedBlock
+    ? blockInfo?.label || selectedBlock.block._type
+    : selectedColumnV2
+    ? "Column"
+    : selectedParallaxSlide
+    ? `Slide ${selectedParallaxSlide.group.slides.findIndex((s) => s._key === selectedParallaxSlide.slide._key) + 1}`
+    : selectedParallaxGroup
+    ? "Parallax Showcase"
+    : selectedCustomSectionInstance
+    ? (selectedCustomSectionInstance.custom_section_title || "Saved Section")
+    : selectedSectionV2
+    ? "Section"
+    : selectedSection
+    ? (selectedSection.section_type === "projectGrid" ? "Project Grid" : "Parallax Section")
+    : "Page";
+
+  // Resolve gradient + icon component for the header
+  const headerStyleKey = selectedBlock
+    ? selectedBlock.block._type
+    : selectedColumnV2
+    ? "column"
+    : (selectedParallaxSlide || selectedParallaxGroup)
+    ? "parallaxGroup"
+    : selectedCustomSectionInstance
+    ? "customSectionInstance"
+    : selectedSectionV2
+    ? "row"
+    : selectedSection
+    ? (selectedSection.block[0]?._type || "row")
+    : "page";
+  const headerGradient = BLOCK_GRADIENTS[headerStyleKey] || BLOCK_GRADIENTS.page;
+  const HeaderIconComponent = BLOCK_ICON_COMPONENTS[headerStyleKey];
+
+  const hasSelection = !!(store.selectedRowKey || store.selectedColumnKey || store.selectedBlockKey);
+  // V2 columns: show Settings + Animation tabs (not Layout) — but NOT when a block inside the column is selected
+  const isColumnOnly = !!(selectedColumnV2 && !selectedBlock);
+  // Parallax group header: show Settings + Animation (no Layout)
+  const isParallaxGroupOnly = !!(selectedParallaxGroup && !selectedParallaxSlide && !selectedBlock);
+  // Custom section instance: show all 3 tabs (Settings with Edit/Detach, Layout, Animation)
+  const isCustomSectionOnly = !!(selectedCustomSectionInstance && !selectedBlock);
+  // Page level: nothing selected — show Settings + SEO + Animation (no Layout)
+  const isPageLevel = !hasSelection;
+
+  // Reset to "settings" tab when selection changes
+  const selectionKey = `${store.selectedRowKey}-${store.selectedColumnKey}-${store.selectedBlockKey}`;
+  const prevSelectionKey = useRef(selectionKey);
+  useEffect(() => {
+    if (prevSelectionKey.current !== selectionKey) {
+      setActiveTab("settings");
+      prevSelectionKey.current = selectionKey;
+    }
+  }, [selectionKey]);
+
+  // Columns have Settings + Animation — fall back if Layout or SEO tab was active
+  // Parallax group header has only Settings — fall back if Layout/SEO or Animation tab was active
+  // Page level has Settings + SEO + Animation — fall back if Layout tab was active
+  useEffect(() => {
+    if (isColumnOnly && (activeTab === "layout" || activeTab === "seo")) {
+      setActiveTab("settings");
+    }
+    if (isParallaxGroupOnly && (activeTab === "layout" || activeTab === "seo" || activeTab === "animation")) {
+      setActiveTab("settings");
+    }
+    if (isPageLevel && activeTab === "layout") {
+      setActiveTab("settings");
+    }
+  }, [isColumnOnly, isParallaxGroupOnly, isPageLevel, activeTab]);
+
+  return (
+    <div className="w-72 border-l border-[#f0f0f0] bg-white overflow-y-auto shrink-0 flex flex-col">
+      {/* Panel header — gradient + icon, matching add-block card style */}
+      <div
+        className="relative flex items-center px-3.5 py-3 shrink-0 overflow-hidden"
+        style={{ background: headerGradient }}
+      >
+        {/* Glass overlay */}
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{
+            background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%)",
+          }}
+        />
+
+        {/* Icon container — frosted glass */}
+        <div
+          className="relative shrink-0 flex items-center justify-center"
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: 10,
+            background: "rgba(255,255,255,0.4)",
+            backdropFilter: "blur(8px)",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5)",
+          }}
+        >
+          {HeaderIconComponent ? <HeaderIconComponent size={22} /> : null}
+        </div>
+
+        {/* Title */}
+        <h3
+          className="relative z-10 ml-2.5 text-[13px] font-semibold truncate"
+          style={{ color: "rgba(0,0,0,0.72)", textShadow: "0 1px 0 rgba(255,255,255,0.3)" }}
+        >
+          {panelTitle}
+        </h3>
+
+        {/* Action button — single delete for the active selection (block > column > section priority) */}
+        <div className="relative z-10 flex items-center gap-0.5 ml-auto">
+          {(() => {
+            // Determine the single delete action based on selection priority: block > column > section
+            let onDelete: (() => void) | null = null;
+            let deleteTitle = "";
+
+            if (selectedBlock && !selectedBlock.isSection) {
+              onDelete = () => store.deleteBlock(selectedBlock.block._key);
+              deleteTitle = "Delete";
+            } else if (selectedColumnV2 && effectiveSectionV2) {
+              onDelete = () => store.deleteColumnV2(effectiveSectionV2._key, selectedColumnV2._key);
+              deleteTitle = "Delete Column";
+            } else if (selectedParallaxGroup && !selectedParallaxSlide) {
+              onDelete = () => store.deleteSection(selectedParallaxGroup._key);
+              deleteTitle = "Delete Parallax Group";
+            } else if (selectedSectionV2) {
+              onDelete = () => store.deleteSection(selectedSectionV2._key);
+              deleteTitle = "Delete Section";
+            } else if (selectedSection) {
+              onDelete = () => store.deleteSection(selectedSection._key);
+              deleteTitle = "Delete Section";
+            }
+
+            if (!onDelete) return null;
+
+            return (
+              <button
+                onClick={onDelete}
+                className="p-1.5 rounded-md hover:bg-red-500/20 transition-colors group"
+                title={deleteTitle}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-black/40 group-hover:text-[var(--admin-error)] transition-colors">
+                  <polyline points="3 6 5 6 21 6" />
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                </svg>
+              </button>
+            );
+          })()}
+        </div>
+      </div>
+
+      {/* Segmented tab toggle — always 3 tabs (Settings, Layout, Animation) */}
+      {(() => {
+        const tabs: { id: SettingsTab; label: string; shortLabel: string; icon: React.ReactNode }[] = [
+          {
+            id: "settings",
+            label: "Settings",
+            shortLabel: "Settings",
+            icon: (
+              <svg width="13" height="13" viewBox="0 0 48 48" fill="none" className="shrink-0">
+                <path d="M42.5,35.5h-5.1c-0.8-3-3.1-5.1-5.9-5.2l-0.2,0c-2.9,0-5.3,2.1-6.1,5.2H5.7l-0.2,0v0c-0.3,0-0.6,0.2-0.9,0.4c-0.3,0.3-0.4,0.7-0.4,1.1c0,0.8,0.7,1.5,1.5,1.5h19.5c0.8,3.1,3.2,5.2,6.1,5.2c2.9,0,5.3-2.1,6.1-5.2h5.1c0.8,0,1.5-0.7,1.5-1.5c0-0.4-0.2-0.8-0.4-1.1C43.3,35.7,42.9,35.5,42.5,35.5z M35,37c0,2-1.6,3.7-3.7,3.7s-3.7-1.6-3.7-3.7s1.6-3.7,3.7-3.7S35,35,35,37z" fill="currentColor"/>
+                <path d="M5.7,11.8h19.6c0.8,3.1,3.2,5.2,6.1,5.2c2.9,0,5.3-2.1,6.1-5.2h5.1c0.4,0,0.8-0.2,1.1-0.4c0.3-0.3,0.4-0.7,0.4-1.1c0-0.8-0.7-1.5-1.5-1.5h-5.1c-0.8-3.1-3.2-5.2-6.1-5.2c-2.9,0-5.3,2.1-6.1,5.2H5.7c-0.8,0-1.5,0.7-1.5,1.5C4.2,11.2,4.9,11.8,5.7,11.8z M31.3,6.7c2,0,3.7,1.6,3.7,3.7S33.4,14,31.3,14s-3.7-1.6-3.7-3.7S29.3,6.7,31.3,6.7z" fill="currentColor"/>
+                <path d="M5.7,25.2h5.1c0.8,3.1,3.2,5.2,6.1,5.2c2.9,0,5.3-2.1,6.1-5.2l19.6,0c0.8,0,1.4-0.7,1.4-1.5c0-0.8-0.6-1.5-1.4-1.5H22.9c-0.8-3.1-3.2-5.2-6.1-5.2c-2.9,0-5.3,2.1-6.1,5.2H5.7c-0.8,0-1.5,0.7-1.5,1.5C4.2,24.5,4.9,25.2,5.7,25.2z M13.2,23.7c0-2,1.6-3.7,3.7-3.7s3.7,1.6,3.7,3.7s-1.6,3.7-3.7,3.7S13.2,25.7,13.2,23.7z" fill="currentColor"/>
+              </svg>
+            ),
+          },
+          {
+            id: "layout",
+            label: "Layout",
+            shortLabel: "Layout",
+            icon: (
+              <svg width="13" height="13" viewBox="0 0 48 48" fill="none" className="shrink-0">
+                <path d="M8.7,3.9c-2.8,0-5,2.3-5,5.1v13.6c0,2.8,2.3,5.1,5,5.1h8.4c2.8,0,5-2.3,5-5.1V9c0-2.8-2.3-5.1-5-5.1H8.7z M7.1,9c0-0.9,0.8-1.7,1.7-1.7h8.4c0.9,0,1.7,0.8,1.7,1.7v13.6c0,0.9-0.8,1.7-1.7,1.7H8.7c-0.9,0-1.7-0.8-1.7-1.7V9z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
+                <path d="M30.6,3.9c-2.8,0-5,2.3-5,5.1v3.4c0,2.8,2.3,5.1,5,5.1H39c2.8,0,5-2.3,5-5.1V9c0-2.8-2.3-5.1-5-5.1H30.6z M28.9,9c0-0.9,0.8-1.7,1.7-1.7H39c0.9,0,1.7,0.8,1.7,1.7v3.4c0,0.9-0.8,1.7-1.7,1.7h-8.4c-0.9,0-1.7-0.8-1.7-1.7V9z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
+                <path d="M3.7,36.2c0-2.8,2.3-5.1,5-5.1h8.4c2.8,0,5,2.3,5,5.1v3.4c0,2.8-2.3,5.1-5,5.1H8.7c-2.8,0-5-2.3-5-5.1V36.2z M8.7,34.5c-0.9,0-1.7,0.8-1.7,1.7v3.4c0,0.9,0.8,1.7,1.7,1.7h8.4c0.9,0,1.7-0.8,1.7-1.7v-3.4c0-0.9-0.8-1.7-1.7-1.7H8.7z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
+                <path d="M30.6,20.9c-2.8,0-5,2.3-5,5.1v13.6c0,2.8,2.3,5.1,5,5.1H39c2.8,0,5-2.3,5-5.1V26c0-2.8-2.3-5.1-5-5.1H30.6z M28.9,26c0-0.9,0.8-1.7,1.7-1.7H39c0.9,0,1.7,0.8,1.7,1.7v13.6c0,0.9-0.8,1.7-1.7,1.7h-8.4c-0.9,0-1.7-0.8-1.7-1.7V26z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
+              </svg>
+            ),
+          },
+          {
+            id: "animation",
+            label: "Animation",
+            shortLabel: "Anim",
+            icon: (
+              <svg width="13" height="13" viewBox="0 0 48 48" fill="none" className="shrink-0">
+                <path d="M23,8.6C27.5,4,34.8,4,39.4,8.6c4.5,4.5,4.5,11.9,0,16.4c-1.3,1.3-2.9,2.2-4.5,2.8l0,0.1 c-0.6,1.6-1.5,3.1-2.8,4.4c-1.3,1.3-2.9,2.3-4.5,2.8c0,0.1,0,0.2-0.1,0.3c-0.6,1.6-1.5,3-2.7,4.2c-4.5,4.5-11.9,4.5-16.4,0 c-4.5-4.5-4.5-11.9,0-16.4c1.3-1.3,2.8-2.2,4.5-2.8c0.6-1.6,1.5-3.2,2.8-4.5c1.3-1.3,2.8-2.2,4.5-2.8C20.7,11.4,21.7,9.9,23,8.6 L23,8.6z M24.8,10.4c-1.1,1-1.8,2.3-2.2,3.6c0,0.3-0.1,0.5-0.2,0.8c-0.7,2.9,0.1,6.1,2.4,8.4c3.5,3.5,9.2,3.5,12.8,0 c3.5-3.5,3.5-9.2,0-12.8C34,6.8,28.3,6.8,24.8,10.4L24.8,10.4z M17.5,17.7c-3.5,3.5-3.5,9.2,0,12.8c3.5,3.5,9.2,3.5,12.8,0 c0.6-0.6,1.2-1.3,1.6-2.1c-3.2,0.2-6.4-0.9-8.9-3.4c-2.4-2.4-3.6-5.7-3.4-8.8C18.8,16.5,18.1,17,17.5,17.7L17.5,17.7z M10.2,25 c-3.5,3.5-3.5,9.2,0,12.8c3.5,3.5,9.2,3.5,12.8,0c0.6-0.6,1.2-1.3,1.6-2.1c-3.2,0.2-6.4-0.9-8.9-3.4c-2.4-2.4-3.6-5.7-3.4-8.8 C11.5,23.8,10.8,24.3,10.2,25L10.2,25z" fill="currentColor"/>
+              </svg>
+            ),
+          },
+        ];
+
+        // Page level: replace Layout with SEO (Settings + SEO + Animation)
+        if (isPageLevel) {
+          const layoutIdx = tabs.findIndex((t) => t.id === "layout");
+          if (layoutIdx >= 0) {
+            tabs.splice(layoutIdx, 1, {
+              id: "seo" as SettingsTab,
+              label: "SEO",
+              shortLabel: "SEO",
+              icon: (
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+                  <circle cx="11" cy="11" r="8" />
+                  <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                </svg>
+              ),
+            });
+          }
+        }
+        // Columns: remove Layout tab (keep Settings + Animation)
+        if (isColumnOnly) {
+          const layoutIdx = tabs.findIndex((t) => t.id === "layout");
+          if (layoutIdx >= 0) tabs.splice(layoutIdx, 1);
+        }
+        // Parallax group header: only Settings (no Layout, no Animation)
+        if (isParallaxGroupOnly) {
+          const layoutIdx = tabs.findIndex((t) => t.id === "layout");
+          if (layoutIdx >= 0) tabs.splice(layoutIdx, 1);
+          const animIdx = tabs.findIndex((t) => t.id === "animation");
+          if (animIdx >= 0) tabs.splice(animIdx, 1);
+        }
+        // Custom section editor mode: only Settings (Layout & Animation are per-instance on the parent page)
+        if (store.editorMode === "customSection") {
+          const layoutIdx = tabs.findIndex((t) => t.id === "layout");
+          if (layoutIdx >= 0) tabs.splice(layoutIdx, 1);
+          const animIdx = tabs.findIndex((t) => t.id === "animation");
+          if (animIdx >= 0) tabs.splice(animIdx, 1);
+        }
+
+        const tabCount = tabs.length;
+        const is4Tabs = false; // always 2 or 3 tabs now
+        const activeIndex = tabs.findIndex((t) => t.id === activeTab);
+        const pillIndex = activeIndex >= 0 ? activeIndex : 0;
+
+        return (
+          <div className="px-3 py-2 border-b border-[#f0f0f0] shrink-0 bg-[#fafafa]">
+            <div className="relative flex items-center bg-[#f0f0f0] rounded-lg p-[3px]">
+              {/* Animated sliding pill */}
+              <div
+                className="absolute top-[3px] bottom-[3px] rounded-md bg-white shadow-sm border border-[#e5e5e5] transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
+                style={{
+                  width: `calc((100% - 6px) / ${tabCount})`,
+                  left: `calc(${pillIndex} * (100% - 6px) / ${tabCount} + 3px)`,
+                }}
+              />
+              {tabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`relative z-10 flex-1 flex items-center justify-center gap-0.5 py-1.5 rounded-md transition-colors duration-200 ${
+                    is4Tabs ? "text-[10px]" : "text-[11px]"
+                  } font-medium ${
+                    activeTab === tab.id
+                      ? "text-neutral-900"
+                      : "text-neutral-400 hover:text-neutral-500"
+                  }`}
+                >
+                  {tab.icon}
+                  {is4Tabs ? tab.shortLabel : tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        );
+      })()}
+
+      {/* Panel body */}
+      <div className="flex-1 overflow-y-auto">
+        {/* ---- Parallax Group / Slide routing ---- */}
+        {/* Parallax group header selected (no specific slide) */}
+        {selectedParallaxGroup && !selectedParallaxSlide && !selectedBlock ? (
+          <ParallaxGroupSettings group={selectedParallaxGroup} />
+        ) : selectedParallaxSlide && selectedColumnV2 && !selectedBlock ? (
+          // Column inside a parallax slide — Settings or Animation tab
+          activeTab === "animation" ? (
+            <ColumnV2AnimationTab section={selectedParallaxSlide.virtualSection} column={selectedColumnV2} />
+          ) : (
+            <ColumnV2Settings section={selectedParallaxSlide.virtualSection} column={selectedColumnV2} />
+          )
+        ) : selectedParallaxSlide && !selectedBlock ? (
+          // Parallax slide selected — route by active tab
+          activeTab === "animation" ? (
+            <SectionV2AnimationTab section={selectedParallaxSlide.virtualSection} />
+          ) : activeTab === "layout" ? (
+            <SectionV2LayoutTab section={selectedParallaxSlide.virtualSection} />
+          ) : (
+            <ParallaxSlideSettings group={selectedParallaxSlide.group} slide={selectedParallaxSlide.slide} />
+          )
+        ) :
+        /* ---- Custom Section Instance routing ---- */
+        /* Virtual section lets SectionV2LayoutTab/AnimationTab write to instance overrides
+           via the store fallback in updateSectionV2Settings */
+        selectedCustomSectionInstance && !selectedBlock ? (
+          activeTab === "animation" ? (
+            <SectionV2AnimationTab section={{
+              _type: "pageSectionV2",
+              _key: selectedCustomSectionInstance._key,
+              section_type: "empty-v2",
+              columns: [],
+              settings: { preset: "full", grid_columns: 12, col_gap: 20, row_gap: 20, ...selectedCustomSectionInstance.settings_overrides },
+              responsive: selectedCustomSectionInstance.responsive_overrides,
+            }} />
+          ) : activeTab === "layout" ? (
+            <SectionV2LayoutTab section={{
+              _type: "pageSectionV2",
+              _key: selectedCustomSectionInstance._key,
+              section_type: "empty-v2",
+              columns: [],
+              settings: { preset: "full", grid_columns: 12, col_gap: 20, row_gap: 20, ...selectedCustomSectionInstance.settings_overrides },
+              responsive: selectedCustomSectionInstance.responsive_overrides,
+            }} />
+          ) : (
+            <CustomSectionSettings instance={selectedCustomSectionInstance} />
+          )
+        ) :
+        /* ---- V2 Section / Column / Block routing ---- */
+        /* BUG-V2-003 fix: When a block inside a V2 column is selected, show BlockSettings
+            instead of ColumnV2Settings. Block selection takes priority over column. */
+        selectedColumnV2 && selectedSectionV2 && !selectedBlock ? (
+          // V2 Column selected (no block) — Settings or Animation tab
+          activeTab === "animation" ? (
+            <ColumnV2AnimationTab section={selectedSectionV2} column={selectedColumnV2} />
+          ) : (
+            <ColumnV2Settings section={selectedSectionV2} column={selectedColumnV2} />
+          )
+        ) : selectedSectionV2 && !selectedBlock ? (
+          // V2 Section selected — route by active tab
+          activeTab === "animation" ? (
+            <SectionV2AnimationTab section={selectedSectionV2} />
+          ) : activeTab === "layout" ? (
+            <SectionV2LayoutTab section={selectedSectionV2} />
+          ) : (
+            <SectionV2Settings section={selectedSectionV2} />
+          )
+        ) : activeTab === "animation" ? (
+          <AnimationTab
+            selectedBlock={selectedBlock}
+            selectedSection={selectedSection}
+          />
+        ) : activeTab === "layout" ? (
+          (() => {
+            // PageSection: show section layout settings (spacing, background, border)
+            if (selectedSection) {
+              return <LayoutTab section={selectedSection} sectionKey={selectedSection._key} />;
+            }
+            if (selectedBlock && !selectedBlock.isSection) {
+              return <BlockLayoutTab block={selectedBlock.block} />;
+            }
+            return (
+              <div className="p-4">
+                <div className="rounded-lg bg-[#f5f5f5] p-4 text-center">
+                  <p className="text-xs text-neutral-400">
+                    Select an element to edit layout properties.
+                  </p>
+                </div>
+              </div>
+            );
+          })()
+        ) : activeTab === "seo" ? (
+          <PageSeoSettings />
+        ) : selectedSection ? (
+          // PageSection selected → show the section block's settings directly
+          <BlockSettings
+            block={selectedSection.block[0]}
+          />
+        ) : selectedBlock ? (
+          <BlockSettings
+            block={selectedBlock.block}
+          />
+        ) : (
+          <PageSettings />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Animation Tab — extracted inline for clarity
+// ============================================
+
+function AnimationTab({
+  selectedBlock,
+  selectedSection,
+}: {
+  selectedBlock: { block: ContentBlock; rowKey: string; colKey: string; isSection: boolean } | null;
+  selectedSection: PageSection | null;
+}) {
+  const store = useBuilderStore();
+
+  // PageSection (V1): enter animation on the section settings level
+  if (selectedSection) {
+    return (
+      <EnterAnimationPicker
+        mode={{ level: "section", parentConfig: store.pageSettings.enter_animation }}
+        config={selectedSection.settings?.enter_animation}
+        onChange={(cfg) => {
+          store.updateSectionSettings(selectedSection._key, { enter_animation: cfg });
+        }}
+      />
+    );
+  }
+
+  // Block level: type-specific enter picker + card entrance for projectGrid
+  if (selectedBlock) {
+    const isProjectGrid = selectedBlock.block._type === "projectGridBlock";
+    const pgBlock = isProjectGrid ? (selectedBlock.block as ProjectGridBlock) : null;
+    const bvp = store.activeViewport;
+    const isBlockResponsive = bvp !== "desktop";
+
+    const effectiveEnterAnim = getBlockAnimationValue(
+      selectedBlock.block, bvp, "enter_animation", undefined
+    );
+    const effectiveHoverEffect = getBlockAnimationValue(
+      selectedBlock.block, bvp, "hover_effect", undefined
+    ) as HoverEffectConfig | undefined;
+
+    const hasEnterOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation");
+    const hasHoverOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect");
+
+    return (
+      <>
+        {isBlockResponsive && (
+          <div className="px-4 pt-3">
+            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
+              <span className="text-[11px] font-medium text-[#076bff]">
+                Editing {bvp === "tablet" ? "Tablet" : "Phone"} overrides
+              </span>
+            </div>
+          </div>
+        )}
+        <div className="relative">
+          {hasEnterOverride && (
+            <div className="flex items-center justify-between px-4 pt-2">
+              <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
+              <button
+                onClick={() => {
+                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", undefined);
+                  store.updateBlock(selectedBlock.block._key, updates);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          )}
+          <EnterAnimationPicker
+            mode={{ level: "block", blockType: selectedBlock.block._type }}
+            config={effectiveEnterAnim}
+            onChange={(cfg) => {
+              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", cfg);
+              store.updateBlock(selectedBlock.block._key, updates);
+            }}
+          />
+        </div>
+        {/* Hover Effect — block-level only, shown if block type has hover presets */}
+        <div className="border-t border-neutral-200 my-1" />
+        <div className="relative">
+          {hasHoverOverride && (
+            <div className="flex items-center justify-between px-4 pt-2">
+              <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
+              <button
+                onClick={() => {
+                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", undefined);
+                  store.updateBlock(selectedBlock.block._key, updates);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          )}
+          <HoverEffectPicker
+            blockType={selectedBlock.block._type}
+            config={effectiveHoverEffect ?? getBlockHoverEffect(selectedBlock.block)}
+            onChange={(cfg) => {
+              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", cfg);
+              store.updateBlock(selectedBlock.block._key, updates);
+            }}
+          />
+        </div>
+        {isProjectGrid && pgBlock && (
+          <>
+            <div className="border-t border-neutral-200 my-1" />
+            <CardEntranceSection block={pgBlock} />
+          </>
+        )}
+      </>
+    );
+  }
+
+  // Page-level: generic enter animation (no hover at page level)
+  return (
+    <EnterAnimationPicker
+      mode={{ level: "page" }}
+      config={store.pageSettings.enter_animation}
+      onChange={(cfg) => {
+        store.updatePageSettings({ enter_animation: cfg });
+      }}
+    />
+  );
+}
+
+// ============================================
+// Column V2 Animation Tab — enter animation with inherit from section
+// ============================================
+
+function ColumnV2AnimationTab({
+  section,
+  column,
+}: {
+  section: PageSectionV2;
+  column: SectionColumn;
+}) {
+  const store = useBuilderStore();
+
+  return (
+    <EnterAnimationPicker
+      mode={{ level: "column", parentConfig: section.settings.enter_animation }}
+      config={column.enter_animation}
+      onChange={(cfg) => {
+        store.updateColumnEnterAnimation(section._key, column._key, cfg);
+      }}
+    />
+  );
+}
+
+// ============================================
+// Card Entrance Section — for ProjectGridBlock Animation tab
+// ============================================
+
+const ENTRANCE_PRESETS = [
+  { value: "fade", label: "Fade" },
+  { value: "slide-up", label: "Slide Up" },
+  { value: "scale", label: "Scale" },
+] as const;
+
+const CARD_ENTRANCE_SELECT_CLASS =
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+
+const CARD_ENTRANCE_SLIDER_CLASS =
+  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#076bff] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#076bff] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
+
+function CardEntranceSection({ block }: { block: ProjectGridBlock }) {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const entrance = block.card_entrance;
+  const enabled = entrance?.enabled ?? false;
+
+  const update = (updates: Partial<CardEntranceConfig>) => {
+    updateBlock(block._key, {
+      card_entrance: { ...entrance, ...updates },
+    } as Partial<ProjectGridBlock>);
+  };
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-center justify-between mb-2.5">
+        <span className="text-xs font-medium text-neutral-700">Card Entrance</span>
+        <button
+          type="button"
+          onClick={() => update({ enabled: !enabled })}
+          className={`relative w-8 h-[18px] rounded-full transition-colors ${
+            enabled ? "bg-[#076bff]" : "bg-neutral-300"
+          }`}
+        >
+          <span
+            className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow transition-transform ${
+              enabled ? "translate-x-[16px]" : "translate-x-[2px]"
+            }`}
+          />
+        </button>
+      </div>
+
+      {enabled && (
+        <div className="space-y-3">
+          {/* Preset — dropdown instead of segmented buttons */}
+          <div>
+            <label className="text-[11px] text-neutral-500 mb-1 block">Preset</label>
+            <select
+              value={entrance?.preset || "slide-up"}
+              onChange={(e) => update({ preset: e.target.value as "fade" | "slide-up" | "scale" })}
+              className={CARD_ENTRANCE_SELECT_CLASS}
+            >
+              {ENTRANCE_PRESETS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Stagger delay */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-[11px] text-neutral-500">Stagger</label>
+              <span className="text-[11px] text-neutral-500 tabular-nums">
+                {entrance?.stagger_delay ?? 80}ms
+              </span>
+            </div>
+            <input
+              type="range"
+              min={0}
+              max={5000}
+              step={10}
+              value={entrance?.stagger_delay ?? 80}
+              onChange={(e) => update({ stagger_delay: Number(e.target.value) })}
+              className={CARD_ENTRANCE_SLIDER_CLASS}
+            />
+          </div>
+
+          {/* Duration */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-[11px] text-neutral-500">Duration</label>
+              <span className="text-[11px] text-neutral-500 tabular-nums">
+                {entrance?.duration ?? 500}ms
+              </span>
+            </div>
+            <input
+              type="range"
+              min={200}
+              max={5000}
+              step={50}
+              value={entrance?.duration ?? 500}
+              onChange={(e) => update({ duration: Number(e.target.value) })}
+              className={CARD_ENTRANCE_SLIDER_CLASS}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================
+// Custom Section Instance Settings — Edit & Detach actions
+// ============================================
+
+function CustomSectionSettings({ instance }: { instance: CustomSectionInstance }) {
+  const store = useBuilderStore();
+  const [showDetachConfirm, setShowDetachConfirm] = useState(false);
+  const [sectionData, setSectionData] = useState<PageSectionV2 | null>(null);
+  const [loadingEdit, setLoadingEdit] = useState(false);
+
+  // Fetch section data for detach
+  useEffect(() => {
+    let cancelled = false;
+    fetch(`/api/custom-sections/${instance.custom_section_id}`)
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => {
+        if (!cancelled && data?.section) setSectionData(data.section);
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [instance.custom_section_id]);
+
+  const handleEdit = useCallback(async () => {
+    setLoadingEdit(true);
+    try {
+      const res = await fetch(`/api/admin/custom-sections/${instance.custom_section_slug}`);
+      if (!res.ok) throw new Error("Failed to load section");
+      const data = await res.json();
+
+      const remoteTitle = data.section.title;
+      if (remoteTitle && remoteTitle !== instance.custom_section_title) {
+        store.updateCustomSectionInstanceTitle(instance._key, remoteTitle);
+      }
+
+      store.enterSectionEditor(
+        instance.custom_section_slug,
+        remoteTitle,
+        data.section.section
+      );
+    } catch {
+      if (sectionData) {
+        store.enterSectionEditor(
+          instance.custom_section_slug,
+          instance.custom_section_title,
+          sectionData
+        );
+      }
+    } finally {
+      setLoadingEdit(false);
+    }
+  }, [instance, sectionData, store]);
+
+  const handleDetach = useCallback(() => {
+    if (!sectionData) return;
+    store.detachCustomSectionInstance(instance._key, sectionData);
+    setShowDetachConfirm(false);
+  }, [instance._key, sectionData, store]);
+
+  return (
+    <div className="px-4 py-3 space-y-3">
+      {/* Linked badge */}
+      <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[#f3f0ff] border border-[#8b5cf6]/20">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" strokeWidth="2" strokeLinecap="round" className="shrink-0">
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+        </svg>
+        <span className="text-[11px] text-[#8b5cf6] font-medium truncate">
+          Linked Section
+        </span>
+      </div>
+
+      {/* Edit button */}
+      <button
+        onClick={handleEdit}
+        disabled={loadingEdit}
+        className="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium text-white transition-colors disabled:opacity-50"
+        style={{ backgroundColor: BUILDER_VIOLET }}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+          <path d="m15 5 4 4" />
+        </svg>
+        {loadingEdit ? "Loading..." : "Edit Section"}
+      </button>
+      <p className="text-[10px] text-neutral-400 -mt-1">
+        Changes apply to all pages using this section.
+      </p>
+
+      {/* Detach button */}
+      <button
+        onClick={() => setShowDetachConfirm(true)}
+        disabled={!sectionData}
+        className="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium text-neutral-600 bg-[#f5f5f5] hover:bg-[#ebebeb] transition-colors disabled:opacity-30"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <path d="M18.84 12.25l1.72-1.71a5 5 0 0 0-7.07-7.07l-3 3a5 5 0 0 0 .54 7.54" />
+          <path d="M5.16 11.75l-1.72 1.71a5 5 0 0 0 7.07 7.07l3-3a5 5 0 0 0-.54-7.54" />
+          <line x1="2" y1="2" x2="22" y2="22" />
+        </svg>
+        Detach
+      </button>
+      <p className="text-[10px] text-neutral-400 -mt-1">
+        Convert to an independent inline section on this page.
+      </p>
+
+      {/* Detach confirmation dialog */}
+      {showDetachConfirm && (
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
+          onClick={(e) => { e.stopPropagation(); setShowDetachConfirm(false); }}
+        >
+          <div
+            className="bg-white rounded-lg border border-[#e5e5e5] p-6 max-w-sm shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-neutral-900 text-sm font-medium mb-2">Detach section?</h3>
+            <p className="text-neutral-500 text-xs mb-4">
+              This will create an independent copy of &ldquo;{instance.custom_section_title}&rdquo;.
+              Future changes to the saved section won&apos;t affect this page.
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setShowDetachConfirm(false)}
+                className="px-3 py-1.5 text-sm text-neutral-500 hover:text-neutral-900 rounded border border-[#e5e5e5] hover:border-[#ccc] transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDetach}
+                className="px-3 py-1.5 text-sm text-white rounded font-medium transition-colors"
+                style={{ backgroundColor: BUILDER_VIOLET }}
+              >
+                Detach
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+