@morphika/andami 0.5.0 → 0.5.2

package/lib/builder/types.ts

@@ -51,6 +51,8 @@ export const BLOCK_TYPE_REGISTRY: BlockTypeInfo[] = [
   { type: "videoBlock", label: "Video", description: "Vimeo, YouTube, or MP4", group: "generic", icon: "▶", category: "content" },
   { type: "spacerBlock", label: "Spacer", description: "Vertical spacing", group: "generic", icon: "↕", category: "content" },
   { type: "buttonBlock", label: "Button", description: "Call-to-action button", group: "generic", icon: "▣", category: "content" },
+  { type: "beforeAfterBlock", label: "Before / After", description: "Drag-slider comparison between two images or videos", group: "generic", icon: "◫", category: "content" },
+  { type: "audioBlock", label: "Audio", description: "Minimal audio player with cover art and metadata", group: "generic", icon: "♪", category: "content" },
 ];
 
 /**
@@ -63,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)
@@ -73,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) */
@@ -112,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

@@ -210,6 +210,62 @@ export interface ButtonBlock {
   responsive?: ResponsiveOverrides<ButtonBlock>;
 }
 
+export interface BeforeAfterBlock {
+  _type: "beforeAfterBlock";
+  _key: string;
+  // Before side
+  before_media_type?: "image" | "video";
+  before_asset_path: string;
+  before_alt?: string;
+  // After side
+  after_media_type?: "image" | "video";
+  after_asset_path: string;
+  after_alt?: string;
+  // Slider
+  orientation?: "horizontal" | "vertical";
+  initial_position?: number;      // 0–100
+  handle_color?: string;          // hex
+  // Layout
+  width?: "full" | "contained" | "small" | "fill";
+  aspect_ratio?: "auto" | "16:9" | "4:3" | "1:1" | "21:9";
+  // Video playback (applies when either side is video)
+  video_autoplay?: boolean;
+  video_loop?: boolean;
+  video_muted?: boolean;
+  // Appearance
+  border_radius?: string;
+  shadow?: boolean;
+  enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
+  hover_effect?: import("../../lib/animation/hover-effect-types").HoverEffectConfig;
+  layout?: BlockLayout;
+  responsive?: ResponsiveOverrides<BeforeAfterBlock>;
+}
+
+export interface AudioBlock {
+  _type: "audioBlock";
+  _key: string;
+  // Source
+  asset_path: string;
+  alt?: string;
+  // Metadata
+  title?: string;
+  artist?: string;
+  cover_path?: string;
+  // Appearance
+  accent_color?: string;
+  width?: "full" | "contained" | "small" | "fill";
+  border_radius?: string;
+  shadow?: boolean;
+  // Playback
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  enter_animation?: import("../../lib/animation/enter-types").EnterAnimationConfig;
+  hover_effect?: import("../../lib/animation/hover-effect-types").HoverEffectConfig;
+  layout?: BlockLayout;
+  responsive?: ResponsiveOverrides<AudioBlock>;
+}
+
 // ============================================
 // Project Grid Block v2 (template-only, Session 105)
 // ============================================
@@ -312,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)
 // ============================================
@@ -635,8 +787,11 @@ export type ContentBlock =
   | VideoBlock
   | SpacerBlock
   | ButtonBlock
+  | 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.0";
+export const ANDAMI_VERSION = "0.5.2";

package/package.json

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

@@ -0,0 +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: "#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/beforeAfterBlock.ts

@@ -0,0 +1,121 @@
+import { defineField, defineType } from "sanity";
+import { blockLayoutField, blockAnimationFields } from "./blockLayout";
+
+export const beforeAfterBlock = defineType({
+  name: "beforeAfterBlock",
+  title: "Before / After Block",
+  type: "object",
+  fields: [
+    // ── Before side ──
+    defineField({
+      name: "before_media_type",
+      title: "Before Media Type",
+      type: "string",
+      options: { list: [{ title: "Image", value: "image" }, { title: "Video", value: "video" }] },
+      initialValue: "image",
+    }),
+    defineField({
+      name: "before_asset_path",
+      title: "Before Asset Path",
+      type: "string",
+      description: "Relative path to the image or video file shown before the slider",
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({ name: "before_alt", title: "Before Alt Text", type: "string" }),
+
+    // ── After side ──
+    defineField({
+      name: "after_media_type",
+      title: "After Media Type",
+      type: "string",
+      options: { list: [{ title: "Image", value: "image" }, { title: "Video", value: "video" }] },
+      initialValue: "image",
+    }),
+    defineField({
+      name: "after_asset_path",
+      title: "After Asset Path",
+      type: "string",
+      description: "Relative path to the image or video file shown after the slider",
+      validation: (Rule) => Rule.required(),
+    }),
+    defineField({ name: "after_alt", title: "After Alt Text", type: "string" }),
+
+    // ── Slider behavior ──
+    defineField({
+      name: "orientation",
+      title: "Orientation",
+      type: "string",
+      options: {
+        list: [
+          { title: "Horizontal (slider left-right)", value: "horizontal" },
+          { title: "Vertical (slider top-bottom)", value: "vertical" },
+        ],
+      },
+      initialValue: "horizontal",
+    }),
+    defineField({
+      name: "initial_position",
+      title: "Initial Position",
+      type: "number",
+      description: "Starting split position (0–100%)",
+      initialValue: 50,
+      validation: (Rule) => Rule.min(0).max(100),
+    }),
+    defineField({
+      name: "handle_color",
+      title: "Handle Color",
+      type: "string",
+      description: "Hex color for the slider line + handle",
+      initialValue: "#FFFFFF",
+    }),
+
+    // ── Layout ──
+    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: "full",
+    }),
+    defineField({
+      name: "aspect_ratio",
+      title: "Aspect Ratio",
+      type: "string",
+      options: {
+        list: [
+          { title: "Auto", value: "auto" },
+          { title: "16:9", value: "16:9" },
+          { title: "4:3", value: "4:3" },
+          { title: "1:1", value: "1:1" },
+          { title: "21:9", value: "21:9" },
+        ],
+      },
+      initialValue: "16:9",
+    }),
+
+    // ── Video playback (applies when either side is video) ──
+    defineField({ name: "video_autoplay", title: "Video Autoplay", type: "boolean", initialValue: true }),
+    defineField({ name: "video_loop", title: "Video Loop", type: "boolean", initialValue: true }),
+    defineField({ name: "video_muted", title: "Video Muted", type: "boolean", initialValue: true }),
+
+    // ── Appearance ──
+    defineField({ name: "border_radius", title: "Border Radius", type: "string" }),
+    defineField({ name: "shadow", title: "Shadow", type: "boolean", initialValue: false }),
+
+    ...blockAnimationFields,
+    blockLayoutField,
+  ],
+  preview: {
+    select: { before: "before_asset_path", after: "after_asset_path" },
+    prepare({ before, after }) {
+      return { title: `Before/After: ${before || "—"} ↔ ${after || "—"}` };
+    },
+  },
+});

package/sanity/schemas/blocks/index.ts

@@ -1,9 +1,12 @@
-// Block schemas (8)
-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 { 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";