@morphika/andami 0.2.25 → 0.3.1

package/lib/builder/store-cover.ts

@@ -27,6 +27,45 @@ type StoreGet = () => BuilderState & { _pushSnapshot: () => void };
 
 const MIN_ROW_PERCENT = 10;
 
+/**
+ * Clamp and normalize an array of cover-row heights so they always respect
+ * the sum-to-100 invariant. Used to defend against bad data returned by
+ * Sanity (hand-edited documents, migrations, older saves).
+ *
+ * - Clamps each value into [MIN_ROW_PERCENT, 95] so the UI resizer can always
+ *   edit every row without hitting an unreachable bound
+ * - Scales the set to sum to exactly 100
+ * - Falls back to equal distribution if the input is empty or all zero
+ *
+ * Pure function — no side effects.
+ */
+export function normalizeRowHeights(percents: readonly number[]): number[] {
+  if (percents.length === 0) return [];
+
+  const clamped = percents.map((p) => {
+    if (!Number.isFinite(p) || p <= 0) return 0;
+    return Math.min(95, Math.max(MIN_ROW_PERCENT, p));
+  });
+
+  const total = clamped.reduce((a, b) => a + b, 0);
+
+  if (total === 0) {
+    // Equal distribution fallback
+    const share = 100 / percents.length;
+    return percents.map(() => share);
+  }
+
+  // Scale to sum exactly 100
+  const scaled = clamped.map((p) => (p / total) * 100);
+
+  // Round to 3 decimals, then adjust the first row so the sum is exactly 100
+  // (guards against floating-point drift like 99.9999…)
+  const rounded = scaled.map((p) => Math.round(p * 1000) / 1000);
+  const drift = 100 - rounded.reduce((a, b) => a + b, 0);
+  if (rounded.length > 0) rounded[0] = Math.round((rounded[0] + drift) * 1000) / 1000;
+  return rounded;
+}
+
 function updateCoverInRows(
   rows: ContentItem[],
   sectionKey: string,
@@ -66,14 +105,35 @@ export function createCoverActions(set: StoreSet, get: StoreGet) {
       set((state) => ({
         rows: updateCoverInRows(state.rows, sectionKey, (section) => {
           if (section.cover_rows.length >= 5) return section;
-          const totalRows = section.cover_rows.length + 1;
-          const equalPercent = Math.floor(100 / totalRows);
-          const remainder = 100 - equalPercent * totalRows;
-          const newRows = section.cover_rows.map((r, i) => ({
+
+          // Preserve existing proportions. The new row gets a share equal to
+          // the average of the current rows, and the existing rows are
+          // scaled down so the total still sums to exactly 100.
+          //
+          // Example:
+          //   before: [40, 60] (2 rows)
+          //   new row share = 100 / (2 + 1) = 33.33
+          //   scale = (100 - 33.33) / 100 = 0.6667
+          //   after:  [40*0.6667, 60*0.6667, 33.33] = [26.67, 40.00, 33.33]
+          //
+          // This keeps the user's resize work intact instead of resetting
+          // every row to an equal share.
+          const existing = section.cover_rows;
+          const newShare = 100 / (existing.length + 1);
+          const scale = (100 - newShare) / 100;
+          const scaledRows = existing.map((r) => ({
+            ...r,
+            height_percent: r.height_percent * scale,
+          }));
+          scaledRows.push(createDefaultCoverRow(newShare));
+
+          // Normalize to absorb rounding drift and clamp to [MIN_ROW_PERCENT, 95]
+          const normalized = normalizeRowHeights(scaledRows.map((r) => r.height_percent));
+          const newRows = scaledRows.map((r, i) => ({
             ...r,
-            height_percent: equalPercent + (i === 0 ? remainder : 0),
+            height_percent: normalized[i] ?? r.height_percent,
           }));
-          newRows.push(createDefaultCoverRow(equalPercent));
+
           return { ...section, cover_rows: newRows };
         }),
         isDirty: true,
@@ -101,6 +161,13 @@ export function createCoverActions(set: StoreSet, get: StoreGet) {
             return r;
           });
 
+          // Normalize to absorb any floating-point drift and keep the invariant
+          const normalized = normalizeRowHeights(redistributed.map((r) => r.height_percent));
+          const finalRows = redistributed.map((r, i) => ({
+            ...r,
+            height_percent: normalized[i] ?? r.height_percent,
+          }));
+
           const filteredColumns = section.columns.filter(
             (c) => c.grid_row !== rowIndex + 1
           );
@@ -111,7 +178,7 @@ export function createCoverActions(set: StoreSet, get: StoreGet) {
 
           return {
             ...section,
-            cover_rows: redistributed,
+            cover_rows: finalRows,
             columns: reindexedColumns,
           };
         }),
@@ -177,7 +244,8 @@ export function createCoverActions(set: StoreSet, get: StoreGet) {
       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"
       >>
     ): void => {
       get()._pushSnapshot();

package/lib/builder/store.ts

@@ -136,7 +136,6 @@ const initialState: BuilderState = {
   // History
   _history: [],
   _future: [],
-  _isTimeTraveling: false,
 
   // Color picker live preview (Phase 4)
   colorPickerPreview: null,
@@ -273,7 +272,6 @@ export const useBuilderStore = create<BuilderStore>((set, get) => ({
       // Reset history on document load
       _history: [],
       _future: [],
-      _isTimeTraveling: false,
     });
   },
 

package/lib/builder/types.ts

@@ -235,7 +235,6 @@ export interface BuilderState {
   // History (Undo/Redo) — BUG-010 fix: snapshots include pageSettings
   _history: import("./history").HistorySnapshot[];
   _future: import("./history").HistorySnapshot[];
-  _isTimeTraveling: boolean;
 
   /** Cache of fetched custom section base settings, keyed by custom_section_id.
    *  Populated by CustomSectionInstanceCard/ReadOnlyCustomSection on fetch.
@@ -383,7 +382,7 @@ export interface BuilderActions {
   removeCoverRow: (sectionKey: string, rowKey: string) => void;
   resizeCoverRow: (sectionKey: string, handleIndex: number, deltaPercent: number, startAbove: number, startBelow: number) => void;
   updateCoverRowAlign: (sectionKey: string, rowKey: string, align: CoverRow["vertical_align"]) => void;
-  updateCoverBackground: (sectionKey: string, fields: Partial<Pick<CoverSection, "background_type" | "background_color" | "background_image" | "background_video" | "background_position" | "background_size" | "background_overlay_color" | "background_overlay_opacity">>) => void;
+  updateCoverBackground: (sectionKey: string, fields: Partial<Pick<CoverSection, "background_type" | "background_color" | "background_image" | "background_video" | "background_position" | "background_size" | "background_overlay_color" | "background_overlay_opacity" | "nav_color">>) => void;
   updateCoverSettings: (sectionKey: string, settings: Partial<CoverSectionSettings>) => void;
   updateCoverHeight: (sectionKey: string, height: CoverSection["height"]) => void;
 

package/lib/csrf.ts

@@ -57,6 +57,27 @@ export function validateCsrf(request: NextRequest): boolean {
   return cookieToken === headerToken;
 }
 
+/**
+ * Defense-in-depth companion to validateCsrf for JSON endpoints.
+ *
+ * Our CSRF check pairs a SameSite=strict cookie with a custom X-CSRF-Token
+ * header, which is already strong. But some legacy attack vectors (CSRF via
+ * <form enctype="text/plain"> / multipart POST) are most easily shut down by
+ * also requiring `Content-Type: application/json` on every mutation. A
+ * browser form submission cannot set that Content-Type without CORS preflight
+ * — which our endpoints do not whitelist — so enforcing it closes off those
+ * vectors entirely.
+ *
+ * Returns true if the request body is (or is plausibly) JSON.
+ */
+export function hasJsonContentType(request: NextRequest): boolean {
+  const raw = request.headers.get("content-type");
+  if (!raw) return false;
+  // Allow parameters (charset, boundary, etc.) — match the media type only.
+  const mediaType = raw.split(";")[0].trim().toLowerCase();
+  return mediaType === "application/json";
+}
+
 /**
  * Return a 403 response for CSRF validation failure.
  */
@@ -66,3 +87,13 @@ export function csrfErrorResponse(): NextResponse {
     { status: 403 }
   );
 }
+
+/**
+ * Standard 415 response for wrong-content-type rejections.
+ */
+export function contentTypeErrorResponse(): NextResponse {
+  return NextResponse.json(
+    { error: "Content-Type must be application/json" },
+    { status: 415 }
+  );
+}

package/lib/sanity/types.ts

@@ -443,7 +443,7 @@ export interface CustomSectionInstance {
 // Uses the same SectionColumn/block system as V2 but with explicit
 // row heights (percentages) instead of content-driven auto rows.
 
-export type CoverSectionHeight = "100vh" | "80vh" | "50vh";
+export type CoverSectionHeight = "100vh" | "80vh" | "50vh" | "20vh";
 
 /** A single proportional row within a Cover Section */
 export interface CoverRow {
@@ -500,6 +500,9 @@ export interface CoverSection {
   background_overlay_color?: string;
   background_overlay_opacity?: number;   // 0–100
 
+  // Nav color override — hex applied to the navbar while this cover is on screen
+  nav_color?: string;
+
   // Height
   height: CoverSectionHeight;
 

package/lib/security.ts

@@ -228,6 +228,56 @@ export function isValidAssetPath(path: string): boolean {
   return true;
 }
 
+/** Top-level prefixes that may not be written to via the presigned upload API.
+ *  `_thumbs/` is the one allowed underscore-prefixed folder (auto-thumbnail pipeline). */
+const DISALLOWED_UPLOAD_PREFIXES = ["backup/", "backups/", "__system/", "system/"];
+const MAX_UPLOAD_KEY_DEPTH = 10;
+const MAX_UPLOAD_KEY_LENGTH = 1024;
+
+/**
+ * Validate that a presigned-upload R2 key is safe to sign.
+ *
+ * Builds on `isValidAssetPath` but adds defense-in-depth for keys that
+ * make it into a signed URL:
+ *   - Max length 1024 bytes (R2 cap is higher, but we keep UI-friendly keys)
+ *   - Max depth 10 folder levels (prevent pathological nesting)
+ *   - Reject hidden keys (starting with `.`) except the `.folder` placeholder
+ *   - Reject leading `_` except the `_thumbs/` sub-tree
+ *   - Reject reserved prefixes (backup/, system/, etc.)
+ *
+ * Accepts the full R2 key (e.g. `projects/hero.jpg`, `_thumbs/projects/hero.jpg`).
+ */
+export function isValidUploadKey(key: string): boolean {
+  if (!isValidAssetPath(key)) return false;
+  if (key.length > MAX_UPLOAD_KEY_LENGTH) return false;
+
+  const segments = key.split("/");
+  if (segments.length > MAX_UPLOAD_KEY_DEPTH) return false;
+
+  for (const segment of segments) {
+    if (!segment) return false; // empty segment = consecutive slashes
+    if (segment === "." || segment === "..") return false;
+  }
+
+  const firstSegment = segments[0];
+  const filename = segments[segments.length - 1];
+
+  // Hidden filename check — reject `.hidden` anywhere except the final-segment
+  // placeholder `.folder` used to create empty folders on R2.
+  if (filename.startsWith(".") && filename !== ".folder") return false;
+
+  // Leading-underscore prefixes are reserved for system folders — only _thumbs allowed
+  if (firstSegment.startsWith("_") && firstSegment !== "_thumbs") return false;
+
+  // Explicit denylist
+  const normalizedLead = `${firstSegment}/`.toLowerCase();
+  for (const banned of DISALLOWED_UPLOAD_PREFIXES) {
+    if (normalizedLead === banned.toLowerCase()) return false;
+  }
+
+  return true;
+}
+
 // ─── Font Magic Byte Validation ───────────────────────────────────────────
 
 interface FontMagicBytes {

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.2.25";
+export const ANDAMI_VERSION = "0.3.1";

package/package.json

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

package/sanity/schemas/objects/coverSection.ts

@@ -81,10 +81,31 @@ const responsiveRowOverrideFields = [
         type: "object",
         name: "coverRowOverride",
         fields: [
-          defineField({ name: "height_percent", title: "Height %", type: "number" }),
+          defineField({
+            name: "height_percent",
+            title: "Height %",
+            type: "number",
+            // [10, 95] matches the resize handle's MIN_ROW_PERCENT in
+            // store-cover.ts. Letting the schema accept values below 10
+            // created rows that the UI resizer could not edit without
+            // an unexpected normalization jump.
+            validation: (Rule) => Rule.min(10).max(95),
+          }),
         ],
       },
     ],
+    // Sum-to-100 invariant — applied across the array of overrides.
+    validation: (Rule) =>
+      Rule.custom((rows: unknown) => {
+        if (!Array.isArray(rows) || rows.length === 0) return true; // nothing to check
+        const total = rows.reduce((acc: number, row: unknown) => {
+          const pct = (row as { height_percent?: number } | null)?.height_percent;
+          return typeof pct === "number" ? acc + pct : acc;
+        }, 0);
+        // Allow ±1% drift for rounding artefacts from the resize handle.
+        if (Math.abs(total - 100) <= 1) return true;
+        return `Row heights must sum to 100% (got ${total.toFixed(1)}%)`;
+      }),
   }),
 ];
 
@@ -174,6 +195,16 @@ export default defineType({
       validation: (Rule) => Rule.min(0).max(100),
     }),
 
+    // ── Navbar Color Override ──
+    defineField({
+      name: "nav_color",
+      title: "Navbar Color",
+      type: "string",
+      description:
+        "Hex color applied to navbar text while this cover section is on screen. " +
+        "Clears when the next section takes over.",
+    }),
+
     // ── Section Height ──
     defineField({
       name: "height",
@@ -184,6 +215,7 @@ export default defineType({
           { title: "Full Viewport (100vh)", value: "100vh" },
           { title: "80% Viewport (80vh)", value: "80vh" },
           { title: "50% Viewport (50vh)", value: "50vh" },
+          { title: "20% Viewport (20vh)", value: "20vh" },
         ],
       },
       initialValue: "100vh",
@@ -204,8 +236,8 @@ export default defineType({
               name: "height_percent",
               title: "Height (%)",
               type: "number",
-              description: "Row height as percentage of section (5–95)",
-              validation: (Rule) => Rule.required().min(5).max(95),
+              description: "Row height as percentage of section (10–95)",
+              validation: (Rule) => Rule.required().min(10).max(95),
             }),
             defineField({
               name: "vertical_align",

package/components/builder/ParallaxSlideHeader.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-import { useBuilderStore } from "../../lib/builder/store";
-import type { ParallaxSlideV2 } from "../../lib/sanity/types";
-import { BUILDER_GREEN } from "../../lib/builder/constants";
-
-/**
- * ParallaxSlideHeader — thin header bar for each slide in a parallax group.
- * Shows slide index, background preview thumbnail, settings icon,
- * reorder arrows, and delete button.
- *
- * Session 123: Parallax V2 Phase 2
- */
-
-interface ParallaxSlideHeaderProps {
-  slide: ParallaxSlideV2;
-  slideIndex: number;
-  totalSlides: number;
-  groupKey: string;
-  isSelected: boolean;
-  onSelect: () => void;
-}
-
-export default function ParallaxSlideHeader({
-  slide,
-  slideIndex,
-  totalSlides,
-  groupKey,
-  isSelected,
-  onSelect,
-}: ParallaxSlideHeaderProps) {
-  const store = useBuilderStore();
-  const hasBg = slide.background_type === "image"
-    ? !!slide.background_image
-    : !!slide.background_video;
-
-  return (
-    <div
-      className="flex items-center gap-2 px-3 py-1.5 rounded-t-lg cursor-pointer select-none transition-colors"
-      style={{
-        background: isSelected
-          ? "linear-gradient(135deg, #c8a8ff 0%, #d8b8ff 100%)"
-          : "#f5f0ff",
-        borderBottom: "1px solid rgba(139, 92, 246, 0.15)",
-      }}
-      onClick={(e) => {
-        e.stopPropagation();
-        onSelect();
-      }}
-    >
-      {/* Slide number */}
-      <span
-        className="flex items-center justify-center rounded-md text-[10px] font-bold text-white min-w-[22px] h-[22px] px-1"
-        style={{ background: "#8b5cf6" }}
-      >
-        {slideIndex + 1}
-      </span>
-
-      {/* Background type indicator */}
-      <span className="text-[10px] text-neutral-500 uppercase tracking-wider font-medium">
-        {slide.background_type === "video" ? "Video BG" : "Image BG"}
-        {hasBg && <span className="ml-1 text-green-500">●</span>}
-      </span>
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Reorder arrows */}
-      <button
-        className="p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-30 transition-colors"
-        disabled={slideIndex === 0}
-        onClick={(e) => {
-          e.stopPropagation();
-          store.moveParallaxSlide(groupKey, slide._key, "up");
-        }}
-        title="Move slide up"
-      >
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-          <path d="M6 3L9 7H3L6 3Z" fill="currentColor" />
-        </svg>
-      </button>
-      <button
-        className="p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-30 transition-colors"
-        disabled={slideIndex === totalSlides - 1}
-        onClick={(e) => {
-          e.stopPropagation();
-          store.moveParallaxSlide(groupKey, slide._key, "down");
-        }}
-        title="Move slide down"
-      >
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-          <path d="M6 9L3 5H9L6 9Z" fill="currentColor" />
-        </svg>
-      </button>
-
-      {/* Delete slide */}
-      {totalSlides > 1 && (
-        <button
-          className="p-0.5 text-neutral-400 hover:text-red-500 transition-colors"
-          onClick={(e) => {
-            e.stopPropagation();
-            store.removeParallaxSlide(groupKey, slide._key);
-          }}
-          title="Delete slide"
-        >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-            <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}