@morphika/andami 0.5.1 → 0.5.2

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/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)
 // ============================================
@@ -694,7 +790,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.2";

package/package.json

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

package/sanity/schemas/blocks/marqueeBlock.ts

@@ -0,0 +1,292 @@
+import { defineField, defineType } from "sanity";
+import { blockLayoutField, blockAnimationFields } from "./blockLayout";
+
+/**
+ * marqueeBlock — horizontal infinite-scroll ticker.
+ *
+ * Signature portfolio element. Supports mixed content (text, images,
+ * separators) scrolling horizontally at a configurable speed, with
+ * pause-on-hover and a hollow-text "outline" typography option for the
+ * classic portfolio look.
+ *
+ * Treated as a **section-level block** (same semantics as
+ * projectGridBlock / projectCarouselBlock): lives inside a full-width
+ * column of a pageSectionV2 and is added via the "+ Add Section" modal,
+ * not the "+ Add Block" picker. Unlike the two project-related section
+ * blocks, Marquee is available on **both pages and projects** — the
+ * "AVAILABLE FOR WORK" band fits naturally on `/work/[slug]` too.
+ *
+ * Performance: the renderer uses pure CSS @keyframes + IntersectionObserver
+ * to pause the animation when off-screen. Zero JS in the hot path, zero
+ * CPU off-screen. Respects `prefers-reduced-motion`.
+ *
+ * Hover effects deliberately disabled (enterPresets only): a block that
+ * is already moving doesn't benefit from scale/tilt hover effects — would
+ * fight the motion.
+ */
+export const marqueeBlock = defineType({
+  name: "marqueeBlock",
+  title: "Marquee",
+  type: "object",
+  fields: [
+    // ─── Content (items array) ────────────────────────────────
+    defineField({
+      name: "items",
+      title: "Items",
+      type: "array",
+      description:
+        "Ordered list of text, images and separators. They repeat in order indefinitely as the marquee scrolls.",
+      of: [
+        {
+          type: "object",
+          name: "marqueeText",
+          title: "Text",
+          fields: [
+            defineField({
+              name: "text",
+              title: "Text",
+              type: "string",
+              validation: (Rule) => Rule.required().min(1),
+            }),
+          ],
+          preview: {
+            select: { title: "text" },
+            prepare: ({ title }: { title?: string }) => ({
+              title: title || "(empty text)",
+              subtitle: "Text",
+            }),
+          },
+        },
+        {
+          type: "object",
+          name: "marqueeImage",
+          title: "Image",
+          fields: [
+            defineField({
+              name: "asset_path",
+              title: "Asset path",
+              type: "string",
+              description: "Relative path to the image file",
+              validation: (Rule) => Rule.required(),
+            }),
+            defineField({
+              name: "alt",
+              title: "Alt text",
+              type: "string",
+            }),
+            defineField({
+              name: "border_radius",
+              title: "Border radius (px)",
+              type: "number",
+              initialValue: 0,
+              validation: (Rule) => Rule.min(0).max(200),
+            }),
+            defineField({
+              name: "width",
+              title: "Width (px)",
+              type: "number",
+              description:
+                "Fixed width. Leave empty to derive from the row height and image aspect ratio.",
+              validation: (Rule) => Rule.min(16).max(1200),
+            }),
+          ],
+          preview: {
+            select: { title: "alt", subtitle: "asset_path" },
+            prepare: ({ title, subtitle }: { title?: string; subtitle?: string }) => ({
+              title: title || "(no alt)",
+              subtitle: `Image · ${subtitle || "no asset"}`,
+            }),
+          },
+        },
+        {
+          type: "object",
+          name: "marqueeSeparator",
+          title: "Separator",
+          fields: [
+            defineField({
+              name: "character",
+              title: "Character",
+              type: "string",
+              description:
+                "Any character (or emoji) used as a divider. Common: • · — / ▸ ★",
+              initialValue: "•",
+              validation: (Rule) => Rule.required().min(1).max(4),
+            }),
+          ],
+          preview: {
+            select: { title: "character" },
+            prepare: ({ title }: { title?: string }) => ({
+              title: title || "•",
+              subtitle: "Separator",
+            }),
+          },
+        },
+      ],
+    }),
+
+    // ─── Motion ───────────────────────────────────────────────
+    defineField({
+      name: "direction",
+      title: "Direction",
+      type: "string",
+      description: "Horizontal scroll direction",
+      options: {
+        list: [
+          { title: "Left →", value: "left" },
+          { title: "← Right", value: "right" },
+        ],
+      },
+      initialValue: "left",
+    }),
+    defineField({
+      name: "speed",
+      title: "Speed (px/s)",
+      type: "number",
+      description:
+        "Scroll speed in pixels per second. Decouples from content length (a 20s loop feels radically different with 10 items vs 100).",
+      initialValue: 60,
+      validation: (Rule) => Rule.min(5).max(600),
+    }),
+    defineField({
+      name: "pause_on_hover",
+      title: "Pause on hover",
+      type: "boolean",
+      initialValue: true,
+    }),
+
+    // ─── Typography (text + separator items) ──────────────────
+    defineField({
+      name: "font_size",
+      title: "Font size",
+      type: "string",
+      description: "Size scale for text and separator items",
+      options: {
+        list: [
+          { title: "S", value: "s" },
+          { title: "Base", value: "base" },
+          { title: "L", value: "l" },
+          { title: "XL", value: "xl" },
+          { title: "2XL", value: "2xl" },
+          { title: "3XL", value: "3xl" },
+          { title: "4XL", value: "4xl" },
+          { title: "5XL", value: "5xl" },
+          { title: "6XL", value: "6xl" },
+        ],
+      },
+      initialValue: "3xl",
+    }),
+    defineField({
+      name: "font_weight",
+      title: "Font weight",
+      type: "string",
+      options: {
+        list: [
+          { title: "Normal", value: "400" },
+          { title: "Medium", value: "500" },
+          { title: "Bold", value: "700" },
+          { title: "Black", value: "900" },
+        ],
+      },
+      initialValue: "700",
+    }),
+    defineField({
+      name: "color",
+      title: "Text color",
+      type: "string",
+      description: "Hex or palette token",
+      initialValue: "#111111",
+    }),
+    defineField({
+      name: "text_style",
+      title: "Text style",
+      type: "string",
+      description:
+        "Outline renders hollow text via -webkit-text-stroke — the classic portfolio signature look.",
+      options: {
+        list: [
+          { title: "Solid", value: "solid" },
+          { title: "Outline (hollow)", value: "outline" },
+          { title: "Italic outline", value: "italic-outline" },
+        ],
+      },
+      initialValue: "solid",
+    }),
+    defineField({
+      name: "letter_spacing",
+      title: "Letter spacing (em)",
+      type: "number",
+      description: "Extra tracking between letters — in em units",
+      initialValue: 0,
+      validation: (Rule) => Rule.min(-0.1).max(0.5),
+    }),
+    defineField({
+      name: "text_transform",
+      title: "Text transform",
+      type: "string",
+      options: {
+        list: [
+          { title: "None", value: "none" },
+          { title: "UPPERCASE", value: "uppercase" },
+          { title: "lowercase", value: "lowercase" },
+        ],
+      },
+      initialValue: "uppercase",
+    }),
+
+    // ─── Layout ───────────────────────────────────────────────
+    defineField({
+      name: "gap",
+      title: "Gap between items (px)",
+      type: "number",
+      initialValue: 48,
+      validation: (Rule) => Rule.min(0).max(200),
+    }),
+    defineField({
+      name: "row_height",
+      title: "Row height (px)",
+      type: "number",
+      description: "Height of the marquee band. Determines image item height.",
+      initialValue: 120,
+      validation: (Rule) => Rule.min(24).max(600),
+    }),
+    defineField({
+      name: "padding_y",
+      title: "Vertical padding (px)",
+      type: "number",
+      initialValue: 16,
+      validation: (Rule) => Rule.min(0).max(200),
+    }),
+    defineField({
+      name: "background_color",
+      title: "Background color",
+      type: "string",
+      description: "Hex or palette token. Leave empty for transparent.",
+    }),
+
+    // ─── Standard block fields ────────────────────────────────
+    ...blockAnimationFields,
+    blockLayoutField,
+  ],
+  preview: {
+    select: {
+      direction: "direction",
+      speed: "speed",
+      items: "items",
+    },
+    prepare: ({
+      direction,
+      speed,
+      items,
+    }: {
+      direction?: string;
+      speed?: number;
+      items?: unknown[];
+    }) => {
+      const count = Array.isArray(items) ? items.length : 0;
+      const arrow = direction === "right" ? "←" : "→";
+      return {
+        title: `Marquee (${count} items ${arrow} ${speed ?? 60}px/s)`,
+      };
+    },
+  },
+});