@morphika/andami 0.5.8 → 0.5.10

package/components/blocks/CoverSectionRenderer.tsx

@@ -21,7 +21,7 @@ import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
 import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
 import BlockRenderer from "./BlockRenderer";
 import EnterAnimationWrapper from "./EnterAnimationWrapper";
-import { getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign, getBackgroundStyles, getBorderStyles } from "../../lib/builder/layout-styles";
+import { getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlignForViewport, getBackgroundStyles, getBorderStyles } from "../../lib/builder/layout-styles";
 import { assetUrl } from "../../lib/assets";
 import { BREAKPOINTS } from "../../lib/builder/constants";
 import { normalizeRowHeights } from "../../lib/builder/store-cover";
@@ -303,7 +303,7 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
           const staggerIdx = staggerEnabled ? getStaggerIndex(colIndex) : undefined;
           const rowAlign = rowAlignMap[String(col.grid_row)] || "start";
           const alignSelf = rowAlign === "center" ? "center" : rowAlign === "end" ? "end" : "start";
-          const colJustify = getColumnVerticalAlign(col.blocks || []);
+          const colJustify = getColumnVerticalAlignForViewport(col.blocks || [], "desktop");
 
           const colLayoutStyles = {
             ...getBackgroundStyles(col, process.env.NEXT_PUBLIC_ASSET_BASE_URL),

package/components/blocks/SectionV2Renderer.tsx

@@ -24,7 +24,7 @@ import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
 import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
 import BlockRenderer from "./BlockRenderer";
 import EnterAnimationWrapper from "./EnterAnimationWrapper";
-import { getRowLayoutStyles, getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign, getBackgroundStyles, getBorderStyles, hexToRgba } from "../../lib/builder/layout-styles";
+import { getRowLayoutStyles, getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlignForViewport, getBackgroundStyles, getBorderStyles, hexToRgba } from "../../lib/builder/layout-styles";
 import { parseColorField, colorToOverrideRule, borderColorToOverrideRule } from "../../lib/color-utils";
 import { BREAKPOINTS } from "../../lib/builder/constants";
 
@@ -159,27 +159,57 @@ function buildColumnOverrideCss(
 
 /**
  * Generate all responsive CSS for a V2 section (section settings + column overrides).
+ *
+ * Includes column-level `justify-content` (vertical alignment) overrides when a
+ * block's responsive `align_v` differs from the desktop default. The desktop
+ * value is applied inline; this function emits the tablet/phone deltas.
  */
 function buildSectionV2ResponsiveCss(section: PageSectionV2): string | null {
-  const responsive = section.responsive;
-  if (!responsive) return null;
-
   const key = section._key;
   const cssParts: string[] = [];
 
-  for (const [vp, breakpoint] of [["tablet", BREAKPOINTS.tablet], ["phone", BREAKPOINTS.phone]] as const) {
-    const override = responsive[vp];
-    if (!override) continue;
-
-    // Section-level settings overrides
-    const settingsRules = buildSettingsOverrideRules(override.settings as Partial<SectionV2Settings> | undefined);
-    if (settingsRules.length > 0) {
-      cssParts.push(`@media(max-width:${breakpoint}px){.sv2-${key}{${settingsRules.join(";")}}}`);
+  // Section-level settings overrides + column position/span overrides
+  const responsive = section.responsive;
+  if (responsive) {
+    for (const [vp, breakpoint] of [["tablet", BREAKPOINTS.tablet], ["phone", BREAKPOINTS.phone]] as const) {
+      const override = responsive[vp];
+      if (!override) continue;
+
+      const settingsRules = buildSettingsOverrideRules(override.settings as Partial<SectionV2Settings> | undefined);
+      if (settingsRules.length > 0) {
+        cssParts.push(`@media(max-width:${breakpoint}px){.sv2-${key}{${settingsRules.join(";")}}}`);
+      }
+
+      const colCss = buildColumnOverrideCss(key, override.columns, breakpoint);
+      if (colCss) cssParts.push(colCss);
     }
+  }
 
-    // Column position/span overrides
-    const colCss = buildColumnOverrideCss(key, override.columns, breakpoint);
-    if (colCss) cssParts.push(colCss);
+  // Column-level vertical alignment overrides (always evaluated — these live on
+  // the blocks themselves at `block.responsive[vp].layout.align_v`, not on
+  // section.responsive). For each column, if the resolved colJustify for a
+  // given viewport differs from the previous viewport (desktop → tablet,
+  // tablet → phone), emit a media query rule with `!important`.
+  const tabletRules: string[] = [];
+  const phoneRules: string[] = [];
+  for (const col of section.columns) {
+    const blocks = col.blocks || [];
+    const desktop = getColumnVerticalAlignForViewport(blocks, "desktop");
+    const tablet = getColumnVerticalAlignForViewport(blocks, "tablet");
+    const phone = getColumnVerticalAlignForViewport(blocks, "phone");
+
+    if (tablet !== desktop) {
+      tabletRules.push(`.sv2-col-${key}-${col._key}{justify-content:${tablet || "flex-start"}!important}`);
+    }
+    if (phone !== tablet) {
+      phoneRules.push(`.sv2-col-${key}-${col._key}{justify-content:${phone || "flex-start"}!important}`);
+    }
+  }
+  if (tabletRules.length > 0) {
+    cssParts.push(`@media(max-width:${BREAKPOINTS.tablet}px){${tabletRules.join("")}}`);
+  }
+  if (phoneRules.length > 0) {
+    cssParts.push(`@media(max-width:${BREAKPOINTS.phone}px){${phoneRules.join("")}}`);
   }
 
   return cssParts.length > 0 ? cssParts.join("") : null;
@@ -270,8 +300,11 @@ export default function SectionV2Renderer({ section, pageEnterAnimation, fillHei
         {sortedColumns.map((col, colIndex) => {
           const staggerIdx = staggerEnabled ? getStaggerIndex(colIndex) : undefined;
 
-          // Column-level vertical alignment from blocks' align_v settings
-          const colJustify = getColumnVerticalAlign(col.blocks || []);
+          // Column-level vertical alignment, viewport-aware. Desktop value is
+          // applied inline; tablet/phone overrides (when they differ) are
+          // emitted as media-query CSS below so the live site honours
+          // responsive `align_v` overrides authored in the builder.
+          const colJustify = getColumnVerticalAlignForViewport(col.blocks || [], "desktop");
 
           // Column-level background + border (desktop-only).
           const colLayoutStyles = {

package/components/builder/ReadOnlyFrame.tsx

@@ -24,7 +24,7 @@ import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup, isCoverSecti
 import { DEVICE_HEIGHTS } from "../../lib/builder/types";
 import { getEffectiveColumnsV2, getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
 import BlockLivePreview from "./BlockLivePreview";
-import { getColumnVerticalAlign, getRowLayoutStyles } from "../../lib/builder/layout-styles";
+import { getColumnVerticalAlignForViewport, getRowLayoutStyles } from "../../lib/builder/layout-styles";
 import type { ContentBlock } from "../../lib/sanity/types";
 
 function isFillBlock(block: ContentBlock): boolean {
@@ -82,7 +82,7 @@ const ReadOnlySectionV2 = memo(function ReadOnlySectionV2({ section, viewport }:
           const gridColumn = eff?.grid_column ?? col.grid_column;
           const gridRow = eff?.grid_row ?? col.grid_row;
           const span = eff?.span ?? col.span;
-          const colJustify = getColumnVerticalAlign(col.blocks || []);
+          const colJustify = getColumnVerticalAlignForViewport(col.blocks || [], viewport);
 
           return (
             <div
@@ -198,7 +198,7 @@ const ReadOnlyParallaxSlide = memo(function ReadOnlyParallaxSlide({
           }}
         >
           {slide.columns.map((col) => {
-            const colJustify = getColumnVerticalAlign(col.blocks || []);
+            const colJustify = getColumnVerticalAlignForViewport(col.blocks || [], viewport);
             return (
               <div
                 key={col._key}
@@ -439,7 +439,7 @@ const ReadOnlyCoverSection = memo(function ReadOnlyCoverSection({
         >
           {section.columns.map((col) => {
             const rowAlign = effectiveRows[col.grid_row - 1]?.vertical_align || "start";
-            const colJustify = getColumnVerticalAlign(col.blocks || []);
+            const colJustify = getColumnVerticalAlignForViewport(col.blocks || [], viewport);
             const justify = rowAlign === "center" ? "center" : rowAlign === "end" ? "flex-end" : colJustify || "flex-start";
             return (
               <div

package/components/builder/SectionV2Column.tsx

@@ -10,7 +10,7 @@ import { useBuilderStore } from "../../lib/builder/store";
 import { makeBlockId, makeColumnDroppableId } from "./DndWrapper";
 import type { SectionColumn, ContentBlock, PageSectionV2 } from "../../lib/sanity/types";
 import {
-  getColumnVerticalAlign,
+  getColumnVerticalAlignForViewport,
   getBackgroundStyles,
   getBorderStyles,
 } from "../../lib/builder/layout-styles";
@@ -165,6 +165,7 @@ export default function SectionV2Column({
 }: SectionV2ColumnProps) {
   const previewMode = useBuilderStore((s) => s.previewMode);
   const canvasZoom = useBuilderStore((s) => s.canvasZoom);
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
   const [isHovered, setIsHovered] = useState(false);
   const [resizingEdge, setResizingEdge] = useState<"left" | "right" | null>(null);
   const [hoveredEdge, setHoveredEdge] = useState<"left" | "right" | null>(null);
@@ -231,8 +232,10 @@ export default function SectionV2Column({
   // Show faint outlines when section is hovered but not this specific column
   const showFaintOutline = isSectionHovered && !isHovered && !isSelected && !isDraggedColumn && !isLockedColumn;
 
-  // Column-level vertical alignment from blocks' align_v settings
-  const colJustify = getColumnVerticalAlign(column.blocks || []);
+  // Column-level vertical alignment from blocks' align_v settings.
+  // Viewport-aware: respects responsive overrides for the active viewport
+  // (active canvas frame edits the viewport selected in the toolbar).
+  const colJustify = getColumnVerticalAlignForViewport(column.blocks || [], activeViewport);
 
   // Column-level background + border (desktop-only — no responsive overrides).
   const columnLayoutStyles: React.CSSProperties = {
@@ -499,11 +502,21 @@ export default function SectionV2Column({
         )}
       </SortableContext>
 
-      {/* "+" add block button below blocks — absolutely positioned to avoid disrupting flex alignment */}
+      {/* "+" add block button below blocks.
+          When the column has a vertical alignment (center / flex-end via
+          colJustify), this drop zone is anchored absolutely to the bottom of
+          the column so its `flex: 1` doesn't eat the spare space and break
+          the column's `justify-content`. Without alignment (top default), it
+          keeps the legacy `flex: 1` so the entire empty area below the last
+          block remains a generous drop target. */}
       {/* Hidden for section-level blocks (e.g. projectGridBlock) that own the full column */}
       {hasBlocks && !singleSectionBlock && (
         <div
-          className={`flex-1 min-h-0 flex items-center justify-center z-[3] transition-all ${
+          className={`flex items-center justify-center z-[3] transition-all ${
+            colJustify
+              ? "absolute left-0 right-0 bottom-0"
+              : "flex-1 min-h-0"
+          } ${
             showChrome ? "opacity-100" : showFaintOutline ? "opacity-30" : "opacity-0 pointer-events-none"
           }`}
           style={{ minHeight: 24 }}

package/lib/builder/layout-styles.ts

@@ -303,6 +303,61 @@ export function getColumnVerticalAlign(blocks: Array<{ layout?: BlockLayout }>):
   return undefined; // default (flex-start)
 }
 
+/**
+ * Resolve a single block's effective `align_v` for a given viewport, honouring
+ * responsive overrides stored at `block.responsive[viewport].layout.align_v`
+ * and falling back to the desktop default at `block.layout.align_v`.
+ *
+ * Accepts a loosely-typed block — callers pass `ContentBlock` shapes whose
+ * concrete `responsive` generic does not satisfy a structural index signature,
+ * so we read via `unknown` cast (same pattern as `getColumnVerticalAlign`).
+ */
+function resolveBlockAlignV(
+  block: { layout?: BlockLayout },
+  viewport: "desktop" | "tablet" | "phone"
+): "top" | "center" | "bottom" | undefined {
+  if (viewport !== "desktop") {
+    const responsive = (block as unknown as Record<string, unknown>).responsive as
+      | Record<string, { layout?: Partial<BlockLayout> }>
+      | undefined;
+    const vpLayout = responsive?.[viewport]?.layout;
+    if (vpLayout && "align_v" in vpLayout) {
+      return vpLayout.align_v as "top" | "center" | "bottom" | undefined;
+    }
+  }
+  const layout = (block as unknown as Record<string, unknown>).layout as BlockLayout | undefined;
+  return layout?.align_v as "top" | "center" | "bottom" | undefined;
+}
+
+/**
+ * Viewport-aware variant of {@link getColumnVerticalAlign}. Resolves each
+ * block's effective `align_v` for the given viewport (responsive override
+ * cascading down to desktop default) and applies the same column-level
+ * priority (bottom > center > top).
+ *
+ * Used by:
+ *  - Builder canvas (active viewport from store)
+ *  - ReadOnlyFrame (per-frame viewport prop)
+ *  - Public SectionV2Renderer (desktop default + media queries for overrides)
+ */
+export function getColumnVerticalAlignForViewport(
+  blocks: Array<{ layout?: BlockLayout }>,
+  viewport: "desktop" | "tablet" | "phone"
+): string | undefined {
+  let hasBottom = false;
+  let hasCenter = false;
+
+  for (const block of blocks) {
+    const v = resolveBlockAlignV(block, viewport);
+    if (v === "bottom") hasBottom = true;
+    else if (v === "center") hasCenter = true;
+  }
+
+  if (hasBottom) return "flex-end";
+  if (hasCenter) return "center";
+  return undefined; // default (flex-start)
+}
+
 /**
  * Check if a block has any layout styles set.
  */

package/lib/version.ts

@@ -6,4 +6,4 @@
  * Exposed as a plain constant so it can be imported without reading
  * package.json at runtime.
  */
-export const ANDAMI_VERSION = "0.5.8";
+export const ANDAMI_VERSION = "0.5.10";

package/package.json

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