@morphika/andami 0.2.26 → 0.3.1

package/components/builder/SectionTypePicker.tsx

@@ -3,87 +3,7 @@
 import { useState, useEffect } from "react";
 import { SECTION_TYPE_REGISTRY } from "../../lib/builder/types";
 import type { CustomSectionListItem } from "../../lib/sanity/types";
-import { ProjectGridBlockIcon, ParallaxGroupIcon } from "./blockStyles";
-import { BLOCK_GRADIENTS } from "./blockStyles";
-import { BUILDER_BLUE, BUILDER_VIOLET } from "../../lib/builder/constants";
-
-// ── Section card icons ──
-
-function EmptySectionV2Icon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="es2Grad" x1="5" y1="5" x2="35" y2="35">
-          <stop offset="0%" stopColor={BUILDER_BLUE} />
-          <stop offset="100%" stopColor="#0550c0" />
-        </linearGradient>
-      </defs>
-      {/* Grid pattern */}
-      <rect x="3" y="3" width="34" height="34" rx="4" fill="url(#es2Grad)" opacity="0.15" />
-      <rect x="3" y="3" width="34" height="34" rx="4" stroke="url(#es2Grad)" strokeWidth="2" fill="none" opacity="0.5" />
-      {/* Grid columns */}
-      <rect x="6" y="8" width="8" height="24" rx="2" fill="url(#es2Grad)" opacity="0.3" />
-      <rect x="16" y="8" width="8" height="24" rx="2" fill="url(#es2Grad)" opacity="0.3" />
-      <rect x="26" y="8" width="8" height="24" rx="2" fill="url(#es2Grad)" opacity="0.3" />
-    </svg>
-  );
-}
-
-function CoverSectionIcon({ size = 28 }: { size?: number }) {
-  const accent = "#0d9488";
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="csGrad" x1="5" y1="5" x2="35" y2="35">
-          <stop offset="0%" stopColor={accent} />
-          <stop offset="100%" stopColor="#0f766e" />
-        </linearGradient>
-      </defs>
-      <rect x="3" y="3" width="34" height="34" rx="4" fill="url(#csGrad)" opacity="0.15" />
-      <rect x="3" y="3" width="34" height="34" rx="4" stroke="url(#csGrad)" strokeWidth="2" fill="none" opacity="0.5" />
-      {/* Top row (large) */}
-      <rect x="6" y="6" width="28" height="18" rx="2" fill="url(#csGrad)" opacity="0.25" />
-      {/* Bottom row (small) */}
-      <rect x="6" y="26" width="28" height="8" rx="2" fill="url(#csGrad)" opacity="0.4" />
-      {/* Divider line */}
-      <line x1="8" y1="25" x2="32" y2="25" stroke={accent} strokeWidth="1" opacity="0.5" strokeDasharray="2 2" />
-    </svg>
-  );
-}
-
-function SavedSectionIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="savedGrad" x1="5" y1="5" x2="35" y2="35">
-          <stop offset="0%" stopColor={BUILDER_VIOLET} />
-          <stop offset="100%" stopColor="#6d28d9" />
-        </linearGradient>
-      </defs>
-      <rect x="3" y="3" width="34" height="34" rx="4" fill="url(#savedGrad)" opacity="0.15" />
-      <rect x="3" y="3" width="34" height="34" rx="4" stroke="url(#savedGrad)" strokeWidth="2" fill="none" opacity="0.5" />
-      {/* Component/puzzle icon */}
-      <rect x="8" y="8" width="10" height="10" rx="2" fill="url(#savedGrad)" opacity="0.5" />
-      <rect x="22" y="8" width="10" height="10" rx="2" fill="url(#savedGrad)" opacity="0.5" />
-      <rect x="8" y="22" width="10" height="10" rx="2" fill="url(#savedGrad)" opacity="0.5" />
-      <rect x="22" y="22" width="10" height="10" rx="2" fill="url(#savedGrad)" opacity="0.3" />
-    </svg>
-  );
-}
-
-const SECTION_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {
-  "empty-v2": EmptySectionV2Icon,
-  coverSection: CoverSectionIcon,
-  projectGridBlock: ProjectGridBlockIcon,
-  parallaxGroup: ParallaxGroupIcon,
-};
-
-const SECTION_GRADIENTS: Record<string, string> = {
-  "empty-v2": "linear-gradient(135deg, #d0e0f8 0%, #b8d0f0 50%, #a0c0e8 100%)",
-  coverSection: "linear-gradient(135deg, #b2f5ea 0%, #81e6d9 50%, #5eead4 100%)",
-  projectGridBlock: BLOCK_GRADIENTS.projectGridBlock,
-  parallaxGroup: BLOCK_GRADIENTS.parallaxGroup,
-};
+import { SECTION_CARD_ICONS } from "./SectionCardIcons";
 
 // ── V2 layout presets (use cascade preset names) ──
 type V2Preset = "full" | "halves" | "thirds" | "quarters" | "1/3+2/3" | "2/3+1/3";
@@ -96,10 +16,9 @@ const layoutPresets: { key: V2Preset; label: string; widths: number[] }[] = [
   { key: "2/3+1/3", label: "2/3 + 1/3", widths: [8, 4] },
 ];
 
-// ── Shared card component (glass card with gradient, icon, title, subtitle) ──
+// ── Shared flat card (matches Add Block modal style) ──
 
 interface SectionCardProps {
-  gradient: string;
   icon: React.ReactNode;
   title: string;
   subtitle?: string;
@@ -110,7 +29,6 @@ interface SectionCardProps {
 }
 
 function SectionCard({
-  gradient,
   icon,
   title,
   subtitle,
@@ -124,56 +42,39 @@ function SectionCard({
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className="relative flex items-center gap-3 rounded-2xl px-3.5 py-3 transition-all text-left group overflow-hidden border-0"
+      className="relative flex items-center rounded-2xl text-left group overflow-hidden border-0 h-[96px]"
       style={{
-        background: gradient,
-        transform: isHovered ? "translateY(-1px) scale(1.015)" : "translateY(0) scale(1)",
-        boxShadow: isHovered
-          ? "0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.3)"
-          : "0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2)",
-        transition: "all 0.3s cubic-bezier(0.23, 1, 0.32, 1)",
+        background: "#f4f4f4",
+        transform: isHovered ? "translateY(-1px)" : "translateY(0)",
+        transition: "transform 200ms cubic-bezier(0.23, 1, 0.32, 1)",
       }}
     >
-      {/* Glass overlay */}
-      <div
-        className="absolute inset-0 rounded-2xl pointer-events-none"
-        style={{
-          background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%)",
-        }}
-      />
-      {/* Icon container */}
-      <div
-        className="relative shrink-0 flex items-center justify-center"
-        style={{
-          width: 44,
-          height: 44,
-          borderRadius: 12,
-          background: "rgba(255,255,255,0.4)",
-          backdropFilter: "blur(8px)",
-          boxShadow: "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5)",
-          transition: "transform 0.3s",
-          transform: isHovered ? "scale(1.08)" : "scale(1)",
-        }}
-      >
+      {/* Icon artwork — full-bleed on the left. */}
+      <div className="shrink-0 h-full" style={{ width: 176 }}>
         {icon}
       </div>
+
       {/* Text */}
-      <div className="relative z-10 min-w-0 flex-1">
-        <p
-          className="text-sm font-semibold truncate"
-          style={{ color: "rgba(0,0,0,0.72)", textShadow: "0 1px 0 rgba(255,255,255,0.3)" }}
-        >
+      <div className="min-w-0 pr-5 py-4 flex-1">
+        <p className="text-[17px] font-semibold text-[#2b2f38] truncate leading-tight">
           {title}
         </p>
         {subtitle && (
-          <p
-            className="text-xs truncate leading-snug mt-0.5"
-            style={{ color: "rgba(0,0,0,0.42)" }}
-          >
+          <p className="text-[13px] text-[#9096a0] truncate leading-snug mt-1">
             {subtitle}
           </p>
         )}
       </div>
+
+      {/* Hover stroke overlay — violet accent to differentiate sections from blocks. */}
+      <span
+        aria-hidden="true"
+        className="absolute inset-0 rounded-2xl pointer-events-none"
+        style={{
+          boxShadow: isHovered ? "inset 0 0 0 2px #7500D5" : "inset 0 0 0 2px transparent",
+          transition: "box-shadow 160ms ease",
+        }}
+      />
     </button>
   );
 }
@@ -256,7 +157,7 @@ export default function SectionTypePicker({
       onClick={onClose}
     >
       <div
-        className="w-full max-w-2xl rounded-2xl bg-white max-h-[80vh] flex flex-col shadow-2xl border border-neutral-200/50 overflow-hidden"
+        className="w-full max-w-4xl rounded-2xl bg-white max-h-[80vh] flex flex-col shadow-2xl border border-neutral-200/50 overflow-hidden"
         style={{ fontFamily: "Inter, system-ui, sans-serif" }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -311,14 +212,14 @@ export default function SectionTypePicker({
                     }
                     onClose();
                   }}
-                  className="rounded-xl border border-neutral-200 bg-white p-3 hover:border-[#076bff] hover:bg-[#076bff]/5 transition-colors group shadow-sm"
+                  className="rounded-xl border border-neutral-200 bg-white p-3 hover:border-[#4794e2] hover:bg-[#4794e2]/5 transition-colors group shadow-sm"
                   title={label}
                 >
                   <div className="flex gap-1 h-6">
                     {widths.map((w, i) => (
                       <div
                         key={i}
-                        className="bg-neutral-200 group-hover:bg-[#076bff]/30 rounded-sm transition-colors"
+                        className="bg-neutral-200 group-hover:bg-[#4794e2]/30 rounded-sm transition-colors"
                         style={{ flex: w }}
                       />
                     ))}
@@ -337,13 +238,11 @@ export default function SectionTypePicker({
               </p>
               <div className="grid grid-cols-2 gap-2.5">
                 {SECTION_TYPE_REGISTRY.map((section) => {
-                  const IconComponent = SECTION_ICON_COMPONENTS[section.type];
-                  const gradient = SECTION_GRADIENTS[section.type] || "#f5f5f5";
+                  const IconComponent = SECTION_CARD_ICONS[section.type];
 
                   return (
                     <SectionCard
                       key={section.type}
-                      gradient={gradient}
                       icon={IconComponent ? <IconComponent /> : null}
                       title={section.label}
                       subtitle={section.description}
@@ -380,8 +279,7 @@ export default function SectionTypePicker({
                     {/* Create new section button — always visible immediately */}
                     {onCreateCustomSection && (
                       <SectionCard
-                        gradient="linear-gradient(135deg, #f3f0ff 0%, #ede5ff 50%, #e0d4fc 100%)"
-                        icon={<span className="text-[#8b5cf6] text-xl font-light">+</span>}
+                        icon={(() => { const I = SECTION_CARD_ICONS.createCustom; return I ? <I /> : null; })()}
                         title="Create New"
                         subtitle="Build a reusable section"
                         isHovered={hovered === "create-custom"}
@@ -400,13 +298,12 @@ export default function SectionTypePicker({
                         {[1, 2].map((i) => (
                           <div
                             key={`skeleton-${i}`}
-                            className="flex items-center gap-3 rounded-2xl px-3.5 py-3 animate-pulse"
-                            style={{ background: "linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%)" }}
+                            className="flex items-center rounded-2xl h-[96px] bg-[#f4f4f4] animate-pulse overflow-hidden"
                           >
-                            <div className="w-11 h-11 rounded-xl bg-white/60" />
-                            <div className="flex-1 space-y-1.5">
-                              <div className="h-3.5 bg-white/60 rounded w-24" />
-                              <div className="h-2.5 bg-white/40 rounded w-16" />
+                            <div className="w-[176px] h-full bg-white/40" />
+                            <div className="flex-1 pr-5 py-4 space-y-2">
+                              <div className="h-4 bg-white/60 rounded w-28" />
+                              <div className="h-3 bg-white/50 rounded w-20" />
                             </div>
                           </div>
                         ))}
@@ -424,8 +321,7 @@ export default function SectionTypePicker({
                     {!loadingSaved && savedSections.map((section) => (
                       <SectionCard
                         key={section._id}
-                        gradient="linear-gradient(135deg, #ede9fe 0%, #ddd6fe 50%, #c4b5fd 100%)"
-                        icon={<SavedSectionIcon size={20} />}
+                        icon={(() => { const I = SECTION_CARD_ICONS.savedCustom; return I ? <I /> : null; })()}
                         title={section.title}
                         subtitle={section.description}
                         isHovered={hovered === section._id}

package/components/builder/SectionV2Canvas.tsx

@@ -285,7 +285,7 @@ export default function SectionV2Canvas({
                   : showAsDropTarget
                   ? "border-blue-500/40 text-blue-500/60 bg-blue-500/5 opacity-100"
                   : isSectionHovered
-                  ? "border-[#076bff]/25 text-[#076bff]/50 hover:text-[#076bff] hover:border-[#076bff]/60 hover:bg-[#076bff]/5 opacity-100"
+                  ? "border-[#4794e2]/25 text-[#4794e2]/50 hover:text-[#4794e2] hover:border-[#4794e2]/60 hover:bg-[#4794e2]/5 opacity-100"
                   : "border-transparent text-transparent opacity-0 pointer-events-none"
               }`}
             >

package/components/builder/SectionV2Column.tsx

@@ -84,17 +84,17 @@ function ResizeHandle({
           height: isActive ? 16 : isHoveredEdge ? 56 : showChrome ? 56 : 32,
           borderRadius: isActive ? "50%" : 999,
           backgroundColor: isActive
-            ? "rgba(7, 107, 255, 0.9)"
+            ? "rgba(71, 148, 226, 0.9)"
             : isHoveredEdge
-            ? "rgba(7, 107, 255, 0.7)"
+            ? "rgba(71, 148, 226, 0.7)"
             : showChrome
-            ? "rgba(7, 107, 255, 0.5)"
-            : "rgba(7, 107, 255, 0.2)",
+            ? "rgba(71, 148, 226, 0.5)"
+            : "rgba(71, 148, 226, 0.2)",
           transition: "width 150ms ease-out, height 150ms ease-out, border-radius 150ms ease-out, background-color 150ms, box-shadow 150ms",
           boxShadow: isActive
-            ? "0 0 10px rgba(7, 107, 255, 0.5)"
+            ? "0 0 10px rgba(71, 148, 226, 0.5)"
             : isHoveredEdge
-            ? "0 0 6px rgba(7, 107, 255, 0.2)"
+            ? "0 0 6px rgba(71, 148, 226, 0.2)"
             : undefined,
         }}
       />
@@ -287,15 +287,15 @@ export default function SectionV2Column({
         style={{
           transition: "box-shadow 150ms, border 150ms",
           ...(isSwapTarget
-            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}`, background: "rgba(7, 107, 255, 0.08)" }
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}`, background: "rgba(71, 148, 226, 0.08)" }
             : isBlockOver
             ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}` }
             : isSelected
-            ? { boxShadow: `inset 0 0 0 2px rgba(7, 107, 255, 0.6)` }
+            ? { boxShadow: `inset 0 0 0 2px rgba(71, 148, 226, 0.6)` }
             : isHovered
-            ? { boxShadow: `inset 0 0 0 1.5px rgba(7, 107, 255, 0.5)` }
+            ? { boxShadow: `inset 0 0 0 1.5px rgba(71, 148, 226, 0.5)` }
             : showFaintOutline
-            ? { border: `1px dashed rgba(7, 107, 255, 0.2)`, borderRadius: 4 }
+            ? { border: `1px dashed rgba(71, 148, 226, 0.2)`, borderRadius: 4 }
             : undefined),
         }}
       />
@@ -350,18 +350,6 @@ export default function SectionV2Column({
         </>
       )}
 
-      {/* Span badge — top right */}
-      <div
-        className={`absolute top-0 right-0 z-[5] transition-opacity ${
-          isSelected || isHovered ? "opacity-100" : showFaintOutline ? "opacity-40" : "opacity-0"
-        }`}
-        style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "top right" }}
-      >
-        <span className="text-[11px] px-1.5 py-0.5 rounded-bl rounded-tr bg-[#076bff]/80 text-white/90 font-medium tabular-nums">
-          {column.span}/{gridColumns}
-        </span>
-      </div>
-
       {/* Delete button — red circle top right, positioned outside the column box.
           Nested pattern: outer div positions, inner div counter-scales. */}
       <div
@@ -378,7 +366,8 @@ export default function SectionV2Column({
         <div style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "center" }}>
         <button
           onClick={handleDelete}
-          className="w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center shadow-md transition-transform hover:scale-[1.15] hover:bg-red-600 hover:shadow-red-500/30 hover:shadow-lg"
+          className="w-5 h-5 rounded-full text-white flex items-center justify-center transition-transform hover:scale-[1.15]"
+          style={{ background: "#ef4848" }}
           title="Delete column"
           aria-label="Delete column"
         >
@@ -403,7 +392,7 @@ export default function SectionV2Column({
       >
         <div style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "center" }}>
         <div
-          className="w-5 h-5 rounded-full bg-[#076bff] text-white flex items-center justify-center shadow-md cursor-grab active:cursor-grabbing transition-transform hover:scale-[1.15] hover:bg-[#0559d4] hover:shadow-blue-500/30 hover:shadow-lg"
+          className="w-5 h-5 rounded-full bg-[#4794e2] text-white flex items-center justify-center shadow-md cursor-grab active:cursor-grabbing transition-transform hover:scale-[1.15] hover:bg-[#3578b8] hover:shadow-blue-500/30 hover:shadow-lg"
           title="Drag to move column"
           aria-label="Move column"
           onMouseDown={(e) => {
@@ -479,9 +468,9 @@ export default function SectionV2Column({
               style={{
                 padding: "5px 16px",
                 pointerEvents: showChrome || showFaintOutline ? "auto" : "none",
-                background: showChrome ? "rgba(13, 150, 104, 0.12)" : "rgba(13, 150, 104, 0.06)",
-                color: "#0d9668",
-                border: `1px dashed ${showChrome ? "rgba(13, 150, 104, 0.5)" : "rgba(13, 150, 104, 0.25)"}`,
+                background: "#d2e3ff",
+                color: "#4794e2",
+                border: "1px dashed #4794e2",
               }}
             >
               + Add Block
@@ -508,9 +497,9 @@ export default function SectionV2Column({
             style={{
               padding: "4px 14px",
               pointerEvents: showChrome ? "auto" : "none",
-              background: "rgba(13, 150, 104, 0.12)",
-              color: "#0d9668",
-              border: "1px dashed rgba(13, 150, 104, 0.5)",
+              background: "#d2e3ff",
+              color: "#4794e2",
+              border: "1px dashed #4794e2",
             }}
           >
             + Add Block

package/components/builder/SettingsPanel.tsx

@@ -58,7 +58,6 @@ export default function SettingsPanel() {
     selectedColumnV2,
     selectedBlock,
     panelTitle,
-    headerGradient,
     HeaderIconComponent,
     isColumnOnly,
     isParallaxGroupOnly,
@@ -93,44 +92,21 @@ export default function SettingsPanel() {
 
   return (
     <div className="w-72 border-l border-[#f0f0f0] bg-white overflow-y-auto shrink-0 flex flex-col">
-      {/* Panel header — gradient + icon, matching add-block card style */}
-      <div
-        className="relative flex items-center px-3.5 py-3 shrink-0 overflow-hidden"
-        style={{ background: headerGradient }}
-      >
-        {/* Glass overlay */}
-        <div
-          className="absolute inset-0 pointer-events-none"
-          style={{
-            background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%)",
-          }}
-        />
-
-        {/* Icon container — frosted glass */}
-        <div
-          className="relative shrink-0 flex items-center justify-center"
-          style={{
-            width: 36,
-            height: 36,
-            borderRadius: 10,
-            background: "rgba(255,255,255,0.4)",
-            backdropFilter: "blur(8px)",
-            boxShadow: "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5)",
-          }}
-        >
-          {HeaderIconComponent ? <HeaderIconComponent size={22} /> : null}
+      {/* Panel header — flat gray, matching the new Add Block card style */}
+      <div className="relative flex items-center px-3.5 py-3 shrink-0 bg-[#f4f4f4]">
+        {/* Icon — landscape aspect (card icon at smaller scale). Bumped to
+            size 40 now that the new icons carry less construction detail. */}
+        <div className="shrink-0 flex items-center" style={{ height: 44 }}>
+          {HeaderIconComponent ? <HeaderIconComponent size={40} /> : null}
         </div>
 
         {/* Title */}
-        <h3
-          className="relative z-10 ml-2.5 text-[13px] font-semibold truncate"
-          style={{ color: "rgba(0,0,0,0.72)", textShadow: "0 1px 0 rgba(255,255,255,0.3)" }}
-        >
+        <h3 className="ml-2.5 text-[13px] font-semibold text-[#2b2f38] truncate">
           {panelTitle}
         </h3>
 
         {/* Action button — single delete for the active selection (block > column > section priority) */}
-        <div className="relative z-10 flex items-center gap-0.5 ml-auto">
+        <div className="flex items-center gap-0.5 ml-auto">
           {(() => {
             // Determine the single delete action based on selection priority: block > column > section
             let onDelete: (() => void) | null = null;

package/components/builder/SortableBlock.tsx

@@ -11,7 +11,7 @@ import type { ContentBlock, ImageBlock, VideoBlock } from "../../lib/sanity/type
 import BlockLivePreview from "./BlockLivePreview";
 import { getBlockAlignmentStyles, hasBlockAlignment } from "../../lib/builder/layout-styles";
 import type { BlockLayout } from "../../lib/sanity/types";
-import { BUILDER_ORANGE } from "../../lib/builder/constants";
+import { BUILDER_BLOCK } from "../../lib/builder/constants";
 
 interface SortableBlockProps {
   block: ContentBlock;
@@ -124,7 +124,7 @@ export default function SortableBlock({
       style={{ ...style, ...(!isFillBlock ? { position: "relative" as const, zIndex: 1 } : {}) }}
       className={`transition-[opacity,box-shadow] ${
         isDragging
-          ? "ring-2 ring-[#0d9668] ring-offset-1 ring-offset-transparent rounded"
+          ? "ring-2 ring-[#4794e2] ring-offset-1 ring-offset-transparent rounded"
           : ""
       }`}
       onClick={(e) => {
@@ -143,9 +143,9 @@ export default function SortableBlock({
         style={{
           inset: `${Math.max(2, Math.min(5, 3 / canvasZoom))}px`,
           ...(isSelected
-            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px ${BUILDER_ORANGE}` }
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px ${BUILDER_BLOCK}` }
             : isHovered
-            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(13, 150, 104, 0.4)` }
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(71, 148, 226, 0.4)` }
             : {}),
         }}
       />
@@ -166,17 +166,37 @@ export default function SortableBlock({
           style={{ transform: `scale(${Math.min(2, 1 / canvasZoom)})`, transformOrigin: "top center" }}
         >
         <div className="flex items-center rounded-[5px] overflow-hidden" style={{
-            background: "linear-gradient(170deg, rgba(38,38,48,0.97) 0%, rgba(28,28,36,0.98) 100%)",
-            boxShadow: "0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06)",
-            border: "1px solid rgba(255,255,255,0.06)",
+            background: "#d2e3ff",
+            border: "1px solid #4794e2",
           }}>
+          {/* Block type label — first */}
+          <span className="text-[11px] px-1.5 py-0.5 font-medium" style={{ color: "#4794e2" }}>
+            {info?.icon || "▪"} {info?.label || block._type}
+          </span>
+          {/* Enter animation badge */}
+          {block.enter_animation?.preset && block.enter_animation.preset !== "none" && (
+            <span className="text-[10px] text-[#4794e2]/50 px-1 py-0.5 border-l border-[#4794e2]/25" title={`Animation: ${block.enter_animation.preset}`}>
+              ✦
+            </span>
+          )}
+          {/* Duplicate */}
+          {onDuplicate && (
+            <button
+              onClick={onDuplicate}
+              className="text-[#4794e2]/60 hover:text-[#4794e2] transition-colors px-1.5 py-0.5 text-[11px] border-l border-[#4794e2]/25 hover:bg-[#4794e2]/10"
+              title="Duplicate block (Ctrl+D)"
+              aria-label="Duplicate block"
+            >
+              ⧉
+            </button>
+          )}
           {/* Move up arrow */}
           <button
             onClick={() => canMoveUp && reorderBlocks(rowKey, colKey, blockIndex, blockIndex - 1)}
-            className={`transition-colors px-1 py-0.5 text-[11px] ${
+            className={`transition-colors px-1 py-0.5 text-[11px] border-l border-[#4794e2]/25 ${
               canMoveUp
-                ? "text-white/45 hover:text-white/80 hover:bg-white/10 cursor-pointer"
-                : "text-white/20 cursor-default"
+                ? "text-[#4794e2]/60 hover:text-[#4794e2] hover:bg-[#4794e2]/10 cursor-pointer"
+                : "text-[#4794e2]/25 cursor-default"
             }`}
             title="Move block up"
             aria-label="Move block up"
@@ -189,10 +209,10 @@ export default function SortableBlock({
           {/* Move down arrow */}
           <button
             onClick={() => canMoveDown && reorderBlocks(rowKey, colKey, blockIndex, blockIndex + 1)}
-            className={`transition-colors px-1 py-0.5 text-[11px] border-l border-white/10 ${
+            className={`transition-colors px-1 py-0.5 text-[11px] border-l border-[#4794e2]/25 ${
               canMoveDown
-                ? "text-white/45 hover:text-white/80 hover:bg-white/10 cursor-pointer"
-                : "text-white/20 cursor-default"
+                ? "text-[#4794e2]/60 hover:text-[#4794e2] hover:bg-[#4794e2]/10 cursor-pointer"
+                : "text-[#4794e2]/25 cursor-default"
             }`}
             title="Move block down"
             aria-label="Move block down"
@@ -202,44 +222,16 @@ export default function SortableBlock({
               <path d="M5 8L2 4h6L5 8z" fill="currentColor" />
             </svg>
           </button>
-          {/* Block type label */}
-          <span className="text-[11px] px-1.5 py-0.5 border-l border-white/10 font-medium" style={{ color: "rgba(100,220,170,0.9)" }}>
-            {info?.icon || "▪"} {info?.label || block._type}
-          </span>
-          {/* Enter animation badge */}
-          {block.enter_animation?.preset && block.enter_animation.preset !== "none" && (
-            <span className="text-[10px] text-white/35 px-1 py-0.5 border-l border-white/10" title={`Animation: ${block.enter_animation.preset}`}>
-              ✦
-            </span>
-          )}
-          {/* Duplicate */}
-          {onDuplicate && (
-            <button
-              onClick={onDuplicate}
-              className="text-white/45 hover:text-white/80 transition-colors px-1.5 py-0.5 text-[11px] border-l border-white/10 hover:bg-white/10"
-              title="Duplicate block (Ctrl+D)"
-              aria-label="Duplicate block"
-            >
-              ⧉
-            </button>
-          )}
+          {/* Delete — text inside pill, red hover for destructive signal */}
+          <button
+            onClick={onDelete}
+            className="text-[#4794e2]/60 hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-0.5 text-[11px] font-medium border-l border-[#4794e2]/25"
+            title="Delete block"
+            aria-label="Delete block"
+          >
+            Delete
+          </button>
         </div>
-        {/* Delete button — inline at end of toolbar with gap separator */}
-        <button
-          onClick={onDelete}
-          className="w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors shadow-md shrink-0"
-          title="Delete block"
-          aria-label="Delete block"
-        >
-          <svg width="10" height="10" viewBox="0 0 10 10">
-            <path
-              d="M2 2l6 6M8 2l-6 6"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-            />
-          </svg>
-        </button>
         </div>
       </div>