@actuate-media/cms-admin 0.6.0 → 0.7.0

package/src/views/page-builder/block-renderers/TextPreview.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import type { BlockPreviewProps } from './index.js';
+
+export function TextPreview({ data, variant = 'prose' }: BlockPreviewProps) {
+  const body = (data.body as string) || '';
+  const heading = (data.heading as string) || '';
+  const headingLevel = (data.headingLevel as string) || 'h2';
+
+  const truncatedBody = body.length > 300 ? body.slice(0, 300) + '…' : body;
+
+  const validLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+  const HeadingTag = (validLevels.includes(headingLevel as any) ? headingLevel : 'h2') as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  const headingSizeClass =
+    HeadingTag === 'h1'
+      ? 'text-2xl'
+      : HeadingTag === 'h2'
+        ? 'text-xl'
+        : 'text-lg';
+
+  if (variant === 'two-column') {
+    const midpoint = Math.ceil(truncatedBody.length / 2);
+    const col1 = truncatedBody.slice(0, midpoint);
+    const col2 = truncatedBody.slice(midpoint);
+
+    return (
+      <div className="rounded-md border border-border p-5">
+        {heading && (
+          <HeadingTag className={`${headingSizeClass} mb-3 font-medium text-foreground`}>
+            {heading}
+          </HeadingTag>
+        )}
+        <div className="grid grid-cols-2 gap-4">
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            {col1 || 'Column one text content…'}
+          </p>
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            {col2 || 'Column two text content…'}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'with-sidebar') {
+    return (
+      <div className="grid grid-cols-[1fr_200px] gap-4 rounded-md border border-border p-5">
+        <div>
+          {heading && (
+            <HeadingTag className={`${headingSizeClass} mb-3 font-medium text-foreground`}>
+              {heading}
+            </HeadingTag>
+          )}
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            {truncatedBody || 'Body text content goes here…'}
+          </p>
+        </div>
+        <aside className="rounded-md bg-muted p-3">
+          <div className="h-3 w-3/4 rounded bg-border" />
+          <div className="mt-2 h-2 w-full rounded bg-border" />
+          <div className="mt-1 h-2 w-2/3 rounded bg-border" />
+        </aside>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-border p-5">
+      {heading && (
+        <HeadingTag className={`${headingSizeClass} mb-3 font-medium text-foreground`}>
+          {heading}
+        </HeadingTag>
+      )}
+      <p className="text-sm leading-relaxed text-muted-foreground">
+        {truncatedBody || (
+          <span className="italic">Body text content goes here…</span>
+        )}
+      </p>
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/VideoPreview.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Play } from 'lucide-react';
+import type { BlockPreviewProps } from './index.js';
+
+export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
+  const poster = data.poster as string | undefined;
+  const autoplay = data.autoplay as boolean | undefined;
+  const loop = data.loop as boolean | undefined;
+
+  const badges: string[] = [
+    autoplay ? 'Autoplay' : '',
+    loop ? 'Loop' : '',
+  ].filter((b): b is string => b !== '');
+
+  const content = (
+    <div className="relative flex aspect-video items-center justify-center overflow-hidden rounded-md bg-muted">
+      {poster ? (
+        <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
+      ) : (
+        <div className="absolute inset-0 bg-card" />
+      )}
+      <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-primary/90 shadow-sm">
+        <Play size={20} className="text-primary-foreground" />
+      </div>
+      {badges.length > 0 && (
+        <div className="absolute bottom-2 right-2 z-10 flex gap-1">
+          {badges.map((badge) => (
+            <span
+              key={badge}
+              className="rounded bg-background/80 px-1.5 py-0.5 text-xs text-muted-foreground"
+            >
+              {badge}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
+  if (variant === 'background') {
+    return (
+      <div className="overflow-hidden rounded-md border border-border">
+        <div className="relative aspect-[21/9]">
+          {poster ? (
+            <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
+          ) : (
+            <div className="absolute inset-0 bg-card" />
+          )}
+          <div className="absolute inset-0 flex items-center justify-center bg-background/30">
+            <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary/90 shadow-sm">
+              <Play size={24} className="text-primary-foreground" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'lightbox') {
+    return (
+      <div className="rounded-md border border-border p-4">
+        <div className="mx-auto max-w-sm">
+          {content}
+          <p className="mt-2 text-center text-xs text-muted-foreground">
+            Click to play in lightbox
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border border-border p-4">
+      {content}
+    </div>
+  );
+}

package/src/views/page-builder/block-renderers/index.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import type { ComponentType } from 'react';
+import { HeroPreview } from './HeroPreview.js';
+import { TextPreview } from './TextPreview.js';
+import { ImagePreview } from './ImagePreview.js';
+import { CardsPreview } from './CardsPreview.js';
+import { CTAPreview } from './CTAPreview.js';
+import { VideoPreview } from './VideoPreview.js';
+import { GalleryPreview } from './GalleryPreview.js';
+import { FAQPreview } from './FAQPreview.js';
+import { FormPreview } from './FormPreview.js';
+import { CodePreview } from './CodePreview.js';
+
+export interface BlockPreviewProps {
+  data: Record<string, unknown>;
+  variant?: string;
+}
+
+export const blockRenderers: Record<string, ComponentType<BlockPreviewProps>> = {
+  hero: HeroPreview,
+  text: TextPreview,
+  image: ImagePreview,
+  cards: CardsPreview,
+  cta: CTAPreview,
+  video: VideoPreview,
+  gallery: GalleryPreview,
+  faq: FAQPreview,
+  form: FormPreview,
+  code: CodePreview,
+};
+
+export { FallbackPreview } from './FallbackPreview.js';
+export type { FallbackPreviewProps } from './FallbackPreview.js';

package/src/views/page-builder/canvas/BlockRenderer.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+import { Box, Type, Image, Layout, Star } from 'lucide-react';
+import type { BlockNode } from '@actuate-media/cms-core';
+
+export interface BlockRendererProps {
+  node: BlockNode;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string | null) => void;
+}
+
+const BLOCK_ICONS: Record<string, typeof Box> = {
+  hero: Star,
+  text: Type,
+  image: Image,
+  layout: Layout,
+};
+
+function getBlockLabel(blockType: string): string {
+  return blockType.charAt(0).toUpperCase() + blockType.slice(1);
+}
+
+export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRendererProps) {
+  const [hovered, setHovered] = useState(false);
+  const isSelected = selectedNodeId === node.id;
+  const blockType = node.settings.blockType;
+  const label = getBlockLabel(blockType);
+  const Icon = BLOCK_ICONS[blockType] ?? Box;
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelectNode(node.id);
+  };
+
+  return (
+    <div
+      data-node-id={node.id}
+      className={`relative min-h-[48px] transition-shadow ${
+        isSelected
+          ? 'ring-2 ring-primary ring-offset-2'
+          : hovered
+            ? 'ring-1 ring-primary/50'
+            : ''
+      }`}
+      onClick={handleClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {(hovered || isSelected) && (
+        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+          {label}
+        </span>
+      )}
+
+      <div className="flex items-center justify-center gap-2 p-4 bg-muted/30 border border-dashed border-border rounded-md">
+        <Icon size={16} className="text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">{label}</span>
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/canvas/BuilderCanvas.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { LayoutGrid } from 'lucide-react';
+import type { PageNode } from '@actuate-media/cms-core';
+import { SectionRenderer } from './SectionRenderer.js';
+
+export interface BuilderCanvasProps {
+  tree: PageNode;
+  selectedNodeId: string | null;
+  showGridOverlay: boolean;
+  deviceMode: 'desktop' | 'tablet' | 'mobile';
+  onSelectNode: (id: string | null) => void;
+}
+
+const DEVICE_CLASSES: Record<BuilderCanvasProps['deviceMode'], string> = {
+  desktop: 'w-full',
+  tablet: 'max-w-[768px] mx-auto',
+  mobile: 'max-w-[375px] mx-auto',
+};
+
+export function BuilderCanvas({
+  tree,
+  selectedNodeId,
+  showGridOverlay,
+  deviceMode,
+  onSelectNode,
+}: BuilderCanvasProps) {
+  const handleCanvasClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onSelectNode(null);
+    }
+  };
+
+  return (
+    <div
+      className="relative flex-1 overflow-auto bg-muted p-6"
+      onClick={handleCanvasClick}
+    >
+      {showGridOverlay && <GridOverlay deviceMode={deviceMode} />}
+
+      <div
+        className={`relative bg-background shadow-sm min-h-full ${DEVICE_CLASSES[deviceMode]}`}
+        onClick={handleCanvasClick}
+      >
+        {tree.children.map((child) => {
+          if (child.type === 'section') {
+            return (
+              <SectionRenderer
+                key={child.id}
+                node={child}
+                selectedNodeId={selectedNodeId}
+                onSelectNode={onSelectNode}
+              />
+            );
+          }
+          return null;
+        })}
+
+        {tree.children.length === 0 && (
+          <div className="flex flex-col items-center justify-center min-h-[400px] text-center">
+            <LayoutGrid size={32} className="text-muted-foreground mb-3" />
+            <p className="text-sm font-medium text-foreground mb-1">No sections yet</p>
+            <p className="text-xs text-muted-foreground">
+              Click "Add Section" below to start building your page
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function GridOverlay({ deviceMode }: { deviceMode: BuilderCanvasProps['deviceMode'] }) {
+  return (
+    <div
+      className={`pointer-events-none absolute inset-0 z-50 p-6 ${
+        deviceMode !== 'desktop' ? 'flex justify-center' : ''
+      }`}
+      aria-hidden="true"
+    >
+      <div
+        className={`grid grid-cols-12 gap-4 h-full opacity-[0.08] ${DEVICE_CLASSES[deviceMode]}`}
+      >
+        {Array.from({ length: 12 }).map((_, i) => (
+          <div key={i} className="bg-primary h-full rounded-sm" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/canvas/ColumnRenderer.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useState } from 'react';
+import type { ColumnNode } from '@actuate-media/cms-core';
+import { BlockRenderer } from './BlockRenderer.js';
+import { ContainerRenderer } from './ContainerRenderer.js';
+
+export interface ColumnRendererProps {
+  node: ColumnNode;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string | null) => void;
+}
+
+export function ColumnRenderer({ node, selectedNodeId, onSelectNode }: ColumnRendererProps) {
+  const [hovered, setHovered] = useState(false);
+  const isSelected = selectedNodeId === node.id;
+  const width = node.settings.width;
+  const isEmpty = node.children.length === 0;
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelectNode(node.id);
+  };
+
+  return (
+    <div
+      data-node-id={node.id}
+      className={`relative transition-shadow ${
+        isSelected
+          ? 'ring-2 ring-primary ring-offset-2'
+          : hovered
+            ? 'ring-1 ring-primary/50'
+            : ''
+      }`}
+      style={{
+        gridColumn: `span ${width}`,
+        padding: node.settings.padding,
+        background: node.settings.background,
+      }}
+      onClick={handleClick}
+      onMouseEnter={(e) => {
+        e.stopPropagation();
+        setHovered(true);
+      }}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {(hovered || isSelected) && (
+        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+          Col {width}
+        </span>
+      )}
+
+      {isEmpty ? (
+        <div className="flex items-center justify-center min-h-[64px] border-2 border-dashed border-border rounded-md text-sm text-muted-foreground">
+          Empty column
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {node.children.map((child) => {
+            if (child.type === 'block') {
+              return (
+                <BlockRenderer
+                  key={child.id}
+                  node={child}
+                  selectedNodeId={selectedNodeId}
+                  onSelectNode={onSelectNode}
+                />
+              );
+            }
+            if (child.type === 'container') {
+              return (
+                <ContainerRenderer
+                  key={child.id}
+                  node={child}
+                  selectedNodeId={selectedNodeId}
+                  onSelectNode={onSelectNode}
+                />
+              );
+            }
+            return null;
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/views/page-builder/canvas/ContainerRenderer.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState } from 'react';
+import type { ContainerNode } from '@actuate-media/cms-core';
+import { RowRenderer } from './RowRenderer.js';
+
+export interface ContainerRendererProps {
+  node: ContainerNode;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string | null) => void;
+}
+
+export function ContainerRenderer({ node, selectedNodeId, onSelectNode }: ContainerRendererProps) {
+  const [hovered, setHovered] = useState(false);
+  const isSelected = selectedNodeId === node.id;
+  const maxWidth = node.settings.maxWidth ?? '1200px';
+  const alignment = node.settings.alignment ?? 'center';
+  const padding = node.settings.padding;
+
+  const marginMap: Record<string, string> = {
+    left: '0 auto 0 0',
+    center: '0 auto',
+    right: '0 0 0 auto',
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelectNode(node.id);
+  };
+
+  return (
+    <div
+      data-node-id={node.id}
+      className={`relative transition-shadow ${
+        isSelected
+          ? 'ring-2 ring-primary ring-offset-2'
+          : hovered
+            ? 'ring-1 ring-primary/50'
+            : ''
+      }`}
+      style={{
+        maxWidth,
+        margin: marginMap[alignment] ?? '0 auto',
+        padding,
+      }}
+      onClick={handleClick}
+      onMouseEnter={(e) => {
+        e.stopPropagation();
+        setHovered(true);
+      }}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {(hovered || isSelected) && (
+        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+          Container
+        </span>
+      )}
+
+      <div className="flex flex-col gap-4">
+        {node.children.map((row) => (
+          <RowRenderer
+            key={row.id}
+            node={row}
+            selectedNodeId={selectedNodeId}
+            onSelectNode={onSelectNode}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/canvas/RowRenderer.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useState } from 'react';
+import type { RowNode } from '@actuate-media/cms-core';
+import { ColumnRenderer } from './ColumnRenderer.js';
+
+export interface RowRendererProps {
+  node: RowNode;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string | null) => void;
+}
+
+export function RowRenderer({ node, selectedNodeId, onSelectNode }: RowRendererProps) {
+  const [hovered, setHovered] = useState(false);
+  const isSelected = selectedNodeId === node.id;
+  const gap = node.settings.gap ?? '16px';
+  const verticalAlign = node.settings.verticalAlign ?? 'stretch';
+
+  const alignMap: Record<string, string> = {
+    top: 'start',
+    center: 'center',
+    bottom: 'end',
+    stretch: 'stretch',
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelectNode(node.id);
+  };
+
+  return (
+    <div
+      data-node-id={node.id}
+      className={`relative transition-shadow ${
+        isSelected
+          ? 'ring-2 ring-primary ring-offset-2'
+          : hovered
+            ? 'ring-1 ring-primary/50'
+            : ''
+      }`}
+      onClick={handleClick}
+      onMouseEnter={(e) => {
+        e.stopPropagation();
+        setHovered(true);
+      }}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {(hovered || isSelected) && (
+        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+          Row
+        </span>
+      )}
+
+      <div
+        className="grid grid-cols-12"
+        style={{
+          gap,
+          alignItems: alignMap[verticalAlign] ?? 'stretch',
+        }}
+      >
+        {node.children.map((col) => (
+          <ColumnRenderer
+            key={col.id}
+            node={col}
+            selectedNodeId={selectedNodeId}
+            onSelectNode={onSelectNode}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/views/page-builder/canvas/SectionRenderer.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import type { SectionNode } from '@actuate-media/cms-core';
+import { ContainerRenderer } from './ContainerRenderer.js';
+import { RowRenderer } from './RowRenderer.js';
+
+export interface SectionRendererProps {
+  node: SectionNode;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string | null) => void;
+}
+
+export function SectionRenderer({ node, selectedNodeId, onSelectNode }: SectionRendererProps) {
+  const [hovered, setHovered] = useState(false);
+  const isSelected = selectedNodeId === node.id;
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelectNode(node.id);
+  };
+
+  const backgroundStyle: React.CSSProperties = {};
+  if (node.settings.background) {
+    backgroundStyle.backgroundColor = node.settings.background;
+  }
+  if (node.settings.backgroundImage) {
+    backgroundStyle.backgroundImage = `url(${node.settings.backgroundImage})`;
+    backgroundStyle.backgroundSize = 'cover';
+    backgroundStyle.backgroundPosition = 'center';
+  }
+  if (node.settings.backgroundGradient) {
+    backgroundStyle.backgroundImage = node.settings.backgroundGradient;
+  }
+  if (node.settings.paddingTop) {
+    backgroundStyle.paddingTop = node.settings.paddingTop;
+  }
+  if (node.settings.paddingBottom) {
+    backgroundStyle.paddingBottom = node.settings.paddingBottom;
+  }
+  if (node.settings.marginTop) {
+    backgroundStyle.marginTop = node.settings.marginTop;
+  }
+  if (node.settings.marginBottom) {
+    backgroundStyle.marginBottom = node.settings.marginBottom;
+  }
+
+  return (
+    <div
+      data-node-id={node.id}
+      className={`relative w-full transition-shadow ${
+        isSelected
+          ? 'ring-2 ring-primary ring-offset-2'
+          : hovered
+            ? 'ring-1 ring-primary/50'
+            : ''
+      }`}
+      style={backgroundStyle}
+      onClick={handleClick}
+      onMouseEnter={(e) => {
+        e.stopPropagation();
+        setHovered(true);
+      }}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {(hovered || isSelected) && (
+        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+          Section
+        </span>
+      )}
+
+      {node.children.map((child) => {
+        if (child.type === 'container') {
+          return (
+            <ContainerRenderer
+              key={child.id}
+              node={child}
+              selectedNodeId={selectedNodeId}
+              onSelectNode={onSelectNode}
+            />
+          );
+        }
+        if (child.type === 'row') {
+          return (
+            <RowRenderer
+              key={child.id}
+              node={child}
+              selectedNodeId={selectedNodeId}
+              onSelectNode={onSelectNode}
+            />
+          );
+        }
+        return null;
+      })}
+    </div>
+  );
+}

package/src/views/page-builder/canvas/index.ts

@@ -0,0 +1,2 @@
+export { BuilderCanvas } from './BuilderCanvas.js';
+export type { BuilderCanvasProps } from './BuilderCanvas.js';