@morphika/andami 0.2.2 → 0.2.4

package/components/blocks/ProjectGridBlockRenderer.tsx

@@ -226,8 +226,14 @@ 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;
+
   useEffect(() => {
-    if (!entranceEnabled || gridVisible) return;
+    if (!entranceEnabled || gridVisible || !hasProjects) return;
     const el = containerRef.current;
     if (!el) return;
 
@@ -244,12 +250,18 @@ 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);
     return () => observer.disconnect();
-  }, [entranceEnabled, gridVisible]);
+  }, [entranceEnabled, gridVisible, hasProjects]);
 
   // ─── Compute stagger indices sorted by vertical position ───
   // Cards at similar y positions (within half of gapV) share the same rank.
@@ -330,6 +342,10 @@ 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 ? (
@@ -428,9 +444,12 @@ const ProjectCard = memo(function ProjectCard({
   const handlePlay = useCallback(() => setIsPlaying(true), []);
   const handlePause = useCallback(() => setIsPlaying(false), []);
 
-  // Scale transform
-  const scaleTransform =
-    hoverEffect === "scale" && hovered ? "scale(1.03)" : "scale(1)";
+  // Scale hover: applied to an inner content wrapper so the zoom is
+  // visible inside the card's borderRadius + overflow:hidden boundary
+  // (the parent masonry cell also clips, so scaling the card wrapper
+  // itself would be invisible).
+  const contentScale =
+    hoverEffect === "scale" && hovered ? "scale(1.05)" : "scale(1)";
 
   return (
     <Link
@@ -449,15 +468,22 @@ const ProjectCard = memo(function ProjectCard({
           height: "100%",
           overflow: "hidden",
           borderRadius: radius,
+          // 3D tilt: applied on the card wrapper (set via handleMouseMove)
           transition:
             hoverEffect === "3d"
               ? "transform 100ms ease-out"
-              : hoverEffect === "scale"
-                ? "transform 300ms ease"
-                : undefined,
-          transform: hoverEffect === "scale" ? scaleTransform : undefined,
+              : undefined,
         }}
       >
+        {/* Inner content wrapper — receives scale hover transform */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            transition: hoverEffect === "scale" ? "transform 300ms ease" : undefined,
+            transform: hoverEffect === "scale" ? contentScale : undefined,
+          }}
+        >
         {/* Thumbnail image */}
         {imgSrc ? (
           <img
@@ -522,7 +548,9 @@ const ProjectCard = memo(function ProjectCard({
           />
         )}
 
-        {/* Subtitle overlay */}
+        </div>{/* end inner content wrapper */}
+
+        {/* Subtitle overlay — outside the scale wrapper so text stays crisp */}
         {showSubtitle && (
           <div
             style={{

package/components/builder/SectionV2Column.tsx

@@ -10,6 +10,7 @@ import { useBuilderStore } from "../../lib/builder/store";
 import { makeBlockId, makeColumnDroppableId } from "./DndWrapper";
 import type { SectionColumn, ContentBlock, PageSectionV2 } from "../../lib/sanity/types";
 import { getColumnVerticalAlign } from "../../lib/builder/layout-styles";
+import { isSectionBlockType } from "../../lib/builder/types";
 import { BUILDER_BLUE } from "../../lib/builder/constants";
 
 // ============================================
@@ -174,10 +175,26 @@ export default function SectionV2Column({
   );
 
   // ---- Stable callbacks ----
+
+  // When the column contains a single section-level block (e.g. projectGridBlock),
+  // that block fills the entire column visually. Clicking anywhere in the column
+  // should select the block — not the column — because users expect to reach the
+  // block's settings panel (Settings / Layout / Animation tabs).
+  const selectBlock = useBuilderStore((s) => s.selectBlock);
+  const singleSectionBlock = (() => {
+    const blocks = column.blocks || [];
+    if (blocks.length === 1 && isSectionBlockType(blocks[0]._type)) return blocks[0];
+    return null;
+  })();
+
   const handleClick = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
-    onSelect();
-  }, [onSelect]);
+    if (singleSectionBlock) {
+      selectBlock(singleSectionBlock._key);
+    } else {
+      onSelect();
+    }
+  }, [onSelect, singleSectionBlock, selectBlock]);
 
   const handleMouseEnter = useCallback(() => setIsHovered(true), []);
   const handleMouseLeave = useCallback(() => setIsHovered(false), []);

package/package.json

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