@morphika/andami 0.5.1 → 0.5.3

package/lib/builder/types.ts

@@ -65,6 +65,7 @@ export const ALL_BLOCK_INFO: BlockTypeInfo[] = [
   // Section blocks — not in the content picker but still need label/icon lookup
   { type: "projectGridBlock", label: "Project Grid", description: "Staggered project showcase grid", group: "generic", icon: "⬡", category: "section" },
   { type: "projectCarouselBlock", label: "Project Carousel", description: "Horizontal carousel of projects — great for end-of-page 'keep browsing'", group: "generic", icon: "▸", category: "section" },
+  { type: "marqueeBlock", label: "Marquee", description: "Horizontal scrolling ticker of text and images", group: "generic", icon: "⇄", category: "section" },
 ];
 
 // Parallax group info — used by BuilderCanvas/SortableRow for label/icon lookup (not a block)
@@ -75,12 +76,13 @@ export const PARALLAX_GROUP_INFO = { label: "Parallax Showcase", icon: "▽" };
 // ============================================
 
 /** Section block types that create a full-width row with a pre-populated block */
-export type SectionBlockType = "projectGridBlock" | "projectCarouselBlock";
+export type SectionBlockType = "projectGridBlock" | "projectCarouselBlock" | "marqueeBlock";
 
 /** Set for fast lookup — used by SortableBlock, ColumnDropZone, SortableRow to suppress inner chrome */
 const SECTION_BLOCK_TYPES: ReadonlySet<string> = new Set<string>([
   "projectGridBlock",
   "projectCarouselBlock",
+  "marqueeBlock",
 ]);
 
 /** Check if a block type is a section-level block (should render without block/column chrome) */
@@ -114,6 +116,7 @@ export const SECTION_TYPE_REGISTRY: SectionTypeInfo[] = [
   { type: "coverSection", label: "Cover Section", description: "Full-viewport section with background and proportional rows", icon: "◆" },
   { type: "projectGridBlock", label: "Project Grid", description: "Staggered project showcase grid", icon: "⬡", blockType: "projectGridBlock" },
   { type: "projectCarouselBlock", label: "Project Carousel", description: "Horizontal 'keep browsing' carousel of projects", icon: "▸", blockType: "projectCarouselBlock" },
+  { type: "marqueeBlock", label: "Marquee", description: "Horizontal scrolling ticker of text and images", icon: "⇄", blockType: "marqueeBlock" },
   { type: "parallaxGroup", label: "Parallax Section", description: "Full-screen parallax showcase with V2 slides", icon: "▽" },
 ];
 

package/lib/config/index.ts

@@ -1,28 +1,28 @@
-/**
- * Site configuration accessor.
- *
- * Uses globalThis + Symbol.for to guarantee a true singleton even when
- * the bundler creates multiple module instances of this file.
- */
-
-import type { SiteConfig } from "./types";
-
-const CONFIG_KEY = Symbol.for("@morphika/andami/siteConfig");
-const g = globalThis as unknown as Record<symbol, SiteConfig | undefined>;
-
-export function registerConfig(config: SiteConfig): void {
-  g[CONFIG_KEY] = config;
-}
-
-export function getSiteConfig(): SiteConfig {
-  const cfg = g[CONFIG_KEY];
-  if (!cfg) {
-    throw new Error(
-      "SiteConfig not registered. Call registerConfig(config) in your root layout before using getSiteConfig().\n" +
-      "See: https://github.com/MorphikaStudio/Morphika_Andami#quick-start",
-    );
-  }
-  return cfg;
-}
-
+/**
+ * Site configuration accessor.
+ *
+ * Uses globalThis + Symbol.for to guarantee a true singleton even when
+ * the bundler creates multiple module instances of this file.
+ */
+
+import type { SiteConfig } from "./types";
+
+const CONFIG_KEY = Symbol.for("@morphika/andami/siteConfig");
+const g = globalThis as unknown as Record<symbol, SiteConfig | undefined>;
+
+export function registerConfig(config: SiteConfig): void {
+  g[CONFIG_KEY] = config;
+}
+
+export function getSiteConfig(): SiteConfig {
+  const cfg = g[CONFIG_KEY];
+  if (!cfg) {
+    throw new Error(
+      "SiteConfig not registered. Call registerConfig(config) in your root layout before using getSiteConfig().\n" +
+      "See: https://github.com/MorphikaStudio/Morphika_Andami#quick-start",
+    );
+  }
+  return cfg;
+}
+
 export type { SiteConfig } from "./types";

package/lib/sanity/queries.ts

@@ -20,6 +20,18 @@ const blockExpansion = `
       grid_row,
       span,
       enter_animation,
+      // Column-level background + border (Session 184)
+      background_color,
+      background_opacity,
+      background_image,
+      background_size,
+      background_position,
+      background_repeat,
+      border_color,
+      border_width,
+      border_style,
+      border_sides,
+      border_radius,
       blocks[] {
         _type,
         _key,
@@ -60,6 +72,18 @@ const blockExpansion = `
         grid_column,
         grid_row,
         span,
+        // Column-level background + border (Session 184)
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,
@@ -429,6 +453,18 @@ export const customSectionBySlugQuery = groq`
         grid_column,
         grid_row,
         span,
+        enter_animation,
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,
@@ -456,6 +492,18 @@ export const customSectionByIdQuery = groq`
         grid_column,
         grid_row,
         span,
+        enter_animation,
+        background_color,
+        background_opacity,
+        background_image,
+        background_size,
+        background_position,
+        background_repeat,
+        border_color,
+        border_width,
+        border_style,
+        border_sides,
+        border_radius,
         blocks[] {
           _type,
           _key,

package/lib/sanity/types.ts

@@ -368,6 +368,102 @@ export interface ProjectGridBlock {
   responsive?: ResponsiveOverrides<ProjectGridBlock>;
 }
 
+// ============================================
+// Marquee Block — horizontal infinite-scroll ticker (Session 184)
+// ============================================
+
+/** Plain-text item in a marquee. */
+export interface MarqueeTextItem {
+  _key: string;
+  _type: "marqueeText";
+  text: string;
+}
+
+/** Image item in a marquee — asset_path is relative (resolved by the asset proxy). */
+export interface MarqueeImageItem {
+  _key: string;
+  _type: "marqueeImage";
+  asset_path: string;
+  alt?: string;
+  /** Per-item override, 0–200 px. */
+  border_radius?: number;
+  /** Fixed width in px. When absent, derived from row_height × natural aspect ratio. */
+  width?: number;
+}
+
+/** Separator item — inherits block-level typography (size/color/weight/style). */
+export interface MarqueeSeparatorItem {
+  _key: string;
+  _type: "marqueeSeparator";
+  /** 1–4 chars — glyph or emoji. Common: • · — / ▸ ★ */
+  character: string;
+}
+
+export type MarqueeItem =
+  | MarqueeTextItem
+  | MarqueeImageItem
+  | MarqueeSeparatorItem;
+
+/**
+ * Font-size scale for text/separator items in a marquee.
+ * Mapped to concrete rem/px values by the renderer.
+ */
+export type MarqueeFontSize =
+  | "s"
+  | "base"
+  | "l"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl";
+
+/**
+ * Marquee Block — horizontal infinite-scroll ticker.
+ *
+ * Section-level block: lives inside a full-width column of a `PageSectionV2`.
+ * Available on both pages and projects (unlike projectGrid/projectCarousel
+ * which are pages-only) — makes sense as an end-of-project "keep browsing"
+ * style band.
+ *
+ * Motion is driven by CSS `@keyframes` with an IntersectionObserver pause
+ * when off-screen. Respects `prefers-reduced-motion`. Hover effects are
+ * deliberately not supported — a block that is already animating fights
+ * scale/tilt hover presets.
+ */
+export interface MarqueeBlock {
+  _type: "marqueeBlock";
+  _key: string;
+
+  // ─── Content ───
+  items: MarqueeItem[];
+
+  // ─── Motion ───
+  direction?: "left" | "right";              // default "left"
+  speed?: number;                             // px/s, 5–600, default 60
+  pause_on_hover?: boolean;                   // default true
+
+  // ─── Typography (applies to text + separator items) ───
+  font_size?: MarqueeFontSize;                // default "3xl"
+  font_weight?: "400" | "500" | "700" | "900"; // default "700"
+  color?: string;                             // hex or palette token, default "#111111"
+  text_style?: "solid" | "outline" | "italic-outline"; // default "solid"
+  letter_spacing?: number;                    // em, default 0
+  text_transform?: "none" | "uppercase" | "lowercase"; // default "uppercase"
+
+  // ─── Layout ───
+  gap?: number;                               // px between items, default 48
+  row_height?: number;                        // px, default 120 (controls image height)
+  padding_y?: number;                         // px, default 16
+  background_color?: string;                  // hex or palette; empty = transparent
+
+  // ─── Standard block fields ───
+  enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
+  layout?: BlockLayout;
+  responsive?: ResponsiveOverrides<MarqueeBlock>;
+}
+
 // ============================================
 // Parallax V2 — Group + Slide types (Session 123)
 // ============================================
@@ -463,6 +559,20 @@ export interface SectionColumn {
   blocks: ContentBlock[];   // same block types as today
   // NEW (Session 116) — column-level enter animation for 4-level cascade
   enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
+  // Column-level layout — desktop-only for now. Background + border only
+  // (no spacing — section row_gap/col_gap + block padding cover that).
+  // Viewport overrides are TBD: the current ColumnOverride type is position-only.
+  background_color?: string;
+  background_opacity?: number;
+  background_image?: string;
+  background_size?: string;
+  background_position?: string;
+  background_repeat?: string;
+  border_color?: string;
+  border_width?: string;
+  border_style?: string;
+  border_sides?: string;
+  border_radius?: string;
 }
 
 export interface ColumnOverride {
@@ -694,7 +804,8 @@ export type ContentBlock =
   | BeforeAfterBlock
   | AudioBlock
   | ProjectGridBlock
-  | ProjectCarouselBlock;
+  | ProjectCarouselBlock
+  | MarqueeBlock;
 
 // ============================================
 // Structural types

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",
@@ -193,7 +193,6 @@
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
-    "archiver": "^7.0.1",
     "@aws-sdk/client-s3": "^3.1021.0",
     "@aws-sdk/s3-request-presigner": "^3.1021.0",
     "@dnd-kit/core": "^6.3.1",
@@ -210,10 +209,11 @@
     "@tiptap/starter-kit": "^2.12.0",
     "@types/archiver": "^6.0.3",
     "@types/unzipper": "^0.10.10",
+    "archiver": "^7.0.1",
     "jszip": "^3.10.1",
-    "next-sanity": "^12.1.5",
+    "next-sanity": "^12.3.0",
     "ogl": "^1.0.8",
-    "sanity": "^5.17.1",
+    "sanity": "^5.21.0",
     "unzipper": "^0.12.3",
     "zustand": "^5.0.12"
   },
@@ -228,10 +228,12 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.2.1",
+    "framer-motion": "^12.38.0",
     "jsdom": "^26.1.0",
-    "next": "16.2.1",
+    "next": "^16.2.4",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "styled-components": "^6.4.0",
     "tailwindcss": "^4",
     "typescript": "^5",
     "vitest": "^4.1.2"

package/sanity/schemas/blocks/audioBlock.ts

@@ -1,69 +1,69 @@
-import { defineField, defineType } from "sanity";
-import { blockLayoutField, blockAnimationFields } from "./blockLayout";
-
-export const audioBlock = defineType({
-  name: "audioBlock",
-  title: "Audio Block",
-  type: "object",
-  fields: [
-    // ── Source ──
-    defineField({
-      name: "asset_path",
-      title: "Audio File",
-      type: "string",
-      description: "Relative path to the audio file (mp3, wav, ogg, m4a, aac, flac)",
-      validation: (Rule) => Rule.required(),
-    }),
-    defineField({ name: "alt", title: "Alt Text", type: "string" }),
-
-    // ── Metadata ──
-    defineField({ name: "title", title: "Title", type: "string" }),
-    defineField({ name: "artist", title: "Artist", type: "string" }),
-    defineField({
-      name: "cover_path",
-      title: "Cover Art",
-      type: "string",
-      description: "Optional relative path to a cover image",
-    }),
-
-    // ── Appearance ──
-    defineField({
-      name: "accent_color",
-      title: "Accent Color",
-      type: "string",
-      description: "Hex color for the play button + progress fill",
-      initialValue: "#4794E2",
-    }),
-    defineField({
-      name: "width",
-      title: "Width",
-      type: "string",
-      options: {
-        list: [
-          { title: "Full", value: "full" },
-          { title: "Contained", value: "contained" },
-          { title: "Small", value: "small" },
-          { title: "Fill", value: "fill" },
-        ],
-      },
-      initialValue: "contained",
-    }),
-    defineField({ name: "border_radius", title: "Border Radius", type: "string" }),
-    defineField({ name: "shadow", title: "Shadow", type: "boolean", initialValue: false }),
-
-    // ── Playback ──
-    defineField({ name: "autoplay", title: "Autoplay", type: "boolean", initialValue: false }),
-    defineField({ name: "loop", title: "Loop", type: "boolean", initialValue: false }),
-    defineField({ name: "muted", title: "Muted", type: "boolean", initialValue: false }),
-
-    ...blockAnimationFields,
-    blockLayoutField,
-  ],
-  preview: {
-    select: { path: "asset_path", title: "title", artist: "artist" },
-    prepare({ path, title, artist }) {
-      const label = title ? (artist ? `${title} — ${artist}` : title) : path || "Audio block";
-      return { title: label };
-    },
-  },
-});
+import { defineField, defineType } from "sanity";
+import { blockLayoutField, blockAnimationFields } from "./blockLayout";
+
+export const audioBlock = defineType({
+  name: "audioBlock",
+  title: "Audio Block",
+  type: "object",
+  fields: [
+    // ── Source ──
+    defineField({
+      name: "asset_path",
+      title: "Audio File",
+      type: "string",
+      description: "Relative path to the audio file (mp3, wav, ogg, m4a, aac, flac)",
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({ name: "alt", title: "Alt Text", type: "string" }),
+
+    // ── Metadata ──
+    defineField({ name: "title", title: "Title", type: "string" }),
+    defineField({ name: "artist", title: "Artist", type: "string" }),
+    defineField({
+      name: "cover_path",
+      title: "Cover Art",
+      type: "string",
+      description: "Optional relative path to a cover image",
+    }),
+
+    // ── Appearance ──
+    defineField({
+      name: "accent_color",
+      title: "Accent Color",
+      type: "string",
+      description: "Hex color for the play button + progress fill",
+      initialValue: "#3580f9",
+    }),
+    defineField({
+      name: "width",
+      title: "Width",
+      type: "string",
+      options: {
+        list: [
+          { title: "Full", value: "full" },
+          { title: "Contained", value: "contained" },
+          { title: "Small", value: "small" },
+          { title: "Fill", value: "fill" },
+        ],
+      },
+      initialValue: "contained",
+    }),
+    defineField({ name: "border_radius", title: "Border Radius", type: "string" }),
+    defineField({ name: "shadow", title: "Shadow", type: "boolean", initialValue: false }),
+
+    // ── Playback ──
+    defineField({ name: "autoplay", title: "Autoplay", type: "boolean", initialValue: false }),
+    defineField({ name: "loop", title: "Loop", type: "boolean", initialValue: false }),
+    defineField({ name: "muted", title: "Muted", type: "boolean", initialValue: false }),
+
+    ...blockAnimationFields,
+    blockLayoutField,
+  ],
+  preview: {
+    select: { path: "asset_path", title: "title", artist: "artist" },
+    prepare({ path, title, artist }) {
+      const label = title ? (artist ? `${title} — ${artist}` : title) : path || "Audio block";
+      return { title: label };
+    },
+  },
+});

package/sanity/schemas/blocks/index.ts

@@ -1,11 +1,12 @@
-// Block schemas (10)
-export { textBlock } from "./textBlock";
-export { imageBlock } from "./imageBlock";
-export { imageGridBlock } from "./imageGridBlock";
-export { videoBlock } from "./videoBlock";
-export { spacerBlock } from "./spacerBlock";
-export { buttonBlock } from "./buttonBlock";
-export { beforeAfterBlock } from "./beforeAfterBlock";
-export { audioBlock } from "./audioBlock";
-export { projectGridBlock } from "./projectGridBlock";
-export { projectCarouselBlock } from "./projectCarouselBlock";
+// Block schemas (11)
+export { textBlock } from "./textBlock";
+export { imageBlock } from "./imageBlock";
+export { imageGridBlock } from "./imageGridBlock";
+export { videoBlock } from "./videoBlock";
+export { spacerBlock } from "./spacerBlock";
+export { buttonBlock } from "./buttonBlock";
+export { beforeAfterBlock } from "./beforeAfterBlock";
+export { audioBlock } from "./audioBlock";
+export { projectGridBlock } from "./projectGridBlock";
+export { projectCarouselBlock } from "./projectCarouselBlock";
+export { marqueeBlock } from "./marqueeBlock";