@morphika/andami 0.5.0 → 0.5.1

package/lib/builder/block-registrations.ts

@@ -2,7 +2,7 @@
 
 /**
  * Block registrations — fills the registry defined in `./block-registry.ts`
- * with the 8 built-in block types shipped by the framework.
+ * with the 10 built-in block types shipped by the framework.
  *
  * Importing this module has a side effect: every `registerBlockType()`
  * call below runs synchronously and populates the module-level registry.
@@ -26,6 +26,8 @@ import type {
   VideoBlock,
   SpacerBlock,
   ButtonBlock,
+  BeforeAfterBlock,
+  AudioBlock,
   ProjectGridBlock,
   ProjectCarouselBlock,
 } from "../sanity/types";
@@ -39,6 +41,8 @@ import {
   videoBlock,
   spacerBlock,
   buttonBlock,
+  beforeAfterBlock,
+  audioBlock,
   projectGridBlock,
   projectCarouselBlock,
 } from "../../sanity/schemas/blocks";
@@ -51,6 +55,8 @@ import ImageGridBlockRenderer from "../../components/blocks/ImageGridBlockRender
 import VideoBlockRenderer from "../../components/blocks/VideoBlockRenderer";
 import SpacerBlockRenderer from "../../components/blocks/SpacerBlockRenderer";
 import ButtonBlockRenderer from "../../components/blocks/ButtonBlockRenderer";
+import BeforeAfterBlockRenderer from "../../components/blocks/BeforeAfterBlockRenderer";
+import AudioBlockRenderer from "../../components/blocks/AudioBlockRenderer";
 import ProjectGridBlockRenderer from "../../components/blocks/ProjectGridBlockRenderer";
 import ProjectCarouselBlockRenderer from "../../components/blocks/ProjectCarouselBlockRenderer";
 
@@ -62,6 +68,8 @@ import LiveImageGridPreview from "../../components/builder/live-preview/LiveImag
 import LiveVideoPreview from "../../components/builder/live-preview/LiveVideoPreview";
 import LiveSpacerPreview from "../../components/builder/live-preview/LiveSpacerPreview";
 import LiveButtonPreview from "../../components/builder/live-preview/LiveButtonPreview";
+import LiveBeforeAfterPreview from "../../components/builder/live-preview/LiveBeforeAfterPreview";
+import LiveAudioPreview from "../../components/builder/live-preview/LiveAudioPreview";
 import LiveProjectGridPreview from "../../components/builder/live-preview/LiveProjectGridPreview";
 import LiveProjectCarouselPreview from "../../components/builder/live-preview/LiveProjectCarouselPreview";
 
@@ -73,6 +81,8 @@ import ImageGridBlockEditor from "../../components/builder/editors/ImageGridBloc
 import VideoBlockEditor from "../../components/builder/editors/VideoBlockEditor";
 import SpacerBlockEditor from "../../components/builder/editors/SpacerBlockEditor";
 import ButtonBlockEditor from "../../components/builder/editors/ButtonBlockEditor";
+import BeforeAfterBlockEditor from "../../components/builder/editors/BeforeAfterBlockEditor";
+import AudioBlockEditor from "../../components/builder/editors/AudioBlockEditor";
 import ProjectGridEditor from "../../components/builder/editors/ProjectGridEditor";
 import ProjectCarouselBlockEditor from "../../components/builder/editors/ProjectCarouselBlockEditor";
 
@@ -85,6 +95,8 @@ import {
   VideoBlockCardIcon,
   SpacerBlockCardIcon,
   ButtonBlockCardIcon,
+  BeforeAfterBlockCardIcon,
+  AudioBlockCardIcon,
 } from "../../components/builder/BlockCardIcons";
 import {
   ProjectGridCardIcon,
@@ -100,6 +112,8 @@ import {
   VideoBlockIcon,
   SpacerBlockIcon,
   ButtonBlockIcon,
+  BeforeAfterBlockIcon,
+  AudioBlockIcon,
   ProjectGridBlockIcon,
   ProjectCarouselBlockIcon,
 } from "../../components/builder/blockStyles";
@@ -267,6 +281,74 @@ registerBlockType<ButtonBlock>({
   hoverPresets: ["scale-up", "lift", "border-glow"],
 });
 
+registerBlockType<BeforeAfterBlock>({
+  type: "beforeAfterBlock",
+  label: "Before / After",
+  description: "Drag-slider comparison between two images or videos",
+  category: "content",
+  iconGlyph: "◫",
+  schema: beforeAfterBlock,
+  defaultFactory: (key) => ({
+    _type: "beforeAfterBlock",
+    _key: key,
+    before_media_type: "image",
+    before_asset_path: "",
+    before_alt: "",
+    after_media_type: "image",
+    after_asset_path: "",
+    after_alt: "",
+    orientation: "horizontal",
+    initial_position: 50,
+    handle_color: "#FFFFFF",
+    width: "full",
+    aspect_ratio: "16:9",
+    video_autoplay: true,
+    video_loop: true,
+    video_muted: true,
+    border_radius: "",
+    shadow: false,
+  }),
+  renderer: BeforeAfterBlockRenderer as React.ComponentType<{ block: BeforeAfterBlock }>,
+  livePreview: LiveBeforeAfterPreview as unknown as React.ComponentType<{ block: BeforeAfterBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
+  editor: BeforeAfterBlockEditor as React.ComponentType<{ block: BeforeAfterBlock }>,
+  cardIcon: BeforeAfterBlockCardIcon,
+  compactIcon: BeforeAfterBlockIcon,
+  enterPresets: ["fade", "slide-up", "scale"],
+  hoverPresets: [],
+});
+
+registerBlockType<AudioBlock>({
+  type: "audioBlock",
+  label: "Audio",
+  description: "Minimal audio player with cover art and metadata",
+  category: "content",
+  iconGlyph: "♪",
+  schema: audioBlock,
+  defaultFactory: (key) => ({
+    _type: "audioBlock",
+    _key: key,
+    asset_path: "",
+    alt: "",
+    title: "",
+    artist: "",
+    cover_path: "",
+    accent_color: "#4794E2",
+    width: "contained",
+    border_radius: "",
+    shadow: false,
+    autoplay: false,
+    loop: false,
+    muted: false,
+  }),
+  renderer: AudioBlockRenderer as React.ComponentType<{ block: AudioBlock }>,
+  livePreview: LiveAudioPreview as unknown as React.ComponentType<{ block: AudioBlock; viewport?: import("./types").DeviceViewport; editable?: boolean }>,
+  editor: AudioBlockEditor as React.ComponentType<{ block: AudioBlock }>,
+  cardIcon: AudioBlockCardIcon,
+  compactIcon: AudioBlockIcon,
+  enterPresets: ["fade", "slide-up", "scale"],
+  hoverPresets: [],
+});
+
 // ── Section-level blocks ──
 
 registerBlockType<ProjectGridBlock>({

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" },
 ];
 
 /**

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)
 // ============================================
@@ -635,6 +691,8 @@ export type ContentBlock =
   | VideoBlock
   | SpacerBlock
   | ButtonBlock
+  | BeforeAfterBlock
+  | AudioBlock
   | ProjectGridBlock
   | ProjectCarouselBlock;
 

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.1";

package/package.json

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

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,11 @@
-// Block schemas (8)
+// 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";

package/sanity/schemas/index.ts

@@ -18,6 +18,8 @@ import {
   videoBlock,
   spacerBlock,
   buttonBlock,
+  beforeAfterBlock,
+  audioBlock,
   projectGridBlock,
   projectCarouselBlock,
 } from "./blocks";
@@ -69,6 +71,8 @@ export {
   videoBlock,
   spacerBlock,
   buttonBlock,
+  beforeAfterBlock,
+  audioBlock,
   projectGridBlock,
   projectCarouselBlock,
 } from "./blocks";
@@ -93,13 +97,15 @@ export const schemaTypes = [
   parallaxGroup,            // Parallax V2 group (Session 123)
   coverSection,             // Cover Section — proportional rows (Session 176)
 
-  // Blocks (9)
+  // Blocks (10)
   textBlock,
   imageBlock,
   imageGridBlock,
   videoBlock,
   spacerBlock,
   buttonBlock,
+  beforeAfterBlock,
+  audioBlock,
   projectGridBlock,
   projectCarouselBlock,
 ];