@prenta/admin 1.2.0 → 1.3.0

package/src/lib/page-audit-input.ts

@@ -33,6 +33,20 @@ export interface AuditMetaSource {
   hasOgImage: boolean
 }
 
+/**
+ * Post identity the public template renders outside the section list.
+ *
+ * The audit engine only reads `sections`. Posts put the H1, opening prose, and
+ * featured image on the document itself, so both audit callers (saved record
+ * and live SEO pane) fold these into synthetic sections here — one mapping,
+ * so the header chip and the rings cannot disagree.
+ */
+export interface PostAuditExtras {
+  title?: string
+  bodyHtml?: string
+  featuredImage?: string
+}
+
 export interface BuildAuditInputArgs {
   sections: PageSection[]
   meta: AuditMetaSource
@@ -41,6 +55,57 @@ export interface BuildAuditInputArgs {
   record: Pick<SeoContentRecord, 'title' | 'siteName' | 'titleTemplate' | 'url'> | null
   /** Fallback title when there is no saved record yet. */
   fallbackTitle?: string
+  /** Post-only slots prepended so the same engine sees title / body / image. */
+  post?: PostAuditExtras
+}
+
+const POST_TITLE_SECTION_ID = '__post-title'
+const POST_IMAGE_SECTION_ID = '__post-featured-image'
+
+function stripHtml(html: string): string {
+  return html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+/**
+ * Prepend the post's own title, body, and featured image as sections the
+ * audit already knows how to read (H1, opening prose, image slot).
+ *
+ * A `text` section carries title + body so we do not invent a phantom hero
+ * image slot. The featured image is a separate `feature` section, and only
+ * when one is set — otherwise `imageSlots` would count an empty media field
+ * and fail alt-text for an image that is not on the page.
+ */
+export function withPostAuditSlots(sections: PageSection[], post?: PostAuditExtras): PageSection[] {
+  if (!post) return sections
+
+  const extras: PageSection[] = []
+  const title = post.title?.trim() ?? ''
+  const body = post.bodyHtml ? stripHtml(post.bodyHtml) : ''
+  if (title || body) {
+    extras.push({
+      id: POST_TITLE_SECTION_ID,
+      sectionType: 'text',
+      name: 'Post',
+      visible: true,
+      content: { heading: title, body },
+      settings: {},
+    })
+  }
+  const image = post.featuredImage?.trim() ?? ''
+  if (image) {
+    extras.push({
+      id: POST_IMAGE_SECTION_ID,
+      sectionType: 'feature',
+      name: 'Featured image',
+      visible: true,
+      content: { imageUrl: image, imageAlt: '' },
+      settings: {},
+    })
+  }
+  return extras.length ? [...extras, ...sections] : sections
 }
 
 export function buildPageAuditInput({
@@ -49,6 +114,7 @@ export function buildPageAuditInput({
   slug,
   record,
   fallbackTitle,
+  post,
 }: BuildAuditInputArgs): PageAuditInput {
   // Measure the title a searcher actually sees — the page meta title with the
   // site's template applied — not the raw field. Checking the raw field would
@@ -65,7 +131,7 @@ export function buildPageAuditInput({
     : meta.metaTitle.trim() || fallbackTitle || ''
 
   return {
-    sections,
+    sections: withPostAuditSlots(sections, post),
     seo: {
       title: renderedTitle,
       description: meta.metaDescription,

package/src/lib/version-history.ts

@@ -35,6 +35,11 @@ export interface PageVersion {
   author: VersionAuthor
   /** Full page content as of this version — what the canvas renders. */
   sections: PageSection[]
+  /** Post identity fields, when the snapshot is a post. */
+  title?: string
+  excerpt?: string
+  featuredImage?: string
+  body?: string
 }
 
 /** Versions sharing a calendar day, newest day first. */
@@ -87,6 +92,20 @@ function toAuthor(row: VersionApiRow): VersionAuthor {
   }
 }
 
+function optionalString(value: unknown): string | undefined {
+  return typeof value === 'string' ? value : undefined
+}
+
+function optionalFeaturedImage(value: unknown): string | undefined {
+  if (typeof value === 'string') return value
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const obj = value as Record<string, unknown>
+    const url = obj.url ?? obj.publicUrl ?? obj.src
+    if (typeof url === 'string') return url
+  }
+  return undefined
+}
+
 export function toPageVersion(row: VersionApiRow): PageVersion {
   const data = row.data ?? {}
   return {
@@ -98,6 +117,10 @@ export function toPageVersion(row: VersionApiRow): PageVersion {
     // snapshot more strictly than the current page would make an unmanaged
     // section look like it was deleted in every version that contains one.
     sections: coerceSections(data.sections, { onUnknown: 'preserve' }),
+    title: optionalString(data.title),
+    excerpt: optionalString(data.excerpt),
+    featuredImage: optionalFeaturedImage(data.featuredImage),
+    body: optionalString(data.body),
   }
 }
 

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

@@ -231,8 +231,8 @@ export function EditorTopBar({
         <button
           type="button"
           onClick={onOpenSettings}
-          aria-label="Page settings"
-          title="Page settings"
+          aria-label={backLabel === 'Posts' ? 'Post settings' : 'Page settings'}
+          title={backLabel === 'Posts' ? 'Post settings' : 'Page settings'}
           className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
         >
           <Settings2 className="h-4 w-4" aria-hidden />

package/src/views/post-editor/PostEditorCanvas.tsx

@@ -24,6 +24,19 @@ interface PostEditorCanvasProps {
   onAddSection?: () => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
+  /**
+   * Read-only render of a past version. Suppresses selection and the editing
+   * affordances, and turns on the changed-section outlines.
+   */
+  reviewing?: boolean
+  /** Sections that differ from the version before the one being reviewed. */
+  changedSectionIds?: ReadonlySet<string>
+  /**
+   * Rendered in place of the editing tip / structure notice while reviewing.
+   * Passed in rather than built here because the review bar's actions belong
+   * to the editor's history state, which the canvas knows nothing about.
+   */
+  reviewBar?: React.ReactNode
 }
 
 /**
@@ -51,6 +64,9 @@ export function PostEditorCanvas({
   onCanvasElement,
   onAddSection,
   structuralTypes = [],
+  reviewing = false,
+  changedSectionIds,
+  reviewBar,
 }: PostEditorCanvasProps) {
   const registerRef = useSectionRefs(selectedId)
 
@@ -62,15 +78,19 @@ export function PostEditorCanvas({
         onScaleChange={onScaleChange}
         onCanvasElement={onCanvasElement}
         chrome={
-          <>
-            {sections.length > 0 && <CanvasEditTip />}
-            <StructureNotice structuralTypes={structuralTypes} />
-          </>
+          reviewing ? (
+            reviewBar
+          ) : (
+            <>
+              {sections.length > 0 && <CanvasEditTip />}
+              <StructureNotice structuralTypes={structuralTypes} />
+            </>
+          )
         }
       >
         <PostHeader config={header} context={context} />
         {sections.length === 0 ? (
-          <EmptyBody onAddSection={onAddSection} />
+          <EmptyBody onAddSection={reviewing ? undefined : onAddSection} />
         ) : (
           sections.map((section) => (
             <SectionRenderer
@@ -78,6 +98,8 @@ export function PostEditorCanvas({
               section={section}
               context={context}
               editable
+              reviewing={reviewing}
+              changed={changedSectionIds?.has(section.id) ?? false}
               selected={section.id === selectedId}
               onSelect={onSelect}
               registerRef={registerRef}

package/src/views/post-editor/PostFieldsForm.tsx

@@ -0,0 +1,322 @@
+'use client'
+
+import { useState } from 'react'
+import { Loader2, Sparkles } from 'lucide-react'
+import { toast } from 'sonner'
+import { normalizeSlug, validateSlug } from '@prenta/core/client'
+import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { TagInput } from '../../components/TagInput.js'
+import { coauthorText } from '../../lib/coauthor-client.js'
+
+/**
+ * The slice of a collection's field config the form reads to pick controls:
+ * a `select` category renders a dropdown (structured vocabulary), an `array`
+ * tags field renders the chip input with autocomplete.
+ */
+export interface PostFieldConfig {
+  type?: string
+  options?: Array<{ label: string; value: string }>
+  maxRows?: number
+}
+
+export interface PostFieldsFormValues {
+  title: string
+  slug: string
+  excerpt: string
+  featuredImage: string
+  category: string
+  tags: string[]
+}
+
+export interface PostFieldsFormProps {
+  values: PostFieldsFormValues
+  canEdit: boolean
+  /** Field definitions from the post type's collection config. */
+  fields?: Record<string, PostFieldConfig | undefined>
+  postType: string
+  /** HTML body, used as AI excerpt context. */
+  bodyHtml?: string
+  slugTouched: boolean
+  onSlugTouched: () => void
+  onChange: (patch: Partial<PostFieldsFormValues>) => void
+  titleRef?: React.Ref<HTMLInputElement>
+  /** Prefix for input ids so the modal and the rail tab can coexist. */
+  idPrefix?: string
+}
+
+const LABEL = 'text-foreground mb-1 block text-xs font-medium'
+/** Match TipTap body editor borders — `border-input` is transparent in theme.css. */
+const INPUT =
+  'border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+const slugify = normalizeSlug
+
+function stripHtml(html: string): string {
+  return html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function buildContentContext(title: string, body: string, excerpt: string): string {
+  const plain = stripHtml(body)
+  const parts = [title.trim(), excerpt.trim(), plain].filter(Boolean)
+  return parts.join('\n\n')
+}
+
+function AiFieldButton({
+  label,
+  busy,
+  disabled,
+  onClick,
+}: {
+  label: string
+  busy: boolean
+  disabled?: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      disabled={disabled || busy}
+      onClick={onClick}
+      className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-[var(--acc)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+    >
+      {busy ? (
+        <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
+      ) : (
+        <Sparkles className="h-3 w-3" aria-hidden />
+      )}
+      {busy ? 'Generating…' : 'AI'}
+    </button>
+  )
+}
+
+/** Title, slug, excerpt, featured image, category, and tags. SEO lives in the SEO tab. */
+export function PostFieldsForm({
+  values,
+  canEdit,
+  fields,
+  postType,
+  bodyHtml = '',
+  slugTouched,
+  onSlugTouched,
+  onChange,
+  titleRef,
+  idPrefix = 'pf',
+}: PostFieldsFormProps) {
+  const [mediaOpen, setMediaOpen] = useState(false)
+  const [aiBusy, setAiBusy] = useState(false)
+
+  const categoryField = fields?.category
+  const categoryOptions =
+    categoryField?.type === 'select' && Array.isArray(categoryField.options)
+      ? categoryField.options
+      : null
+  const tagsField = fields?.tags
+  const hasTags = tagsField?.type === 'array'
+  const slugError = validateSlug(values.slug)
+
+  function handleTitle(next: string) {
+    const patch: Partial<PostFieldsFormValues> = { title: next }
+    if (!slugTouched) patch.slug = slugify(next)
+    onChange(patch)
+  }
+
+  async function handleAiGenerateExcerpt() {
+    const context = buildContentContext(values.title, bodyHtml, values.excerpt)
+    if (!context.trim()) {
+      toast.error(
+        'Add a title or write body content in the Article Body section before generating with AI.',
+      )
+      return
+    }
+
+    setAiBusy(true)
+    try {
+      const outcome = await coauthorText('compress', context, {
+        instructions:
+          'Write a 1–2 sentence excerpt for blog listings and cards. Return only the excerpt text.',
+        targetLength: 45,
+      })
+      if (!outcome.ok) {
+        toast.error(outcome.error)
+        return
+      }
+      onChange({ excerpt: outcome.result.text.trim() })
+      toast.success('Excerpt generated — review before saving.')
+    } catch {
+      toast.error('AI request failed.')
+    } finally {
+      setAiBusy(false)
+    }
+  }
+
+  const titleId = `${idPrefix}-title`
+  const slugId = `${idPrefix}-slug`
+  const categoryId = `${idPrefix}-category`
+  const tagsId = `${idPrefix}-tags`
+  const excerptId = `${idPrefix}-excerpt`
+  const imageId = `${idPrefix}-image`
+
+  return (
+    <>
+      <div className="space-y-3">
+        <div>
+          <label className={LABEL} htmlFor={titleId}>
+            Title <span className="text-destructive">*</span>
+          </label>
+          <input
+            id={titleId}
+            ref={titleRef}
+            className={INPUT}
+            value={values.title}
+            disabled={!canEdit}
+            placeholder="e.g. Announcing our new product"
+            onChange={(e) => handleTitle(e.target.value)}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className={LABEL} htmlFor={slugId}>
+              Slug <span className="text-destructive">*</span>
+            </label>
+            <input
+              id={slugId}
+              className={INPUT}
+              value={values.slug}
+              disabled={!canEdit}
+              placeholder={slugTouched ? undefined : 'Generated from title…'}
+              aria-invalid={Boolean(slugError)}
+              aria-describedby={slugError ? `${slugId}-error` : undefined}
+              onChange={(e) => {
+                onSlugTouched()
+                onChange({ slug: slugify(e.target.value) })
+              }}
+            />
+            {slugError && (
+              <p id={`${slugId}-error`} className="text-destructive mt-1 text-xs">
+                {slugError}
+              </p>
+            )}
+          </div>
+
+          <div>
+            <label className={LABEL} htmlFor={categoryId}>
+              Category
+            </label>
+            {categoryOptions ? (
+              <select
+                id={categoryId}
+                className={INPUT}
+                value={values.category}
+                disabled={!canEdit}
+                onChange={(e) => onChange({ category: e.target.value })}
+              >
+                <option value="">No category</option>
+                {categoryOptions.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+                {values.category && !categoryOptions.some((o) => o.value === values.category) && (
+                  <option value={values.category}>{values.category}</option>
+                )}
+              </select>
+            ) : (
+              <input
+                id={categoryId}
+                className={INPUT}
+                value={values.category}
+                disabled={!canEdit}
+                placeholder="e.g. Product"
+                onChange={(e) => onChange({ category: e.target.value })}
+              />
+            )}
+          </div>
+        </div>
+
+        {hasTags && (
+          <div>
+            <label className={LABEL} htmlFor={tagsId}>
+              Tags
+            </label>
+            <TagInput
+              id={tagsId}
+              value={values.tags}
+              onChange={(tags) => onChange({ tags })}
+              collection={postType}
+              field="tags"
+              disabled={!canEdit}
+              maxTags={tagsField?.maxRows}
+            />
+          </div>
+        )}
+
+        <div>
+          <div className="mb-1 flex items-center justify-between gap-2">
+            <label className={`${LABEL} mb-0`} htmlFor={excerptId}>
+              Excerpt
+            </label>
+            <AiFieldButton
+              label="Generate excerpt from content"
+              busy={aiBusy}
+              disabled={!canEdit}
+              onClick={() => void handleAiGenerateExcerpt()}
+            />
+          </div>
+          <textarea
+            id={excerptId}
+            className={`${INPUT} min-h-[72px] resize-y`}
+            value={values.excerpt}
+            disabled={!canEdit}
+            placeholder="A short summary shown in listings and the header."
+            onChange={(e) => onChange({ excerpt: e.target.value })}
+          />
+        </div>
+
+        <div>
+          <label className={LABEL} htmlFor={imageId}>
+            Featured image
+          </label>
+          <div className="flex gap-2">
+            <input
+              id={imageId}
+              className={`${INPUT} min-w-0 flex-1`}
+              value={values.featuredImage}
+              disabled={!canEdit}
+              placeholder="https://… or pick from the media library"
+              onChange={(e) => onChange({ featuredImage: e.target.value })}
+            />
+            <button
+              type="button"
+              disabled={!canEdit}
+              onClick={() => setMediaOpen(true)}
+              className="bg-accent text-foreground border-border hover:bg-accent/80 shrink-0 rounded-md border px-3 py-1.5 text-xs font-medium disabled:opacity-50"
+            >
+              Browse
+            </button>
+          </div>
+          {values.featuredImage && (
+            <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
+              <img src={values.featuredImage} alt="" className="h-28 w-full object-cover" />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <MediaPickerModal
+        open={mediaOpen}
+        onClose={() => setMediaOpen(false)}
+        onSelect={(url) => {
+          onChange({ featuredImage: url })
+          setMediaOpen(false)
+        }}
+        accept="image/*"
+      />
+    </>
+  )
+}