@morphika/webframe 0.1.0

package/components/builder/ParallaxGroupCanvas.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useBuilderStore } from "../../lib/builder/store";
+import type { ParallaxGroup, ParallaxSlideV2, PageSectionV2 } from "../../lib/sanity/types";
+import SectionV2Canvas from "./SectionV2Canvas";
+import ParallaxSlideHeader from "./ParallaxSlideHeader";
+import { BUILDER_GREEN, BUILDER_VIOLET } from "../../lib/builder/constants";
+import { DEVICE_HEIGHTS } from "../../lib/builder/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+
+/**
+ * ParallaxGroupCanvas — renders a ParallaxGroup in the builder canvas.
+ *
+ * Each slide is displayed as a stacked section with:
+ *   - ParallaxSlideHeader (index, bg indicator, reorder, delete)
+ *   - SectionV2Canvas (full V2 grid editor reuse)
+ *   - Faint background preview when a bg image is set
+ *   - Empty state message when slide has no background and no content blocks
+ *
+ * An "Add Slide" button appears at the bottom.
+ *
+ * Session 123: Parallax V2 Phase 2
+ * Session 127: Phase 5 — empty state, slide counter badge, smooth reorder
+ */
+
+interface ParallaxGroupCanvasProps {
+  group: ParallaxGroup;
+  onAddBlockTarget: (sectionKey: string, colKey: string, insertIndex?: number) => void;
+}
+
+/** Check whether a slide is empty (no background set and no content blocks) */
+function isSlideEmpty(slide: ParallaxSlideV2): boolean {
+  const hasBg = slide.background_type === "video"
+    ? !!slide.background_video
+    : !!slide.background_image;
+  const hasBlocks = slide.columns.some((col) => col.blocks.length > 0);
+  return !hasBg && !hasBlocks;
+}
+
+export default function ParallaxGroupCanvas({
+  group,
+  onAddBlockTarget,
+}: ParallaxGroupCanvasProps) {
+  const store = useBuilderStore();
+  const selectedRowKey = store.selectedRowKey;
+  const activeViewport = store.activeViewport || "desktop";
+  const slidePreviewHeight = DEVICE_HEIGHTS[activeViewport];
+  const assetUrl = useAssetUrl();
+
+  return (
+    <div
+      className="relative"
+      style={{
+        borderRadius: 12,
+        border: "1.5px solid rgba(139, 92, 246, 0.25)",
+        overflow: "visible",
+      }}
+    >
+      {/* Group header */}
+      <div
+        className="flex items-center gap-2 px-3 py-2 cursor-pointer"
+        style={{
+          background: selectedRowKey === group._key
+            ? "linear-gradient(135deg, #e8deff 0%, #ddd0ff 100%)"
+            : "linear-gradient(135deg, #f3f0ff 0%, #ede5ff 100%)",
+          borderBottom: "1px solid rgba(139, 92, 246, 0.15)",
+          borderRadius: "12px 12px 0 0",
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          store.selectRow(group._key);
+        }}
+      >
+        <span className="text-[11px] font-semibold text-[#8b5cf6]">
+          ▽ Parallax Showcase
+        </span>
+        {/* Slide counter badge */}
+        <span
+          className="inline-flex items-center justify-center rounded-full text-[9px] font-bold text-white min-w-[18px] h-[18px] px-1"
+          style={{ background: BUILDER_VIOLET }}
+        >
+          {group.slides.length}
+        </span>
+        <div className="flex-1" />
+        <span className="text-[9px] text-neutral-400 uppercase tracking-wider">
+          {group.transition_effect}
+        </span>
+      </div>
+
+      {/* Slides — CSS transition for smooth reorder */}
+      {group.slides.map((slide, slideIndex) => {
+        const isSlideSelected = selectedRowKey === slide._key;
+        const bgImagePath = slide.background_type === "image" && slide.background_image
+          ? assetUrl(slide.background_image)
+          : null;
+        // For video backgrounds, show the first frame as a poster-like preview
+        const bgVideoPath = slide.background_type === "video" && slide.background_video
+          ? assetUrl(slide.background_video)
+          : null;
+        const hasBgPreview = !!(bgImagePath || bgVideoPath);
+        const slideEmpty = isSlideEmpty(slide);
+
+        // Create a virtual PageSectionV2 to pass to SectionV2Canvas
+        const virtualSection: PageSectionV2 = {
+          _type: "pageSectionV2",
+          _key: slide._key,
+          section_type: "empty-v2",
+          columns: slide.columns,
+          settings: slide.section_settings,
+        };
+
+        return (
+          <div
+            key={slide._key}
+            className="relative"
+            style={{
+              borderTop: slideIndex > 0 ? "1px solid rgba(139, 92, 246, 0.1)" : undefined,
+              transition: "opacity 0.2s ease",
+            }}
+          >
+            {/* Slide header */}
+            <ParallaxSlideHeader
+              slide={slide}
+              slideIndex={slideIndex}
+              totalSlides={group.slides.length}
+              groupKey={group._key}
+              isSelected={isSlideSelected}
+              onSelect={() => store.selectRow(slide._key)}
+            />
+
+            {/* Slide content with optional background preview — 100vh equivalent */}
+            <div className="relative" style={{ minHeight: slidePreviewHeight }}>
+              {/* Background preview — faint image behind the grid */}
+              {bgImagePath && (
+                <div
+                  className="absolute inset-0 bg-cover bg-center pointer-events-none"
+                  style={{
+                    backgroundImage: `url(${bgImagePath})`,
+                    backgroundPosition: slide.background_position || "center center",
+                    opacity: 0.12,
+                  }}
+                />
+              )}
+
+              {/* Video background preview — muted autoplay thumbnail */}
+              {bgVideoPath && (
+                <video
+                  src={bgVideoPath}
+                  muted
+                  playsInline
+                  autoPlay
+                  loop
+                  className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+                  style={{ opacity: 0.12 }}
+                />
+              )}
+
+              {/* Overlay preview */}
+              {(slide.background_overlay_opacity ?? 0) > 0 && hasBgPreview && (
+                <div
+                  className="absolute inset-0 pointer-events-none"
+                  style={{
+                    backgroundColor: slide.background_overlay_color || "#000000",
+                    opacity: (slide.background_overlay_opacity ?? 0) / 100 * 0.3,
+                  }}
+                />
+              )}
+
+              {/* Empty state message */}
+              {slideEmpty && (
+                <div
+                  className="absolute inset-0 flex items-center justify-center pointer-events-none"
+                  style={{ zIndex: 5 }}
+                >
+                  <div className="text-center px-6 py-4 rounded-lg" style={{ background: "rgba(139, 92, 246, 0.06)" }}>
+                    <p className="text-[12px] font-medium text-[#8b5cf6] mb-1">
+                      Empty slide
+                    </p>
+                    <p className="text-[11px] text-neutral-400 leading-relaxed">
+                      Set a background image and add content to this slide
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* V2 section grid editor — stretch to fill slide height */}
+              <div
+                className="relative"
+                style={{
+                  minHeight: slidePreviewHeight,
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
+                <SectionV2Canvas
+                  section={virtualSection}
+                  onAddBlockTarget={onAddBlockTarget}
+                  fillHeight
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Add Slide button */}
+      <div
+        className="flex justify-center py-3"
+        style={{
+          background: "linear-gradient(135deg, #f9f7ff 0%, #f3f0ff 100%)",
+          borderTop: "1px solid rgba(139, 92, 246, 0.1)",
+          borderRadius: "0 0 12px 12px",
+        }}
+      >
+        <button
+          className="flex items-center gap-1.5 rounded-lg px-4 py-1.5 text-[11px] font-medium text-white transition-colors hover:opacity-90"
+          style={{ background: BUILDER_GREEN }}
+          onClick={(e) => {
+            e.stopPropagation();
+            store.addParallaxSlide(group._key);
+          }}
+        >
+          <span className="text-sm leading-none">+</span> Add Slide
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/builder/ParallaxSlideHeader.tsx

@@ -0,0 +1,113 @@
+"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>
+  );
+}