@morphika/andami 0.2.3 → 0.2.5

package/components/blocks/ProjectGridBlockRenderer.tsx

@@ -165,6 +165,32 @@ export default function ProjectGridBlockRenderer({
   const borderRadius = block.border_radius || 0;
   const videoMode = block.video_mode || "off";
 
+  // ─── Allow scale hover to overflow the V2 column ───
+  // V2 columns have overflow:hidden (CSS Grid img protection). The project
+  // grid uses absolute positioning so it doesn't need that protection.
+  // When scale hover is active, we relax the parent column's overflow so
+  // the scaled card isn't clipped at the column boundary.
+  const hasProjects = resolvedProjects.length > 0;
+
+  useEffect(() => {
+    if (hoverEffect !== "scale" && hoverEffect !== "3d") return;
+    const el = containerRef.current;
+    if (!el) return;
+
+    // Walk up to find the V2 column (class starts with "sv2-col-")
+    let col: HTMLElement | null = el.parentElement;
+    while (col && !col.className?.includes("sv2-col-")) {
+      col = col.parentElement;
+    }
+    if (!col) return;
+
+    const prev = col.style.overflow;
+    col.style.overflow = "visible";
+    return () => {
+      col.style.overflow = prev;
+    };
+  }, [hoverEffect, hasProjects]);
+
   // ─── Build masonry items (viewport-aware per-card overrides) ───
   const masonryItems: MasonryItem[] = useMemo(() => {
     return resolvedProjects.map((proj, i) => {
@@ -226,11 +252,7 @@ export default function ProjectGridBlockRenderer({
   // animations at once (with stagger). No per-card observer needed.
   const [gridVisible, setGridVisible] = useState(false);
 
-  // Track whether we have projects loaded — needed as a dep so the
-  // IntersectionObserver effect re-runs after the async fetch populates
-  // resolvedProjects (on the first render the grid div isn't mounted yet
-  // because the component returns null when resolvedProjects is empty).
-  const hasProjects = resolvedProjects.length > 0;
+  // hasProjects is declared above (used by overflow + entrance effects)
 
   useEffect(() => {
     if (!entranceEnabled || gridVisible || !hasProjects) return;
@@ -250,7 +272,13 @@ export default function ProjectGridBlockRenderer({
           observer.disconnect();
         }
       },
-      { threshold: 0.05 },
+      {
+        threshold: 0.01,
+        // Trigger 200px before the grid scrolls into view so cards
+        // start animating just before the user sees them (especially
+        // on mobile where the grid may sit just below the fold).
+        rootMargin: "200px 0px",
+      },
     );
 
     observer.observe(el);
@@ -336,10 +364,6 @@ export default function ProjectGridBlockRenderer({
                 top: item.y,
                 width: item.width,
                 height: item.height,
-                // Clip the card when hover scale-up overflows the cell bounds
-                // so border-radius is preserved visually.
-                overflow: "hidden",
-                borderRadius: borderRadius > 0 ? borderRadius : undefined,
               }}
             >
               {entranceEnabled && entranceAnimConfig ? (
@@ -438,7 +462,12 @@ const ProjectCard = memo(function ProjectCard({
   const handlePlay = useCallback(() => setIsPlaying(true), []);
   const handlePause = useCallback(() => setIsPlaying(false), []);
 
-  // Scale transform
+  // Scale transform — applied to the Link wrapper so the entire card
+  // (including its border-radius clipping shape) scales uniformly.
+  // The inner div keeps overflow:hidden + borderRadius for content clipping.
+  // Applying scale on the same element as overflow:hidden + borderRadius
+  // causes GPU compositing artifacts where the border-radius clips at
+  // pre-transform bounds, making rounded corners disappear during scale.
   const scaleTransform =
     hoverEffect === "scale" && hovered ? "scale(1.03)" : "scale(1)";
 
@@ -446,7 +475,19 @@ const ProjectCard = memo(function ProjectCard({
     <Link
       href={`/work/${project.slug}`}
       className="block"
-      style={{ display: "block", width: "100%", height: "100%" }}
+      style={{
+        display: "block",
+        width: "100%",
+        height: "100%",
+        // Lift hovered card above neighbours so scale doesn't clip behind them
+        position: "relative",
+        zIndex: hovered && hoverEffect !== "none" ? 2 : undefined,
+        // Scale applied here (outside overflow:hidden + borderRadius) so the
+        // entire clipping shape scales with the content.
+        transition:
+          hoverEffect === "scale" ? "transform 300ms ease" : undefined,
+        transform: hoverEffect === "scale" ? scaleTransform : undefined,
+      }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onMouseMove={hoverEffect === "3d" ? handleMouseMove : undefined}
@@ -459,13 +500,11 @@ const ProjectCard = memo(function ProjectCard({
           height: "100%",
           overflow: "hidden",
           borderRadius: radius,
+          // 3D tilt still uses cardRef for per-pixel mouse tracking
           transition:
             hoverEffect === "3d"
               ? "transform 100ms ease-out"
-              : hoverEffect === "scale"
-                ? "transform 300ms ease"
-                : undefined,
-          transform: hoverEffect === "scale" ? scaleTransform : undefined,
+              : undefined,
         }}
       >
         {/* Thumbnail image */}

package/components/builder/SectionV2Canvas.tsx

@@ -10,6 +10,7 @@ import SortableBlock from "./SortableBlock";
 import { useColumnDragContext } from "./ColumnDragContext";
 import { useColumnResize } from "./hooks/useColumnResize";
 import { InsertionLines } from "./InsertionLines";
+import { isSectionBlockSection } from "../../lib/builder/types";
 
 // ============================================
 // SectionV2Canvas — Renders a V2 section in the builder
@@ -248,8 +249,8 @@ export default function SectionV2Canvas({
         );
       })}
 
-      {/* Gap buttons: "+ Add Column" — also act as hit-test targets for custom column drag */}
-      {!previewMode &&
+      {/* Gap buttons: "+ Add Column" — hidden for section-level blocks (locked layout) */}
+      {!previewMode && !isSectionBlockSection(section) &&
         gaps.map((gap) => {
           const isGapTarget =
             dropTarget?.type === "gap" &&

package/components/builder/SectionV2Column.tsx

@@ -215,9 +215,12 @@ export default function SectionV2Column({
   }, [onAddBlock, column.blocks]);
 
   const hasBlocks = (column.blocks || []).length > 0;
-  const showChrome = (isSelected || isHovered) && !isDraggedColumn;
+  // Section-level blocks (e.g. projectGridBlock) own the full section —
+  // hide all column management chrome (resize, delete, drag, span badge).
+  const isLockedColumn = !!singleSectionBlock;
+  const showChrome = (isSelected || isHovered) && !isDraggedColumn && !isLockedColumn;
   // Show faint outlines when section is hovered but not this specific column
-  const showFaintOutline = isSectionHovered && !isHovered && !isSelected && !isDraggedColumn;
+  const showFaintOutline = isSectionHovered && !isHovered && !isSelected && !isDraggedColumn && !isLockedColumn;
 
   // Column-level vertical alignment from blocks' align_v settings
   const colJustify = getColumnVerticalAlign(column.blocks || []);
@@ -494,7 +497,8 @@ export default function SectionV2Column({
       </SortableContext>
 
       {/* "+" add block button below blocks — absolutely positioned to avoid disrupting flex alignment */}
-      {hasBlocks && (
+      {/* Hidden for section-level blocks (e.g. projectGridBlock) that own the full column */}
+      {hasBlocks && !singleSectionBlock && (
         <div
           className={`absolute left-0 right-0 z-[3] transition-all ${
             showChrome ? "opacity-100" : showFaintOutline ? "opacity-30" : "opacity-0 pointer-events-none"

package/components/builder/SortableBlock.tsx

@@ -122,16 +122,17 @@ export default function SortableBlock({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {/* Hover/selection outline overlay — scales with zoom */}
+      {/* Hover/selection outline overlay — scales with zoom, offset inward so it doesn't overlap column outlines */}
       <div
-        className="pointer-events-none absolute inset-0 z-[3] rounded transition-[box-shadow]"
-        style={
-          isSelected
+        className="pointer-events-none absolute z-[3] rounded transition-[box-shadow]"
+        style={{
+          inset: `${Math.max(2, Math.min(5, 3 / canvasZoom))}px`,
+          ...(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(13, 150, 104, 0.4)` }
-            : undefined
-        }
+            : {}),
+        }}
       />
 
       {/* Floating toolbar — centered INSIDE top of block, appears on hover or when selected.

package/components/builder/SortableRow.tsx

@@ -6,7 +6,7 @@ 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 { DEVICE_HEIGHTS, isSectionBlockSection } from "../../lib/builder/types";
 import type { ReactNode } from "react";
 import type { ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup } from "../../lib/sanity/types";
 import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
@@ -41,6 +41,12 @@ function getSectionLabel(item: ContentItem): string | null {
     return "Parallax Showcase";
   }
   if (isPageSectionV2(item)) {
+    const section = item as PageSectionV2;
+    if (isSectionBlockSection(section)) {
+      // Show the block type name instead of generic "Section"
+      const blockType = section.columns?.[0]?.blocks?.[0]?._type;
+      if (blockType === "projectGridBlock") return "Project Grid";
+    }
     return "Section";
   }
   return null;
@@ -78,6 +84,7 @@ export default function SortableRow({
   children,
 }: SortableRowProps) {
   const previewMode = useBuilderStore((s) => s.previewMode);
+  const selectBlock = useBuilderStore((s) => s.selectBlock);
   const canvasZoom = useBuilderStore((s) => s.canvasZoom);
   const activeViewport = useBuilderStore((s) => s.activeViewport);
   const gridSettings = useBuilderStore((s) => s.gridSettings);
@@ -102,6 +109,9 @@ export default function SortableRow({
   // Determine if this is a PageSectionV2
   const isV2Section = isPageSectionV2(row);
   const sectionLabel = getSectionLabel(row);
+  // Section-level blocks (e.g. projectGridBlock) own the full section —
+  // no column management UI, selecting section auto-selects the block.
+  const isLockedSection = isV2Section && isSectionBlockSection(row as PageSectionV2);
 
   // For sections: use section settings — viewport-aware for both V1 and V2 sections
   const resolvedSettings = useMemo(() => {
@@ -223,20 +233,28 @@ export default function SortableRow({
       className={`relative transition-[opacity,box-shadow] ${
         isDragging ? "ring-2 ring-[#93278f] ring-offset-2 ring-offset-[#0a0a0a]" : ""
       }`}
-      onClick={(e) => { e.stopPropagation(); onSelect(); }}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (isLockedSection) {
+          const blockKey = (row as PageSectionV2).columns?.[0]?.blocks?.[0]?._key;
+          if (blockKey) { selectBlock(blockKey); return; }
+        }
+        onSelect();
+      }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {/* Selection/hover outline — scales with zoom */}
+      {/* Selection/hover outline — scales with zoom, offset outward so it doesn't overlap column/block outlines */}
       <div
-        className="pointer-events-none absolute inset-0 z-[1] transition-[box-shadow]"
-        style={
-          isSelected
+        className="pointer-events-none absolute z-[1] transition-[box-shadow]"
+        style={{
+          inset: `${-Math.max(2, Math.min(5, 3 / canvasZoom))}px`,
+          ...(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 */}
@@ -249,7 +267,14 @@ export default function SortableRow({
           transformOrigin: "top right",
           width: "90px",
         }}
-        onClick={(e) => { e.stopPropagation(); onSelect(); }}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (isLockedSection) {
+            const blockKey = (row as PageSectionV2).columns?.[0]?.blocks?.[0]?._key;
+            if (blockKey) { selectBlock(blockKey); return; }
+          }
+          onSelect();
+        }}
       >
         {/* Main toolbar — drag + actions */}
         <div
@@ -301,8 +326,8 @@ export default function SortableRow({
             </button>
           </div>
 
-          {/* Add column — shown for V2 sections and regular rows, hidden for closed sections (V1 PageSection) */}
-          {(!sectionLabel || isV2Section) && (
+          {/* Add column — shown for V2 sections and regular rows, hidden for section blocks and closed sections */}
+          {(!sectionLabel || isV2Section) && !isLockedSection && (
             <button
               onClick={(e) => { e.stopPropagation(); onAddColumn(); }}
               onPointerDown={(e) => e.stopPropagation()}

package/components/builder/editors/TextBlockEditor.tsx

@@ -6,7 +6,6 @@ import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/r
 import type { TextBlock, ContentBlock } from "../../../lib/sanity/types";
 import type { DeviceViewport } from "../../../lib/builder/types";
 import {
-  TextIcon,
   TypographyIcon,
   ColumnsIcon,
 } from "./section-icons";
@@ -271,8 +270,8 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
     <>
       <ViewportBadge />
 
-      {/* Text section: Style, Color, Align */}
-      <SettingsSection title="Text" defaultOpen icon={<TextIcon />}>
+      {/* Typography section: Style, Color, Align, Size, Weight, Line height, Letter spacing, Transform */}
+      <SettingsSection title="Typography" defaultOpen icon={<TypographyIcon />}>
         <SettingsField label="Style">
           <TextStylePicker
             presets={presets}
@@ -309,10 +308,7 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
             ))}
           </div>
         </ResponsiveStyleField>
-      </SettingsSection>
 
-      {/* Typography section: Size, Weight, Line height, Letter spacing */}
-      <SettingsSection title="Typography" defaultOpen icon={<TypographyIcon />}>
         <ResponsiveStyleField label="Size" subProp="fontSize" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("fontSize")} onReset={resetStyleOverride}>
           <div className="flex items-center gap-0 bg-[#f5f5f5] rounded-lg overflow-hidden transition-all border border-transparent focus-within:bg-white focus-within:border-[#076bff] focus-within:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]">
             <input

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

@@ -18,6 +18,7 @@ import {
   SettingsSection,
 } from "../editors/shared";
 import { findGaps } from "../../../lib/builder/cascade";
+import { isSectionBlockSection } from "../../../lib/builder/types";
 import {
   getSectionV2SettingValue,
   hasSectionV2SettingOverride,
@@ -65,6 +66,9 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
   const addColumnV2 = useBuilderStore((s) => s.addColumnV2);
   const currentPreset = section.settings.preset;
 
+  // Section-level blocks own the full column — hide layout presets and add column
+  if (isSectionBlockSection(section)) return null;
+
   const allPresets = currentPreset === "custom"
     ? [...PRESETS, CUSTOM_PRESET]
     : PRESETS;

package/lib/builder/types.ts

@@ -80,6 +80,16 @@ export function isSectionBlockType(type: string): boolean {
   return SECTION_BLOCK_TYPES.has(type);
 }
 
+/** Check if a V2 section contains a single section-level block (e.g. projectGridBlock).
+ *  These sections behave like top-level content items: no column management,
+ *  selecting the section auto-selects the block. */
+export function isSectionBlockSection(section: { columns?: Array<{ blocks?: Array<{ _type: string }> }> }): boolean {
+  const cols = section.columns || [];
+  if (cols.length !== 1) return false;
+  const blocks = cols[0].blocks || [];
+  return blocks.length === 1 && SECTION_BLOCK_TYPES.has(blocks[0]._type);
+}
+
 export type SectionType = "empty-v2" | "parallaxGroup" | SectionBlockType;
 
 export interface SectionTypeInfo {

package/package.json

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