@actuate-media/cms-admin 0.53.0 → 0.56.0

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

@@ -148,6 +148,7 @@ export function SectionInspector({
               field={field}
               value={section.content[field.key]}
               onChange={(v) => onContentChange({ [field.key]: v })}
+              onPatch={(patch) => onContentChange(patch)}
             />
           ))}
         </fieldset>
@@ -302,11 +303,17 @@ function ContentField({
   field,
   value,
   onChange,
+  onPatch,
   id: idProp,
 }: {
   field: SectionFieldDef
   value: unknown
   onChange: (v: unknown) => void
+  /**
+   * Optional multi-key patch sink — lets media fields persist companion
+   * dimension keys (width/height) atomically with the URL.
+   */
+  onPatch?: (patch: Record<string, unknown>) => void
   /** Explicit input id (repeater rows pass a row-scoped id to stay unique). */
   id?: string
 }) {
@@ -335,7 +342,7 @@ function ContentField({
   }
 
   if (field.type === 'media') {
-    return <MediaField id={id} field={field} value={text} onChange={onChange} />
+    return <MediaField id={id} field={field} value={text} onChange={onChange} onPatch={onPatch} />
   }
 
   if (field.type === 'select') {
@@ -393,16 +400,39 @@ function ContentField({
   )
 }
 
+/**
+ * Companion content keys that hold an image field's intrinsic dimensions.
+ * Picking from the media library persists width/height alongside the URL so the
+ * public renderer can use the CLS-safe `next/image` path without waiting on
+ * read-time `/resolve` enrichment. Mirrors the keys the section renderers read:
+ *   `imageUrl` → `imageWidth` / `imageHeight`; `url` (gallery row) → `width` / `height`.
+ */
+export function companionDimensionKeys(fieldKey: string): { width: string; height: string } {
+  if (fieldKey === 'url') return { width: 'width', height: 'height' }
+  if (fieldKey.endsWith('Url')) {
+    const base = fieldKey.slice(0, -'Url'.length)
+    return { width: `${base}Width`, height: `${base}Height` }
+  }
+  return { width: `${fieldKey}Width`, height: `${fieldKey}Height` }
+}
+
 function MediaField({
   id,
   field,
   value,
   onChange,
+  onPatch,
 }: {
   id: string
   field: SectionFieldDef
   value: string
   onChange: (v: unknown) => void
+  /**
+   * When provided, picking from the library applies a multi-key patch (URL +
+   * intrinsic width/height) in one update. Falls back to `onChange` (URL only)
+   * for manual entry and when no patch sink is wired.
+   */
+  onPatch?: (patch: Record<string, unknown>) => void
 }) {
   const [open, setOpen] = useState(false)
   return (
@@ -434,8 +464,18 @@ function MediaField({
       <MediaPickerModal
         open={open}
         onClose={() => setOpen(false)}
+        onSelectItem={(item) => {
+          if (!onPatch) return
+          const { width: wKey, height: hKey } = companionDimensionKeys(field.key)
+          const patch: Record<string, unknown> = { [field.key]: item.url }
+          if (typeof item.width === 'number') patch[wKey] = item.width
+          if (typeof item.height === 'number') patch[hKey] = item.height
+          onPatch(patch)
+        }}
         onSelect={(url) => {
-          onChange(url)
+          // onSelectItem handles persistence when a patch sink is wired; only
+          // fall back to a URL-only update when it isn't.
+          if (!onPatch) onChange(url)
           setOpen(false)
         }}
         accept="image/*"
@@ -743,6 +783,7 @@ function SortableRepeaterRow({
             field={sub}
             value={row[sub.key]}
             onChange={(v) => onPatch({ [sub.key]: v })}
+            onPatch={(patch) => onPatch(patch)}
           />
         ))}
       </div>

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

@@ -0,0 +1,41 @@
+import { PlayCircle } from 'lucide-react'
+import { parseEmbed, EMBED_PROVIDER_LABEL } from '@actuate-media/cms-core/page-sections'
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+const RATIO_CLASS: Record<string, string> = {
+  '16:9': 'aspect-video',
+  '4:3': 'aspect-[4/3]',
+  '1:1': 'aspect-square',
+  '9:16': 'aspect-[9/16]',
+}
+
+/**
+ * Canvas body for the `embed` (video) section. Mirrors the public renderer's
+ * reserved aspect-ratio box, but shows a lightweight provider placeholder
+ * instead of loading the live external iframe inside the editor.
+ */
+export function EmbedSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const parsed = parseEmbed(str(c, 'url'))
+  const ratioClass = RATIO_CLASS[str(c, 'ratio', '16:9')] ?? RATIO_CLASS['16:9']
+  const title = str(c, 'title')
+  const caption = str(c, 'caption')
+
+  return (
+    <figure className="mx-auto max-w-3xl px-6">
+      <div
+        className={`relative flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-xl bg-zinc-100 text-zinc-500 ${ratioClass}`}
+      >
+        <PlayCircle className="h-10 w-10" aria-hidden />
+        <p className="text-sm font-medium text-zinc-700">
+          {parsed ? `${EMBED_PROVIDER_LABEL[parsed.provider]} video` : 'No valid video URL'}
+        </p>
+        {title && <p className="px-4 text-center text-xs text-zinc-500">{title}</p>}
+      </div>
+      {caption && (
+        <figcaption className="mt-2 text-center text-sm text-zinc-500">{caption}</figcaption>
+      )}
+    </figure>
+  )
+}

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

@@ -16,6 +16,7 @@ import { PullQuoteSection } from './PullQuoteSection.js'
 import { AuthorBioSection } from './AuthorBioSection.js'
 import { RelatedPostsSection } from './RelatedPostsSection.js'
 import { GallerySection } from './GallerySection.js'
+import { EmbedSection } from './EmbedSection.js'
 
 /**
  * Section types with a real canvas body component below. Anything else —
@@ -34,6 +35,7 @@ const CANVAS_RENDERED_TYPES: ReadonlySet<string> = new Set([
   'author-bio',
   'related-posts',
   'gallery',
+  'embed',
 ])
 
 /** True when the canvas renders this type for real (not as a placeholder). */
@@ -66,6 +68,8 @@ function SectionBody({ section, context }: { section: PageSection; context?: Pos
       return <RelatedPostsSection section={section} context={context} />
     case 'gallery':
       return <GallerySection section={section} />
+    case 'embed':
+      return <EmbedSection section={section} />
     default: {
       // Custom (config-declared) and unmanaged types: use a consumer-supplied
       // canvas renderer when one is registered (see admin-renderers.tsx).

package/src/views/seo/TechnicalTab.tsx

@@ -40,16 +40,6 @@ const CRAWL_TOGGLES: { key: keyof CrawlSettings; label: string; help: string }[]
     label: 'Include posts in sitemap',
     help: 'Add published posts to the sitemap.',
   },
-  {
-    key: 'noindexPaginatedArchives',
-    label: 'No-index paginated archives',
-    help: 'Avoid duplicate-content penalties on page 2+.',
-  },
-  {
-    key: 'noindexTagPages',
-    label: 'No-index tag pages',
-    help: 'Keep thin tag archives out of the index.',
-  },
 ]
 
 function Toggle({