@prenta/admin 0.98.1 → 1.1.0

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

@@ -1,67 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import type { ContainerNode } from '@prenta/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-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
-      }`}
-      style={{
-        maxWidth,
-        margin: marginMap[alignment] ?? '0 auto',
-        padding,
-      }}
-      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">
-          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

@@ -1,68 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import type { RowNode } from '@prenta/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-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
-      }`}
-      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">
-          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

@@ -1,93 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import type { SectionNode } from '@prenta/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-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
-      }`}
-      style={backgroundStyle}
-      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">
-          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

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

package/src/views/page-editor/PagePreview.tsx

@@ -1,105 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { AlertTriangle, Loader2, Pencil, X } from 'lucide-react'
-import { fetchPageForEditor, type EditorPage } from '../../lib/page-editor-service.js'
-import { SectionRenderer } from './sections/index.js'
-
-interface PagePreviewProps {
-  documentId: string
-  onNavigate: (path: string) => void
-}
-
-/**
- * Clean, chrome-free render of a page using the SAME section renderers as
- * the editor canvas — so the preview reflects what will actually ship.
- * Only visible sections are rendered (hidden sections are omitted, exactly
- * as the public page would behave).
- */
-export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
-  const [page, setPage] = useState<EditorPage | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    fetchPageForEditor(documentId)
-      .then((p) => !cancelled && setPage(p))
-      .catch((err) => !cancelled && setError(err instanceof Error ? err.message : 'Failed to load'))
-      .finally(() => !cancelled && setLoading(false))
-    return () => {
-      cancelled = true
-    }
-  }, [documentId])
-
-  if (loading) {
-    return (
-      <div className="bg-background flex h-full items-center justify-center">
-        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
-        <span className="sr-only">Loading preview…</span>
-      </div>
-    )
-  }
-
-  if (error || !page) {
-    return (
-      <div className="bg-background flex h-full items-center justify-center p-6">
-        <div className="border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4">
-          <AlertTriangle className="text-destructive shrink-0" size={20} aria-hidden />
-          <p className="text-foreground text-sm font-medium">{error ?? 'Page not found.'}</p>
-        </div>
-      </div>
-    )
-  }
-
-  const visible = page.sections.filter((s) => s.visible)
-
-  return (
-    <div className="flex h-full flex-col">
-      {/* Slim preview bar — the only chrome; the page itself renders clean.
-          This view opens in its own browser tab, so actions are tab-scoped. */}
-      <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
-        <button
-          type="button"
-          onClick={() => {
-            // Opened via the editor's "Preview" (script-opened tab) → close
-            // it. Opened by navigating to the URL directly (no opener, so
-            // `window.close()` is a no-op) → fall back to the editor so the
-            // button is never dead.
-            if (window.opener) window.close()
-            else onNavigate(`/pages/${documentId}/edit`)
-          }}
-          className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
-          aria-label="Close preview tab"
-        >
-          <X className="h-4 w-4" aria-hidden />
-          Close
-        </button>
-        <span className="text-muted-foreground text-xs">
-          Preview · {page.title || 'Untitled'} {page.path}
-        </span>
-        <button
-          type="button"
-          onClick={() => onNavigate(`/pages/${documentId}/edit`)}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
-        >
-          <Pencil className="h-3.5 w-3.5" aria-hidden />
-          Open editor
-        </button>
-      </div>
-
-      {/* The canvas is intentionally white regardless of the admin theme:
-          it emulates the public page surface, not admin chrome. */}
-      <div className="prenta-canvas bg-card flex-1 overflow-auto">
-        {visible.length === 0 ? (
-          <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
-            This page has no visible sections yet.
-          </div>
-        ) : (
-          visible.map((section) => <SectionRenderer key={section.id} section={section} />)
-        )}
-      </div>
-    </div>
-  )
-}

package/src/views/page-editor/SitePreviewFrame.tsx

@@ -1,250 +0,0 @@
-'use client'
-
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { Loader2 } from 'lucide-react'
-import { injectPreviewEditChrome } from '../../lib/canvas-edit-chrome.js'
-import {
-  canvasOriginFromSrc,
-  isPreviewBridgeMessage,
-  isPreviewEditMessage,
-  isPreviewRequestMediaMessage,
-  PREVIEW_BRIDGE_VERSION,
-  PREVIEW_SECTIONS_DEBOUNCE_MS,
-  toPreviewSectionPayload,
-  type PreviewHighlightMessage,
-  type PreviewModeMessage,
-  type PreviewSectionPayload,
-  type PreviewSectionsMessage,
-} from '../../lib/preview-bridge.js'
-import { getViewport, type ViewportId } from './viewports.js'
-
-export interface CanvasEditPayload {
-  sectionId: string
-  fieldPath: string
-  value: string
-}
-
-export interface CanvasMediaRequestPayload {
-  sectionId: string
-  fieldPath: string
-}
-
-interface SitePreviewFrameProps {
-  /** Canvas draft URL; null while the preview token is still minting. */
-  src: string | null
-  viewport: ViewportId
-  /** Changing this remounts the iframe so it reloads the persisted draft. */
-  reloadKey: number
-  title?: string
-  /** Currently selected section in the editor — pushed to the canvas as a highlight. */
-  selectedId?: string | null
-  /** Live editor sections — debounced push after canvas ready (Phase 3). */
-  sections?: PreviewSectionPayload[]
-  /**
-   * Increment after a canvas-originated text edit so the next sections push is
-   * skipped (avoids remounting a focused contenteditable).
-   */
-  suppressSectionsEcho?: number
-  /** Canvas → admin: section (and optional field) clicked in the real design. */
-  onSelectSection?: (sectionId: string | null, fieldPath?: string) => void
-  /** Canvas → admin: inline text edit (Stage 3). */
-  onCanvasEdit?: (edit: CanvasEditPayload) => void
-  /** Canvas → admin: open media picker for a field (Stage 3 wave B). */
-  onCanvasRequestMedia?: (request: CanvasMediaRequestPayload) => void
-}
-
-/**
- * Inline branded preview surface — Next builder route in an iframe at the
- * selected viewport's *true* CSS width, CSS-`transform: scale()`'d to fit
- * (never crop). Stage 3: mode / edit / request-media + suppress-echo for
- * canvas-originated text edits.
- */
-export function SitePreviewFrame({
-  src,
-  viewport,
-  reloadKey,
-  title = 'Site preview',
-  selectedId = null,
-  sections,
-  suppressSectionsEcho = 0,
-  onSelectSection,
-  onCanvasEdit,
-  onCanvasRequestMedia,
-}: SitePreviewFrameProps) {
-  const vp = getViewport(viewport)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const sentinelRef = useRef<HTMLDivElement>(null)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-  const [scale, setScale] = useState(1)
-  const [frameHeight, setFrameHeight] = useState(600)
-  const [loaded, setLoaded] = useState(false)
-  const [canvasReady, setCanvasReady] = useState(false)
-  const canvasOrigin = canvasOriginFromSrc(src)
-  const lastSuppressRef = useRef(suppressSectionsEcho)
-
-  /**
-   * Measure from a zero-height sentinel, never `clientWidth - 48`.
-   *
-   * The 48 was `p-6` written down a second time, in a second unit, four
-   * hundred lines from the class it mirrors. It disagrees with reality the
-   * moment a scrollbar appears, and it rots silently if the gutter ever
-   * changes — nothing fails, the preview just scales slightly wrong.
-   *
-   * The sentinel is subject to the same padding, the same scrollbar and the
-   * same host scaling as the frame, so its `offsetWidth` IS the usable width
-   * and there is no arithmetic to get wrong. Same rule as `CanvasSurface`,
-   * which is where this was first learned; this file is the third copy of the
-   * arithmetic and the last one to go.
-   *
-   * Height still comes from the container, because the sentinel is
-   * deliberately zero-height and can say nothing about it — but it is read as
-   * `clientHeight - (clientWidth - sentinelWidth)`, deriving the vertical
-   * gutter from the measured horizontal one rather than hardcoding it again.
-   * That holds for the symmetric `p-6` this uses and degrades to the old
-   * behaviour rather than breaking if it ever stops being symmetric.
-   */
-  useLayoutEffect(() => {
-    const container = containerRef.current
-    const sentinel = sentinelRef.current
-    if (!container || !sentinel) return
-    const recompute = () => {
-      const availableW = sentinel.offsetWidth
-      if (availableW <= 0) return
-      const gutter = Math.max(0, container.clientWidth - availableW)
-      const availableH = container.clientHeight - gutter
-      const next = Math.min(1, availableW / vp.width)
-      setScale(next > 0 ? next : 1)
-      setFrameHeight(availableH > 0 ? availableH : 600)
-    }
-    recompute()
-    const ro = new ResizeObserver(recompute)
-    ro.observe(container)
-    ro.observe(sentinel)
-    return () => ro.disconnect()
-  }, [vp.width])
-
-  useEffect(() => {
-    setLoaded(false)
-    setCanvasReady(false)
-  }, [src, reloadKey])
-
-  // Canvas → admin: ready handshake + select + edit + request-media.
-  useEffect(() => {
-    if (!canvasOrigin) return
-    const onMessage = (event: MessageEvent) => {
-      if (event.origin !== canvasOrigin) return
-      if (!isPreviewBridgeMessage(event.data)) return
-      if (event.data.type === 'prenta-preview:ready') {
-        setCanvasReady(true)
-        return
-      }
-      if (event.data.type === 'prenta-preview:select' && onSelectSection) {
-        onSelectSection(event.data.sectionId, event.data.fieldPath)
-        return
-      }
-      if (isPreviewEditMessage(event.data) && onCanvasEdit) {
-        onCanvasEdit({
-          sectionId: event.data.sectionId,
-          fieldPath: event.data.fieldPath,
-          value: event.data.value,
-        })
-        return
-      }
-      if (isPreviewRequestMediaMessage(event.data) && onCanvasRequestMedia) {
-        onCanvasRequestMedia({
-          sectionId: event.data.sectionId,
-          fieldPath: event.data.fieldPath,
-        })
-      }
-    }
-    window.addEventListener('message', onMessage)
-    return () => window.removeEventListener('message', onMessage)
-  }, [canvasOrigin, onSelectSection, onCanvasEdit, onCanvasRequestMedia])
-
-  // Admin → canvas: enable inline editing once the canvas is ready.
-  useEffect(() => {
-    if (!canvasOrigin || !loaded || !canvasReady) return
-    const win = iframeRef.current?.contentWindow
-    if (!win) return
-    const msg: PreviewModeMessage = {
-      type: 'prenta-preview:mode',
-      v: PREVIEW_BRIDGE_VERSION,
-      editing: true,
-    }
-    win.postMessage(msg, canvasOrigin)
-    // Same-origin only — cross-origin previews skip silently.
-    injectPreviewEditChrome(iframeRef.current)
-  }, [canvasOrigin, loaded, canvasReady, reloadKey])
-
-  // Admin → canvas: highlight the selected section.
-  useEffect(() => {
-    if (!canvasOrigin || !loaded || !canvasReady) return
-    const win = iframeRef.current?.contentWindow
-    if (!win) return
-    const msg: PreviewHighlightMessage = {
-      type: 'prenta-preview:highlight',
-      v: PREVIEW_BRIDGE_VERSION,
-      sectionId: selectedId,
-    }
-    win.postMessage(msg, canvasOrigin)
-  }, [canvasOrigin, selectedId, loaded, canvasReady, reloadKey])
-
-  // Admin → canvas: live section content (debounced). Skip one cycle after
-  // canvas-originated text edits so contenteditable does not remount.
-  useEffect(() => {
-    if (!canvasOrigin || !loaded || !canvasReady || !sections) return
-    if (suppressSectionsEcho !== lastSuppressRef.current) {
-      lastSuppressRef.current = suppressSectionsEcho
-      return
-    }
-    const win = iframeRef.current?.contentWindow
-    if (!win) return
-    const timer = window.setTimeout(() => {
-      const msg: PreviewSectionsMessage = {
-        type: 'prenta-preview:sections',
-        v: PREVIEW_BRIDGE_VERSION,
-        sections: sections.map(toPreviewSectionPayload),
-      }
-      win.postMessage(msg, canvasOrigin)
-    }, PREVIEW_SECTIONS_DEBOUNCE_MS)
-    return () => window.clearTimeout(timer)
-  }, [canvasOrigin, loaded, canvasReady, sections, reloadKey, suppressSectionsEcho])
-
-  return (
-    <div ref={containerRef} className="bg-muted relative h-full overflow-hidden p-6">
-      {/*
-       * Zero-height sentinel — see the measurement effect above. Must stay the
-       * first child and must stay zero-height. `absolute` would defeat it: it
-       * has to sit in the padding box to inherit the gutter it is measuring.
-       */}
-      <div ref={sentinelRef} aria-hidden className="h-0" />
-      {(!src || !loaded) && (
-        <div
-          className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2"
-          aria-live="polite"
-        >
-          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
-          <span className="text-muted-foreground text-sm">Loading site preview…</span>
-        </div>
-      )}
-      {src && (
-        <div className="mx-auto" style={{ width: vp.width * scale, height: frameHeight }}>
-          <iframe
-            key={reloadKey}
-            ref={iframeRef}
-            src={src}
-            title={title}
-            onLoad={() => setLoaded(true)}
-            className="border-border bg-card rounded-xl border shadow-sm"
-            style={{
-              width: vp.width,
-              height: frameHeight / scale,
-              transform: `scale(${scale})`,
-              transformOrigin: 'top left',
-            }}
-          />
-        </div>
-      )}
-    </div>
-  )
-}