@morphika/andami 0.5.7 → 0.5.9

package/app/admin/styles/page.tsx

@@ -11,13 +11,14 @@ import {
   TypographyEditor,
   ColorsEditor,
   LinksButtonsEditor,
+  CursorEditor,
 } from "../../../components/admin/styles";
 
 // ============================================
 // Tab definitions
 // ============================================
 
-type TabId = "grid" | "typography" | "colors" | "buttons";
+type TabId = "grid" | "typography" | "colors" | "buttons" | "cursor";
 
 function TabIcon({ id, size = 15 }: { id: TabId; size?: number }) {
   const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none" as const, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
@@ -56,6 +57,12 @@ function TabIcon({ id, size = 15 }: { id: TabId; size?: number }) {
           <line x1="8" y1="12" x2="16" y2="12" />
         </svg>
       );
+    case "cursor":
+      return (
+        <svg {...props}>
+          <path d="M5 3l6 16 2-7 7-2z" />
+        </svg>
+      );
   }
 }
 
@@ -64,6 +71,7 @@ const TABS: { id: TabId; label: string }[] = [
   { id: "typography", label: "Typography" },
   { id: "colors", label: "Colors" },
   { id: "buttons", label: "Buttons & Links" },
+  { id: "cursor", label: "Mouse" },
 ];
 
 // ============================================
@@ -238,6 +246,14 @@ export default function AdminStylesPage() {
           saving={saving === "links"}
         />
       )}
+
+      {activeTab === "cursor" && (
+        <CursorEditor
+          cursor={styles?.cursor}
+          onSave={(data) => saveSection("cursor", data)}
+          saving={saving === "cursor"}
+        />
+      )}
     </div>
   );
 }

package/app/api/admin/styles/route.ts

@@ -137,6 +137,11 @@ export async function GET() {
         secondary_text: styles.button_secondary_text || "#ffffff",
         border_radius: styles.button_border_radius || "8px",
       },
+      cursor: {
+        color: styles.cursor_color || "#3580f9",
+        opacity: typeof styles.cursor_opacity === "number" ? styles.cursor_opacity : 100,
+        show_labels: !!styles.cursor_show_labels,
+      },
       disable_scroll_animations_mobile: styles.disable_scroll_animations_mobile ?? false,
     };
 
@@ -176,7 +181,7 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    const validSections = ["grid", "fonts", "typography", "colors", "links"];
+    const validSections = ["grid", "fonts", "typography", "colors", "links", "cursor", "animations"];
     if (!validSections.includes(section)) {
       return NextResponse.json(
         { error: `Invalid section: ${section}` },
@@ -286,6 +291,18 @@ export async function POST(request: NextRequest) {
         }
         break;
       }
+
+      case "cursor": {
+        if (data.cursor_color !== undefined) patch.cursor_color = String(data.cursor_color);
+        if (data.cursor_opacity !== undefined) {
+          const n = Number(data.cursor_opacity);
+          patch.cursor_opacity = Number.isFinite(n) ? Math.max(0, Math.min(100, n)) : 100;
+        }
+        if (data.cursor_show_labels !== undefined) {
+          patch.cursor_show_labels = !!data.cursor_show_labels;
+        }
+        break;
+      }
     }
 
     // Ensure the document exists

package/app/api/styles/route.ts

@@ -70,6 +70,11 @@ export async function GET() {
         secondary_text: raw.button_secondary_text || "#ffffff",
         border_radius: raw.button_border_radius || "8px",
       },
+      cursor: {
+        color: raw.cursor_color || "#3580f9",
+        opacity: typeof raw.cursor_opacity === "number" ? raw.cursor_opacity : 100,
+        show_labels: !!raw.cursor_show_labels,
+      },
       disable_scroll_animations_mobile: raw.disable_scroll_animations_mobile ?? false,
     };
 

package/components/admin/styles/CursorEditor.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { CursorSettings } from "../../../lib/sanity/types";
+import { Section, SaveButton, ColorField } from "./shared";
+
+export function CursorEditor({
+  cursor,
+  onSave,
+  saving,
+}: {
+  cursor?: CursorSettings;
+  onSave: (data: Record<string, unknown>) => void;
+  saving: boolean;
+}) {
+  const [local, setLocal] = useState({
+    cursor_color: cursor?.color || "#3580f9",
+    cursor_opacity: typeof cursor?.opacity === "number" ? cursor.opacity : 100,
+    cursor_show_labels: !!cursor?.show_labels,
+  });
+
+  useEffect(() => {
+    setLocal({
+      cursor_color: cursor?.color || "#3580f9",
+      cursor_opacity: typeof cursor?.opacity === "number" ? cursor.opacity : 100,
+      cursor_show_labels: !!cursor?.show_labels,
+    });
+  }, [cursor]);
+
+  const previewAlpha = Math.max(0, Math.min(100, local.cursor_opacity)) / 100;
+
+  return (
+    <Section
+      title="Mouse Cursor"
+      description="Custom cursor that replaces the system pointer on the public site. Activated globally via site.config.ts → features.customCursor."
+    >
+      <div className="grid grid-cols-2 gap-6 mb-6">
+        <ColorField
+          label="Cursor Color"
+          value={local.cursor_color}
+          onChange={(v) => setLocal({ ...local, cursor_color: v })}
+        />
+
+        <div>
+          <label className="text-xs text-neutral-500 block mb-1">
+            Opacity — {local.cursor_opacity}%
+          </label>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            step={1}
+            value={local.cursor_opacity}
+            onChange={(e) =>
+              setLocal({ ...local, cursor_opacity: Number(e.target.value) })
+            }
+            className="w-full accent-[#3580f9]"
+          />
+        </div>
+      </div>
+
+      <label className="flex items-start gap-3 mb-6 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={local.cursor_show_labels}
+          onChange={(e) =>
+            setLocal({ ...local, cursor_show_labels: e.target.checked })
+          }
+          className="mt-0.5 accent-[#3580f9]"
+        />
+        <div>
+          <span className="text-sm text-neutral-800 block">Show hover labels</span>
+          <span className="text-xs text-neutral-500 block mt-0.5">
+            Adds <em>Zoom</em> on images, <em>Play</em> on videos, and <em>View</em> on links when hovered.
+          </span>
+        </div>
+      </label>
+
+      {/* Preview */}
+      <div className="mb-5 p-6 rounded-lg bg-neutral-900 flex items-center justify-center gap-6">
+        <span className="text-xs text-neutral-400">Preview:</span>
+        <div
+          className="rounded-full border-[1.5px] flex items-center justify-center"
+          style={{
+            width: local.cursor_show_labels ? 60 : 38,
+            height: local.cursor_show_labels ? 60 : 38,
+            borderColor: local.cursor_color,
+            opacity: previewAlpha,
+            transition: "width 0.2s ease, height 0.2s ease",
+          }}
+        >
+          {local.cursor_show_labels && (
+            <span
+              className="text-[10px] font-medium uppercase tracking-wider"
+              style={{ color: local.cursor_color }}
+            >
+              Zoom
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <SaveButton onClick={() => onSave(local)} saving={saving} />
+      </div>
+    </Section>
+  );
+}

package/components/admin/styles/index.ts

@@ -7,3 +7,4 @@ export { FontsEditor } from "./FontsEditor";
 export { TypographyEditor } from "./TypographyEditor";
 export { ColorsEditor } from "./ColorsEditor";
 export { LinksButtonsEditor } from "./LinksButtonsEditor";
+export { CursorEditor } from "./CursorEditor";

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/ParallaxSlideRenderer.tsx

@@ -154,7 +154,11 @@ export default function ParallaxSlideRenderer({
         </div>
       )}
 
-      {/* ── Content layer — full V2 section ── */}
+      {/* ── Content layer — full V2 section ──
+          fillHeight stretches the V2 grid to 100% of the slide so each column's
+          `align_v` (top / center / bottom) has room to apply. No outer
+          justify-content here — the column owns vertical alignment, mirroring
+          ParallaxGroupCanvas in the builder. */}
       <div
         style={{
           position: "relative",
@@ -162,12 +166,12 @@ export default function ParallaxSlideRenderer({
           height: "100%",
           display: "flex",
           flexDirection: "column",
-          justifyContent: "center",
         }}
       >
         <SectionV2Renderer
           section={pseudoSection}
           pageEnterAnimation={pageEnterAnimation}
+          fillHeight
         />
       </div>
     </section>

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;
@@ -191,9 +221,16 @@ interface SectionV2RendererProps {
   section: PageSectionV2;
   /** Page-level enter animation config (from page_settings.enter_animation) */
   pageEnterAnimation?: EnterAnimationConfig;
+  /**
+   * Stretch the section + grid to 100% of the parent's height so column-level
+   * `align_v` (top/center/bottom) has room to apply. Used by parallax slides
+   * and cover sections where the slide/row enforces a fixed height. Mirrors
+   * `fillHeight` in SectionV2Canvas (builder side).
+   */
+  fillHeight?: boolean;
 }
 
-export default function SectionV2Renderer({ section, pageEnterAnimation }: SectionV2RendererProps) {
+export default function SectionV2Renderer({ section, pageEnterAnimation, fillHeight }: SectionV2RendererProps) {
   const s = section.settings;
 
   const gridColumns = s.grid_columns || 12;
@@ -236,7 +273,10 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
   const sectionContent = (
     <section
       className={`sv2-${section._key}`}
-      style={layoutStyles}
+      style={{
+        ...layoutStyles,
+        ...(fillHeight ? { display: "flex", flexDirection: "column", height: "100%" } : {}),
+      }}
     >
       {responsiveCss && <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />}
       <div
@@ -245,6 +285,7 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
           marginLeft: "auto",
           marginRight: "auto",
           width: "100%",
+          ...(fillHeight ? { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" } : {}),
         }}
       >
       <div
@@ -253,13 +294,17 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
           gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
           columnGap: `${colGap}px`,
           rowGap: `${rowGap}px`,
+          ...(fillHeight ? { flex: 1, minHeight: 0, gridTemplateRows: "minmax(0, 1fr)" } : {}),
         }}
       >
         {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 = {

package/components/ui/CustomCursor.tsx

@@ -1,118 +1,138 @@
-"use client";
-
-import { useState, useEffect, useCallback, useRef } from "react";
-
-export default function CustomCursor() {
-  const [position, setPosition] = useState({ x: -100, y: -100 });
-  const [isHovering, setIsHovering] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-  const [isMobile, setIsMobile] = useState(true);
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
-  const rafId = useRef<number>(0);
-
-  // Check if device supports hover (desktop)
-  useEffect(() => {
-    const mql = window.matchMedia("(hover: hover) and (pointer: fine)");
-    setIsMobile(!mql.matches);
-
-    const handler = (e: MediaQueryListEvent) => setIsMobile(!e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-
-  // Respect prefers-reduced-motion — disable custom cursor entirely
-  useEffect(() => {
-    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mql.matches);
-
-    const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (rafId.current) cancelAnimationFrame(rafId.current);
-    rafId.current = requestAnimationFrame(() => {
-      setPosition({ x: e.clientX, y: e.clientY });
-      setIsVisible(true);
-    });
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  // Track hover state on interactive elements
-  useEffect(() => {
-    if (isMobile) return;
-
-    const handleMouseOver = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      if (
-        target.closest("a, button, [role='button'], input, textarea, select, [data-cursor-hover]")
-      ) {
-        setIsHovering(true);
-      }
-    };
-
-    const handleMouseOut = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      if (
-        target.closest("a, button, [role='button'], input, textarea, select, [data-cursor-hover]")
-      ) {
-        setIsHovering(false);
-      }
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseleave", handleMouseLeave);
-    document.addEventListener("mouseover", handleMouseOver);
-    document.addEventListener("mouseout", handleMouseOut);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseleave", handleMouseLeave);
-      document.removeEventListener("mouseover", handleMouseOver);
-      document.removeEventListener("mouseout", handleMouseOut);
-      if (rafId.current) cancelAnimationFrame(rafId.current);
-    };
-  }, [isMobile, handleMouseMove, handleMouseLeave]);
-
-  // Don't render on mobile/touch devices or when reduced motion is preferred
-  if (isMobile || prefersReducedMotion) return null;
-
-  const size = isHovering ? 38 : 20;
-  const innerSize = isHovering ? 10 : 4;
-
-  return (
-    <div
-      className="pointer-events-none fixed inset-0 z-[9999]"
-      aria-hidden="true"
-    >
-      {/* Outer circle — primary brand color */}
-      <div
-        className="absolute rounded-full border-[1.5px] border-brand-primary"
-        style={{
-          width: size,
-          height: size,
-          left: position.x - size / 2,
-          top: position.y - size / 2,
-          opacity: isVisible ? 1 : 0,
-          transition: "width 0.2s ease, height 0.2s ease, opacity 0.15s ease",
-        }}
-      />
-      {/* Inner circle — secondary brand color */}
-      <div
-        className="absolute rounded-full bg-brand-secondary"
-        style={{
-          width: innerSize,
-          height: innerSize,
-          left: position.x - innerSize / 2,
-          top: position.y - innerSize / 2,
-          opacity: isVisible ? 1 : 0,
-          transition: "width 0.2s ease, height 0.2s ease, opacity 0.15s ease",
-        }}
-      />
-    </div>
-  );
-}
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useSiteStyles } from "../../lib/styles/provider";
+
+/** Map a hovered element to a hover label, or null if no label applies. */
+function getHoverLabel(target: HTMLElement | null): string | null {
+  if (!target) return null;
+  // Honour explicit data-cursor-label override (e.g. data-cursor-label="Open")
+  const explicit = target.closest<HTMLElement>("[data-cursor-label]");
+  if (explicit) return explicit.dataset.cursorLabel || null;
+  if (target.closest("img, [data-cursor-context='image']")) return "Zoom";
+  if (target.closest("video, [data-cursor-context='video']")) return "Play";
+  if (target.closest("a")) return "View";
+  return null;
+}
+
+/** Hover-target detection — anything interactive triggers the expanded state. */
+const HOVER_SELECTOR =
+  "a, button, [role='button'], input, textarea, select, img, video, [data-cursor-hover]";
+
+export default function CustomCursor() {
+  const styles = useSiteStyles();
+  const cursor = styles?.cursor;
+  const color = cursor?.color || "#3580f9";
+  const opacity = (typeof cursor?.opacity === "number" ? cursor.opacity : 100) / 100;
+  const showLabels = !!cursor?.show_labels;
+
+  const [position, setPosition] = useState({ x: -100, y: -100 });
+  const [isHovering, setIsHovering] = useState(false);
+  const [label, setLabel] = useState<string | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isMobile, setIsMobile] = useState(true);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  const rafId = useRef<number>(0);
+
+  // Check if device supports hover (desktop)
+  useEffect(() => {
+    const mql = window.matchMedia("(hover: hover) and (pointer: fine)");
+    setIsMobile(!mql.matches);
+
+    const handler = (e: MediaQueryListEvent) => setIsMobile(!e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  // Respect prefers-reduced-motion — disable custom cursor entirely
+  useEffect(() => {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mql.matches);
+
+    const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (rafId.current) cancelAnimationFrame(rafId.current);
+    rafId.current = requestAnimationFrame(() => {
+      setPosition({ x: e.clientX, y: e.clientY });
+      setIsVisible(true);
+    });
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  // Track hover state on interactive elements + resolve contextual label
+  useEffect(() => {
+    if (isMobile) return;
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest(HOVER_SELECTOR)) {
+        setIsHovering(true);
+        if (showLabels) setLabel(getHoverLabel(target));
+      }
+    };
+
+    const handleMouseOut = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest(HOVER_SELECTOR)) {
+        setIsHovering(false);
+        setLabel(null);
+      }
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    document.addEventListener("mouseover", handleMouseOver);
+    document.addEventListener("mouseout", handleMouseOut);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      document.removeEventListener("mouseover", handleMouseOver);
+      document.removeEventListener("mouseout", handleMouseOut);
+      if (rafId.current) cancelAnimationFrame(rafId.current);
+    };
+  }, [isMobile, showLabels, handleMouseMove, handleMouseLeave]);
+
+  if (isMobile || prefersReducedMotion) return null;
+
+  // Expanded size when over an interactive element. When labels are on and
+  // a label is present, we expand further to fit the text comfortably.
+  const showLabelNow = showLabels && isHovering && !!label;
+  const size = showLabelNow ? 60 : isHovering ? 40 : 20;
+
+  return (
+    <div
+      className="pointer-events-none fixed inset-0 z-[9999]"
+      aria-hidden="true"
+    >
+      <div
+        className="absolute rounded-full border-[1.5px] flex items-center justify-center"
+        style={{
+          width: size,
+          height: size,
+          left: position.x - size / 2,
+          top: position.y - size / 2,
+          borderColor: color,
+          opacity: isVisible ? opacity : 0,
+          transition: "width 0.2s ease, height 0.2s ease, opacity 0.15s ease",
+        }}
+      >
+        {showLabelNow && (
+          <span
+            className="text-[10px] font-medium uppercase tracking-wider select-none"
+            style={{ color }}
+          >
+            {label}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

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/sanity/queries.ts

@@ -381,7 +381,10 @@ export const siteStylesQuery = groq`
     button_secondary_bg,
     button_secondary_text,
     button_border_radius,
-    disable_scroll_animations_mobile
+    disable_scroll_animations_mobile,
+    cursor_color,
+    cursor_opacity,
+    cursor_show_labels
   }
 `;
 

package/lib/sanity/types.ts

@@ -1163,6 +1163,14 @@ export interface GridSettings {
   gutter_phone?: string;   // e.g. "16" (phone, ≤640px)
 }
 
+export interface CursorSettings {
+  color: string;
+  /** 0–100 */
+  opacity: number;
+  /** Show 'Zoom'/'Play'/'View' labels on hover over images/videos/links */
+  show_labels: boolean;
+}
+
 export interface SiteStyles {
   grid?: GridSettings;
   fonts?: FontFamily[];
@@ -1177,6 +1185,7 @@ export interface SiteStyles {
   colors?: ColorPalette;
   link_style?: LinkStyle;
   button_style?: ButtonStyle;
+  cursor?: CursorSettings;
   /** When true, disables all scroll animations on viewports ≤768px */
   disable_scroll_animations_mobile?: boolean;
 }

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.7";
+export const ANDAMI_VERSION = "0.5.9";

package/package.json

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

package/sanity/schemas/siteStyles.ts

@@ -13,6 +13,7 @@ export default defineType({
     { name: "typography", title: "Typography" },
     { name: "colors", title: "Colors" },
     { name: "links", title: "Links & Buttons" },
+    { name: "cursor", title: "Mouse" },
   ],
   fields: [
     // === GRID ===
@@ -208,5 +209,31 @@ export default defineType({
       description: "When enabled, all scroll-linked animations are disabled on phones (< 768px)",
       initialValue: false,
     }),
+
+    // === CURSOR (custom mouse cursor) ===
+    defineField({
+      name: "cursor_color",
+      title: "Cursor Color",
+      type: "string",
+      group: "cursor",
+      initialValue: "#3580f9",
+    }),
+    defineField({
+      name: "cursor_opacity",
+      title: "Cursor Opacity",
+      type: "number",
+      group: "cursor",
+      description: "0–100",
+      initialValue: 100,
+      validation: (Rule) => Rule.min(0).max(100),
+    }),
+    defineField({
+      name: "cursor_show_labels",
+      title: "Show Hover Labels",
+      type: "boolean",
+      group: "cursor",
+      description: "Show 'Zoom' on images, 'Play' on videos, 'View' on links when hovered",
+      initialValue: false,
+    }),
   ],
 });

package/styles/base.css

@@ -41,6 +41,32 @@ html {
   scroll-behavior: smooth;
   overflow-x: clip;
   scrollbar-gutter: stable;
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.4) transparent;
+}
+
+/* Custom scrollbar — public site (admin overrides via [data-admin]).
+   Thin, rounded thumb on a transparent track; works on both light and dark
+   backgrounds because the thumb is a semi-transparent neutral grey. */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(128, 128, 128, 0.4);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(128, 128, 128, 0.7);
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 body {