@morphika/andami 0.2.26 → 0.4.0

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

@@ -0,0 +1,227 @@
+"use client";
+
+/**
+ * LiveProjectCarouselPreview — Builder canvas preview for projectCarouselBlock.
+ *
+ * Renders N mockup cards (respecting `max_projects`, aspect_ratio, gap,
+ * cards-per-view per viewport, border_radius) so the designer can evaluate
+ * the layout inside the builder without hitting the projects API. Real
+ * thumbnails show up on the public site.
+ *
+ * Mock card visual matches the empty-state placeholder of the Image / Video
+ * blocks: soft grey background + centered landscape (or play) icon. Keeps
+ * the preview readable at any zoom level and communicates that the real
+ * content is image/video thumbnails without faking actual data.
+ *
+ * Intentionally independent from LiveProjectGridPreview — same design
+ * language, no shared code.
+ */
+
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import type { ProjectCarouselBlock } from "../../../lib/sanity/types";
+import type { DeviceViewport } from "../../../lib/builder/types";
+
+// ─── Helpers (duplicated from public renderer on purpose — per user request
+//     the two carousels are not linked so changes on one side can't cascade). ──
+
+function resolveCardsPerView(
+  block: Pick<ProjectCarouselBlock, "cards_per_view_desktop" | "cards_per_view_tablet" | "cards_per_view_phone">,
+  viewport: DeviceViewport,
+): number {
+  if (viewport === "phone") return block.cards_per_view_phone ?? 1.2;
+  if (viewport === "tablet") return block.cards_per_view_tablet ?? 2.2;
+  return block.cards_per_view_desktop ?? 3.5;
+}
+
+function computeCardWidth(
+  containerWidth: number,
+  cardsPerView: number,
+  gap: number,
+): number {
+  if (cardsPerView <= 0 || containerWidth <= 0) return 0;
+  return Math.max(0, (containerWidth - (cardsPerView - 1) * gap) / cardsPerView);
+}
+
+// ─── Mock card glyphs ─────────────────────────────────────────────
+
+function LandscapeGlyph() {
+  return (
+    <svg width="48" height="48" 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>
+  );
+}
+
+function PlayGlyph() {
+  return (
+    <svg width="48" height="48" 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>
+  );
+}
+
+// ─── Main component ──────────────────────────────────────────────
+
+export default function LiveProjectCarouselPreview({
+  block,
+  viewport: frameViewport = "desktop",
+}: {
+  block: ProjectCarouselBlock;
+  viewport?: DeviceViewport;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const roRef = useRef<ResizeObserver | null>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  // Config
+  const maxProjects = block.max_projects ?? 8;
+  const gap = block.gap ?? 16;
+  const aspectRatio = block.aspect_ratio ?? "4/3";
+  const showTitle = block.show_title !== false;
+  const showSubtitle = block.show_subtitle === true;
+  const borderRadius = block.border_radius ?? 0;
+  const snapScroll = block.snap_scroll !== false;
+  const videoMode = block.video_mode ?? "off";
+  const showDots = block.show_dots === true;
+
+  const cardsPerView = resolveCardsPerView(block, frameViewport);
+  const cardWidth = useMemo(
+    () => computeCardWidth(containerWidth, cardsPerView, gap),
+    [containerWidth, cardsPerView, gap],
+  );
+
+  // ResizeObserver
+  const containerCallbackRef = useCallback((node: HTMLDivElement | null) => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    containerRef.current = node;
+    if (!node) return;
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        if (w > 0) setContainerWidth(w);
+      }
+    });
+    roRef.current = ro;
+    ro.observe(node);
+
+    const measure = () => {
+      const w = node.clientWidth;
+      if (w > 0) setContainerWidth(w);
+    };
+    measure();
+    requestAnimationFrame(measure);
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (roRef.current) {
+        roRef.current.disconnect();
+        roRef.current = null;
+      }
+    },
+    [],
+  );
+
+  // Build the mock project array — just indexes, each card shows its number.
+  const mockCards = useMemo(
+    () => Array.from({ length: Math.max(2, Math.min(20, maxProjects)) }, (_, i) => i),
+    [maxProjects],
+  );
+
+  const Glyph = videoMode !== "off" ? PlayGlyph : LandscapeGlyph;
+
+  return (
+    <div ref={containerCallbackRef} className="relative w-full">
+      {/* Scroll track — same mechanics as public renderer so layout is faithful */}
+      <div
+        className="flex overflow-x-auto"
+        style={{
+          gap: `${gap}px`,
+          scrollSnapType: snapScroll ? "x mandatory" : undefined,
+          scrollBehavior: "smooth",
+          WebkitOverflowScrolling: "touch",
+          // Hide native scrollbar
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+        }}
+      >
+        {mockCards.map((i) => (
+          <div
+            key={i}
+            className="flex flex-col"
+            style={{
+              flex: `0 0 ${cardWidth}px`,
+              scrollSnapAlign: snapScroll ? "start" : "none",
+              minWidth: 0,
+            }}
+          >
+            {/* Thumbnail area — mock */}
+            <div
+              className="relative w-full flex items-center justify-center"
+              style={{
+                aspectRatio: aspectRatio.replace("/", " / "),
+                background: "#f4f4f4",
+                borderRadius: borderRadius ? `${borderRadius}px` : undefined,
+              }}
+            >
+              <Glyph />
+            </div>
+
+            {/* Placeholder title + subtitle */}
+            {(showTitle || showSubtitle) && (
+              <div className="mt-3 px-0.5">
+                {showTitle && (
+                  <div
+                    className="h-[10px] rounded-sm"
+                    style={{ background: "#e0e0e0", width: "60%" }}
+                  />
+                )}
+                {showSubtitle && (
+                  <div
+                    className="h-[8px] rounded-sm mt-1.5"
+                    style={{ background: "#ededed", width: "40%" }}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Dots preview — decorative only inside the builder */}
+      {showDots && mockCards.length > 1 && (
+        <div className="flex justify-center gap-1.5 mt-4">
+          {mockCards.slice(0, Math.min(6, mockCards.length)).map((i) => (
+            <span
+              key={i}
+              style={{
+                width: i === 0 ? 24 : 6,
+                height: 6,
+                borderRadius: 999,
+                background: i === 0 ? "#2b2f38" : "#c9c9c9",
+                display: "inline-block",
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Tiny info strip so the designer knows this is a preview */}
+      <div className="absolute top-1 right-1 pointer-events-none text-[9px] font-medium px-1.5 py-0.5 rounded bg-white/80 border border-black/10 text-neutral-500 shadow-sm">
+        Preview · {mockCards.length} mock cards
+      </div>
+
+      {/* Chrome-style inline CSS to hide the webkit scrollbar */}
+      <style>{`
+        .flex::-webkit-scrollbar { display: none; }
+      `}</style>
+    </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/live-preview/index.ts

@@ -8,4 +8,5 @@ export { default as LiveVideoPreview } from "./LiveVideoPreview";
 export { default as LiveSpacerPreview } from "./LiveSpacerPreview";
 export { default as LiveButtonPreview } from "./LiveButtonPreview";
 export { default as LiveProjectGridPreview } from "./LiveProjectGridPreview";
+export { default as LiveProjectCarouselPreview } from "./LiveProjectCarouselPreview";
 export { ThumbBadge, LivePlaceholder, useProjectThumbnails, ProjectGridCard } from "./shared";

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

@@ -15,6 +15,7 @@ import {
   SpacerBlockEditor,
   ButtonBlockEditor,
   ProjectGridEditor,
+  ProjectCarouselBlockEditor,
 } from "../editors";
 
 export default function BlockSettings({
@@ -73,6 +74,12 @@ function BlockTypeEditor({ block }: { block: ContentBlock }) {
           block={block as import("../../../lib/sanity/types").ProjectGridBlock}
         />
       );
+    case "projectCarouselBlock":
+      return (
+        <ProjectCarouselBlockEditor
+          block={block as import("../../../lib/sanity/types").ProjectCarouselBlock}
+        />
+      );
     default:
       return (
         <div className="p-4">

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/animation/enter-types.ts

@@ -75,6 +75,7 @@ export const BLOCK_ENTER_PRESETS: Record<BlockType, readonly EnterPreset[]> = {
   buttonBlock:            ["fade", "slide-up", "scale"],
   spacerBlock:            [],           // invisible — no animation
   projectGridBlock:       [],           // uses card_entrance system
+  projectCarouselBlock:   [],           // uses card_entrance system
 };
 
 // ── Enter animation config ─────────────────────────────────────────

package/lib/animation/hover-effect-types.ts

@@ -68,6 +68,7 @@ export const BLOCK_HOVER_PRESETS: Record<BlockType, readonly HoverPreset[]> = {
   buttonBlock:            ["scale-up", "lift", "border-glow"],
   spacerBlock:            [],   // invisible
   projectGridBlock:       ["scale-up", "lift"],  // per-card effect
+  projectCarouselBlock:   [],   // uses per-card hover_effect field directly
 };
 
 // ── Hover effect config ────────────────────────────────────────────

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}`;
 }
 
 /**