@morphika/andami 0.1.8 → 0.1.10

package/components/builder/settings-panel/CardEntranceSection.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+/**
+ * CardEntranceSection — Toggle + preset/stagger/duration controls for
+ * ProjectGrid card entrance animations.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ProjectGridBlock, CardEntranceConfig } from "../../../lib/sanity/types";
+
+export const ENTRANCE_PRESETS = [
+  { value: "fade", label: "Fade" },
+  { value: "slide-up", label: "Slide Up" },
+  { value: "scale", label: "Scale" },
+] as const;
+
+export 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)]";
+
+export 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";
+
+export 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>
+  );
+}

package/components/builder/settings-panel/ColumnV2AnimationTab.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+/**
+ * ColumnV2AnimationTab — Enter animation picker for V2 columns,
+ * inheriting from parent section config.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionColumn } from "../../../lib/sanity/types";
+import EnterAnimationPicker from "../editors/EnterAnimationPicker";
+
+export 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);
+      }}
+    />
+  );
+}

package/components/builder/settings-panel/ColumnV2Settings.tsx

@@ -16,6 +16,9 @@
 
 import { useBuilderStore } from "../../../lib/builder/store";
 import type { PageSectionV2, SectionColumn } from "../../../lib/sanity/types";
+import {
+  ColumnSizeIcon,
+} from "../editors/section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -90,7 +93,7 @@ export default function ColumnV2Settings({
         </div>
       )}
 
-      <SettingsSection title="Column Size" defaultOpen>
+      <SettingsSection title="Column Size" defaultOpen icon={<ColumnSizeIcon />}>
         <SettingsField label={
           <span>
             Span

package/components/builder/settings-panel/CustomSectionSettings.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+/**
+ * CustomSectionSettings — Edit & Detach actions for custom section instances.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import { BUILDER_VIOLET } from "../../../lib/builder/constants";
+import type { CustomSectionInstance, PageSectionV2 } from "../../../lib/sanity/types";
+
+export 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>
+  );
+}

package/components/builder/settings-panel/LayoutTab.tsx

@@ -29,49 +29,13 @@ import {
 } from "./responsive-helpers";
 import { TRBLInputs } from "./TRBLInputs";
 
-// ── Section title icons (matching BlockLayoutTab / SectionV2LayoutTab) ──
-
-function SpacingSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="4" y="4" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.5" />
-      <path d="M7 1 L7 3.5" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M7 10.5 L7 13" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M1 7 L3.5 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M10.5 7 L13 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-    </svg>
-  );
-}
-
-function OffsetSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="0.8" strokeDasharray="2 1" fill="none" opacity="0.35" />
-      <rect x="5" y="5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
-      <path d="M4 4 L5 5" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
-    </svg>
-  );
-}
-
-function BackgroundSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" fill="currentColor" opacity="0.15" />
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="0.8" opacity="0.5" fill="none" />
-      <circle cx="5" cy="5" r="1.5" fill="currentColor" opacity="0.5" />
-      <path d="M1.5 10 L5 7 L8 9 L10.5 6.5 L12.5 8.5 L12.5 11 C12.5 11.8 11.8 12.5 11 12.5 L3 12.5 C2.2 12.5 1.5 11.8 1.5 11 Z" fill="currentColor" opacity="0.3" />
-    </svg>
-  );
-}
-
-function BorderSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.6" />
-      <rect x="2" y="2" width="10" height="1.2" rx="0.5" fill="currentColor" opacity="0.7" />
-    </svg>
-  );
-}
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  SpacingIcon,
+  OffsetIcon,
+  BackgroundIcon,
+  BorderIcon,
+} from "../editors/section-icons";
 
 /**
  * BUG-007 fix: LayoutTab now handles PageSection styling (spacing, background, border).
@@ -141,7 +105,7 @@ export function LayoutTab({ section, sectionKey }: { section: PageSection; secti
       )}
 
       {/* Spacing (Padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingSectionIcon />}>
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
         <TRBLInputs
           top={effectiveSpacingTop}
           right={effectiveSpacingRight}
@@ -192,7 +156,7 @@ export function LayoutTab({ section, sectionKey }: { section: PageSection; secti
       </SettingsSection>
 
       {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
+      <SettingsSection title="Offset" icon={<OffsetIcon />}>
         <TRBLInputs
           top={getRowSettingValue<string>(section, activeViewport, "offset_top", "0")}
           right={getRowSettingValue<string>(section, activeViewport, "offset_right", "0")}
@@ -205,7 +169,7 @@ export function LayoutTab({ section, sectionKey }: { section: PageSection; secti
       </SettingsSection>
 
       {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getRowSettingValue<string>(section, activeViewport, "background_color", ""))}
@@ -305,7 +269,7 @@ export function LayoutTab({ section, sectionKey }: { section: PageSection; secti
       </SettingsSection>
 
       {/* Border */}
-      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
+      <SettingsSection title="Border" icon={<BorderIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getRowSettingValue<string>(section, activeViewport, "border_color", ""))}

package/components/builder/settings-panel/PageSettings.tsx

@@ -11,6 +11,12 @@
 
 import { useState } from "react";
 import { useBuilderStore } from "../../../lib/builder/store";
+import {
+  GeneralIcon,
+  AppearanceIcon,
+  NavigationIcon,
+  SEOIcon,
+} from "../editors/section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -39,7 +45,7 @@ export default function PageSettings() {
 
   return (
     <>
-      <SettingsSection title="General" defaultOpen>
+      <SettingsSection title="General" defaultOpen icon={<GeneralIcon />}>
         <SettingsField label="Title">
           <input
             type="text"
@@ -73,7 +79,7 @@ export default function PageSettings() {
         </SettingsField>
       </SettingsSection>
 
-      <SettingsSection title="Appearance" defaultOpen>
+      <SettingsSection title="Appearance" defaultOpen icon={<AppearanceIcon />}>
         <SettingsField label="Background">
           <ColorSwatchPicker
             value={parseColorField(store.pageSettings.background_color || "")}
@@ -91,7 +97,7 @@ export default function PageSettings() {
         </SettingsField>
       </SettingsSection>
 
-      <SettingsSection title="Navigation">
+      <SettingsSection title="Navigation" icon={<NavigationIcon />}>
         <SettingsField label="Nav Color">
           <ColorSwatchPicker
             value={store.pageSettings.nav_color || ""}
@@ -164,7 +170,7 @@ export function PageSeoSettings() {
 
   return (
     <>
-      <SettingsSection title="SEO" defaultOpen>
+      <SettingsSection title="SEO" defaultOpen icon={<SEOIcon />}>
         <SettingsField label="SEO Title">
           <input
             type="text"

package/components/builder/settings-panel/ParallaxGroupSettings.tsx

@@ -14,6 +14,10 @@
 
 import { useBuilderStore } from "../../../lib/builder/store";
 import type { ParallaxGroup } from "../../../lib/sanity/types";
+import {
+  TransitionIcon,
+  InfoIcon,
+} from "../editors/section-icons";
 import {
   SettingsSection,
 } from "../editors/shared";
@@ -56,7 +60,7 @@ export default function ParallaxGroupSettings({
 
   return (
     <>
-      <SettingsSection title="Transition Effect" defaultOpen>
+      <SettingsSection title="Transition Effect" defaultOpen icon={<TransitionIcon />}>
         <div className="space-y-1.5">
           {TRANSITION_EFFECTS.map((effect) => {
             const isActive = activeEffect === effect.value;
@@ -103,7 +107,7 @@ export default function ParallaxGroupSettings({
       </SettingsSection>
 
       {/* Group info */}
-      <SettingsSection title="Info">
+      <SettingsSection title="Info" icon={<InfoIcon />}>
         <div className="text-[11px] text-neutral-500 space-y-1">
           <p>
             {group.slides.length} slide{group.slides.length !== 1 ? "s" : ""}

package/components/builder/settings-panel/ParallaxSlideSettings.tsx

@@ -19,6 +19,11 @@
 
 import { useBuilderStore } from "../../../lib/builder/store";
 import type { ParallaxSlideV2, ParallaxGroup, PageSectionV2 } from "../../../lib/sanity/types";
+import {
+  BackgroundIcon,
+  NavbarColorIcon,
+  OverlayIcon,
+} from "../editors/section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -70,7 +75,7 @@ export default function ParallaxSlideSettings({
   return (
     <>
       {/* Background Type */}
-      <SettingsSection title="Background" defaultOpen>
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         {/* Segmented control: Image / Video */}
         <SettingsField label="Type">
           <div className="flex rounded-lg bg-[#f0f0f0] p-[3px]">
@@ -123,7 +128,7 @@ export default function ParallaxSlideSettings({
       </SettingsSection>
 
       {/* Navbar Color Override */}
-      <SettingsSection title="Navbar Color" defaultOpen={false}>
+      <SettingsSection title="Navbar Color" defaultOpen={false} icon={<NavbarColorIcon />}>
         <SettingsField label="Color">
           <div className="flex items-center gap-2">
             <ColorSwatchPicker
@@ -147,7 +152,7 @@ export default function ParallaxSlideSettings({
       </SettingsSection>
 
       {/* Overlay */}
-      <SettingsSection title="Overlay" defaultOpen>
+      <SettingsSection title="Overlay" defaultOpen icon={<OverlayIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={overlayColor}

package/components/builder/settings-panel/SectionV2LayoutTab.tsx

@@ -25,49 +25,13 @@ import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
 import { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
 import { TRBLInputs } from "./TRBLInputs";
 
-// ── Section title icons (matching BlockLayoutTab) ──
-
-function SpacingSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="4" y="4" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.5" />
-      <path d="M7 1 L7 3.5" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M7 10.5 L7 13" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M1 7 L3.5 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M10.5 7 L13 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-    </svg>
-  );
-}
-
-function BackgroundSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" fill="currentColor" opacity="0.15" />
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="0.8" opacity="0.5" fill="none" />
-      <circle cx="5" cy="5" r="1.5" fill="currentColor" opacity="0.5" />
-      <path d="M1.5 10 L5 7 L8 9 L10.5 6.5 L12.5 8.5 L12.5 11 C12.5 11.8 11.8 12.5 11 12.5 L3 12.5 C2.2 12.5 1.5 11.8 1.5 11 Z" fill="currentColor" opacity="0.3" />
-    </svg>
-  );
-}
-
-function OffsetSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="0.8" strokeDasharray="2 1" fill="none" opacity="0.35" />
-      <rect x="5" y="5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
-      <path d="M4 4 L5 5" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
-    </svg>
-  );
-}
-
-function BorderSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.6" />
-      <rect x="2" y="2" width="10" height="1.2" rx="0.5" fill="currentColor" opacity="0.7" />
-    </svg>
-  );
-}
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  SpacingIcon,
+  OffsetIcon,
+  BackgroundIcon,
+  BorderIcon,
+} from "../editors/section-icons";
 
 // ── Override indicator badge (matching BlockLayoutTab pattern) ──
 
@@ -179,7 +143,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       )}
 
       {/* Spacing (Padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingSectionIcon />}>
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
         <TRBLInputs
           top={getSettingValue<string>("spacing_top", "0")}
           right={getSettingValue<string>("spacing_right", "0")}
@@ -197,7 +161,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       </SettingsSection>
 
       {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
+      <SettingsSection title="Offset" icon={<OffsetIcon />}>
         <TRBLInputs
           top={getSettingValue<string>("offset_top", "0")}
           right={getSettingValue<string>("offset_right", "0")}
@@ -215,7 +179,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       </SettingsSection>
 
       {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getSettingValue<string>("background_color", ""))}
@@ -309,7 +273,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       </SettingsSection>
 
       {/* Border */}
-      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
+      <SettingsSection title="Border" icon={<BorderIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getSettingValue<string>("border_color", ""))}

package/components/builder/settings-panel/SectionV2Settings.tsx

@@ -50,32 +50,11 @@ const PRESETS: PresetOption[] = [
 
 const CUSTOM_PRESET: PresetOption = { id: "custom", label: "Custom", cols: [], readonly: true };
 
-// ============================================
-// Section title icons (small, inline)
-// ============================================
-
-function LayoutPresetIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="11" height="11" rx="1.5" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.4" />
-      <line x1="6" y1="1.5" x2="6" y2="12.5" stroke="currentColor" strokeWidth="0.8" opacity="0.6" />
-      <rect x="1.5" y="1.5" width="4.5" height="11" rx="0" fill="currentColor" opacity="0.12" />
-    </svg>
-  );
-}
-
-function GridGapIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1" y="1" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
-      <rect x="8" y="1" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
-      <rect x="1" y="8" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
-      <rect x="8" y="8" width="5" height="5" rx="1" fill="currentColor" opacity="0.25" />
-      <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" strokeWidth="0.8" strokeDasharray="1.5 1" opacity="0.5" />
-      <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" strokeWidth="0.8" strokeDasharray="1.5 1" opacity="0.5" />
-    </svg>
-  );
-}
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  LayoutPresetIcon,
+  GridGapsIcon,
+} from "../editors/section-icons";
 
 // ============================================
 // Preset Grid Component
@@ -278,7 +257,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
       )}
 
       {/* Gaps */}
-      <SettingsSection title="Grid Gaps" defaultOpen icon={<GridGapIcon />}>
+      <SettingsSection title="Grid Gaps" defaultOpen icon={<GridGapsIcon />}>
         <SettingsField label={
           <span>
             Col Gap