@morphika/andami 0.2.26 → 0.4.0

package/sanity/schemas/blocks/projectCarouselBlock.ts

@@ -0,0 +1,218 @@
+import { defineField, defineType } from "sanity";
+import { blockLayoutField, blockAnimationFields } from "./blockLayout";
+
+/**
+ * projectCarouselBlock — horizontal carousel of projects.
+ *
+ * Intended use: "keep browsing" row at the end of a project page, but usable
+ * on any page. Projects are pulled automatically (latest / random) — no
+ * manual selection list. When placed on /work/[slug], the current project
+ * can be filtered out automatically via `exclude_current`.
+ *
+ * Treated as a **section-level block** (same semantics as projectGridBlock):
+ * it lives in a full-width column of a pageSectionV2 and is added via the
+ * "+ Add Section" modal, not the "+ Add Block" picker.
+ *
+ * Intentionally independent from projectGridBlock — the two share visual
+ * primitives (thumbnail resolution, project data shape) but no coupled
+ * code, so changes on one side never break the other.
+ */
+export const projectCarouselBlock = defineType({
+  name: "projectCarouselBlock",
+  title: "Project Carousel",
+  type: "object",
+  fields: [
+    // ─── Source ───
+    defineField({
+      name: "source_mode",
+      title: "Source",
+      type: "string",
+      description: "How projects are selected for the carousel",
+      options: {
+        list: [
+          { title: "Latest projects", value: "auto_latest" },
+          { title: "Random projects", value: "auto_random" },
+        ],
+      },
+      initialValue: "auto_latest",
+    }),
+    defineField({
+      name: "max_projects",
+      title: "Number of projects",
+      type: "number",
+      description: "How many projects to show (2–20)",
+      initialValue: 8,
+      validation: (Rule) => Rule.min(2).max(20).integer(),
+    }),
+    defineField({
+      name: "exclude_current",
+      title: "Exclude current project",
+      type: "boolean",
+      description:
+        "When the carousel is on a /work/[slug] page, automatically filter out the project currently being viewed",
+      initialValue: true,
+    }),
+
+    // ─── Layout ───
+    defineField({
+      name: "cards_per_view_desktop",
+      title: "Cards per view (desktop)",
+      type: "number",
+      description: "Supports fractional values — e.g. 3.5 shows half of the next card to hint 'more content'",
+      initialValue: 3.5,
+      validation: (Rule) => Rule.min(1).max(6),
+    }),
+    defineField({
+      name: "cards_per_view_tablet",
+      title: "Cards per view (tablet)",
+      type: "number",
+      initialValue: 2.2,
+      validation: (Rule) => Rule.min(1).max(4),
+    }),
+    defineField({
+      name: "cards_per_view_phone",
+      title: "Cards per view (phone)",
+      type: "number",
+      initialValue: 1.2,
+      validation: (Rule) => Rule.min(1).max(3),
+    }),
+    defineField({
+      name: "gap",
+      title: "Gap between cards (px)",
+      type: "number",
+      initialValue: 16,
+      validation: (Rule) => Rule.min(0).max(80),
+    }),
+
+    // ─── Card Display ───
+    defineField({
+      name: "aspect_ratio",
+      title: "Card aspect ratio",
+      type: "string",
+      options: {
+        list: [
+          { title: "Landscape (16:9)", value: "16/9" },
+          { title: "Standard (4:3)", value: "4/3" },
+          { title: "Square (1:1)", value: "1/1" },
+          { title: "Portrait (3:4)", value: "3/4" },
+          { title: "Tall (9:16)", value: "9/16" },
+        ],
+      },
+      initialValue: "4/3",
+    }),
+    defineField({
+      name: "show_title",
+      title: "Show title",
+      type: "boolean",
+      initialValue: true,
+    }),
+    defineField({
+      name: "show_subtitle",
+      title: "Show subtitle",
+      type: "boolean",
+      initialValue: false,
+    }),
+    defineField({
+      name: "border_radius",
+      title: "Border radius (px)",
+      type: "number",
+      initialValue: 0,
+    }),
+    defineField({
+      name: "hover_effect",
+      title: "Hover effect",
+      type: "string",
+      options: {
+        list: [
+          { title: "Scale", value: "scale" },
+          { title: "None", value: "none" },
+        ],
+      },
+      initialValue: "scale",
+    }),
+
+    // ─── Video ───
+    defineField({
+      name: "video_mode",
+      title: "Video mode",
+      type: "string",
+      options: {
+        list: [
+          { title: "Off", value: "off" },
+          { title: "Hover", value: "hover" },
+          { title: "Autoloop", value: "autoloop" },
+        ],
+      },
+      initialValue: "off",
+    }),
+
+    // ─── Controls ───
+    defineField({
+      name: "show_arrows",
+      title: "Show prev / next arrows",
+      type: "boolean",
+      initialValue: true,
+    }),
+    defineField({
+      name: "show_dots",
+      title: "Show pagination dots",
+      type: "boolean",
+      initialValue: false,
+    }),
+    defineField({
+      name: "snap_scroll",
+      title: "Snap scrolling",
+      type: "boolean",
+      description: "Cards snap into place as the user scrolls / swipes",
+      initialValue: true,
+    }),
+
+    // ─── Card entrance animation ───
+    defineField({
+      name: "card_entrance",
+      title: "Card Entrance Animation",
+      type: "object",
+      fields: [
+        defineField({ name: "enabled", title: "Enabled", type: "boolean", initialValue: false }),
+        defineField({
+          name: "preset",
+          title: "Preset",
+          type: "string",
+          options: {
+            list: [
+              { title: "Fade", value: "fade" },
+              { title: "Slide Up", value: "slide-up" },
+              { title: "Scale", value: "scale" },
+            ],
+          },
+          initialValue: "slide-up",
+        }),
+        defineField({
+          name: "stagger_delay",
+          title: "Stagger Delay",
+          type: "number",
+          description: "Delay between cards (ms)",
+          initialValue: 80,
+        }),
+        defineField({
+          name: "duration",
+          title: "Duration",
+          type: "number",
+          description: "Animation duration (ms)",
+          initialValue: 500,
+        }),
+      ],
+    }),
+
+    // ─── Standard block fields ───
+    ...blockAnimationFields,
+    blockLayoutField,
+  ],
+  preview: {
+    select: { mode: "source_mode", n: "max_projects" },
+    prepare({ mode, n }: { mode?: string; n?: number }) {
+      const modeLabel = mode === "auto_random" ? "Random" : "Latest";
+      return { title: `Project Carousel (${modeLabel} · ${n ?? 8})` };
+    },
+  },
+});

package/sanity/schemas/index.ts

@@ -19,6 +19,7 @@ import {
   spacerBlock,
   buttonBlock,
   projectGridBlock,
+  projectCarouselBlock,
 } from "./blocks";
 
 // Re-export individual schemas for granular use by instances
@@ -69,6 +70,7 @@ export {
   spacerBlock,
   buttonBlock,
   projectGridBlock,
+  projectCarouselBlock,
 } from "./blocks";
 
 export const schemaTypes = [
@@ -91,7 +93,7 @@ export const schemaTypes = [
   parallaxGroup,            // Parallax V2 group (Session 123)
   coverSection,             // Cover Section — proportional rows (Session 176)
 
-  // Blocks (8)
+  // Blocks (9)
   textBlock,
   imageBlock,
   imageGridBlock,
@@ -99,6 +101,7 @@ export const schemaTypes = [
   spacerBlock,
   buttonBlock,
   projectGridBlock,
+  projectCarouselBlock,
 ];
 
 /**

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/sanity/schemas/pageSectionV2.ts

@@ -67,6 +67,7 @@ export default defineType({
                 { type: "spacerBlock" },
                 { type: "buttonBlock" },
                 { type: "projectGridBlock" },
+                { type: "projectCarouselBlock" },
               ],
             }),
             // Column-level enter animation (Session 117)

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>
-  );
-}