@morphika/andami 0.1.8 → 0.1.10

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/GhostCard.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+/**
+ * GhostCard — Floating card that follows the cursor during drag.
+ * Portaled to document.body by the parent to escape canvas CSS transforms.
+ *
+ * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B3).
+ */
+
+import { ProjectGridCard } from "./shared";
+import { ADMIN_BLUE, CANCEL_DURATION, CrossArrowIcon, type DragState } from "./drag-utils";
+import type { ProjectGridItem } from "../../../lib/sanity/types";
+
+export default function GhostCard({
+  item,
+  thumbMap,
+  borderRadius,
+  dragState,
+}: {
+  item: ProjectGridItem;
+  thumbMap: Map<string, string | undefined>;
+  borderRadius: number;
+  dragState: DragState;
+}) {
+  const isCancelling = dragState.phase === "cancelling";
+  return (
+    <div
+      style={{
+        position: "fixed",
+        left: dragState.mouseX - dragState.offsetX,
+        top: dragState.mouseY - dragState.offsetY,
+        width: dragState.cardWidth,
+        height: dragState.cardHeight,
+        zIndex: 9999,
+        pointerEvents: "none",
+        borderRadius: borderRadius > 0 ? borderRadius : 8,
+        overflow: "hidden",
+        transform: isCancelling ? "scale(1)" : "scale(1.03)",
+        outline: `2px solid ${ADMIN_BLUE}`,
+        outlineOffset: -2,
+        boxShadow: isCancelling
+          ? "0 4px 16px rgba(0,0,0,0.15)"
+          : "0 16px 48px rgba(0,0,0,0.3)",
+        transition: isCancelling
+          ? `left ${CANCEL_DURATION}ms ease, top ${CANCEL_DURATION}ms ease, transform ${CANCEL_DURATION}ms ease, box-shadow ${CANCEL_DURATION}ms ease`
+          : undefined,
+      }}
+    >
+      <ProjectGridCard
+        slug={item.project_slug}
+        thumbPath={thumbMap.get(item.project_slug)}
+        customThumb={item.custom_thumbnail}
+        borderRadius={borderRadius > 0 ? String(borderRadius) : undefined}
+        style={{ width: "100%", height: "100%" }}
+      />
+      {/* Centered cross-arrow icon */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none",
+        }}
+      >
+        <div
+          style={{
+            width: 40,
+            height: 40,
+            borderRadius: "50%",
+            backgroundColor: "rgba(255,255,255,0.92)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 2px 12px rgba(0,0,0,0.2)",
+          }}
+        >
+          <CrossArrowIcon size={20} color="#333" />
+        </div>
+      </div>
+    </div>
+  );
+}