@prenta/admin 0.98.1 → 1.1.0

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

@@ -1,87 +0,0 @@
-'use client'
-
-import { Image } from 'lucide-react'
-import type { BlockPreviewProps } from './index.js'
-
-interface GalleryImage {
-  src?: string
-  alt?: string
-  caption?: string
-}
-
-export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
-  const images = (data.images as GalleryImage[]) || []
-
-  const placeholders: GalleryImage[] =
-    images.length > 0 ? images : Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }))
-
-  const Thumbnail = ({ item, className = '' }: { item: GalleryImage; className?: string }) => (
-    <div
-      className={`bg-muted flex items-center justify-center overflow-hidden rounded-md ${className}`}
-    >
-      {item.src ? (
-        <img src={item.src} alt={item.alt || ''} className="h-full w-full object-cover" />
-      ) : (
-        <Image size={20} className="text-muted-foreground" />
-      )}
-    </div>
-  )
-
-  if (variant === 'masonry') {
-    return (
-      <div className="border-border rounded-md border p-4">
-        <div className="columns-3 gap-3 space-y-3">
-          {placeholders.map((item, i) => (
-            <Thumbnail
-              key={i}
-              item={item}
-              className={
-                i % 3 === 0 ? 'aspect-square' : i % 3 === 1 ? 'aspect-[3/4]' : 'aspect-[4/3]'
-              }
-            />
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'carousel') {
-    return (
-      <div className="border-border overflow-hidden rounded-md border p-4">
-        <div className="flex gap-3 overflow-hidden">
-          {placeholders.slice(0, 4).map((item, i) => (
-            <Thumbnail key={i} item={item} className="aspect-square min-w-[120px] flex-1" />
-          ))}
-          {placeholders.length > 4 && (
-            <div className="bg-muted flex min-w-[120px] flex-1 items-center justify-center rounded-md">
-              <span className="text-muted-foreground text-sm">+{placeholders.length - 4}</span>
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'lightbox') {
-    return (
-      <div className="border-border rounded-md border p-4">
-        <div className="grid grid-cols-3 gap-3">
-          {placeholders.map((item, i) => (
-            <Thumbnail key={i} item={item} className="aspect-square" />
-          ))}
-        </div>
-        <p className="text-muted-foreground mt-2 text-center text-xs">Click to open lightbox</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="border-border rounded-md border p-4">
-      <div className="grid grid-cols-3 gap-3">
-        {placeholders.map((item, i) => (
-          <Thumbnail key={i} item={item} className="aspect-square" />
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,90 +0,0 @@
-'use client'
-
-import { Image, Play } from 'lucide-react'
-import type { BlockPreviewProps } from './index.js'
-
-export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
-  const title = (data.title as string) || ''
-  const subtitle = (data.subtitle as string) || ''
-  const image = data.image as string | undefined
-  const ctaText = (data.ctaText as string) || ''
-  const overlayOpacity = (data.overlayOpacity as number) ?? 0.4
-
-  if (variant === 'split-image') {
-    return (
-      <div className="border-border flex min-h-[200px] overflow-hidden rounded-md border">
-        <div className="flex flex-1 flex-col justify-center gap-3 p-6">
-          <h2 className="text-foreground text-2xl font-medium">
-            {title || <span className="text-muted-foreground">Hero Title</span>}
-          </h2>
-          {(subtitle || !title) && (
-            <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
-          )}
-          {ctaText && (
-            <div className="mt-2">
-              <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
-                {ctaText}
-              </span>
-            </div>
-          )}
-        </div>
-        <div className="bg-muted flex flex-1 items-center justify-center">
-          {image ? (
-            <img src={image} alt="" className="h-full w-full object-cover" />
-          ) : (
-            <Image size={32} className="text-muted-foreground" />
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'minimal') {
-    return (
-      <div className="border-border flex flex-col items-center gap-3 rounded-md border p-8">
-        <h2 className="text-foreground text-2xl font-medium">
-          {title || <span className="text-muted-foreground">Hero Title</span>}
-        </h2>
-        {(subtitle || !title) && (
-          <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
-        )}
-        {ctaText && (
-          <span className="bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm">
-            {ctaText}
-          </span>
-        )}
-      </div>
-    )
-  }
-
-  const isVideo = variant === 'video-bg'
-
-  return (
-    <div className="border-border relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border p-8">
-      {image ? (
-        <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
-      ) : (
-        <div className="bg-muted absolute inset-0" />
-      )}
-      <div className="bg-background absolute inset-0" style={{ opacity: overlayOpacity }} />
-      <div className="relative z-10 flex flex-col items-center gap-3 text-center">
-        {isVideo && (
-          <div className="bg-primary/90 mb-2 flex h-12 w-12 items-center justify-center rounded-full">
-            <Play size={20} className="text-primary-foreground" />
-          </div>
-        )}
-        <h2 className="text-foreground text-2xl font-medium">
-          {title || <span className="text-muted-foreground">Hero Title</span>}
-        </h2>
-        {(subtitle || !title) && (
-          <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
-        )}
-        {ctaText && (
-          <span className="bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm">
-            {ctaText}
-          </span>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,54 +0,0 @@
-'use client'
-
-import { Image } from 'lucide-react'
-import type { BlockPreviewProps } from './index.js'
-
-export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps) {
-  const src = data.src as string | undefined
-  const alt = (data.alt as string) || ''
-  const caption = (data.caption as string) || ''
-  const aspectRatio = (data.aspectRatio as string) || '16/9'
-
-  const roundedClass = variant === 'rounded' ? 'rounded-xl' : 'rounded-md'
-
-  const ImagePlaceholder = ({ className = '' }: { className?: string }) => (
-    <div
-      className={`bg-muted flex items-center justify-center ${roundedClass} ${className}`}
-      style={{ aspectRatio }}
-    >
-      <Image size={32} className="text-muted-foreground" />
-    </div>
-  )
-
-  const ImageElement = ({ className = '' }: { className?: string }) =>
-    src ? (
-      <img
-        src={src}
-        alt={alt}
-        className={`h-auto w-full object-cover ${roundedClass} ${className}`}
-        style={{ aspectRatio }}
-      />
-    ) : (
-      <ImagePlaceholder className={className} />
-    )
-
-  if (variant === 'side-by-side') {
-    return (
-      <div className="border-border grid grid-cols-2 gap-3 rounded-md border p-4">
-        <ImageElement />
-        <ImagePlaceholder />
-      </div>
-    )
-  }
-
-  return (
-    <figure className="border-border overflow-hidden rounded-md border p-4">
-      <ImageElement />
-      {(variant === 'captioned' || caption) && (
-        <figcaption className="text-muted-foreground mt-2 text-center text-sm">
-          {caption || 'Image caption'}
-        </figcaption>
-      )}
-    </figure>
-  )
-}

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

@@ -1,81 +0,0 @@
-'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="border-border rounded-md border p-5">
-        {heading && (
-          <HeadingTag className={`${headingSizeClass} text-foreground mb-3 font-medium`}>
-            {heading}
-          </HeadingTag>
-        )}
-        <div className="grid grid-cols-2 gap-4">
-          <p className="text-muted-foreground text-sm leading-relaxed">
-            {col1 || 'Column one text content…'}
-          </p>
-          <p className="text-muted-foreground text-sm leading-relaxed">
-            {col2 || 'Column two text content…'}
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'with-sidebar') {
-    return (
-      <div className="border-border grid grid-cols-[1fr_200px] gap-4 rounded-md border p-5">
-        <div>
-          {heading && (
-            <HeadingTag className={`${headingSizeClass} text-foreground mb-3 font-medium`}>
-              {heading}
-            </HeadingTag>
-          )}
-          <p className="text-muted-foreground text-sm leading-relaxed">
-            {truncatedBody || 'Body text content goes here…'}
-          </p>
-        </div>
-        <aside className="bg-muted rounded-md p-3">
-          <div className="bg-border h-3 w-3/4 rounded" />
-          <div className="bg-border mt-2 h-2 w-full rounded" />
-          <div className="bg-border mt-1 h-2 w-2/3 rounded" />
-        </aside>
-      </div>
-    )
-  }
-
-  return (
-    <div className="border-border rounded-md border p-5">
-      {heading && (
-        <HeadingTag className={`${headingSizeClass} text-foreground mb-3 font-medium`}>
-          {heading}
-        </HeadingTag>
-      )}
-      <p className="text-muted-foreground text-sm leading-relaxed">
-        {truncatedBody || <span className="italic">Body text content goes here…</span>}
-      </p>
-    </div>
-  )
-}

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

@@ -1,73 +0,0 @@
-'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="bg-muted relative flex aspect-video items-center justify-center overflow-hidden rounded-md">
-      {poster ? (
-        <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
-      ) : (
-        <div className="bg-card absolute inset-0" />
-      )}
-      <div className="bg-primary/90 relative z-10 flex h-12 w-12 items-center justify-center rounded-full shadow-sm">
-        <Play size={20} className="text-primary-foreground" />
-      </div>
-      {badges.length > 0 && (
-        <div className="absolute right-2 bottom-2 z-10 flex gap-1">
-          {badges.map((badge) => (
-            <span
-              key={badge}
-              className="bg-background/80 text-muted-foreground rounded px-1.5 py-0.5 text-xs"
-            >
-              {badge}
-            </span>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-
-  if (variant === 'background') {
-    return (
-      <div className="border-border overflow-hidden rounded-md border">
-        <div className="relative aspect-[21/9]">
-          {poster ? (
-            <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
-          ) : (
-            <div className="bg-card absolute inset-0" />
-          )}
-          <div className="bg-background/30 absolute inset-0 flex items-center justify-center">
-            <div className="bg-primary/90 flex h-14 w-14 items-center justify-center rounded-full shadow-sm">
-              <Play size={24} className="text-primary-foreground" />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (variant === 'lightbox') {
-    return (
-      <div className="border-border rounded-md border p-4">
-        <div className="mx-auto max-w-sm">
-          {content}
-          <p className="text-muted-foreground mt-2 text-center text-xs">
-            Click to play in lightbox
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return <div className="border-border rounded-md border p-4">{content}</div>
-}

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

@@ -1,34 +0,0 @@
-'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

@@ -1,56 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import type { BlockNode } from '@prenta/core'
-import { blockRenderers, FallbackPreview } from '../block-renderers/index.js'
-
-export interface BlockRendererProps {
-  node: BlockNode
-  selectedNodeId: string | null
-  onSelectNode: (id: string | null) => void
-}
-
-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 Preview = blockRenderers[blockType]
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    onSelectNode(node.id)
-  }
-
-  return (
-    <div
-      data-node-id={node.id}
-      data-block-type={blockType}
-      className={`relative min-h-[48px] transition-shadow ${
-        isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
-      }`}
-      onClick={handleClick}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {(hovered || isSelected) && (
-        <span className="bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium">
-          {label}
-        </span>
-      )}
-
-      {/* Previews are display-only on the canvas; the wrapper owns selection. */}
-      <div className="pointer-events-none">
-        {Preview ? (
-          <Preview data={node.data} variant={node.settings.variant} />
-        ) : (
-          <FallbackPreview blockType={blockType} data={node.data} />
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,87 +0,0 @@
-'use client'
-
-import { LayoutGrid } from 'lucide-react'
-import type { PageNode } from '@prenta/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="bg-muted relative flex-1 overflow-auto p-6" onClick={handleCanvasClick}>
-      {showGridOverlay && <GridOverlay deviceMode={deviceMode} />}
-
-      <div
-        className={`bg-background relative min-h-full shadow-sm ${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 min-h-[400px] flex-col items-center justify-center text-center">
-            <LayoutGrid size={32} className="text-muted-foreground mb-3" />
-            <p className="text-foreground mb-1 text-sm font-medium">No sections yet</p>
-            <p className="text-muted-foreground text-xs">
-              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 h-full grid-cols-12 gap-4 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

@@ -1,82 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import type { ColumnNode } from '@prenta/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-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
-      }`}
-      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="bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium">
-          Col {width}
-        </span>
-      )}
-
-      {isEmpty ? (
-        <div className="border-border text-muted-foreground flex min-h-[64px] items-center justify-center rounded-md border-2 border-dashed text-sm">
-          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>
-  )
-}