@morphika/andami 0.5.7 → 0.5.8

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/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

@@ -191,9 +191,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 +243,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 +255,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,6 +264,7 @@ 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) => {

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/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.8";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "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 {