@morphika/andami 0.4.2 → 0.5.1

package/lib/animation/enter-types.ts

@@ -73,6 +73,8 @@ export const BLOCK_ENTER_PRESETS: Record<BlockType, readonly EnterPreset[]> = {
   imageGridBlock:         ["fade", "scale", "slide-up"],
   videoBlock:             ["fade", "slide-up"],
   buttonBlock:            ["fade", "slide-up", "scale"],
+  beforeAfterBlock:       ["fade", "slide-up", "scale"],
+  audioBlock:             ["fade", "slide-up", "scale"],
   spacerBlock:            [],           // invisible — no animation
   projectGridBlock:       [],           // uses card_entrance system
   projectCarouselBlock:   [],           // uses card_entrance system

package/lib/animation/hover-effect-types.ts

@@ -66,6 +66,8 @@ export const BLOCK_HOVER_PRESETS: Record<BlockType, readonly HoverPreset[]> = {
   imageGridBlock:         ["tilt-3d"],
   videoBlock:             [],   // video has play/pause interaction
   buttonBlock:            ["scale-up", "lift", "border-glow"],
+  beforeAfterBlock:       [],   // slider handles its own drag interaction
+  audioBlock:             [],   // audio has play/pause interaction
   spacerBlock:            [],   // invisible
   projectGridBlock:       ["scale-up", "lift"],  // per-card effect
   projectCarouselBlock:   [],   // uses per-card hover_effect field directly

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/store-helpers.ts

@@ -20,7 +20,12 @@ import type {
 } from "../../lib/sanity/types";
 import { isPageSectionV2, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { columnsFromPreset, detectPreset } from "./cascade";
-import { resizeColumnLeft as cascadeResizeLeft, moveColumn as cascadeMoveColumn, type ResizeLeftResult } from "./cascade";
+import {
+  resizeColumnLeft as cascadeResizeLeft,
+  moveColumn as cascadeMoveColumn,
+  addColumn as cascadeAddColumn,
+  type ResizeLeftResult,
+} from "./cascade";
 import { applyBlocksToColumns, toCascadeColumns, type CascadeColumn } from "./cascade-helpers";
 import { generateKey } from "./utils";
 import { createDefaultParallaxSlide } from "./defaults";
@@ -625,3 +630,299 @@ export function addParallaxGroupInState(
 
   return { rows: newRows, newGroupKey: newGroup._key };
 }
+
+// ============================================
+// moveColumnBetweenSectionsInState (Session 183 — cross-section column DnD)
+// ============================================
+
+export interface MoveColumnBetweenSectionsResult {
+  rows: ContentItem[];
+  /** Final span after clamping to target grid. */
+  finalSpan: number;
+  /** Final grid_column after clamping. */
+  finalGridColumn: number;
+}
+
+/**
+ * Move a column from one columnar section to another (V2 ↔ Cover).
+ *
+ * Blocks travel with the column. Responsive overrides for the moved
+ * column are STRIPPED from the source section — responsive overrides
+ * are per-section `_key` lookups and don't carry semantic meaning in
+ * the new home. Tablet/phone layouts for the moved column revert to
+ * desktop until the user re-adds overrides in the target.
+ *
+ * Span and grid_column are clamped to target's grid_columns.
+ *
+ * Returns null if:
+ *   - source or target key doesn't resolve to a columnar section
+ *   - source and target are the same section (caller should use
+ *     moveColumnV2InState instead)
+ *   - the column key doesn't exist in the source
+ */
+export function moveColumnBetweenSectionsInState(
+  rows: ContentItem[],
+  sourceSectionKey: string,
+  columnKey: string,
+  targetSectionKey: string,
+  targetRow: number,
+  targetColumn: number,
+  targetSpan: number,
+): MoveColumnBetweenSectionsResult | null {
+  if (sourceSectionKey === targetSectionKey) return null;
+
+  const sourcePath = findSectionPath(rows, sourceSectionKey);
+  const targetPath = findSectionPath(rows, targetSectionKey);
+  if (!sourcePath || !targetPath) return null;
+
+  // Read the source column (full SectionColumn with blocks)
+  const sourceVirtual = getSectionFromPath(rows, sourcePath);
+  if (!sourceVirtual) return null;
+  const movedColumn = sourceVirtual.columns.find((c) => c._key === columnKey);
+  if (!movedColumn) return null;
+
+  // Read target for grid_columns
+  const targetVirtual = getSectionFromPath(rows, targetPath);
+  if (!targetVirtual) return null;
+  const targetGridCols = targetVirtual.settings.grid_columns || 12;
+
+  // Clamp span + grid column to target grid
+  const clampedSpan = Math.max(1, Math.min(targetSpan, targetGridCols));
+  const clampedCol = Math.max(
+    1,
+    Math.min(targetColumn, targetGridCols - clampedSpan + 1),
+  );
+
+  // --- Step 1: Remove column from source, strip its responsive overrides ---
+  let newRows = updateSectionAtPath(rows, sourcePath, (section) => {
+    const filteredColumns = section.columns.filter((c) => c._key !== columnKey);
+
+    // Strip responsive overrides referencing the moved column
+    let newResponsive = section.responsive;
+    if (newResponsive) {
+      const cleanResponsive: PageSectionV2["responsive"] = {};
+      for (const vp of ["tablet", "phone"] as const) {
+        const vpData = newResponsive[vp];
+        if (!vpData) continue;
+        const newVpData: NonNullable<PageSectionV2["responsive"]>[typeof vp] = {
+          ...vpData,
+        };
+        if (newVpData.columns) {
+          const filtered = newVpData.columns.filter((o) => o._key !== columnKey);
+          newVpData.columns = filtered.length > 0 ? filtered : undefined;
+        }
+        // Keep viewport entry only if it still has something
+        if (newVpData.columns || newVpData.settings) {
+          cleanResponsive[vp] = newVpData;
+        }
+      }
+      newResponsive =
+        Object.keys(cleanResponsive).length > 0 ? cleanResponsive : undefined;
+    }
+
+    const cascadeCols = toCascadeColumns(filteredColumns);
+    const newPreset = detectPreset(cascadeCols, section.settings.grid_columns);
+
+    return {
+      ...section,
+      columns: filteredColumns,
+      responsive: newResponsive,
+      settings: { ...section.settings, preset: newPreset },
+    };
+  });
+
+  // --- Step 2: Insert the column into target with cascade ---
+  newRows = updateSectionAtPath(newRows, targetPath, (section) => {
+    // Augment the source list so `applyBlocksToColumns` can find the moved
+    // column's blocks by key. The position fields here are overwritten by
+    // cascade; only the blocks matter for the lookup.
+    const augmentedSource: SectionColumn[] = [
+      ...section.columns,
+      {
+        ...movedColumn,
+        grid_row: targetRow,
+        grid_column: clampedCol,
+        span: clampedSpan,
+      },
+    ];
+
+    const cascadeResult = cascadeAddColumn(
+      toCascadeColumns(section.columns),
+      targetRow,
+      clampedCol,
+      clampedSpan,
+      columnKey,
+      section.settings.grid_columns,
+    );
+
+    const finalColumns = applyBlocksToColumns(cascadeResult, augmentedSource);
+    const newPreset = detectPreset(cascadeResult, section.settings.grid_columns);
+
+    return {
+      ...section,
+      columns: finalColumns,
+      settings: { ...section.settings, preset: newPreset },
+    };
+  });
+
+  return {
+    rows: newRows,
+    finalSpan: clampedSpan,
+    finalGridColumn: clampedCol,
+  };
+}
+
+// ============================================
+// swapColumnsBetweenSectionsInState (Session 183 — cross-section column swap)
+// ============================================
+
+export interface SwapColumnsBetweenSectionsResult {
+  rows: ContentItem[];
+}
+
+/**
+ * Swap two columns across different columnar sections (V2 ↔ Cover).
+ *
+ * Semantically identical to the intra-section `swapColumnV2InState`:
+ * each column adopts the other's position/row/span. The difference is
+ * that the columns live in DIFFERENT sections, so each has to travel.
+ * Blocks go with their owner column.
+ *
+ * Clamping: when the two sections have different `grid_columns`, each
+ * column's new span and grid_column are clamped to fit the destination
+ * grid. Clamping is defensive — if both sections share 12 columns (the
+ * common case), no clamping happens.
+ *
+ * Responsive: overrides for BOTH swapped columns are stripped from both
+ * sections' responsive tables. Overrides live per-section by `_key`
+ * lookup; transplanting either direction would leave orphaned entries.
+ *
+ * Returns null if:
+ *   - source and target are the same section
+ *   - either key doesn't resolve to a columnar section
+ *   - either column key doesn't exist in its section
+ */
+export function swapColumnsBetweenSectionsInState(
+  rows: ContentItem[],
+  sourceSectionKey: string,
+  sourceColumnKey: string,
+  targetSectionKey: string,
+  targetColumnKey: string,
+): SwapColumnsBetweenSectionsResult | null {
+  if (sourceSectionKey === targetSectionKey) return null;
+
+  const sourcePath = findSectionPath(rows, sourceSectionKey);
+  const targetPath = findSectionPath(rows, targetSectionKey);
+  if (!sourcePath || !targetPath) return null;
+
+  const sourceVirtual = getSectionFromPath(rows, sourcePath);
+  const targetVirtual = getSectionFromPath(rows, targetPath);
+  if (!sourceVirtual || !targetVirtual) return null;
+
+  const sourceCol = sourceVirtual.columns.find((c) => c._key === sourceColumnKey);
+  const targetCol = targetVirtual.columns.find((c) => c._key === targetColumnKey);
+  if (!sourceCol || !targetCol) return null;
+
+  const sourceGridCols = sourceVirtual.settings.grid_columns || 12;
+  const targetGridCols = targetVirtual.settings.grid_columns || 12;
+
+  // Clamp source column's new dimensions (adopting target's position) to target grid
+  const newSourceSpan = Math.max(1, Math.min(targetCol.span, targetGridCols));
+  const newSourceGridCol = Math.max(
+    1,
+    Math.min(targetCol.grid_column, targetGridCols - newSourceSpan + 1),
+  );
+
+  // Clamp target column's new dimensions (adopting source's position) to source grid
+  const newTargetSpan = Math.max(1, Math.min(sourceCol.span, sourceGridCols));
+  const newTargetGridCol = Math.max(
+    1,
+    Math.min(sourceCol.grid_column, sourceGridCols - newTargetSpan + 1),
+  );
+
+  // --- Helper: strip responsive overrides for a given column key ---
+  const stripResponsiveForKey = (
+    responsive: PageSectionV2["responsive"],
+    columnKey: string,
+  ): PageSectionV2["responsive"] => {
+    if (!responsive) return responsive;
+    const cleanResponsive: PageSectionV2["responsive"] = {};
+    for (const vp of ["tablet", "phone"] as const) {
+      const vpData = responsive[vp];
+      if (!vpData) continue;
+      const newVpData: NonNullable<PageSectionV2["responsive"]>[typeof vp] = {
+        ...vpData,
+      };
+      if (newVpData.columns) {
+        const filtered = newVpData.columns.filter((o) => o._key !== columnKey);
+        newVpData.columns = filtered.length > 0 ? filtered : undefined;
+      }
+      if (newVpData.columns || newVpData.settings) {
+        cleanResponsive[vp] = newVpData;
+      }
+    }
+    return Object.keys(cleanResponsive).length > 0 ? cleanResponsive : undefined;
+  };
+
+  // --- Step 1: Replace source column with target column (transplanted) ---
+  // Also strip sourceColumnKey's responsive overrides.
+  let newRows = updateSectionAtPath(rows, sourcePath, (section) => {
+    // Build the transplanted column with target's blocks, adopting
+    // source's OLD position/row/span (clamped to source grid).
+    const transplanted: SectionColumn = {
+      ...targetCol,
+      grid_row: sourceCol.grid_row,
+      grid_column: newTargetGridCol,
+      span: newTargetSpan,
+    };
+    const updatedColumns = section.columns.map((c) =>
+      c._key === sourceColumnKey ? transplanted : c,
+    );
+
+    const newResponsive = stripResponsiveForKey(
+      section.responsive,
+      sourceColumnKey,
+    );
+
+    const cascadeCols = toCascadeColumns(updatedColumns);
+    const newPreset = detectPreset(cascadeCols, section.settings.grid_columns);
+
+    return {
+      ...section,
+      columns: updatedColumns,
+      responsive: newResponsive,
+      settings: { ...section.settings, preset: newPreset },
+    };
+  });
+
+  // --- Step 2: Replace target column with source column (transplanted) ---
+  // Also strip targetColumnKey's responsive overrides.
+  newRows = updateSectionAtPath(newRows, targetPath, (section) => {
+    const transplanted: SectionColumn = {
+      ...sourceCol,
+      grid_row: targetCol.grid_row,
+      grid_column: newSourceGridCol,
+      span: newSourceSpan,
+    };
+    const updatedColumns = section.columns.map((c) =>
+      c._key === targetColumnKey ? transplanted : c,
+    );
+
+    const newResponsive = stripResponsiveForKey(
+      section.responsive,
+      targetColumnKey,
+    );
+
+    const cascadeCols = toCascadeColumns(updatedColumns);
+    const newPreset = detectPreset(cascadeCols, section.settings.grid_columns);
+
+    return {
+      ...section,
+      columns: updatedColumns,
+      responsive: newResponsive,
+      settings: { ...section.settings, preset: newPreset },
+    };
+  });
+
+  return { rows: newRows };
+}

package/lib/builder/store-sections.ts

@@ -38,6 +38,8 @@ import {
   moveColumnV2InState,
   swapColumnV2InState,
   moveColumnToGapV2InState,
+  moveColumnBetweenSectionsInState,
+  swapColumnsBetweenSectionsInState,
 } from "./store-helpers";
 
 type StoreSet = (
@@ -339,6 +341,64 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       set({ rows: result.rows, isDirty: true });
     },
 
+    moveColumnBetweenSections: (
+      sourceSectionKey: string,
+      columnKey: string,
+      targetSectionKey: string,
+      targetRow: number,
+      targetColumn: number,
+      targetSpan: number,
+    ): void => {
+      const result = moveColumnBetweenSectionsInState(
+        get().rows,
+        sourceSectionKey,
+        columnKey,
+        targetSectionKey,
+        targetRow,
+        targetColumn,
+        targetSpan,
+      );
+      if (!result) return;
+
+      get()._pushSnapshot();
+      // Clear any selection referencing the moved column in its old section —
+      // the column key remains but the "selected section" context has changed.
+      set({
+        rows: result.rows,
+        isDirty: true,
+        selectedColumnKey: columnKey,
+        selectedRowKey: targetSectionKey,
+        selectedBlockKey: null,
+      });
+    },
+
+    swapColumnsBetweenSections: (
+      sourceSectionKey: string,
+      sourceColumnKey: string,
+      targetSectionKey: string,
+      targetColumnKey: string,
+    ): void => {
+      const result = swapColumnsBetweenSectionsInState(
+        get().rows,
+        sourceSectionKey,
+        sourceColumnKey,
+        targetSectionKey,
+        targetColumnKey,
+      );
+      if (!result) return;
+
+      get()._pushSnapshot();
+      // After swap: the dragged column now lives in the target section.
+      // Select it there (match mental model: "I just put this column here").
+      set({
+        rows: result.rows,
+        isDirty: true,
+        selectedColumnKey: sourceColumnKey,
+        selectedRowKey: targetSectionKey,
+        selectedBlockKey: null,
+      });
+    },
+
     applyPresetV2: (sectionKey: string, preset: SectionV2Preset): void => {
       if (preset === "custom") return;
 

package/lib/builder/types-slices.ts

@@ -124,6 +124,33 @@ export interface SectionSliceActions {
     targetColumn: number,
     targetSpan: number,
   ) => void;
+  /**
+   * Move a column from one columnar section (V2 or Cover) to another.
+   * Blocks travel with the column. Responsive overrides for the moved
+   * column are stripped from the source section. Span/grid_column are
+   * clamped to the target's grid_columns. Returns the final landed span
+   * so the caller can adjust UI feedback (e.g. show clamped value).
+   */
+  moveColumnBetweenSections: (
+    sourceSectionKey: string,
+    columnKey: string,
+    targetSectionKey: string,
+    targetRow: number,
+    targetColumn: number,
+    targetSpan: number,
+  ) => void;
+  /**
+   * Swap two columns across different columnar sections (V2 ↔ Cover).
+   * Each column adopts the other's position/row/span. Blocks travel
+   * with the column. Responsive overrides for both swapped columns
+   * are stripped (overrides are per-section by `_key`).
+   */
+  swapColumnsBetweenSections: (
+    sourceSectionKey: string,
+    sourceColumnKey: string,
+    targetSectionKey: string,
+    targetColumnKey: string,
+  ) => void;
   applyPresetV2: (sectionKey: string, preset: SectionV2Preset) => void;
   updateSectionV2Settings: (sectionKey: string, settings: Partial<SectionV2Settings>) => void;
   updateSectionV2Responsive: (

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)
 // ============================================
@@ -596,6 +652,23 @@ export function isCoverSection(item: ContentItem): item is CoverSection {
   return (item as CoverSection)._type === "coverSection";
 }
 
+/**
+ * Type guard: check if a content item supports column drag-and-drop as a
+ * source or target — i.e. it has a top-level `columns` array with the same
+ * V2 grid semantics. Used by cross-section column DnD (Session 183).
+ *
+ * Eligible:  PageSectionV2, CoverSection
+ * NOT eligible:
+ *   - ParallaxGroup (columns live per-slide, cross-slide DnD not supported)
+ *   - CustomSectionInstance (references an external document, mutating it
+ *     from the page would break the reference contract)
+ */
+export function isColumnarSection(
+  item: ContentItem,
+): item is PageSectionV2 | CoverSection {
+  return isPageSectionV2(item) || isCoverSection(item);
+}
+
 // ============================================
 // Shared references
 // ============================================
@@ -618,6 +691,8 @@ export type ContentBlock =
   | VideoBlock
   | SpacerBlock
   | ButtonBlock
+  | BeforeAfterBlock
+  | AudioBlock
   | ProjectGridBlock
   | ProjectCarouselBlock;