@morphika/andami 0.2.4 → 0.2.6

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;
@@ -342,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 ? (
@@ -444,18 +462,32 @@ const ProjectCard = memo(function ProjectCard({
   const handlePlay = useCallback(() => setIsPlaying(true), []);
   const handlePause = useCallback(() => setIsPlaying(false), []);
 
-  // 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)";
+  // 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)";
 
   return (
     <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}
@@ -468,22 +500,13 @@ const ProjectCard = memo(function ProjectCard({
           height: "100%",
           overflow: "hidden",
           borderRadius: radius,
-          // 3D tilt: applied on the card wrapper (set via handleMouseMove)
+          // 3D tilt still uses cardRef for per-pixel mouse tracking
           transition:
             hoverEffect === "3d"
               ? "transform 100ms ease-out"
               : 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
@@ -548,9 +571,7 @@ const ProjectCard = memo(function ProjectCard({
           />
         )}
 
-        </div>{/* end inner content wrapper */}
-
-        {/* Subtitle overlay — outside the scale wrapper so text stays crisp */}
+        {/* Subtitle overlay */}
         {showSubtitle && (
           <div
             style={{

package/components/blocks/TextBlockRenderer.tsx

@@ -1,5 +1,5 @@
 import type { TextBlock } from "../../lib/sanity/types";
-import { PortableText } from "next-sanity";
+import { PortableText, type PortableTextComponents } from "next-sanity";
 
 /** Resolve fontSize: supports numeric px and legacy string enum */
 function resolvePublicFontSize(fontSize?: number | string): string | undefined {
@@ -79,6 +79,31 @@ export function getTextBlockStyles(block: TextBlock): { className: string; style
   return { className: classes, style: inlineStyle };
 }
 
+/** Custom Portable Text components for rich text rendering. */
+const richTextComponents: PortableTextComponents = {
+  marks: {
+    link: ({ value, children }) => {
+      const href = value?.href || "#";
+      const blank = value?.blank;
+      return (
+        <a
+          href={href}
+          target={blank ? "_blank" : undefined}
+          rel={blank ? "noopener noreferrer" : undefined}
+          className="underline decoration-current underline-offset-2 hover:opacity-75 transition-opacity"
+        >
+          {children}
+        </a>
+      );
+    },
+    color: ({ value, children }) => {
+      const hex = value?.hex;
+      if (!hex) return <>{children}</>;
+      return <span style={{ color: hex }}>{children}</span>;
+    },
+  },
+};
+
 export default function TextBlockRenderer({ block }: { block: TextBlock }) {
   if (!block.text?.length) return null;
 
@@ -89,7 +114,7 @@ export default function TextBlockRenderer({ block }: { block: TextBlock }) {
       className={`${className} space-y-[0.75em]`}
       style={style}
     >
-      <PortableText value={block.text} />
+      <PortableText value={block.text} components={richTextComponents} />
     </div>
   );
 }

package/components/blocks/TypewriterRichText.tsx

@@ -80,7 +80,7 @@ function wrapInMarks(
         result = <code>{result}</code>;
         break;
       default: {
-        // Check if it's a link (markDef reference)
+        // Check if it's a markDef reference (link or color annotation)
         const def = getMarkDef(block, mark);
         if (def && def._type === "link" && def.href) {
           result = (
@@ -92,6 +92,12 @@ function wrapInMarks(
               {result}
             </a>
           );
+        } else if (def && def._type === "color" && def.hex) {
+          result = (
+            <span style={{ color: def.hex as string }}>
+              {result}
+            </span>
+          );
         }
         break;
       }

package/components/builder/CanvasToolbar.tsx

@@ -75,10 +75,10 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
     <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-px rounded-full bg-[#1a1a1a] shadow-xl px-1 py-1"
       style={{ userSelect: "none" }}
     >
-      {/* Select tool */}
+      {/* Select tool — Figma-style filled cursor */}
       <button
         onClick={() => setCanvasTool("select")}
-        className={`flex items-center justify-center w-8 h-8 rounded-full text-xs transition-colors ${
+        className={`flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
           tool === "select"
             ? "bg-white/15 text-white"
             : "text-neutral-400 hover:text-white hover:bg-white/10"
@@ -86,20 +86,15 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
         title="Select tool (V)"
         aria-label="Select tool"
       >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-          <path
-            d="M2 1L12 7L7 8L5 13L2 1Z"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinejoin="round"
-          />
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round">
+          <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
         </svg>
       </button>
 
-      {/* Hand tool */}
+      {/* Hand tool — Figma-style */}
       <button
         onClick={() => setCanvasTool("hand")}
-        className={`flex items-center justify-center w-8 h-8 rounded-full text-xs transition-colors ${
+        className={`flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
           tool === "hand"
             ? "bg-white/15 text-white"
             : "text-neutral-400 hover:text-white hover:bg-white/10"
@@ -107,12 +102,11 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
         title="Hand tool (H)"
         aria-label="Hand tool"
       >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-          {/* Five-finger open hand — cleaner icon */}
-          <path d="M18 11V6.5a1.5 1.5 0 0 0-3 0V11" />
-          <path d="M15 9.5V4a1.5 1.5 0 0 0-3 0v7" />
-          <path d="M12 11V5.5a1.5 1.5 0 0 0-3 0v6.5" />
-          <path d="M9 11V9a1.5 1.5 0 0 0-3 0v3c0 4.42 2.69 8 6 8h1c3.31 0 6-3.58 6-8V11" />
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+          <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
+          <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" />
+          <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
         </svg>
       </button>
 

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