@morphika/andami 0.2.26 → 0.3.1

package/components/builder/iconPrimitives.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+/**
+ * Shared SVG primitives for the block and section card icons.
+ *
+ * Both `BlockCardIcons.tsx` and `SectionCardIcons.tsx` consume these so the
+ * visual language (brick background + fade + shadow + bevel) stays 1:1
+ * consistent. Each helper accepts an `idPrefix` / `id` so multiple icons can
+ * render side by side without filter/gradient/mask collisions.
+ */
+
+/** Brick-rect positions — 24 rects, 4 rows, top half only. */
+export const BRICK: ReadonlyArray<readonly [number, number]> = [
+  [18.7, 0.1], [53.5, 0.1], [88.4, 0.1], [123.2, 0.1], [158.1, 0.1], [192.9, 0.1],
+  [1.3, 17.6], [36.1, 17.6], [71, 17.6], [105.8, 17.6], [140.7, 17.6], [175.5, 17.6],
+  [18.7, 34.8], [53.5, 34.8], [88.4, 34.8], [123.2, 34.8], [158.1, 34.8], [192.9, 34.8],
+  [1.3, 52.3], [36.1, 52.3], [71, 52.3], [105.8, 52.3], [140.7, 52.3], [175.5, 52.3],
+];
+
+/** Grid line pattern + right-side fade gradient defs.
+ *
+ *  The fade reaches full opacity at x=200 (viewBox units) rather than at
+ *  x=220 (the right edge). This guarantees that the rightmost ~20 viewBox
+ *  units of the SVG are solid #F4F4F4 — eliminating sub-pixel anti-aliasing
+ *  artifacts when the SVG is downscaled to fit a container whose width is
+ *  slightly smaller than the full viewBox (e.g. 176px for a 220-wide viewBox).
+ */
+export function BgDefs({ prefix }: { prefix: string }) {
+  return (
+    <>
+      <pattern id={`${prefix}-grid`} x="0.8" y="-0.3" width="17.5" height="17.5" patternUnits="userSpaceOnUse">
+        <path d="M 17.5 0 L 0 0 0 17.5" fill="none" stroke="#BABABA" strokeWidth="0.5" opacity="0.49" />
+      </pattern>
+      <linearGradient id={`${prefix}-fade`} x1="140.2" y1="60" x2="200" y2="60" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stopColor="#F4F4F4" stopOpacity="0" />
+        <stop offset="1" stopColor="#F4F4F4" />
+      </linearGradient>
+    </>
+  );
+}
+
+/** Background body: solid fill → grid pattern → brick overlay → right-side fade. */
+export function Bg({ prefix }: { prefix: string }) {
+  return (
+    <>
+      <rect width="220" height="120" fill="#F4F4F4" />
+      <rect width="220" height="120" fill={`url(#${prefix}-grid)`} />
+      <g fill="none" stroke="#FFFFFF" strokeWidth="0.5">
+        {BRICK.map(([x, y]) => (
+          <rect key={`${x}-${y}`} x={x} y={y} width="15.5" height="15.3" />
+        ))}
+      </g>
+      <rect x="140.2" y="0" width="79.8" height="120" fill={`url(#${prefix}-fade)`} />
+    </>
+  );
+}
+
+/** Vector drop-shadow filter. */
+export function ShadowFilter({ id }: { id: string }) {
+  return (
+    <filter id={id} x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dy="3" />
+      <feComponentTransfer><feFuncA type="linear" slope="0.22" /></feComponentTransfer>
+      <feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge>
+    </filter>
+  );
+}
+
+/** Vertical bevel gradient: #FFFFFF → endColor (default #E6ECF6 for blocks, #EBEAEF for sections). */
+export function VertBevel({ id, endColor = "#E6ECF6" }: { id: string; endColor?: string }) {
+  return (
+    <linearGradient id={id} x1="0.5" y1="0" x2="0.5" y2="1">
+      <stop offset="0" stopColor="#FFFFFF" />
+      <stop offset="1" stopColor={endColor} />
+    </linearGradient>
+  );
+}

package/components/builder/live-preview/LiveImagePreview.tsx

@@ -11,9 +11,23 @@ export default function LiveImagePreview({ block }: { block: ImageBlock }) {
   const [useFallback, setUseFallback] = useState(false);
 
   if (!block.asset_path) {
+    // Empty state: fills the column (min 240px) with a light-gray backdrop
+    // and a landscape placeholder glyph. Once the user picks an image the
+    // block sizes itself normally.
+    const isFill = block.width === "fill";
+    const wrapperStyle: React.CSSProperties = isFill
+      ? { position: "absolute", inset: 0 }
+      : { width: "100%" };
     return (
-      <div className="border border-dashed border-neutral-300 rounded bg-neutral-50 flex items-center justify-center py-12">
-        <span className="text-neutral-400 text-xs">No image set</span>
+      <div style={wrapperStyle}>
+        <div className="w-full h-full min-h-[240px] rounded flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+            <rect x="6" y="10" width="44" height="36" rx="3" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+            <circle cx="18" cy="21" r="3" fill="#b0b5bd" />
+            <path d="M12 42 L22 28 L28 34 L38 22 L46 42 Z" fill="#b0b5bd" />
+          </svg>
+          <span className="text-[11px] text-neutral-500">No image yet</span>
+        </div>
       </div>
     );
   }

package/components/builder/live-preview/LiveVideoPreview.tsx

@@ -17,9 +17,22 @@ import type { VideoBlock } from "../../../lib/sanity/types";
  */
 export default function LiveVideoPreview({ block }: { block: VideoBlock }) {
   if (!block.url_or_path) {
+    // Empty state: fills the column (min 240px) with a light-gray backdrop
+    // and a centered play-button glyph. Once the user picks a video the
+    // block sizes itself normally.
+    const isFill = block.width === "fill";
+    const wrapperStyle: React.CSSProperties = isFill
+      ? { position: "absolute", inset: 0 }
+      : { width: "100%" };
     return (
-      <div className="border border-dashed border-neutral-700 rounded bg-neutral-900/50 flex items-center justify-center py-12">
-        <span className="text-neutral-600 text-xs">No video set</span>
+      <div style={wrapperStyle}>
+        <div className="w-full h-full min-h-[240px] rounded flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+            <circle cx="28" cy="28" r="22" fill="#FFFFFF" stroke="#b0b5bd" strokeWidth="1.5" />
+            <path d="M24 20 L37 28 L24 36 Z" fill="#b0b5bd" />
+          </svg>
+          <span className="text-[11px] text-neutral-500">No video yet</span>
+        </div>
       </div>
     );
   }

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

@@ -85,8 +85,8 @@ export default function ColumnV2Settings({
     <>
       {isResponsive && (
         <div className="px-4 pt-3">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
-            <span className="text-[11px] font-medium text-[#076bff]">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#4794e2]/8 border border-[#4794e2]/15">
+            <span className="text-[11px] font-medium text-[#4794e2]">
               Editing {activeViewport === "tablet" ? "Tablet" : "Phone"} overrides
             </span>
           </div>
@@ -98,7 +98,7 @@ export default function ColumnV2Settings({
           <span>
             Span
             {hasSpanOverride && (
-              <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
+              <span className="ml-1 text-[9px] text-[#4794e2]">overridden</span>
             )}
           </span>
         }>
@@ -109,7 +109,7 @@ export default function ColumnV2Settings({
               max={gridColumns}
               value={effectiveSpan}
               onChange={(e) => handleSpanChange(parseInt(e.target.value))}
-              className="flex-1 accent-[#076bff]"
+              className="flex-1 accent-[#4794e2]"
             />
             <span className="text-xs text-neutral-900 w-12 text-right font-medium">
               {effectiveSpan}/{gridColumns}
@@ -133,7 +133,7 @@ export default function ColumnV2Settings({
                 <div
                   key={i}
                   className={`h-1.5 flex-1 rounded-full transition-colors ${
-                    isActive ? "bg-[#076bff]" : "bg-neutral-200"
+                    isActive ? "bg-[#4794e2]" : "bg-neutral-200"
                   }`}
                 />
               );

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

@@ -22,6 +22,7 @@ import { useBuilderStore } from "../../../lib/builder/store";
 import type { CoverSection } from "../../../lib/sanity/types";
 import {
   BackgroundIcon,
+  NavbarColorIcon,
   OverlayIcon,
   SpacingIcon,
   GridGapsIcon,
@@ -56,6 +57,7 @@ const HEIGHT_OPTIONS = [
   { value: "100vh", label: "Full Viewport (100vh)" },
   { value: "80vh", label: "80% Viewport (80vh)" },
   { value: "50vh", label: "50% Viewport (50vh)" },
+  { value: "20vh", label: "20% Viewport (20vh)" },
 ];
 
 const ALIGN_OPTIONS = [
@@ -83,7 +85,8 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
   const updateBg = (fields: Partial<Pick<CoverSection,
     "background_type" | "background_color" | "background_image" | "background_video" |
     "background_position" | "background_size" |
-    "background_overlay_color" | "background_overlay_opacity"
+    "background_overlay_color" | "background_overlay_opacity" |
+    "nav_color"
   >>) => {
     store.updateCoverBackground(section._key, fields);
   };
@@ -162,6 +165,30 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
         )}
       </SettingsSection>
 
+      {/* Navbar Color Override */}
+      <SettingsSection title="Navbar Color" defaultOpen={false} icon={<NavbarColorIcon />}>
+        <SettingsField label="Color">
+          <div className="flex items-center gap-2">
+            <ColorSwatchPicker
+              value={section.nav_color || ""}
+              onChange={(val) => updateBg({ nav_color: typeof val === "string" ? val : undefined })}
+              swatches={paletteSwatches}
+            />
+            {section.nav_color && (
+              <button
+                onClick={() => updateBg({ nav_color: undefined })}
+                className="text-[10px] text-neutral-400 hover:text-neutral-600 transition-colors shrink-0"
+              >
+                Clear
+              </button>
+            )}
+          </div>
+        </SettingsField>
+        <p className="text-[10px] text-neutral-400 leading-snug px-0.5">
+          Override the navbar text color while this cover section is on screen. Clears when the next section takes over.
+        </p>
+      </SettingsSection>
+
       {/* Overlay */}
       <SettingsSection title="Overlay" defaultOpen icon={<OverlayIcon />}>
         <SettingsField label="Color">

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

@@ -101,7 +101,7 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
             onClick={() => !isCustom && applyPresetV2(section._key, preset.id)}
             className={`flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${
               isActive
-                ? "border-[#076bff] bg-[#076bff]/5"
+                ? "border-[#4794e2] bg-[#4794e2]/5"
                 : isCustom
                 ? "border-neutral-200 bg-neutral-50 opacity-60 cursor-default"
                 : "border-neutral-200 bg-white hover:border-neutral-300 hover:bg-neutral-50"
@@ -121,7 +121,7 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
                   <div
                     key={i}
                     className={`rounded-sm transition-colors ${
-                      isActive ? "bg-[#076bff]" : "bg-neutral-300"
+                      isActive ? "bg-[#4794e2]" : "bg-neutral-300"
                     }`}
                     style={{ flex: span }}
                   />
@@ -129,7 +129,7 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
               )}
             </div>
             <span className={`text-[9px] font-medium ${
-              isActive ? "text-[#076bff]" : "text-neutral-500"
+              isActive ? "text-[#4794e2]" : "text-neutral-500"
             }`}>
               {preset.label}
             </span>
@@ -140,15 +140,15 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
       {/* + Add Column button */}
       <button
         onClick={handleAddColumn}
-        className="flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#076bff] hover:bg-[#076bff]/5 group"
+        className="flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#4794e2] hover:bg-[#4794e2]/5 group"
         title="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-[#076bff] transition-colors">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#4794e2] 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-[#076bff] transition-colors">
+        <span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#4794e2] transition-colors">
           Add Col
         </span>
       </button>
@@ -204,8 +204,8 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
       {/* Responsive info banner */}
       {isResponsive && (
         <div className="px-4 pt-3">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
-            <span className="text-[11px] font-medium text-[#076bff]">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#4794e2]/8 border border-[#4794e2]/15">
+            <span className="text-[11px] font-medium text-[#4794e2]">
               Editing {activeViewport === "tablet" ? "Tablet" : "Phone"} overrides
             </span>
           </div>
@@ -218,7 +218,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
           <div className="flex gap-2">
             <button
               onClick={handleStack}
-              className="flex-1 rounded-lg bg-[#076bff]/8 border border-[#076bff]/20 py-2 text-xs font-medium text-[#076bff] hover:bg-[#076bff]/15 transition-colors"
+              className="flex-1 rounded-lg bg-[#4794e2]/8 border border-[#4794e2]/20 py-2 text-xs font-medium text-[#4794e2] hover:bg-[#4794e2]/15 transition-colors"
               title="Stack all columns vertically (full width, one per row)"
             >
               Stack Columns
@@ -237,7 +237,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
             </button>
           </div>
           {hasAnyOverrides && (
-            <p className="text-[10px] text-[#076bff]/60 mt-1.5">
+            <p className="text-[10px] text-[#4794e2]/60 mt-1.5">
               {hasColOverrides ? "Column layout" : ""}
               {hasColOverrides && hasSettingsOverrides ? " + " : ""}
               {hasSettingsOverrides ? "settings" : ""}
@@ -266,7 +266,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
           <span>
             Col Gap
             {isResponsive && hasSectionV2SettingOverride(section, activeViewport, "col_gap") && (
-              <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
+              <span className="ml-1 text-[9px] text-[#4794e2]">overridden</span>
             )}
           </span>
         }>
@@ -278,7 +278,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
               step={4}
               value={getGapValue("col_gap", 20)}
               onChange={(e) => updateSettingResponsive("col_gap", parseInt(e.target.value))}
-              className="flex-1 accent-[#076bff]"
+              className="flex-1 accent-[#4794e2]"
             />
             <span className="text-xs text-neutral-900 w-12 text-right">
               {getGapValue("col_gap", 20)}px
@@ -298,7 +298,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
           <span>
             Row Gap
             {isResponsive && hasSectionV2SettingOverride(section, activeViewport, "row_gap") && (
-              <span className="ml-1 text-[9px] text-[#076bff]">overridden</span>
+              <span className="ml-1 text-[9px] text-[#4794e2]">overridden</span>
             )}
           </span>
         }>
@@ -310,7 +310,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
               step={4}
               value={getGapValue("row_gap", 20)}
               onChange={(e) => updateSettingResponsive("row_gap", parseInt(e.target.value))}
-              className="flex-1 accent-[#076bff]"
+              className="flex-1 accent-[#4794e2]"
             />
             <span className="text-xs text-neutral-900 w-12 text-right">
               {getGapValue("row_gap", 20)}px

package/lib/assets.ts

@@ -23,6 +23,18 @@
 
 import { logger } from "./logger";
 
+/**
+ * Percent-encode each slash-separated segment of a path so special characters
+ * (spaces, `?`, `#`, etc.) don't break the URL, while preserving the `/`
+ * boundaries as part of the URL path.
+ *
+ * Using encodeURIComponent on the whole path would turn `/` into `%2F`, which
+ * CDNs treat as a single filename segment — breaking directory-based keys.
+ */
+function encodePath(path: string): string {
+  return path.split("/").map(encodeURIComponent).join("/");
+}
+
 /**
  * Resolve a relative asset path to a full URL (public site).
  *
@@ -41,19 +53,22 @@ export function assetUrl(path: string | undefined | null): string {
 
   // #7: Normalize path — strip all leading slashes to prevent double-slash URLs
   const cleanPath = path.replace(/^\/+/, "");
+  // #16: Per-segment percent-encode so paths with spaces / `?` / `#` work on
+  // both the R2 CDN and the proxy route. Slashes are preserved.
+  const encodedPath = encodePath(cleanPath);
 
   // R2 direct mode: when env var is set, skip proxy entirely.
   // This is the zero-latency path — URL resolves to R2 CDN directly.
   const r2Base = process.env.NEXT_PUBLIC_R2_BUCKET_URL;
   if (r2Base) {
-    return `${r2Base.replace(/\/+$/, "")}/${cleanPath}`;
+    return `${r2Base.replace(/\/+$/, "")}/${encodedPath}`;
   }
 
   // Proxy mode: route through /api/assets which handles provider detection
   // at runtime (supports provider switching without env var changes).
   const base = process.env.NEXT_PUBLIC_ASSET_BASE_URL;
   const resolvedBase = base || "/api/assets";
-  return `${resolvedBase.replace(/\/+$/, "")}/${cleanPath}`;
+  return `${resolvedBase.replace(/\/+$/, "")}/${encodedPath}`;
 }
 
 /**

package/lib/builder/constants.ts

@@ -55,27 +55,34 @@ export const ADMIN_ERROR_DARK = "#d42f1a";
 // visual differentiation at a glance. This is a design rule that
 // MUST be followed across all builder components.
 //
-//   BLUE    (#076bff) — Columns: outlines, resize handles, drag grip,
-//                        span badge, column selection/hover chrome.
-//   GREEN-B (#0d9668) — Blocks: "+ Add Block" buttons, block toolbar
+//   BLUE    (#4794e2) — Columns: outlines, resize handles, drag grip,
+//                        column selection/hover chrome.
+//   BLUE    (#4794e2) — Blocks: "+ Add Block" buttons, block toolbar
 //                        pill, block selection ring, block-level actions.
-//   BLUE    (#076bff) — Drop zones: gap drop targets during drag,
-//                        insertion lines, "Drop Here" labels, swap target
-//                        highlight (blue border + tinted background).
-//                        (Merged with column color for coherence.)
-//   VIOLET  (#8b5cf6) — Custom sections: saved section cards, custom
-//                        section instance badges, section editor chrome,
-//                        "Create New" custom section button.
+//                        (Same hue as columns — a future pass may split
+//                        these into distinct hues if the shared blue is
+//                        causing ambiguity.)
+//   VIOLET  (#7500d5) — Sections: side pill, cover/parallax accent,
+//                        section outlines, hover/selection chrome.
+//                        Also used for Custom Sections card chrome.
 //
 // When adding new builder UI, pick the color that matches the entity
 // being represented, not the action being performed. For example, a
 // delete button on a column is BLUE (it belongs to the column chrome),
-// while a delete button on a block toolbar is ORANGE.
+// 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 = "#076bff";       // Columns
-export const BUILDER_ORANGE = "#0d9668";     // Blocks (emerald — was orange #e28b00)
-export const BUILDER_GREEN = "#22c55e";      // Drop zones
-export const BUILDER_VIOLET = "#8b5cf6";     // Custom sections
+export const BUILDER_BLUE = "#4794e2";       // Columns (softened — was #076bff)
+export const BUILDER_BLOCK = "#4794e2";      // Blocks — same hue as columns for now
+export const BUILDER_VIOLET = "#7500d5";     // Sections (incl. Custom)
+export const BUILDER_GREEN = "#22c55e";      // Success / confirmation cues (e.g. R2 asset check)
+
+/**
+ * @deprecated Use `BUILDER_BLOCK` instead. The legacy name survived multiple
+ * colour migrations (orange → emerald → blue) and no longer reflects reality.
+ * Kept as an alias so third-party code doesn't break at the import boundary.
+ */
+export const BUILDER_ORANGE = BUILDER_BLOCK;
 
 /**
  * Padding map for Row settings (in pixels)

package/lib/builder/format.ts

@@ -0,0 +1,25 @@
+/**
+ * Formatting helpers for builder UI.
+ *
+ * Kept as pure functions in their own module so they can be imported from
+ * any builder component and unit-tested in isolation.
+ */
+
+/**
+ * Format a row height percentage with at most one decimal place, dropping
+ * the trailing `.0` when the rounded value is an integer. Used by the
+ * Cover Section row sub-pill in `SortableRow`.
+ *
+ * Examples:
+ *   formatRowPercent(100)      -> "100"
+ *   formatRowPercent(50)       -> "50"
+ *   formatRowPercent(33.333)   -> "33.3"
+ *   formatRowPercent(66.6667)  -> "66.7"
+ *   formatRowPercent(0)        -> "0"
+ *   formatRowPercent(NaN)      -> "0" (fallback — never expected in practice)
+ */
+export function formatRowPercent(p: number): string {
+  if (!Number.isFinite(p)) return "0";
+  const rounded = Math.round(p * 10) / 10;
+  return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(1);
+}

package/lib/builder/history.ts

@@ -23,14 +23,11 @@ export interface HistoryState {
   _history: HistorySnapshot[];
   /** Future snapshots (for redo). Last element = next redo. */
   _future: HistorySnapshot[];
-  /** Whether we're currently applying undo/redo (skip snapshot). */
-  _isTimeTraveling: boolean;
 }
 
 export const initialHistoryState: HistoryState = {
   _history: [],
   _future: [],
-  _isTimeTraveling: false,
 };
 
 /**

package/lib/builder/layout-styles.ts

@@ -124,7 +124,7 @@ export function getBackgroundStyles(
     const imgUrl = assetBaseUrl
       ? `${assetBaseUrl.replace(/\/$/, "")}/${s.background_image}`
       : s.background_image;
-    styles.backgroundImage = `url(${imgUrl})`;
+    styles.backgroundImage = `url("${imgUrl}")`;
     styles.backgroundSize = s.background_size || "cover";
     styles.backgroundPosition = s.background_position || "center center";
     styles.backgroundRepeat = s.background_repeat || "no-repeat";

package/lib/builder/section-visibility.ts

@@ -0,0 +1,36 @@
+/**
+ * Visibility helpers for scroll-driven section effects (e.g. the Cover
+ * Section's navbar colour override).
+ *
+ * Kept as pure functions so they're testable without mounting a renderer.
+ */
+
+/**
+ * Fraction (0–1) of the viewport currently occupied by a section,
+ * computed from its top/bottom positions relative to the viewport and
+ * the viewport height.
+ *
+ *   - 0 when the section is fully above or fully below the viewport
+ *   - 1 when the section fully covers the viewport (top ≤ 0 and
+ *     bottom ≥ vh)
+ *   - fractional for partial overlaps
+ *
+ * Safe against pathological inputs: returns 0 if `viewportHeight <= 0`.
+ */
+export function sectionVisibilityRatio(
+  top: number,
+  bottom: number,
+  viewportHeight: number
+): number {
+  if (viewportHeight <= 0) return 0;
+  const visible = Math.min(bottom, viewportHeight) - Math.max(top, 0);
+  if (visible <= 0) return 0;
+  return Math.min(1, visible / viewportHeight);
+}
+
+/**
+ * Threshold (as a fraction of the viewport) above which a Cover / Parallax
+ * section is considered "on screen" for the purposes of taking over the
+ * navbar colour.
+ */
+export const NAV_COLOR_OVERRIDE_THRESHOLD = 0.3;

package/lib/builder/serializer/normalizers.ts

@@ -13,6 +13,7 @@ import type { EnterAnimationConfig } from "../../../lib/animation/enter-types";
 
 import { ensureKeys, normalizeBlockResponsive, SECTION_TYPE_MAP } from "./shared";
 import { migrateProjectGridV1ToV2, normalizeBlockAnimationFields } from "./migrations";
+import { normalizeRowHeights } from "../store-cover";
 
 // ============================================
 // Section Normalizers
@@ -178,12 +179,20 @@ export function migrateContentItem(item: Record<string, unknown>): ContentItem {
   // CoverSection — normalize with defaults for null fields (Session 176)
   if (item._type === "coverSection") {
     const raw = item as unknown as CoverSection;
-    const coverRows = (raw.cover_rows ?? []).map((r) => ({
+    const rawRows = (raw.cover_rows ?? []).map((r) => ({
       ...r,
       _key: r._key || generateKey(),
       height_percent: r.height_percent ?? 100,
       vertical_align: r.vertical_align ?? "start",
     }));
+    // Defend the sum-to-100 invariant against hand-edited or legacy docs:
+    // the schema sum-check is newer than the oldest docs that may be in
+    // Sanity, so a page saved before Session 178 could have drift.
+    const normalizedPercents = normalizeRowHeights(rawRows.map((r) => r.height_percent));
+    const coverRows = rawRows.map((r, i) => ({
+      ...r,
+      height_percent: normalizedPercents[i] ?? r.height_percent,
+    }));
     return {
       ...raw,
       _key: (raw._key as string) || generateKey(),
@@ -217,7 +226,7 @@ export function migrateContentItem(item: Record<string, unknown>): ContentItem {
 /**
  * Convert a Sanity `page` document into the builder's state shape.
  */
-export function documentToState(doc: Page): Omit<BuilderState, "isDirty" | "isSaving" | "saveError" | "lastSavedAt" | "selectedRowKey" | "selectedColumnKey" | "selectedBlockKey" | "_history" | "_future" | "_isTimeTraveling" | "_originalSlug" | "previewMode" | "canvasZoom" | "canvasPanX" | "canvasPanY" | "canvasTool" | "activeViewport" | "editorMode" | "customSectionSlug" | "customSectionTitle" | "savedPageState"> {
+export function documentToState(doc: Page): Omit<BuilderState, "isDirty" | "isSaving" | "saveError" | "lastSavedAt" | "selectedRowKey" | "selectedColumnKey" | "selectedBlockKey" | "_history" | "_future" | "_originalSlug" | "previewMode" | "canvasZoom" | "canvasPanX" | "canvasPanY" | "canvasTool" | "activeViewport" | "editorMode" | "customSectionSlug" | "customSectionTitle" | "savedPageState"> {
   const docRecord = doc as unknown as Record<string, unknown>;
   const pageSettings = docRecord.page_settings as Record<string, unknown> | undefined;
 
@@ -254,10 +263,10 @@ export function documentToState(doc: Page): Omit<BuilderState, "isDirty" | "isSa
       text_color: (pageSettings?.text_color as string) || DEFAULT_TEXT_COLOR,
       nav_color,
       enter_animation: pageSettings?.enter_animation as PageSettings["enter_animation"],
-      nav_entrance_animation: (pageSettings?.nav_entrance_animation as PageSettings["nav_entrance_animation"]) || undefined,
-      nav_entrance_duration: (pageSettings?.nav_entrance_duration as number) || undefined,
-      nav_entrance_delay: (pageSettings?.nav_entrance_delay as number) || undefined,
-      nav_entrance_disabled: (pageSettings?.nav_entrance_disabled as boolean) || undefined,
+      nav_entrance_animation: (pageSettings?.nav_entrance_animation as PageSettings["nav_entrance_animation"]) ?? undefined,
+      nav_entrance_duration: (pageSettings?.nav_entrance_duration as number) ?? undefined,
+      nav_entrance_delay: (pageSettings?.nav_entrance_delay as number) ?? undefined,
+      nav_entrance_disabled: (pageSettings?.nav_entrance_disabled as boolean) ?? undefined,
     },
     // Grid settings are loaded separately via applyGlobalStyles(), not from the page document.
     // Provide defaults here to satisfy the type; they'll be overwritten on init.

package/lib/builder/serializer/serializers.ts

@@ -349,9 +349,9 @@ export function stateToDocument(
           nav_color: navColor || undefined,
           enter_animation: hasEnterAnimation ? enterAnim : undefined,
           nav_entrance_animation: navEntranceAnimation || undefined,
-          nav_entrance_duration: navEntranceDuration || undefined,
-          nav_entrance_delay: navEntranceDelay || undefined,
-          nav_entrance_disabled: navEntranceDisabled || undefined,
+          nav_entrance_duration: navEntranceDuration ?? undefined,
+          nav_entrance_delay: navEntranceDelay ?? undefined,
+          nav_entrance_disabled: navEntranceDisabled ?? undefined,
         }
       : undefined,
     draft_mode: state.draftMode,

package/lib/builder/store-blocks.ts

@@ -4,6 +4,7 @@ import { isPageSectionV2, isParallaxGroup, isCoverSection } from "../../lib/sani
 import { createDefaultBlock } from "./defaults";
 import { generateKey } from "./utils";
 import { findSectionPath, updateSectionAtPath, moveBlockInState } from "./store-helpers";
+import { pushSnapshot } from "./history";
 
 type StoreSet = (
   partial: Partial<BuilderState> | ((state: BuilderState) => Partial<BuilderState>)
@@ -129,15 +130,21 @@ export function createBlockActions(set: StoreSet, get: StoreGet) {
     },
 
     moveBlock: (blockKey: string, targetSectionKey: string, targetColumnKey: string, toIndex: number): void => {
-      // RC-001 fix: Validate first without side effects, then push snapshot
-      // BEFORE applying mutation. This ensures undo state captures the
-      // pre-mutation rows, even if another mutation races in between.
-      const currentRows = get().rows;
-      const result = moveBlockInState(currentRows, blockKey, targetSectionKey, targetColumnKey, toIndex);
-      if (!result) return;
-
-      get()._pushSnapshot();
-      set({ rows: result.rows, isDirty: true });
+      // Do read+validate+snapshot+set atomically inside a single functional
+      // update so the snapshot can never drift from the rows the move was
+      // computed against. Previously the snapshot was captured via get() AFTER
+      // the read, leaving a window where a concurrent mutation could make the
+      // undo target inconsistent with the move that just landed.
+      set((state) => {
+        const result = moveBlockInState(state.rows, blockKey, targetSectionKey, targetColumnKey, toIndex);
+        if (!result) return state;
+        return {
+          rows: result.rows,
+          isDirty: true,
+          _history: pushSnapshot(state._history, { rows: state.rows, pageSettings: state.pageSettings }),
+          _future: [],
+        };
+      });
     },
 
     reorderBlocks: (sectionKey: string, columnKey: string, fromIndex: number, toIndex: number): void => {