@prenta/admin 0.96.0 → 0.97.1

package/src/__tests__/views/version-history-panel.render.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
 import { VersionHistoryPanel } from '../../views/page-editor/VersionHistoryPanel.js'
 import type { PageVersion } from '../../lib/version-history.js'
@@ -11,7 +11,31 @@ function section(id: string, content: Record<string, unknown>): PageSection {
   return { id, sectionType: 'hero', name: 'Hero Banner', visible: true, content, settings: {} }
 }
 
-const NOW = new Date()
+/**
+ * A FIXED "now", at midday, because these tests assert on the words "Today"
+ * and "Yesterday".
+ *
+ * `new Date()` made them depend on what time of day CI happened to run. The
+ * fixtures sit 1-30 hours back, so a run shortly after UTC midnight put every
+ * one of them in the previous day and the panel correctly rendered
+ * "Yesterday" where the test demanded "Today". It failed at 00:13 UTC having
+ * passed all day — the suite was green on any machine whose clock was far
+ * enough from midnight, which is most of them, most of the time.
+ *
+ * Midday leaves ~12 hours of headroom either side of the day boundary, so
+ * every offset below lands on the day its assertion names.
+ */
+const NOW = new Date('2026-06-15T12:00:00.000Z')
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  vi.setSystemTime(NOW)
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
 const iso = (hoursAgo: number) => new Date(NOW.getTime() - hoursAgo * 3_600_000).toISOString()
 
 const VERSIONS: PageVersion[] = [

package/src/lib/post-editor-service.ts

@@ -111,6 +111,12 @@ export interface ValidationResult {
  * key not declared as a field on the collection, so a post-type collection
  * missing e.g. `sections` would discard all section content on save with no
  * error. Mirrors the Page Editor's `missingPageFields` guard.
+ *
+ * Keep this list in sync with the keys `toWriteBody` sends: a key that is
+ * written but not guarded is exactly the silent data loss this guard exists
+ * to prevent. `title`/`slug` are omitted deliberately — they're required by
+ * every collection shape, and a post type without them cannot be listed in
+ * the first place.
  */
 const REQUIRED_POST_FIELDS = [
   'sections',
@@ -118,6 +124,7 @@ const REQUIRED_POST_FIELDS = [
   'featuredImage',
   'body',
   'category',
+  'tags',
   'publishDate',
   'metaTitle',
   'metaDescription',

package/src/views/Posts/PostsListView.tsx

@@ -60,6 +60,17 @@ type Dir = 'asc' | 'desc'
 
 const PAGE_SIZE = 10
 
+/**
+ * The table is `table-fixed`, so the flexible Title column only gets whatever
+ * the min-width leaves after the seven fixed columns (810px). The previous
+ * 760px was *below* that sum, so at ≤810px of table width the Title column
+ * collapsed to zero and the post title vanished entirely — the row kept its
+ * checkbox, type, author, status, date, SEO and actions, and showed no title
+ * at all. Keep ≥240px for the title and let the table scroll sideways
+ * instead. Mirrors `tableMinWidth` in the Pages list, which hit this first.
+ */
+const TABLE_MIN_WIDTH = 810 + 240
+
 export function PostsListView({ onNavigate }: PostsListViewProps) {
   const [activeType, setActiveType] = useState<string>('all')
   const [search, setSearch] = useState('')
@@ -331,7 +342,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
         {/* Both-axis scroll: tall lists scroll vertically; narrow viewports
             keep column widths and scroll sideways instead of crushing. */}
         <div className="min-h-0 flex-1 overflow-auto">
-          <table className="w-full min-w-[760px] table-fixed" role="table" aria-label="Posts">
+          <table
+            className="w-full table-fixed"
+            style={{ minWidth: TABLE_MIN_WIDTH }}
+            role="table"
+            aria-label="Posts"
+          >
             <colgroup>
               <col style={{ width: '40px' }} />
               <col />

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

@@ -3,6 +3,7 @@
 import { ExternalLink, Lock } from 'lucide-react'
 import { RichTextField } from '../../fields/RichTextField.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
+import { visibleFields } from '@prenta/core/page-sections'
 import { ContentField, FIELD_INPUT, FIELD_LABEL } from './section-fields.js'
 import { getSectionType } from './section-types.js'
 
@@ -75,7 +76,14 @@ export function SectionEditForm({
     section.sectionType === 'article-body' &&
     bodySource === 'field' &&
     onPostBodyChange !== undefined
-  const contentFields = def?.fields.filter((f) => !(editPostBodyField && f.key === 'body')) ?? []
+  // `visibleFields` first, so a type offering alternative inputs for one job
+  // (see the video section's source switch) shows only the box that is live.
+  // The validator reads the same helper, so it can never require a field the
+  // editor is not drawing.
+  const contentFields =
+    visibleFields(def?.fields ?? [], section.content).filter(
+      (f) => !(editPostBodyField && f.key === 'body'),
+    ) ?? []
 
   return (
     <div className="border-border bg-muted/40 border-t px-3 py-3.5">

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

@@ -3,6 +3,7 @@
 import { useEffect } from 'react'
 import { Eye, EyeOff, Lock, X } from 'lucide-react'
 import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js'
+import { visibleFields } from '@prenta/core/page-sections'
 import { ContentField, FIELD_INPUT, FIELD_LABEL } from './section-fields.js'
 import { RichTextField } from '../../fields/RichTextField.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
@@ -66,8 +67,12 @@ export function SectionInspector({
     section.sectionType === 'article-body' &&
     bodySource === 'field' &&
     onPostBodyChange !== undefined
-  const contentFields =
-    def?.fields.filter((field) => !(editPostBodyField && field.key === 'body')) ?? []
+  // Same visibility rule as the inline form and the validator — see
+  // `visibleFields`. The template inspector must not offer a box the page
+  // editor hides, or the two surfaces disagree about the same section.
+  const contentFields = visibleFields(def?.fields ?? [], section.content).filter(
+    (field) => !(editPostBodyField && field.key === 'body'),
+  )
 
   // Escape closes the inspector.
   useEffect(() => {

package/src/views/page-editor/sections/DividerSection.tsx

@@ -0,0 +1,31 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+/**
+ * Canvas body for the `divider` section.
+ *
+ * `space` deliberately renders an empty box rather than nothing: on the public
+ * page the section wrapper's padding IS the break, but on the canvas a section
+ * that draws nothing at all reads as broken. A faint dashed outline says "this
+ * is intentional whitespace" without pretending to be what ships — the canvas
+ * shows structure, and empty space is the structure here.
+ */
+export function DividerSection({ section }: { section: PageSection }) {
+  const variant = str(section.content, 'variant') || 'line'
+
+  if (variant === 'space') {
+    return (
+      <div className="mx-auto max-w-3xl px-6">
+        <div className="border-border text-muted-foreground flex h-10 items-center justify-center rounded-md border border-dashed text-xs">
+          Space
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-6">
+      <hr className="border-0 border-t border-current opacity-15" aria-hidden />
+    </div>
+  )
+}

package/src/views/page-editor/sections/EmbedSection.tsx

@@ -1,5 +1,5 @@
 import { PlayCircle } from 'lucide-react'
-import { parseEmbed, EMBED_PROVIDER_LABEL } from '@prenta/core/page-sections'
+import { resolveVideo, EMBED_PROVIDER_LABEL } from '@prenta/core/page-sections'
 import type { PageSection } from '../../../lib/page-editor-service.js'
 import { str } from './parts.js'
 
@@ -17,10 +17,18 @@ const RATIO_CLASS: Record<string, string> = {
  */
 export function EmbedSection({ section }: { section: PageSection }) {
   const c = section.content
-  const parsed = parseEmbed(str(c, 'url'))
+  const video = resolveVideo(c)
   const ratioClass = RATIO_CLASS[str(c, 'ratio', '16:9')] ?? RATIO_CLASS['16:9']
   const title = str(c, 'title')
   const caption = str(c, 'caption')
+  // Naming the resolved source is the only confirmation an editor gets that
+  // the link they pasted, or the file they picked, actually resolved — the
+  // canvas never loads the real video either way.
+  const label = !video
+    ? 'No valid video set'
+    : video.kind === 'hosted'
+      ? 'Uploaded video'
+      : `${EMBED_PROVIDER_LABEL[video.provider]} video`
 
   return (
     <figure className="mx-auto max-w-3xl px-6">
@@ -28,9 +36,7 @@ export function EmbedSection({ section }: { section: PageSection }) {
         className={`bg-muted text-muted-foreground relative flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-xl ${ratioClass}`}
       >
         <PlayCircle className="h-10 w-10" aria-hidden />
-        <p className="text-foreground text-sm font-medium">
-          {parsed ? `${EMBED_PROVIDER_LABEL[parsed.provider]} video` : 'No valid video URL'}
-        </p>
+        <p className="text-foreground text-sm font-medium">{label}</p>
         {title && <p className="text-muted-foreground px-4 text-center text-xs">{title}</p>}
       </div>
       {caption && (

package/src/views/page-editor/sections/SectionRenderer.tsx

@@ -18,6 +18,7 @@ import { RelatedPostsSection } from './RelatedPostsSection.js'
 import { GallerySection } from './GallerySection.js'
 import { EmbedSection } from './EmbedSection.js'
 import { WidgetEmbedSection } from './WidgetEmbedSection.js'
+import { DividerSection } from './DividerSection.js'
 
 /**
  * Section types with a real canvas body component below. Anything else —
@@ -38,6 +39,7 @@ const CANVAS_RENDERED_TYPES: ReadonlySet<string> = new Set([
   'gallery',
   'embed',
   'widget-embed',
+  'divider',
 ])
 
 /** True when the canvas renders this type for real (not as a placeholder). */
@@ -126,6 +128,8 @@ function BuiltInSectionBody({
       return <EmbedSection section={section} />
     case 'widget-embed':
       return <WidgetEmbedSection section={section} />
+    case 'divider':
+      return <DividerSection section={section} />
     default:
       // Config-declared custom types and unmanaged sections with no supplied
       // renderer: a neutral placeholder keeps the canvas reflecting the

package/src/views/page-editor/sections/WidgetEmbedSection.tsx

@@ -20,10 +20,13 @@ export function WidgetEmbedSection({ section }: { section: PageSection }) {
         style={{ minHeight: `${minHeight}px` }}
       >
         <Puzzle className="h-8 w-8" aria-hidden />
+        {/* Naming the recognised provider is the only feedback an editor gets
+            that their pasted snippet parsed — the widget itself never loads in
+            the canvas, so "it looks blank" is the expected state either way. */}
         <p className="text-foreground text-sm font-medium">
           {parsed
             ? `${WIDGET_PROVIDER_LABEL[parsed.provider]} widget`
-            : 'Configure widget provider + ids'}
+            : 'Paste embed code to load a widget'}
         </p>
         {title && <p className="text-muted-foreground px-4 text-center text-xs">{title}</p>}
       </div>