@morphika/andami 0.1.9 → 0.2.0

package/components/builder/editors/section-icons.tsx

@@ -0,0 +1,492 @@
+/**
+ * section-icons.tsx — Centralized colored section header icons.
+ *
+ * Single source of truth for ALL SettingsSection icons across the builder.
+ * Each concept (Spacing, Background, Border, etc.) has one icon + one color,
+ * used consistently everywhere it appears (blocks, sections, pages, etc.).
+ *
+ * Color palette (semantic grouping):
+ *   Amber   #d97706 / #fef3c7  — Spacing, Style
+ *   Rose    #e11d48 / #ffe4e6  — Offset
+ *   Indigo  #6366f1 / #e0e7ff  — Background, Cover Background
+ *   Slate   #475569 / #f1f5f9  — Border
+ *   Blue    #2563eb / #dbeafe  — Typography, Grid, Grid Gaps, Column Size
+ *   Cyan    #0891b2 / #cffafe  — Content, Source, Images, Projects
+ *   Green   #059669 / #d1fae5  — Animation, Stagger, Transition
+ *   Purple  #7c3aed / #ede9fe  — Position, Link, Alignment
+ *   Orange  #ea580c / #ffedd5  — Appearance, Cover Effects
+ *   Teal    #0d9488 / #ccfbf1  — Layout, Layout Preset
+ *   Sky     #0284c7 / #e0f2fe  — Playback, Video, Height
+ *   Pink    #db2777 / #fce7f3  — Options, CTA Button
+ *   Neutral #525252 / #f5f5f5  — General, Info, SEO
+ *   Violet  #8b5cf6 / #ede9fe  — Navigation, Navbar Color
+ *   Red     #dc2626 / #fee2e2  — Overlay
+ *
+ * Session 163: Created — unified icon system for the entire builder.
+ */
+
+import type { ReactNode } from "react";
+
+// ============================================
+// Icon + color definitions
+// ============================================
+
+export interface SectionIconDef {
+  icon: ReactNode;
+  color: string;    // stroke/fill color for the SVG
+  bg: string;       // background pill color
+}
+
+// ── Spacing (Amber) ──
+export function SpacingIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" strokeDasharray="4 2" />
+      <rect x="7" y="7" width="10" height="10" rx="1" />
+    </svg>
+  );
+}
+SpacingIcon.bg = "#fef3c7";
+
+// ── Offset (Rose) ──
+export function OffsetIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="14" height="14" rx="2" strokeDasharray="4 2" opacity="0.5" />
+      <rect x="7" y="7" width="14" height="14" rx="2" />
+      <path d="M5 5 L7 7" strokeWidth="1.5" />
+    </svg>
+  );
+}
+OffsetIcon.bg = "#ffe4e6";
+
+// ── Background (Indigo) ──
+export function BackgroundIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <polyline points="21 15 16 10 5 21" />
+    </svg>
+  );
+}
+BackgroundIcon.bg = "#e0e7ff";
+
+// ── Border (Slate) ──
+export function BorderIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#475569" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="3" />
+      <path d="M3 9 L21 9" strokeWidth="1.5" opacity="0.5" />
+    </svg>
+  );
+}
+BorderIcon.bg = "#f1f5f9";
+
+// ── Alignment (Purple) ──
+export function AlignmentIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="18" y1="10" x2="6" y2="10" />
+      <line x1="21" y1="6" x2="3" y2="6" />
+      <line x1="15" y1="14" x2="9" y2="14" />
+      <line x1="18" y1="18" x2="6" y2="18" />
+    </svg>
+  );
+}
+AlignmentIcon.bg = "#ede9fe";
+
+// ── Typography (Blue) ──
+export function TypographyIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="4 7 4 4 20 4 20 7" />
+      <line x1="9" y1="20" x2="15" y2="20" />
+      <line x1="12" y1="4" x2="12" y2="20" />
+    </svg>
+  );
+}
+TypographyIcon.bg = "#dbeafe";
+
+// ── Grid / Grid Gaps (Blue) ──
+export function GridIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="7" height="7" />
+      <rect x="14" y="3" width="7" height="7" />
+      <rect x="14" y="14" width="7" height="7" />
+      <rect x="3" y="14" width="7" height="7" />
+    </svg>
+  );
+}
+GridIcon.bg = "#dbeafe";
+
+// ── Grid Gaps (Blue — slightly different icon) ──
+export function GridGapsIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="7" height="7" rx="1" />
+      <rect x="14" y="3" width="7" height="7" rx="1" />
+      <rect x="3" y="14" width="7" height="7" rx="1" />
+      <rect x="14" y="14" width="7" height="7" rx="1" />
+      <line x1="12" y1="3" x2="12" y2="21" strokeDasharray="2 2" opacity="0.5" />
+      <line x1="3" y1="12" x2="21" y2="12" strokeDasharray="2 2" opacity="0.5" />
+    </svg>
+  );
+}
+GridGapsIcon.bg = "#dbeafe";
+
+// ── Column Size (Blue) ──
+export function ColumnSizeIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <line x1="9" y1="4" x2="9" y2="20" />
+      <path d="M4 12 L7 12" />
+      <path d="M11 12 L20 12" />
+    </svg>
+  );
+}
+ColumnSizeIcon.bg = "#dbeafe";
+
+// ── Layout Preset (Teal) ──
+export function LayoutPresetIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0d9488" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <line x1="9" y1="3" x2="9" y2="21" />
+      <line x1="3" y1="12" x2="9" y2="12" />
+    </svg>
+  );
+}
+LayoutPresetIcon.bg = "#ccfbf1";
+
+// ── Layout (Teal) ──
+export function LayoutIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0d9488" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <line x1="3" y1="9" x2="21" y2="9" />
+      <line x1="9" y1="9" x2="9" y2="21" />
+    </svg>
+  );
+}
+LayoutIcon.bg = "#ccfbf1";
+
+// ── Content / Source (Cyan) ──
+export function ContentIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0891b2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+    </svg>
+  );
+}
+ContentIcon.bg = "#cffafe";
+
+// ── Source (Cyan) ──
+export function SourceIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0891b2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </svg>
+  );
+}
+SourceIcon.bg = "#cffafe";
+
+// ── Images (Cyan) ──
+export function ImagesIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0891b2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <polyline points="21 15 16 10 5 21" />
+    </svg>
+  );
+}
+ImagesIcon.bg = "#cffafe";
+
+// ── Projects (Cyan) ──
+export function ProjectsIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0891b2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="7" rx="2" />
+      <rect x="3" y="14" width="18" height="7" rx="2" />
+      <circle cx="7" cy="6.5" r="1" />
+      <circle cx="7" cy="17.5" r="1" />
+      <line x1="10" y1="6.5" x2="17" y2="6.5" />
+      <line x1="10" y1="17.5" x2="17" y2="17.5" />
+    </svg>
+  );
+}
+ProjectsIcon.bg = "#cffafe";
+
+// ── Text (Cyan) ──
+export function TextIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0891b2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="17" y1="10" x2="3" y2="10" />
+      <line x1="21" y1="6" x2="3" y2="6" />
+      <line x1="21" y1="14" x2="3" y2="14" />
+      <line x1="17" y1="18" x2="3" y2="18" />
+    </svg>
+  );
+}
+TextIcon.bg = "#cffafe";
+
+// ── Columns (Blue) ──
+export function ColumnsIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <line x1="9" y1="3" x2="9" y2="21" />
+      <line x1="15" y1="3" x2="15" y2="21" />
+    </svg>
+  );
+}
+ColumnsIcon.bg = "#dbeafe";
+
+// ── Appearance (Orange) ──
+export function AppearanceIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ea580c" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 3 A9 9 0 0 1 12 21 Z" fill="#ea580c" opacity="0.2" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+AppearanceIcon.bg = "#ffedd5";
+
+// ── Style (Amber) ──
+export function StyleIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="13.5" cy="6.5" r="2.5" />
+      <path d="M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5z" />
+    </svg>
+  );
+}
+StyleIcon.bg = "#fef3c7";
+
+// ── Animation / Entrance (Green) ──
+export function AnimationIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M5 12h14" />
+      <path d="M12 5l7 7-7 7" />
+    </svg>
+  );
+}
+AnimationIcon.bg = "#d1fae5";
+
+// ── Stagger Children (Green) ──
+export function StaggerIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="4" y1="6" x2="14" y2="6" />
+      <line x1="7" y1="12" x2="17" y2="12" />
+      <line x1="10" y1="18" x2="20" y2="18" />
+    </svg>
+  );
+}
+StaggerIcon.bg = "#d1fae5";
+
+// ── Transition Effect (Green) ──
+export function TransitionIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2" y="7" width="8" height="10" rx="2" opacity="0.5" />
+      <rect x="14" y="7" width="8" height="10" rx="2" />
+      <path d="M10 12 L14 12" />
+      <path d="M12 10 L14 12 L12 14" />
+    </svg>
+  );
+}
+TransitionIcon.bg = "#d1fae5";
+
+// ── Position (Purple) ──
+export function PositionIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  );
+}
+PositionIcon.bg = "#ede9fe";
+
+// ── Link (Purple) ──
+export function LinkIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <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>
+  );
+}
+LinkIcon.bg = "#ede9fe";
+
+// ── Video (Sky) ──
+export function VideoIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0284c7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2" y="4" width="14" height="16" rx="2" />
+      <path d="M16 10 L22 7 L22 17 L16 14 Z" />
+    </svg>
+  );
+}
+VideoIcon.bg = "#e0f2fe";
+
+// ── Playback (Sky) ──
+export function PlaybackIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0284c7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="9" />
+      <polygon points="10 8 16 12 10 16" fill="#0284c7" opacity="0.3" />
+    </svg>
+  );
+}
+PlaybackIcon.bg = "#e0f2fe";
+
+// ── Height (Sky) ──
+export function HeightIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0284c7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 4 L12 20" />
+      <path d="M8 8 L12 4 L16 8" />
+      <path d="M8 16 L12 20 L16 16" />
+    </svg>
+  );
+}
+HeightIcon.bg = "#e0f2fe";
+
+// ── Options / CTA Button (Pink) ──
+export function OptionsIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#db2777" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+  );
+}
+OptionsIcon.bg = "#fce7f3";
+
+// ── CTA Button (Pink) ──
+export function CTAButtonIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#db2777" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="8" width="18" height="8" rx="3" />
+      <line x1="8" y1="12" x2="16" y2="12" />
+    </svg>
+  );
+}
+CTAButtonIcon.bg = "#fce7f3";
+
+// ── Settings (Amber) — generic ──
+export function SettingsIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </svg>
+  );
+}
+SettingsIcon.bg = "#fef3c7";
+
+// ── General / Info (Neutral) ──
+export function GeneralIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="9" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  );
+}
+GeneralIcon.bg = "#f5f5f5";
+
+// ── Info (Neutral) ──
+export function InfoIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="9" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  );
+}
+InfoIcon.bg = "#f5f5f5";
+
+// ── SEO (Neutral) ──
+export function SEOIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+  );
+}
+SEOIcon.bg = "#f5f5f5";
+
+// ── Navigation (Violet) ──
+export function NavigationIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="3" y1="12" x2="21" y2="12" />
+      <line x1="3" y1="6" x2="21" y2="6" />
+      <line x1="3" y1="18" x2="21" y2="18" />
+    </svg>
+  );
+}
+NavigationIcon.bg = "#ede9fe";
+
+// ── Navbar Color (Violet) ──
+export function NavbarColorIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="6" rx="2" />
+      <circle cx="7" cy="6" r="1.5" fill="#8b5cf6" opacity="0.3" />
+      <line x1="11" y1="6" x2="17" y2="6" />
+    </svg>
+  );
+}
+NavbarColorIcon.bg = "#ede9fe";
+
+// ── Overlay (Red) ──
+export function OverlayIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dc2626" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <rect x="3" y="3" width="18" height="18" rx="2" fill="#dc2626" opacity="0.15" />
+    </svg>
+  );
+}
+OverlayIcon.bg = "#fee2e2";
+
+// ── Cover Background (Indigo) ──
+export function CoverBackgroundIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M3 3 L21 21" opacity="0.4" />
+      <path d="M21 3 L3 21" opacity="0.4" />
+    </svg>
+  );
+}
+CoverBackgroundIcon.bg = "#e0e7ff";
+
+// ── Cover Effects (Orange) ──
+export function CoverEffectsIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ea580c" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
+    </svg>
+  );
+}
+CoverEffectsIcon.bg = "#ffedd5";

package/components/builder/editors/shared.tsx

@@ -153,8 +153,13 @@ export function SettingsField({
 // ============================================
 
 /**
- * Collapsible section: clean text header + thin border separator.
- * No gray background, no uppercase.
+ * Collapsible section with optional colored icon pill.
+ *
+ * When an `icon` is provided with a `bg` static property (from section-icons.tsx),
+ * it renders as a colored pill (26×26px rounded square with tinted background).
+ * Without `bg`, the icon renders inline in neutral gray (legacy behavior).
+ *
+ * Session 163: Upgraded to colored icon pills for visual consistency with nav builder.
  */
 export function SettingsSection({
   title,
@@ -169,14 +174,28 @@ export function SettingsSection({
 }) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
+  // Check if icon component has a `.bg` property (colored icon from section-icons.tsx)
+  const iconBg = icon && typeof icon === "object"
+    ? ((icon as unknown as { type?: { bg?: string } }).type?.bg ?? null)
+    : null;
+
   return (
     <div className="border-b border-[#f0f0f0] last:border-b-0">
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="w-full flex items-center justify-between px-4 py-3 transition-colors hover:bg-[#fafafa] group"
       >
-        <span className="flex items-center gap-1.5 text-xs font-medium text-neutral-900">
-          {icon && <span className="text-neutral-400 flex-shrink-0">{icon}</span>}
+        <span className="flex items-center gap-2 text-xs font-medium text-neutral-900">
+          {icon && iconBg ? (
+            <span
+              className="w-[26px] h-[26px] rounded-[7px] flex items-center justify-center shrink-0"
+              style={{ background: iconBg }}
+            >
+              {icon}
+            </span>
+          ) : icon ? (
+            <span className="text-neutral-400 flex-shrink-0">{icon}</span>
+          ) : null}
           {title}
         </span>
         <span className="text-base text-neutral-300 font-light leading-none transition-colors group-hover:text-neutral-500">

package/components/builder/live-preview/LiveTextEditor.tsx

@@ -149,7 +149,7 @@ export default function LiveTextEditor({ block, editable = false }: { block: Tex
     fontFamily: "inherit",
     outline: "none",
     whiteSpace: "pre-wrap",
-    wordBreak: "break-word",
+    wordBreak: "normal",
     minHeight: "1em",
     // Multi-column layout: gap inherits global grid gutter
     ...(cols ? {

package/components/builder/live-preview/ProjectCardWrapper.tsx

@@ -11,7 +11,7 @@
 import { useState, useCallback, useRef } from "react";
 import { ProjectGridCard } from "./shared";
 import { useBuilderStore } from "../../../lib/builder/store";
-import { ADMIN_BLUE, DROP_GREEN, CrossArrowIcon } from "./drag-utils";
+import { ADMIN_BLUE, DROP_BLUE, CrossArrowIcon } from "./drag-utils";
 import type { ProjectGridItem } from "../../../lib/sanity/types";
 
 // ─── Props ───────────────────────────────────────────────────────────
@@ -278,11 +278,11 @@ export default function ProjectCardWrapper({
           style={{
             position: "absolute",
             inset: 0,
-            backgroundColor: "rgba(34,197,94,0.30)",
+            backgroundColor: "rgba(7,107,255,0.30)",
             borderRadius: br,
             pointerEvents: "none",
             zIndex: 5,
-            border: `2px solid ${DROP_GREEN}`,
+            border: `2px solid ${DROP_BLUE}`,
           }}
         />
       )}

package/components/builder/live-preview/drag-utils.tsx

@@ -7,7 +7,7 @@
  * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B1).
  */
 
-import { BUILDER_BLUE, BUILDER_GREEN } from "../../../lib/builder/constants";
+import { BUILDER_BLUE } from "../../../lib/builder/constants";
 import type { MasonryOutput } from "../../../lib/builder/masonry";
 
 // ─── Constants ───────────────────────────────────────────────────────
@@ -16,7 +16,7 @@ export const HOLD_DELAY = 150; // ms before card-body drag activates
 export const MOVE_THRESHOLD_SQ = 9; // 3px² — grabbed → dragging
 export const CANCEL_DURATION = 200; // ms — cancel fly-back animation
 export const ADMIN_BLUE = BUILDER_BLUE;
-export const DROP_GREEN = BUILDER_GREEN;
+export const DROP_BLUE = BUILDER_BLUE;
 
 // ─── Types ───────────────────────────────────────────────────────────
 

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

@@ -7,7 +7,7 @@
  */
 
 import { useBuilderStore } from "../../../lib/builder/store";
-import type { ContentBlock, PageSection, ProjectGridBlock } from "../../../lib/sanity/types";
+import type { ContentBlock, ProjectGridBlock } from "../../../lib/sanity/types";
 import type { HoverEffectConfig } from "../../../lib/animation/hover-effect-types";
 import EnterAnimationPicker from "../editors/EnterAnimationPicker";
 import HoverEffectPicker from "../editors/HoverEffectPicker";
@@ -32,25 +32,11 @@ export function getBlockHoverEffect(block: ContentBlock): HoverEffectConfig | un
 
 interface AnimationTabProps {
   selectedBlock: { block: ContentBlock; rowKey: string; colKey: string; isSection: boolean } | null;
-  selectedSection: PageSection | null;
 }
 
-export function AnimationTab({ selectedBlock, selectedSection }: AnimationTabProps) {
+export function AnimationTab({ selectedBlock }: AnimationTabProps) {
   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";