@morphika/andami 0.1.8 → 0.1.10

package/components/builder/editors/CoverBlockEditor.tsx

@@ -3,6 +3,14 @@
 import { useBuilderStore } from "../../../lib/builder/store";
 import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
 import type { CoverBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  ContentIcon,
+  CTAButtonIcon,
+  CoverBackgroundIcon,
+  CoverEffectsIcon,
+  LayoutIcon,
+  AppearanceIcon,
+} from "./section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -190,7 +198,7 @@ export default function CoverBlockEditor({ block }: Props) {
       <ViewportBadge />
 
       {/* ========== CONTENT ========== */}
-      <SettingsSection title="Content" defaultOpen>
+      <SettingsSection title="Content" defaultOpen icon={<ContentIcon />}>
         <SettingsField label="Headline">
           <StyledInput
             value={block.headline || ""}
@@ -211,7 +219,7 @@ export default function CoverBlockEditor({ block }: Props) {
       </SettingsSection>
 
       {/* ========== CTA BUTTON ========== */}
-      <SettingsSection title="CTA Button">
+      <SettingsSection title="CTA Button" icon={<CTAButtonIcon />}>
         <SettingsField label="Button Text">
           <StyledInput
             value={cta.text || ""}
@@ -264,7 +272,7 @@ export default function CoverBlockEditor({ block }: Props) {
       </SettingsSection>
 
       {/* ========== MEDIA BACKGROUND ========== */}
-      <SettingsSection title="Cover Background" defaultOpen>
+      <SettingsSection title="Cover Background" defaultOpen icon={<CoverBackgroundIcon />}>
         <SettingsField label="Media Type">
           <div className="flex gap-1">
             {(["image", "video"] as const).map((t) => (
@@ -355,7 +363,7 @@ export default function CoverBlockEditor({ block }: Props) {
       </SettingsSection>
 
       {/* ========== OVERLAY ========== */}
-      <SettingsSection title="Cover Effects">
+      <SettingsSection title="Cover Effects" icon={<CoverEffectsIcon />}>
         {/* Toggle: Custom gradient vs Preset overlay */}
         <SettingsField label="Overlay Mode">
           <div className="flex gap-1">
@@ -448,7 +456,7 @@ export default function CoverBlockEditor({ block }: Props) {
       </SettingsSection>
 
       {/* ========== LAYOUT ========== */}
-      <SettingsSection title="Layout">
+      <SettingsSection title="Layout" icon={<LayoutIcon />}>
         <ResponsiveField
           label="Content Pos"
           block={block as ContentBlock}
@@ -522,7 +530,7 @@ export default function CoverBlockEditor({ block }: Props) {
       </SettingsSection>
 
       {/* ========== APPEARANCE ========== */}
-      <SettingsSection title="Appearance">
+      <SettingsSection title="Appearance" icon={<AppearanceIcon />}>
         <SettingsField label="Text Color">
           <ColorSwatchPicker
             value={block.text_color || ""}

package/components/builder/editors/ImageBlockEditor.tsx

@@ -3,6 +3,11 @@
 import { useBuilderStore } from "../../../lib/builder/store";
 import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
 import type { ImageBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  SourceIcon,
+  LayoutIcon,
+  AppearanceIcon,
+} from "./section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -61,7 +66,7 @@ export default function ImageBlockEditor({ block }: Props) {
     <>
       <ViewportBadge />
 
-      <SettingsSection title="Source" defaultOpen>
+      <SettingsSection title="Source" defaultOpen icon={<SourceIcon />}>
         <SettingsField label="Asset Path" hint="Relative path from seed URL">
           <AssetPathInput
             value={block.asset_path || ""}
@@ -95,7 +100,7 @@ export default function ImageBlockEditor({ block }: Props) {
         </SettingsField>
       </SettingsSection>
 
-      <SettingsSection title="Layout">
+      <SettingsSection title="Layout" icon={<LayoutIcon />}>
         <ResponsiveField
           label="Width"
           block={block}
@@ -147,7 +152,7 @@ export default function ImageBlockEditor({ block }: Props) {
         </ResponsiveField>
       </SettingsSection>
 
-      <SettingsSection title="Appearance">
+      <SettingsSection title="Appearance" icon={<AppearanceIcon />}>
         <ResponsiveField
           label="Border Radius"
           block={block}

package/components/builder/editors/ImageGridBlockEditor.tsx

@@ -5,6 +5,11 @@ import { useBuilderStore } from "../../../lib/builder/store";
 import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
 import type { ImageGridBlock, ContentBlock } from "../../../lib/sanity/types";
 import AssetBrowser from "../AssetBrowser";
+import {
+  ImagesIcon,
+  SettingsIcon,
+  AppearanceIcon,
+} from "./section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -158,7 +163,7 @@ export default function ImageGridBlockEditor({ block }: Props) {
       <ViewportBadge />
 
       {/* ====== Images Section ====== */}
-      <SettingsSection title="Images" defaultOpen>
+      <SettingsSection title="Images" defaultOpen icon={<ImagesIcon />}>
         {/* Thumbnail grid preview */}
         {images.length > 0 && (
           <div className="grid grid-cols-4 gap-1.5 mb-3">
@@ -209,7 +214,7 @@ export default function ImageGridBlockEditor({ block }: Props) {
       </SettingsSection>
 
       {/* ====== Settings Section ====== */}
-      <SettingsSection title="Settings" defaultOpen>
+      <SettingsSection title="Settings" defaultOpen icon={<SettingsIcon />}>
         {/* H-Gutter & V-Gutter side by side */}
         <div className="flex gap-3">
           <ResponsiveField
@@ -336,7 +341,7 @@ export default function ImageGridBlockEditor({ block }: Props) {
       </SettingsSection>
 
       {/* ====== Appearance Section ====== */}
-      <SettingsSection title="Appearance">
+      <SettingsSection title="Appearance" icon={<AppearanceIcon />}>
         <ResponsiveField
           label="Object Fit"
           block={block}

package/components/builder/editors/ProjectGridEditor.tsx

@@ -232,52 +232,13 @@ function CardRatioChips({
   );
 }
 
-// ============================================
-// Section title icons (small, inline — matching BlockLayoutTab)
-// ============================================
-
-function GridSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="4.5" height="4.5" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.6" />
-      <rect x="8" y="1.5" width="4.5" height="4.5" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.6" />
-      <rect x="1.5" y="8" width="4.5" height="4.5" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.6" />
-      <rect x="8" y="8" width="4.5" height="4.5" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.6" />
-    </svg>
-  );
-}
-
-function AppearanceSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.5" />
-      <path d="M7 2 A5 5 0 0 1 7 12 Z" fill="currentColor" opacity="0.3" />
-      <circle cx="7" cy="7" r="1.5" fill="currentColor" opacity="0.6" />
-    </svg>
-  );
-}
-
-function VideoSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="3" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.5" />
-      <path d="M10 6 L12.5 4.5 L12.5 9.5 L10 8 Z" fill="currentColor" opacity="0.5" />
-    </svg>
-  );
-}
-
-function ProjectsSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="2" width="11" height="3" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.5" />
-      <rect x="1.5" y="7" width="11" height="3" rx="1" stroke="currentColor" strokeWidth="0.8" fill="none" opacity="0.5" />
-      <circle cx="4" cy="3.5" r="0.8" fill="currentColor" opacity="0.6" />
-      <circle cx="4" cy="8.5" r="0.8" fill="currentColor" opacity="0.6" />
-      <rect x="6" y="3" width="4" height="1" rx="0.5" fill="currentColor" opacity="0.4" />
-      <rect x="6" y="8" width="4" height="1" rx="0.5" fill="currentColor" opacity="0.4" />
-    </svg>
-  );
-}
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  GridIcon as GridSectionIcon,
+  AppearanceIcon as AppearanceSectionIcon,
+  VideoIcon as VideoSectionIcon,
+  ProjectsIcon as ProjectsSectionIcon,
+} from "./section-icons";
 
 // ============================================
 // Main Editor

package/components/builder/editors/SpacerBlockEditor.tsx

@@ -3,6 +3,9 @@
 import { useBuilderStore } from "../../../lib/builder/store";
 import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
 import type { SpacerBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  HeightIcon,
+} from "./section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -68,7 +71,7 @@ export default function SpacerBlockEditor({ block }: Props) {
     <>
       <ViewportBadge />
 
-      <SettingsSection title="Height" defaultOpen>
+      <SettingsSection title="Height" defaultOpen icon={<HeightIcon />}>
         <ResponsiveField
           label="Preset"
           block={block}

package/components/builder/editors/StaggerSettings.tsx

@@ -1,3 +1,4 @@
+import { StaggerIcon } from "./section-icons";
 import { SettingsSection, SettingsField } from "./shared";
 
 // ============================================
@@ -39,7 +40,7 @@ export default function StaggerSettings({
   const direction = stagger?.direction ?? "left-to-right";
 
   return (
-    <SettingsSection title="Stagger Children">
+    <SettingsSection title="Stagger Children" icon={<StaggerIcon />}>
       <div className="space-y-3">
         {/* Enable toggle */}
         <div className="flex items-center justify-between">

package/components/builder/editors/TextBlockEditor.tsx

@@ -5,6 +5,11 @@ import { useBuilderStore } from "../../../lib/builder/store";
 import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
 import type { TextBlock, ContentBlock } from "../../../lib/sanity/types";
 import type { DeviceViewport } from "../../../lib/builder/types";
+import {
+  TextIcon,
+  TypographyIcon,
+  ColumnsIcon,
+} from "./section-icons";
 import {
   SettingsSection,
   SettingsField,
@@ -267,7 +272,7 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
       <ViewportBadge />
 
       {/* Text section: Style, Color, Align */}
-      <SettingsSection title="Text" defaultOpen>
+      <SettingsSection title="Text" defaultOpen icon={<TextIcon />}>
         <SettingsField label="Style">
           <TextStylePicker
             presets={presets}
@@ -307,7 +312,7 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
       </SettingsSection>
 
       {/* Typography section: Size, Weight, Line height, Letter spacing */}
-      <SettingsSection title="Typography" defaultOpen>
+      <SettingsSection title="Typography" defaultOpen icon={<TypographyIcon />}>
         <ResponsiveStyleField label="Size" subProp="fontSize" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("fontSize")} onReset={resetStyleOverride}>
           <div className="flex items-center gap-0 bg-[#f5f5f5] rounded-lg overflow-hidden transition-all border border-transparent focus-within:bg-white focus-within:border-[#076bff] focus-within:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]">
             <input
@@ -401,7 +406,7 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
       </SettingsSection>
 
       {/* Columns section */}
-      <SettingsSection title="Columns">
+      <SettingsSection title="Columns" icon={<ColumnsIcon />}>
         <ResponsiveField
           label="Columns"
           block={block as ContentBlock}

package/components/builder/editors/VideoBlockEditor.tsx

@@ -3,6 +3,12 @@
 import { useBuilderStore } from "../../../lib/builder/store";
 import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
 import type { VideoBlock, ContentBlock } from "../../../lib/sanity/types";
+import {
+  SourceIcon,
+  LayoutIcon,
+  AppearanceIcon,
+  PlaybackIcon,
+} from "./section-icons";
 import {
   SettingsField,
   SettingsSection,
@@ -89,7 +95,7 @@ export default function VideoBlockEditor({ block }: Props) {
     <>
       <ViewportBadge />
 
-      <SettingsSection title="Source" defaultOpen>
+      <SettingsSection title="Source" defaultOpen icon={<SourceIcon />}>
         <SettingsField label="Video Type">
           <div className="flex gap-1">
             {(
@@ -174,7 +180,7 @@ export default function VideoBlockEditor({ block }: Props) {
         </SettingsField>
       </SettingsSection>
 
-      <SettingsSection title="Layout">
+      <SettingsSection title="Layout" icon={<LayoutIcon />}>
         <ResponsiveField
           label="Width"
           block={block as ContentBlock}
@@ -224,7 +230,7 @@ export default function VideoBlockEditor({ block }: Props) {
         </ResponsiveField>
       </SettingsSection>
 
-      <SettingsSection title="Appearance">
+      <SettingsSection title="Appearance" icon={<AppearanceIcon />}>
         <ResponsiveField
           label="Border Radius"
           block={block as ContentBlock}
@@ -249,7 +255,7 @@ export default function VideoBlockEditor({ block }: Props) {
         </ResponsiveField>
       </SettingsSection>
 
-      <SettingsSection title="Playback">
+      <SettingsSection title="Playback" icon={<PlaybackIcon />}>
         <div className="space-y-1.5">
           <StyledCheckbox
             label="Autoplay"