@morphika/andami 0.5.5 → 0.5.6

package/components/builder/ColumnDragOverlay.tsx

@@ -5,7 +5,7 @@ import { createPortal } from "react-dom";
 import { useBuilderStore } from "../../lib/builder/store";
 import type { PageSectionV2, CoverSection, SectionColumn } from "../../lib/sanity/types";
 import { isPageSectionV2, isCoverSection } from "../../lib/sanity/types";
-import { BUILDER_BLUE } from "../../lib/builder/constants";
+import { BUILDER_YELLOW } from "../../lib/builder/constants";
 
 /** Color used when the current drop target is invalid (cross-section
  * swap, or a target that is not V2/Cover). Red 500 with compatible
@@ -57,9 +57,9 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
 
   const blockCount = (col.blocks || []).length;
 
-  // Pick accent based on drop validity.
-  const accentColor = isValidDrop ? BUILDER_BLUE : INVALID_RED;
-  const accentRgb = isValidDrop ? "71, 148, 226" : INVALID_RED_RGB;
+  // Pick accent based on drop validity. Column drag = BUILDER_YELLOW.
+  const accentColor = isValidDrop ? BUILDER_YELLOW : INVALID_RED;
+  const accentRgb = isValidDrop ? "214, 137, 0" : INVALID_RED_RGB;
 
   const overlay = (
     <div

package/components/builder/CoverSectionCanvas.tsx

@@ -329,9 +329,9 @@ export default function CoverSectionCanvas({
                       className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
                       style={{
                         padding: "5px 16px",
-                        background: `rgba(53, 128, 249, 0.10)`,
-                        color: "#3580f9",
-                        border: "1.5px dashed rgba(53, 128, 249, 0.4)",
+                        background: `rgba(214, 137, 0, 0.10)`,
+                        color: "#d68900",
+                        border: "1.5px dashed rgba(214, 137, 0, 0.4)",
                         opacity: isSectionHovered ? 1 : 0,
                         pointerEvents: isSectionHovered ? "auto" : "none",
                         transition: "opacity 150ms",

package/components/builder/InsertionLines.tsx

@@ -3,7 +3,7 @@
 import { useMemo, memo } from "react";
 import type { CascadeColumn } from "../../lib/builder/cascade-helpers";
 import type { DropTarget } from "./hooks/useColumnDrag";
-import { BUILDER_BLUE } from "../../lib/builder/constants";
+import { BUILDER_YELLOW } from "../../lib/builder/constants";
 
 // ============================================
 // InsertionLines — Visual insertion indicators between adjacent columns
@@ -154,7 +154,7 @@ export const InsertionLines = memo(function InsertionLines({
                   bottom: 4,
                   width: isActive ? 4 : 0,
                   transform: "translateX(-50%)",
-                  background: BUILDER_BLUE,
+                  background: BUILDER_YELLOW,
                   borderRadius: 2,
                   transition: "width 100ms ease-out, opacity 100ms ease-out",
                   opacity: isActive ? 1 : 0,
@@ -171,7 +171,7 @@ export const InsertionLines = memo(function InsertionLines({
                     width: 14,
                     height: 14,
                     borderRadius: "50%",
-                    background: BUILDER_BLUE,
+                    background: BUILDER_YELLOW,
                     border: "2px solid white",
                     boxShadow: "0 1px 4px rgba(53, 128, 249, 0.4)",
                     display: "flex",

package/components/builder/SectionV2Canvas.tsx

@@ -306,11 +306,11 @@ export default function SectionV2Canvas({
               }}
               className={`rounded-lg border-2 border-dashed text-xs font-medium transition-all flex items-center justify-center cursor-pointer ${
                 isGapTarget
-                  ? "border-blue-500 text-blue-500 bg-blue-500/10 opacity-100"
+                  ? "border-[#d68900] text-[#d68900] bg-[#d68900]/10 opacity-100"
                   : showAsDropTarget
-                  ? "border-blue-500/40 text-blue-500/60 bg-blue-500/5 opacity-100"
+                  ? "border-[#d68900]/40 text-[#d68900]/60 bg-[#d68900]/5 opacity-100"
                   : isSectionHovered
-                  ? "border-[#3580f9]/25 text-[#3580f9]/50 hover:text-[#3580f9] hover:border-[#3580f9]/60 hover:bg-[#3580f9]/5 opacity-100"
+                  ? "border-[#d68900]/25 text-[#d68900]/50 hover:text-[#d68900] hover:border-[#d68900]/60 hover:bg-[#d68900]/5 opacity-100"
                   : "border-transparent text-transparent opacity-0 pointer-events-none"
               }`}
             >

package/components/builder/SectionV2Column.tsx

@@ -15,7 +15,7 @@ import {
   getBorderStyles,
 } from "../../lib/builder/layout-styles";
 import { isSectionBlockType } from "../../lib/builder/types";
-import { BUILDER_BLUE } from "../../lib/builder/constants";
+import { BUILDER_YELLOW, BUILDER_YELLOW_LIGHT } from "../../lib/builder/constants";
 import { BubbleTooltip, CloseIcon, DragDropIcon } from "./BubbleIcons";
 
 // ============================================
@@ -89,17 +89,17 @@ function ResizeHandle({
           height: isActive ? 16 : isHoveredEdge ? 56 : showChrome ? 56 : 32,
           borderRadius: isActive ? "50%" : 999,
           backgroundColor: isActive
-            ? "rgba(53, 128, 249, 0.9)"
+            ? "rgba(214, 137, 0, 0.9)"
             : isHoveredEdge
-            ? "rgba(53, 128, 249, 0.7)"
+            ? "rgba(214, 137, 0, 0.7)"
             : showChrome
-            ? "rgba(53, 128, 249, 0.5)"
-            : "rgba(53, 128, 249, 0.2)",
+            ? "rgba(214, 137, 0, 0.5)"
+            : "rgba(214, 137, 0, 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(53, 128, 249, 0.5)"
+            ? "0 0 10px rgba(214, 137, 0, 0.5)"
             : isHoveredEdge
-            ? "0 0 6px rgba(53, 128, 249, 0.2)"
+            ? "0 0 6px rgba(214, 137, 0, 0.2)"
             : undefined,
         }}
       />
@@ -304,15 +304,15 @@ export default function SectionV2Column({
         style={{
           transition: "box-shadow 150ms",
           ...(isSwapTarget
-            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}`, background: "rgba(53, 128, 249, 0.08)" }
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_YELLOW}`, background: "rgba(214, 137, 0, 0.08)" }
             : isBlockOver
-            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}` }
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_YELLOW}` }
             : isSelected
-            ? { boxShadow: `inset 0 0 0 2px rgba(53, 128, 249, 0.6)` }
+            ? { boxShadow: `inset 0 0 0 2px rgba(214, 137, 0, 0.6)` }
             : isHovered
-            ? { boxShadow: `inset 0 0 0 1.5px rgba(53, 128, 249, 0.5)` }
+            ? { boxShadow: `inset 0 0 0 1.5px rgba(214, 137, 0, 0.5)` }
             : showFaintOutline
-            ? { boxShadow: `inset 0 0 0 1px rgba(53, 128, 249, 0.2)`, borderRadius: 4 }
+            ? { boxShadow: `inset 0 0 0 1px rgba(214, 137, 0, 0.2)`, borderRadius: 4 }
             : undefined),
         }}
       />
@@ -383,14 +383,14 @@ export default function SectionV2Column({
           <div
             className="flex items-center rounded-[5px]"
             style={{
-              background: "#c0d7ff",
-              border: "1.5px solid #3580f9",
+              background: BUILDER_YELLOW_LIGHT,
+              border: `1.5px solid ${BUILDER_YELLOW}`,
             }}
           >
             {/* Drag handle — starts a column drag via @dnd-kit, selects on click */}
             <button
               type="button"
-              className="group/bb relative text-[#3580f9] hover:bg-[#3580f9]/15 transition-colors px-1.5 py-1 flex items-center justify-center cursor-grab active:cursor-grabbing rounded-l-[3px]"
+              className="group/bb relative text-[#d68900] hover:bg-[#d68900]/15 transition-colors px-1.5 py-1 flex items-center justify-center cursor-grab active:cursor-grabbing rounded-l-[3px]"
               aria-label="Move column"
               onMouseDown={(e) => {
                 e.stopPropagation();
@@ -404,22 +404,22 @@ export default function SectionV2Column({
               <DragDropIcon size={14} />
               <BubbleTooltip>Drag to move</BubbleTooltip>
             </button>
-            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            <div className="w-px self-stretch my-1" style={{ background: BUILDER_YELLOW }} />
             {/* Label — clicking selects the column */}
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); onSelect(); }}
-              className="text-[11px] px-2 py-0.5 font-medium hover:bg-[#3580f9]/15 transition-colors"
-              style={{ color: "#3580f9" }}
+              className="text-[11px] px-2 py-0.5 font-medium hover:bg-[#d68900]/15 transition-colors"
+              style={{ color: BUILDER_YELLOW }}
               aria-label="Select column"
             >
               Col
             </button>
-            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            <div className="w-px self-stretch my-1" style={{ background: BUILDER_YELLOW }} />
             {/* Delete */}
             <button
               onClick={handleDelete}
-              className="group/bb relative text-[#3580f9] hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-1 flex items-center justify-center rounded-r-[3px]"
+              className="group/bb relative text-[#d68900] hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-1 flex items-center justify-center rounded-r-[3px]"
               aria-label="Delete column"
             >
               <CloseIcon size={14} />

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

@@ -7,7 +7,7 @@
  * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B1).
  */
 
-import { BUILDER_BLUE } from "../../../lib/builder/constants";
+import { BUILDER_BLOCK } from "../../../lib/builder/constants";
 import type { MasonryOutput } from "../../../lib/builder/masonry";
 
 // ─── Constants ───────────────────────────────────────────────────────
@@ -15,8 +15,10 @@ import type { MasonryOutput } from "../../../lib/builder/masonry";
 export const HOLD_DELAY = 150; // ms before card-body drag activates
 export const MOVE_THRESHOLD_SQ = 9; // 3px² — grabbed → dragging
 export const CANCEL_DURATION = 200; // ms — cancel fly-back animation
-export const ADMIN_BLUE = BUILDER_BLUE;
-export const DROP_BLUE = BUILDER_BLUE;
+// Project-card DnD chrome inside `projectGridBlock` — semantic is block-level
+// (card reorder within a block), so tracks BUILDER_BLOCK, not BUILDER_YELLOW.
+export const ADMIN_BLUE = BUILDER_BLOCK;
+export const DROP_BLUE = BUILDER_BLOCK;
 
 // ─── Types ───────────────────────────────────────────────────────────
 

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

@@ -142,15 +142,15 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
       {/* + Add Column button */}
       <button
         onClick={handleAddColumn}
-        className="group/bb relative flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#3580f9] hover:bg-[#3580f9]/5 group"
+        className="group/bb relative flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#d68900] hover:bg-[#d68900]/5 group"
         aria-label="Add a column (fills first gap, or adds new row below)"
       >
         <div className="flex items-center justify-center w-full h-4">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#3580f9] transition-colors">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#d68900] transition-colors">
             <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
           </svg>
         </div>
-        <span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#3580f9] transition-colors">
+        <span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#d68900] transition-colors">
           Add Col
         </span>
         <BubbleTooltip>Add a column (fills first gap, or adds new row below)</BubbleTooltip>

package/lib/builder/constants.ts

@@ -72,9 +72,11 @@ export const ADMIN_ERROR_DARK = "#d42f1a";
 // while the delete inside a block toolbar is BLUE too (inside the block
 // pill, on hover it flashes red as a destructive cue).
 
-export const BUILDER_BLUE = "#3580f9";       // Columns (unified strong blue)
-export const BUILDER_BLOCK = "#3580f9";      // Blocks — same hue as columns
-export const BUILDER_VIOLET = "#7500d5";     // Sections (incl. Custom)
+export const BUILDER_BLUE = "#3580f9";       // Admin accent / generic blue (admin chrome, inputs, focus rings)
+export const BUILDER_YELLOW = "#d68900";     // Columns (dark — strokes, borders, pill text)
+export const BUILDER_YELLOW_LIGHT = "#fffcc2"; // Columns (light — pill background)
+export const BUILDER_BLOCK = "#3580f9";      // Blocks (shares the blue hue; distinct semantic from columns)
+export const BUILDER_VIOLET = "#7500d5";     // Sections (incl. Custom, Cover, Parallax)
 export const BUILDER_GREEN = "#22c55e";      // Success / confirmation cues (e.g. R2 asset check)
 
 /**

package/lib/version.ts

@@ -6,4 +6,4 @@
  * Exposed as a plain constant so it can be imported without reading
  * package.json at runtime.
  */
-export const ANDAMI_VERSION = "0.5.5";
+export const ANDAMI_VERSION = "0.5.6";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",