@morphika/andami 0.1.9 → 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/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/settings-panel/BlockLayoutTab.tsx

@@ -145,59 +145,14 @@ function AlignmentButtons<T extends string>({
   );
 }
 
-// ── Section title icons (small, inline) ──
-
-function AlignmentSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1" y="2" width="9" height="2" rx="0.5" fill="currentColor" opacity="0.7" />
-      <rect x="3" y="6" width="8" height="2" rx="0.5" fill="currentColor" opacity="0.5" />
-      <rect x="2" y="10" width="10" height="2" rx="0.5" fill="currentColor" opacity="0.7" />
-    </svg>
-  );
-}
-
-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 {
+  AlignmentIcon,
+  SpacingIcon,
+  OffsetIcon,
+  BackgroundIcon,
+  BorderIcon,
+} from "../editors/section-icons";
 
 // ── Override indicator badge ──
 
@@ -287,7 +242,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       )}
 
       {/* Alignment */}
-      <SettingsSection title="Alignment" defaultOpen icon={<AlignmentSectionIcon />}>
+      <SettingsSection title="Alignment" defaultOpen icon={<AlignmentIcon />}>
         <SettingsField label="Horizontal">
           <AlignmentButtons<AlignH>
             options={[
@@ -329,7 +284,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       </SettingsSection>
 
       {/* Spacing (Padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingSectionIcon />}>
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
         <TRBLInputs
           top={getBlockLayoutValue<string>(block, activeViewport, "spacing_top", "0")}
           right={getBlockLayoutValue<string>(block, activeViewport, "spacing_right", "0")}
@@ -348,7 +303,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       </SettingsSection>
 
       {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
+      <SettingsSection title="Offset" icon={<OffsetIcon />}>
         <TRBLInputs
           top={getBlockLayoutValue<string>(block, activeViewport, "offset_top", "0")}
           right={getBlockLayoutValue<string>(block, activeViewport, "offset_right", "0")}
@@ -367,7 +322,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       </SettingsSection>
 
       {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "background_color", ""))}
@@ -466,7 +421,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       </SettingsSection>
 
       {/* Border */}
-      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
+      <SettingsSection title="Border" icon={<BorderIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "border_color", ""))}