@morphika/webframe 0.1.0

package/components/builder/SortableBlock.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import React, { useState } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { makeBlockId } from "./DndWrapper";
+import { ALL_BLOCK_INFO, isSectionBlockType } from "../../lib/builder/types";
+import type { DeviceViewport } from "../../lib/builder/types";
+import { useBuilderStore } from "../../lib/builder/store";
+import type { ContentBlock } from "../../lib/sanity/types";
+import BlockLivePreview from "./BlockLivePreview";
+import { getBlockAlignmentStyles, hasBlockAlignment } from "../../lib/builder/layout-styles";
+import type { BlockLayout } from "../../lib/sanity/types";
+import { BUILDER_ORANGE } from "../../lib/builder/constants";
+
+interface SortableBlockProps {
+  block: ContentBlock;
+  rowKey: string;
+  colKey: string;
+  blockIndex: number;
+  totalBlocks: number;
+  isSelected: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
+  onDuplicate?: () => void;
+}
+
+export default function SortableBlock({
+  block,
+  rowKey,
+  colKey,
+  blockIndex,
+  totalBlocks,
+  isSelected,
+  onSelect,
+  onDelete,
+  onContextMenu,
+  onDuplicate,
+}: SortableBlockProps) {
+  const previewMode = useBuilderStore((s) => s.previewMode);
+  const activeViewport = useBuilderStore((s) => s.activeViewport) as DeviceViewport;
+  const canvasZoom = useBuilderStore((s) => s.canvasZoom);
+  const reorderBlocks = useBuilderStore((s) => s.reorderBlocks);
+  const [isHovered, setIsHovered] = useState(false);
+  const id = makeBlockId(rowKey, colKey, block._key);
+
+  const canMoveUp = blockIndex > 0;
+  const canMoveDown = blockIndex < totalBlocks - 1;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id, disabled: previewMode });
+
+  const info = ALL_BLOCK_INFO.find((b) => b.type === block._type);
+
+  // Block alignment styles — applied on the SortableBlock wrapper (direct flex child of column).
+  // This is the canonical layer for alignment; BlockLivePreview should NOT duplicate these.
+  const blockLayout = (block as unknown as Record<string, unknown>).layout as BlockLayout | undefined;
+  const alignStyles = hasBlockAlignment(blockLayout) ? getBlockAlignmentStyles(blockLayout) : {};
+  // Only force width:100% when no horizontal alignment — align-self needs width:auto to shrink
+  const hasHAlign = blockLayout?.align_h && blockLayout.align_h !== "left";
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : 1,
+    ...(!hasHAlign ? { width: "100%" } : {}),
+    minWidth: 0,
+    ...alignStyles,
+  };
+
+  const showToolbar = isSelected || isHovered;
+
+  // ---- Preview Mode: pure content, no chrome ----
+  if (previewMode) {
+    return (
+      <div ref={setNodeRef} style={style}>
+        <BlockLivePreview block={block} viewport={activeViewport} />
+      </div>
+    );
+  }
+
+  // ---- Section blocks (projectGrid, parallax): NO block chrome ----
+  // The parent SortableRow handles the purple toolbar; this just renders content.
+  // Click still selects the block so SettingsPanel shows block settings.
+  const isSectionBlock = isSectionBlockType(block._type);
+  if (isSectionBlock) {
+    return (
+      <div
+        ref={setNodeRef}
+        style={style}
+        className="relative"
+        onClick={(e) => { e.stopPropagation(); onSelect(); }}
+      >
+        <BlockLivePreview block={block} viewport={activeViewport} editable />
+      </div>
+    );
+  }
+
+  // ---- Design Mode: WYSIWYG — full content with subtle hover overlay + floating controls ----
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`relative transition-[opacity,box-shadow] ${
+        isDragging
+          ? "ring-2 ring-[#e28b00] ring-offset-1 ring-offset-transparent rounded"
+          : ""
+      }`}
+      onClick={(e) => {
+        e.stopPropagation();
+        // If user clicked inside a contentEditable element (inline text editing),
+        // still select the block but don't steal focus from the editable.
+        onSelect();
+      }}
+      onContextMenu={onContextMenu}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Hover/selection outline overlay — scales with zoom */}
+      <div
+        className="pointer-events-none absolute inset-0 z-[3] rounded transition-[box-shadow]"
+        style={
+          isSelected
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px ${BUILDER_ORANGE}` }
+            : isHovered
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(226, 139, 0, 0.4)` }
+            : undefined
+        }
+      />
+
+      {/* Floating toolbar — centered INSIDE top of block, appears on hover or when selected.
+          Positioning (translate) is separated from counter-scaling (scale) into nested
+          elements so that zoom changes don't shift the anchor point.
+          Delete button is integrated at the end of the toolbar with a gap separator. */}
+      <div
+        className={`absolute top-0 left-1/2 z-[6] transition-opacity ${
+          showToolbar ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        style={{ transform: "translateX(-50%)", marginTop: 4 }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="flex items-center gap-1.5"
+          style={{ transform: `scale(${Math.min(2, 1 / canvasZoom)})`, transformOrigin: "top center" }}
+        >
+        <div className="flex items-center bg-[#e28b00] rounded shadow-lg overflow-hidden">
+          {/* Move up arrow */}
+          <button
+            onClick={() => canMoveUp && reorderBlocks(rowKey, colKey, blockIndex, blockIndex - 1)}
+            className={`transition-colors px-1 py-0.5 text-[11px] ${
+              canMoveUp
+                ? "text-white/80 hover:text-white hover:bg-white/10 cursor-pointer"
+                : "text-white/25 cursor-default"
+            }`}
+            title="Move block up"
+            aria-label="Move block up"
+            disabled={!canMoveUp}
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+              <path d="M5 2L2 6h6L5 2z" fill="currentColor" />
+            </svg>
+          </button>
+          {/* Move down arrow */}
+          <button
+            onClick={() => canMoveDown && reorderBlocks(rowKey, colKey, blockIndex, blockIndex + 1)}
+            className={`transition-colors px-1 py-0.5 text-[11px] border-l border-white/20 ${
+              canMoveDown
+                ? "text-white/80 hover:text-white hover:bg-white/10 cursor-pointer"
+                : "text-white/25 cursor-default"
+            }`}
+            title="Move block down"
+            aria-label="Move block down"
+            disabled={!canMoveDown}
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+              <path d="M5 8L2 4h6L5 8z" fill="currentColor" />
+            </svg>
+          </button>
+          {/* Block type label */}
+          <span className="text-[11px] text-white/70 px-1.5 py-0.5 border-l border-white/20">
+            {info?.icon || "▪"} {info?.label || block._type}
+          </span>
+          {/* Enter animation badge */}
+          {block.enter_animation?.preset && block.enter_animation.preset !== "none" && (
+            <span className="text-[10px] text-white/50 px-1 py-0.5 border-l border-white/15" title={`Animation: ${block.enter_animation.preset}`}>
+              ✦
+            </span>
+          )}
+          {/* Duplicate */}
+          {onDuplicate && (
+            <button
+              onClick={onDuplicate}
+              className="text-white/70 hover:text-white transition-colors px-1.5 py-0.5 text-[11px] border-l border-white/20 hover:bg-white/10"
+              title="Duplicate block (Ctrl+D)"
+              aria-label="Duplicate block"
+            >
+              ⧉
+            </button>
+          )}
+        </div>
+        {/* Delete button — inline at end of toolbar with gap separator */}
+        <button
+          onClick={onDelete}
+          className="w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors shadow-md shrink-0"
+          title="Delete block"
+          aria-label="Delete block"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10">
+            <path
+              d="M2 2l6 6M8 2l-6 6"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+        </div>
+      </div>
+
+      {/* Live content — rendered exactly as it would appear on the public site */}
+      <BlockLivePreview block={block} viewport={activeViewport} editable />
+    </div>
+  );
+}

package/components/builder/SortableRow.tsx

@@ -0,0 +1,362 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { makeRowId } from "./DndWrapper";
+import { useBuilderStore } from "../../lib/builder/store";
+import { DEFAULT_GRID_WIDTH } from "../../lib/builder/constants";
+import { DEVICE_HEIGHTS } from "../../lib/builder/types";
+import type { ReactNode } from "react";
+import type { ContentItem, PageSection, PageSectionV2, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
+import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import { getRowLayoutStyles } from "../../lib/builder/layout-styles";
+import { normalizeMinHeight } from "../../lib/builder/utils";
+import { getSectionV2SettingValue, getRowSettingValue } from "./settings-panel/responsive-helpers";
+
+/**
+ * Convert vh-based CSS values to pixels using the simulated device viewport height.
+ * In the builder canvas, 100vh should map to the device frame height, not the browser viewport.
+ * Returns the original value unchanged if it's not a vh unit.
+ */
+function vhToBuilderPx(value: string | undefined, deviceHeight: number): string | undefined {
+  if (!value) return value;
+  const vhMatch = value.match(/^(\d+(?:\.\d+)?)vh$/);
+  if (vhMatch) {
+    const vhNum = parseFloat(vhMatch[1]);
+    return `${Math.round((vhNum / 100) * deviceHeight)}px`;
+  }
+  return value;
+}
+
+/** Section type labels */
+const SECTION_TYPE_LABELS: Record<string, string> = {
+  projectGrid: "Project Grid",
+};
+
+/**
+ * Get the section label for a content item.
+ * For PageSections: uses section_type directly (no structural inference).
+ * For PageSectionV2: returns "Section".
+ */
+function getSectionLabel(item: ContentItem): string | null {
+  if (isCustomSectionInstance(item)) {
+    return (item as CustomSectionInstance).custom_section_title || "Saved Section";
+  }
+  if (isParallaxGroup(item)) {
+    return "Parallax Showcase";
+  }
+  if (isPageSectionV2(item)) {
+    return "Section";
+  }
+  if (isPageSection(item)) {
+    return SECTION_TYPE_LABELS[item.section_type] || "Section";
+  }
+  return null;
+}
+
+interface SortableRowProps {
+  rowKey: string;
+  row: ContentItem;
+  isSelected: boolean;
+  columnCount: number;
+  onSelect: () => void;
+  onDelete: () => void;
+  onAddColumn: () => void;
+  onDuplicate: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  isFirst: boolean;
+  isLast: boolean;
+  children: ReactNode;
+}
+
+export default function SortableRow({
+  rowKey,
+  row,
+  isSelected,
+  columnCount,
+  onSelect,
+  onDelete,
+  onAddColumn,
+  onDuplicate,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
+  children,
+}: SortableRowProps) {
+  const previewMode = useBuilderStore((s) => s.previewMode);
+  const canvasZoom = useBuilderStore((s) => s.canvasZoom);
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const gridSettings = useBuilderStore((s) => s.gridSettings);
+  const customSectionCache = useBuilderStore((s) => s._customSectionCache);
+  const [isHovered, setIsHovered] = useState(false);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: makeRowId(rowKey), disabled: previewMode });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+    zIndex: isDragging ? 50 : undefined,
+  };
+
+  // Determine if this is a PageSection, PageSectionV2, or a Row
+  const isV2Section = isPageSectionV2(row);
+  const isSection = isPageSection(row);
+  const sectionLabel = getSectionLabel(row);
+
+  // For sections: use section settings — viewport-aware for both V1 and V2 sections
+  const resolvedSettings = useMemo(() => {
+    const overridableKeys = [
+      "spacing_top", "spacing_right", "spacing_bottom", "spacing_left",
+      "offset_top", "offset_right", "offset_bottom", "offset_left",
+      "background_color", "background_opacity",
+      "border_color", "border_width", "border_style", "border_sides", "border_radius",
+    ] as const;
+
+    if (isV2Section) {
+      const v2 = row as PageSectionV2;
+      const base = v2.settings || {};
+      // Merge responsive overrides on top of base settings for the active viewport.
+      const merged: Record<string, unknown> = { ...base };
+      for (const key of overridableKeys) {
+        merged[key] = getSectionV2SettingValue(v2, activeViewport, key, (base as unknown as Record<string, unknown>)[key]);
+      }
+      return merged;
+    }
+
+    if (isSection) {
+      const ps = row as PageSection;
+      const base = ps.settings || {};
+      // BUG-013 continuation: Merge responsive overrides for V1 PageSections too
+      const merged: Record<string, unknown> = { ...base };
+      for (const key of overridableKeys) {
+        merged[key] = getRowSettingValue(ps, activeViewport, key, (base as Record<string, unknown>)[key]);
+      }
+      return merged;
+    }
+
+    // CustomSectionInstance: merge base section settings from cache + per-instance overrides
+    // Then apply viewport-aware responsive resolution (same pattern as V2 sections)
+    if (isCustomSectionInstance(row)) {
+      const inst = row as CustomSectionInstance;
+      const cachedBase = customSectionCache[inst.custom_section_id] || {};
+      // Merge: base from cache → per-instance overrides on top
+      const base: Record<string, unknown> = { ...cachedBase, ...inst.settings_overrides };
+
+      // Apply viewport-aware responsive overrides if available
+      if (activeViewport !== "desktop" && inst.responsive_overrides) {
+        const viewportKey = activeViewport as "tablet" | "phone";
+        const viewportOverride = inst.responsive_overrides[viewportKey];
+        if (viewportOverride?.settings) {
+          for (const key of overridableKeys) {
+            const overrideVal = (viewportOverride.settings as Record<string, unknown>)[key];
+            if (overrideVal !== undefined && overrideVal !== null) {
+              base[key] = overrideVal;
+            }
+          }
+        }
+      }
+      return base;
+    }
+
+    return {};
+  }, [isV2Section, isSection, row, activeViewport, customSectionCache]);
+
+  const bgColor = (resolvedSettings as Record<string, unknown>).background_color as string || "transparent";
+
+  // Sections (V1 + V2) are always full-width
+  const maxWidth = "100%";
+  const gridPadding = "0px";
+  // Sections don't have min_height
+  const rawMinHeight = undefined;
+  const normalizedMinHeight = normalizeMinHeight(rawMinHeight);
+  // In the builder canvas, convert vh units to device frame pixels so 100vh matches
+  // the simulated viewport height rather than the actual browser viewport.
+  const minHeight = vhToBuilderPx(normalizedMinHeight, DEVICE_HEIGHTS[activeViewport]);
+
+  // New layout styles (spacing TRBL, background w/ opacity+image, offset, border)
+  const layoutStyles = getRowLayoutStyles(resolvedSettings as Record<string, unknown> || {});
+
+  const showToolbar = isSelected || isHovered;
+  const coverRow = isSection ? true : false;
+
+  // ---- Preview Mode: clean rendering with row styles applied ----
+  if (previewMode) {
+    // Cover rows: full-width, no padding, no container (matches RowRenderer)
+    if (coverRow) {
+      return (
+        <div
+          ref={setNodeRef}
+          style={{
+            ...style,
+            backgroundColor: bgColor !== "transparent" ? bgColor : undefined,
+          }}
+        >
+          {children}
+        </div>
+      );
+    }
+    // Build merged styles for preview mode
+    const previewRowStyle: React.CSSProperties = {
+      ...style,
+      ...layoutStyles,
+      minHeight,
+    };
+    // Legacy fallback: if no layout background set, use old bgColor
+    if (!layoutStyles.backgroundColor && !layoutStyles.backgroundImage) {
+      if (bgColor !== "transparent") previewRowStyle.backgroundColor = bgColor;
+    }
+
+    return (
+      <div ref={setNodeRef} style={previewRowStyle}>
+        <div style={{ maxWidth, margin: "0 auto", paddingLeft: maxWidth !== "100%" ? gridPadding : undefined, paddingRight: maxWidth !== "100%" ? gridPadding : undefined }}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  // ---- Design Mode: WYSIWYG — same visual rendering as Preview, with hover overlays ----
+  // Build merged styles for design mode
+  const designRowStyle: React.CSSProperties = {
+    ...style,
+    ...layoutStyles,
+    minHeight: coverRow ? undefined : minHeight,
+  };
+  // Legacy fallback: if no layout background set, use old bgColor
+  if (!layoutStyles.backgroundColor && !layoutStyles.backgroundImage) {
+    if (bgColor !== "transparent") designRowStyle.backgroundColor = bgColor;
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={designRowStyle}
+      className={`relative transition-[opacity,box-shadow] ${
+        isDragging ? "ring-2 ring-[#93278f] ring-offset-2 ring-offset-[#0a0a0a]" : ""
+      }`}
+      onClick={(e) => { e.stopPropagation(); onSelect(); }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Selection/hover outline — scales with zoom */}
+      <div
+        className="pointer-events-none absolute inset-0 z-[1] transition-[box-shadow]"
+        style={
+          isSelected
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px #93278f` }
+            : isHovered
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(147, 39, 143, 0.4)` }
+            : undefined
+        }
+      />
+
+      {/* Section toolbar — wide pill aligned top-left outside the row */}
+      <div
+        className={`absolute top-0 left-0 z-[5] flex flex-col items-stretch transition-opacity ${
+          showToolbar ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        style={{
+          transform: `translateX(-100%) scale(${Math.min(1.5, 1 / canvasZoom)})`,
+          transformOrigin: "top right",
+          width: "90px",
+        }}
+        onClick={(e) => { e.stopPropagation(); onSelect(); }}
+      >
+        {/* Main toolbar — drag + actions */}
+        <div
+          className="flex flex-col items-stretch bg-[#93278f]/90 rounded-l-lg shadow-lg py-2 px-2.5 gap-1 cursor-grab active:cursor-grabbing"
+          {...attributes}
+          {...listeners}
+        >
+          {/* Section label — shows specific type for page sections */}
+          <span className="text-[11px] text-white select-none leading-tight pointer-events-none font-medium tracking-wide">
+            {sectionLabel || "Section"}
+          </span>
+
+          {/* Action row: Duplicate + Move up + Move down */}
+          <div className="flex items-center gap-1 py-0.5">
+            <button
+              onClick={(e) => { e.stopPropagation(); onDuplicate(); }}
+              onPointerDown={(e) => e.stopPropagation()}
+              className="flex items-center justify-center text-[12px] text-white/80 hover:text-white transition-colors"
+              title="Duplicate section"
+              aria-label="Duplicate section"
+            >
+              ⧉
+            </button>
+            <button
+              onClick={(e) => { e.stopPropagation(); onMoveUp(); }}
+              onPointerDown={(e) => e.stopPropagation()}
+              disabled={isFirst}
+              className="flex items-center justify-center text-[12px] text-white/80 hover:text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Move up"
+              aria-label="Move section up"
+            >
+              ↑
+            </button>
+            <button
+              onClick={(e) => { e.stopPropagation(); onMoveDown(); }}
+              onPointerDown={(e) => e.stopPropagation()}
+              disabled={isLast}
+              className="flex items-center justify-center text-[12px] text-white/80 hover:text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Move down"
+              aria-label="Move section down"
+            >
+              ↓
+            </button>
+          </div>
+
+          {/* Add column — shown for V2 sections and regular rows, hidden for closed sections (V1 PageSection) */}
+          {(!sectionLabel || isV2Section) && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onAddColumn(); }}
+              onPointerDown={(e) => e.stopPropagation()}
+              className="flex items-center gap-1 text-[11px] text-white/80 hover:text-white transition-colors py-0.5"
+              title="Add column"
+              aria-label="Add column"
+            >
+              <span className="text-white/50">+</span> Col
+            </button>
+          )}
+
+          {/* Delete */}
+          <button
+            onClick={(e) => { e.stopPropagation(); onDelete(); }}
+            onPointerDown={(e) => e.stopPropagation()}
+            className="flex items-center gap-1 text-[11px] text-white/80 hover:text-red-300 transition-colors py-0.5"
+            title="Delete section"
+            aria-label="Delete section"
+          >
+            <span className="text-white/50">-</span> Delete
+          </button>
+        </div>
+      </div>
+
+      {/* Row bg color indicator */}
+      {bgColor !== "transparent" && isSelected && (
+        <div className="absolute top-1 right-1 z-[5]" style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "top right" }}>
+          <span
+            className="w-4 h-4 rounded-full border-2 border-white/50 block shadow-sm"
+            style={{ backgroundColor: bgColor }}
+            title={`Background: ${bgColor}`}
+          />
+        </div>
+      )}
+
+      {/* Content — same layout as Preview */}
+      <div style={coverRow ? undefined : { maxWidth, margin: "0 auto", paddingLeft: maxWidth !== "100%" ? gridPadding : undefined, paddingRight: maxWidth !== "100%" ? gridPadding : undefined }} className="relative z-[2]">
+        {children}
+      </div>
+    </div>
+  );
+}