@morphika/andami 0.2.1 → 0.2.3

package/app/admin/pages/[slug]/page.tsx

@@ -19,7 +19,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import type { Page, PageSectionV2, ParallaxGroup, SectionColumn, CustomSectionInstance, CustomSectionListItem } from "../../../../lib/sanity/types";
-import { isPageSectionV2, isCustomSectionInstance, isParallexGroup } from "../../../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../../../lib/sanity/types";
 import SectionEditorBar from "../../../../components/builder/SectionEditorBar";
 import CustomSectionInstanceCard from "../../../../components/builder/CustomSectionInstanceCard";
 import { ColumnDragProvider } from "../../../../components/builder/ColumnDragContext";
@@ -666,7 +666,7 @@ export default function PageEditorPage() {
                     {store.rows.map((item, rowIndex) => {
                       const isV2Section = isPageSectionV2(item);
                       const isInstance = isCustomSectionInstance(item);
-                      const isParallax = isParallexGroup(item);
+                      const isParallax = isParallaxGroup(item);
                       const v2Section = isV2Section ? (item as PageSectionV2) : null;
 
                       // Custom Section Instance — rendered directly without SortableRow chrome
@@ -783,7 +783,13 @@ export default function PageEditorPage() {
                           e.stopPropagation();
                           setShowSectionPicker(true);
                         }}
-                        className="w-full rounded-xl py-3 text-xs font-medium text-white bg-[#93278f] hover:bg-[#7a1f76] transition-colors shadow-sm"
+                        className="w-full rounded-xl py-3 text-xs font-medium transition-colors"
+                        style={{
+                          background: "linear-gradient(170deg, rgba(38,38,48,0.95) 0%, rgba(28,28,36,0.97) 100%)",
+                          color: "rgba(200,160,220,0.8)",
+                          boxShadow: "0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04)",
+                          border: "1px solid rgba(255,255,255,0.06)",
+                        }}
                       >
                         + Add Section
                       </button>

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;
 
@@ -249,7 +255,7 @@ export default function ProjectGridBlockRenderer({
 
     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 +336,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 ? (

package/components/blocks/TextBlockRenderer.tsx

@@ -87,7 +87,7 @@ export default function TextBlockRenderer({ block }: { block: TextBlock }) {
   return (
     <div
       className={`${className} space-y-[0.75em]`}
-      style={{ overflowWrap: "break-word", wordBreak: "normal", minWidth: 0, ...style }}
+      style={style}
     >
       <PortableText value={block.text} />
     </div>

package/components/builder/ReadOnlyFrame.tsx

@@ -20,11 +20,11 @@ import { memo, useMemo, useState, useEffect } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
 import type { DeviceViewport } from "../../lib/builder/types";
 import type { ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
-import { isPageSectionV2, isCustomSectionInstance, isParallexGroup } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
 import { DEVICE_HEIGHTS } from "../../lib/builder/types";
 import { getEffectiveColumnsV2, getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
 import BlockLivePreview from "./BlockLivePreview";
-import { getColumnVerticalAlign } from "../../lib/builder/layout-styles";
+import { getColumnVerticalAlign, getRowLayoutStyles } from "../../lib/builder/layout-styles";
 
 // Layout keys that support responsive overrides for V2 sections
 const OVERRIDABLE_KEYS = [

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), []);
@@ -450,12 +467,23 @@ export default function SectionV2Column({
               aria-label="Add block to empty column"
               className={`w-full py-2 rounded-lg text-xs font-medium transition-all flex items-center justify-center ${
                 showChrome
-                  ? "bg-[#0d9668] text-white hover:bg-[#0a7d56] shadow-sm opacity-100"
+                  ? "opacity-100"
                   : showFaintOutline
-                  ? "bg-[#0d9668]/30 text-white/50 opacity-40"
+                  ? "opacity-40"
                   : "bg-transparent text-transparent opacity-0 pointer-events-none"
               }`}
-              style={{ pointerEvents: showChrome || showFaintOutline ? "auto" : "none" }}
+              style={{
+                pointerEvents: showChrome || showFaintOutline ? "auto" : "none",
+                ...(showChrome ? {
+                  background: "linear-gradient(170deg, rgba(38,38,48,0.95) 0%, rgba(28,28,36,0.97) 100%)",
+                  color: "rgba(100,220,170,0.8)",
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04)",
+                  border: "1px solid rgba(255,255,255,0.06)",
+                } : showFaintOutline ? {
+                  background: "rgba(38,38,48,0.3)",
+                  color: "rgba(100,220,170,0.4)",
+                } : {}),
+              }}
             >
               + Add Block
             </button>
@@ -476,8 +504,14 @@ export default function SectionV2Column({
           <button
             onClick={handleAddBlockBelow}
             aria-label="Add block below existing blocks"
-            className="w-full py-1.5 text-[11px] font-medium rounded bg-[#0d9668] text-white hover:bg-[#0a7d56] transition-all shadow-sm"
-            style={{ pointerEvents: showChrome ? "auto" : "none" }}
+            className="w-full py-1.5 text-[11px] font-medium rounded transition-all"
+            style={{
+              pointerEvents: showChrome ? "auto" : "none",
+              background: "linear-gradient(170deg, rgba(38,38,48,0.95) 0%, rgba(28,28,36,0.97) 100%)",
+              color: "rgba(100,220,170,0.8)",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04)",
+              border: "1px solid rgba(255,255,255,0.06)",
+            }}
           >
             + Add Block
           </button>

package/components/builder/SettingsPanel.tsx

@@ -144,9 +144,6 @@ export default function SettingsPanel() {
             } else if (selectedSectionV2) {
               onDelete = () => store.deleteSection(selectedSectionV2._key);
               deleteTitle = "Delete Section";
-            } else if (selectedSection) {
-              onDelete = () => store.deleteSection(selectedSection._key);
-              deleteTitle = "Delete Section";
             }
 
             if (!onDelete) return null;

package/components/builder/SortableBlock.tsx

@@ -149,14 +149,18 @@ export default function SortableBlock({
           className="flex items-center gap-1.5"
           style={{ transform: `scale(${Math.min(2, 1 / canvasZoom)})`, transformOrigin: "top center" }}
         >
-        <div className="flex items-center bg-[#0d9668] rounded shadow-lg overflow-hidden">
+        <div className="flex items-center rounded-[5px] overflow-hidden" style={{
+            background: "linear-gradient(170deg, rgba(38,38,48,0.97) 0%, rgba(28,28,36,0.98) 100%)",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06)",
+            border: "1px solid rgba(255,255,255,0.06)",
+          }}>
           {/* 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"
+                ? "text-white/45 hover:text-white/80 hover:bg-white/10 cursor-pointer"
+                : "text-white/20 cursor-default"
             }`}
             title="Move block up"
             aria-label="Move block up"
@@ -169,10 +173,10 @@ export default function SortableBlock({
           {/* 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 ${
+            className={`transition-colors px-1 py-0.5 text-[11px] border-l border-white/10 ${
               canMoveDown
-                ? "text-white/80 hover:text-white hover:bg-white/10 cursor-pointer"
-                : "text-white/25 cursor-default"
+                ? "text-white/45 hover:text-white/80 hover:bg-white/10 cursor-pointer"
+                : "text-white/20 cursor-default"
             }`}
             title="Move block down"
             aria-label="Move block down"
@@ -183,12 +187,12 @@ export default function SortableBlock({
             </svg>
           </button>
           {/* Block type label */}
-          <span className="text-[11px] text-white/70 px-1.5 py-0.5 border-l border-white/20">
+          <span className="text-[11px] px-1.5 py-0.5 border-l border-white/10 font-medium" style={{ color: "rgba(100,220,170,0.9)" }}>
             {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 className="text-[10px] text-white/35 px-1 py-0.5 border-l border-white/10" title={`Animation: ${block.enter_animation.preset}`}>
               ✦
             </span>
           )}
@@ -196,7 +200,7 @@ export default function SortableBlock({
           {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"
+              className="text-white/45 hover:text-white/80 transition-colors px-1.5 py-0.5 text-[11px] border-l border-white/10 hover:bg-white/10"
               title="Duplicate block (Ctrl+D)"
               aria-label="Duplicate block"
             >

package/components/builder/SortableRow.tsx

@@ -253,12 +253,18 @@ export default function SortableRow({
       >
         {/* 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"
+          className="flex flex-col items-stretch rounded-l-lg py-2 px-2.5 gap-1 cursor-grab active:cursor-grabbing"
+          style={{
+            background: "linear-gradient(170deg, rgba(38,38,48,0.97) 0%, rgba(28,28,36,0.98) 100%)",
+            boxShadow: "0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06)",
+            border: "1px solid rgba(255,255,255,0.06)",
+            borderRight: "none",
+          }}
           {...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">
+          <span className="text-[11px] select-none leading-tight pointer-events-none font-medium tracking-wide" style={{ color: "rgba(200,160,220,0.9)" }}>
             {sectionLabel || "Section"}
           </span>
 
@@ -267,7 +273,7 @@ export default function SortableRow({
             <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"
+              className="flex items-center justify-center text-[12px] text-white/50 hover:text-white/85 transition-colors"
               title="Duplicate section"
               aria-label="Duplicate section"
             >
@@ -277,7 +283,7 @@ export default function SortableRow({
               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"
+              className="flex items-center justify-center text-[12px] text-white/50 hover:text-white/85 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
               title="Move up"
               aria-label="Move section up"
             >
@@ -287,7 +293,7 @@ export default function SortableRow({
               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"
+              className="flex items-center justify-center text-[12px] text-white/50 hover:text-white/85 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
               title="Move down"
               aria-label="Move section down"
             >
@@ -300,11 +306,11 @@ export default function SortableRow({
             <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"
+              className="flex items-center gap-1 text-[11px] text-white/50 hover:text-white/85 transition-colors py-0.5"
               title="Add column"
               aria-label="Add column"
             >
-              <span className="text-white/50">+</span> Col
+              <span className="text-white/30">+</span> Col
             </button>
           )}
 
@@ -312,11 +318,11 @@ export default function SortableRow({
           <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"
+            className="flex items-center gap-1 text-[11px] text-white/50 hover:text-red-300 transition-colors py-0.5"
             title="Delete section"
             aria-label="Delete section"
           >
-            <span className="text-white/50">-</span> Delete
+            <span className="text-white/30">-</span> Delete
           </button>
         </div>
       </div>
@@ -333,7 +339,7 @@ export default function SortableRow({
       )}
 
       {/* 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]">
+      <div style={coverRow ? undefined : { maxWidth, margin: "0 auto", paddingLeft: maxWidth !== "100%" ? gridPadding : undefined, paddingRight: maxWidth !== "100%" ? gridPadding : undefined }} className="relative">
         {children}
       </div>
     </div>

package/components/builder/live-preview/LiveTextEditor.tsx

@@ -149,7 +149,7 @@ export default function LiveTextEditor({ block, editable = false }: { block: Tex
     fontFamily: "inherit",
     outline: "none",
     whiteSpace: "pre-wrap",
-    wordBreak: "normal",
+    wordBreak: "break-word",
     minHeight: "1em",
     // Multi-column layout: gap inherits global grid gutter
     ...(cols ? {

package/package.json

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

package/styles/base.css

@@ -57,21 +57,14 @@ body {
   overflow-x: clip;
 }
 
-/* Prevent text overflow in grid columns on narrow viewports.
- * overflow-wrap: break-word — breaks mid-word ONLY when the entire word
- * cannot fit on a fresh line. Does NOT affect min-content intrinsic sizing,
- * so CSS Grid columns keep their proper width (unlike 'anywhere' which
- * collapses min-content to a single character width).
- * word-break: normal — wraps at natural word boundaries first, preventing
- * ugly mid-word splits like "Collecti" + "on". */
+/* Prevent text overflow in grid columns on narrow viewports */
 [data-site] p,
 [data-site] h1,
 [data-site] h2,
 [data-site] h3,
 [data-site] h4,
 [data-site] span {
-  overflow-wrap: break-word;
-  word-break: normal;
+  word-break: break-word;
 }
 
 [data-custom-cursor] {