@actuate-media/cms-admin 0.60.0 → 0.62.0

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

@@ -114,6 +114,13 @@ export function PageSectionEditor({
     )
   }, [config])
 
+  const publishCheck = useMemo(
+    () => (page ? validatePage(page, true) : { errors: [''], warnings: [] }),
+    [page],
+  )
+  const publishReady = Boolean(page) && publishCheck.errors.length === 0
+  const publishDisabledReason = publishCheck.errors[0]
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
@@ -463,6 +470,8 @@ export function PageSectionEditor({
           publishing={publishing}
           canEdit={effectiveCanEdit}
           canPublish={canPublish && effectiveCanEdit}
+          publishReady={publishReady}
+          publishDisabledReason={publishDisabledReason}
           viewport={viewport}
           onViewport={setViewport}
           onBack={() => guardedNavigate('/pages')}

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

@@ -17,6 +17,7 @@ import { AuthorBioSection } from './AuthorBioSection.js'
 import { RelatedPostsSection } from './RelatedPostsSection.js'
 import { GallerySection } from './GallerySection.js'
 import { EmbedSection } from './EmbedSection.js'
+import { WidgetEmbedSection } from './WidgetEmbedSection.js'
 
 /**
  * Section types with a real canvas body component below. Anything else —
@@ -36,6 +37,7 @@ const CANVAS_RENDERED_TYPES: ReadonlySet<string> = new Set([
   'related-posts',
   'gallery',
   'embed',
+  'widget-embed',
 ])
 
 /** True when the canvas renders this type for real (not as a placeholder). */
@@ -70,6 +72,8 @@ function SectionBody({ section, context }: { section: PageSection; context?: Pos
       return <GallerySection section={section} />
     case 'embed':
       return <EmbedSection section={section} />
+    case 'widget-embed':
+      return <WidgetEmbedSection 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/page-editor/sections/WidgetEmbedSection.tsx

@@ -0,0 +1,32 @@
+import { Puzzle } from 'lucide-react'
+import { parseWidgetEmbed, WIDGET_PROVIDER_LABEL } from '@actuate-media/cms-core/page-sections'
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+/**
+ * Canvas body for the `widget-embed` section. Shows a reserved-height placeholder
+ * instead of loading third-party scripts inside the editor.
+ */
+export function WidgetEmbedSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const parsed = parseWidgetEmbed(c)
+  const title = str(c, 'title')
+  const minHeight = parsed?.minHeightPx ?? 280
+
+  return (
+    <section className="mx-auto max-w-3xl px-6" aria-label={title || 'Third-party widget'}>
+      <div
+        className="bg-muted text-muted-foreground relative flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-xl"
+        style={{ minHeight: `${minHeight}px` }}
+      >
+        <Puzzle className="h-8 w-8" aria-hidden />
+        <p className="text-foreground text-sm font-medium">
+          {parsed
+            ? `${WIDGET_PROVIDER_LABEL[parsed.provider]} widget`
+            : 'Configure widget provider + ids'}
+        </p>
+        {title && <p className="text-muted-foreground px-4 text-center text-xs">{title}</p>}
+      </div>
+    </section>
+  )
+}

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

@@ -151,6 +151,13 @@ export function PostSectionEditor({
     )
   }, [config, postType])
 
+  const publishCheck = useMemo(
+    () => (post ? validatePost(post, true) : { errors: [''], warnings: [] }),
+    [post],
+  )
+  const publishReady = Boolean(post) && publishCheck.errors.length === 0
+  const publishDisabledReason = publishCheck.errors[0]
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
@@ -504,6 +511,8 @@ export function PostSectionEditor({
           publishing={publishing}
           canEdit={canEdit}
           canPublish={canPublish && canEdit}
+          publishReady={publishReady}
+          publishDisabledReason={publishDisabledReason}
           viewport={viewport}
           backLabel="Posts"
           onViewport={setViewport}

package/src/views/settings/SeoSettingsTab.tsx

@@ -126,6 +126,7 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
       <SettingsValidationSummary issues={seo.issues} />
 
       <MetaDefaultsCard seo={seo} canEdit={canEdit} />
+      <OrganizationCard seo={seo} canEdit={canEdit} />
       <SearchEngineVerificationCard seo={seo} canEdit={canEdit} />
       <SitemapDefaultsCard seo={seo} canEdit={canEdit} onNavigate={onNavigate} />
 
@@ -409,6 +410,150 @@ function SeoPreviewCard({
   )
 }
 
+// ---------------------------------------------------------------------------
+// Organization (Schema.org)
+// ---------------------------------------------------------------------------
+
+function OrganizationCard({ seo, canEdit }: { seo: UseSeoSettings; canEdit: boolean }) {
+  const nameId = useId()
+  const urlId = useId()
+  const sameAsId = useId()
+  const [pickerOpen, setPickerOpen] = useState(false)
+
+  const { form, setField, issues, sources, siteName, siteUrl } = seo
+  const nameIssue = issues.find((i) => i.field === 'organizationName')
+  const urlIssue = issues.find((i) => i.field === 'organizationUrl')
+  const logoIssue = issues.find((i) => i.field === 'organizationLogo')
+  const sameAsIssue = issues.find((i) => i.field === 'organizationSameAs')
+
+  const nameEditable = sources.organizationName?.editable !== false && canEdit
+  const urlEditable = sources.organizationUrl?.editable !== false && canEdit
+  const logoEditable = sources.organizationLogo?.editable !== false && canEdit
+  const sameAsEditable = sources.organizationSameAs?.editable !== false && canEdit
+
+  return (
+    <SettingsCard
+      title="Organization"
+      description="Schema.org Organization data injected sitewide in JSON-LD. Logo and social profiles should use absolute production URLs."
+    >
+      <div className="space-y-4">
+        <div>
+          <label htmlFor={nameId} className={LABEL_CLASS}>
+            Organization name
+            <SettingsSourceBadge meta={sources.organizationName} />
+          </label>
+          <input
+            id={nameId}
+            type="text"
+            value={form.organizationName}
+            disabled={!nameEditable}
+            placeholder={siteName || 'Your organization'}
+            onChange={(e) => setField('organizationName', e.target.value)}
+            className={INPUT_CLASS}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">Falls back to site name when empty.</p>
+          {nameIssue && <p className="text-destructive mt-1 text-sm">{nameIssue.message}</p>}
+        </div>
+
+        <div>
+          <label htmlFor={urlId} className={LABEL_CLASS}>
+            Organization URL
+            <SettingsSourceBadge meta={sources.organizationUrl} />
+          </label>
+          <input
+            id={urlId}
+            type="url"
+            value={form.organizationUrl}
+            disabled={!urlEditable}
+            placeholder={siteUrl || 'https://example.com'}
+            aria-invalid={urlIssue?.severity === 'error'}
+            onChange={(e) => setField('organizationUrl', e.target.value)}
+            className={INPUT_CLASS}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">
+            Canonical organization homepage. Falls back to site URL when empty.
+          </p>
+          {urlIssue && <p className="text-destructive mt-1 text-sm">{urlIssue.message}</p>}
+        </div>
+
+        <div>
+          <span className={LABEL_CLASS}>
+            Organization logo
+            <SettingsSourceBadge meta={sources.organizationLogo} />
+          </span>
+          <div className="flex items-center gap-3">
+            <div className="border-border bg-muted flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border">
+              {form.organizationLogo ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={form.organizationLogo}
+                  alt="Organization logo preview"
+                  className="h-full w-full object-contain p-1"
+                />
+              ) : (
+                <ImageIcon size={20} className="text-muted-foreground" aria-hidden="true" />
+              )}
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => setPickerOpen(true)}
+                  disabled={!logoEditable}
+                  className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+                >
+                  <Upload size={14} aria-hidden="true" />
+                  {form.organizationLogo ? 'Replace logo' : 'Choose logo'}
+                </button>
+                {form.organizationLogo && logoEditable && (
+                  <button
+                    type="button"
+                    onClick={() => setField('organizationLogo', '')}
+                    className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors"
+                  >
+                    <X size={14} aria-hidden="true" />
+                    Remove
+                  </button>
+                )}
+              </div>
+              <p className="text-muted-foreground text-sm">Square PNG or SVG recommended.</p>
+            </div>
+          </div>
+          {logoIssue && <p className="text-destructive mt-1 text-sm">{logoIssue.message}</p>}
+        </div>
+
+        <div>
+          <label htmlFor={sameAsId} className={LABEL_CLASS}>
+            Social profiles (sameAs)
+            <SettingsSourceBadge meta={sources.organizationSameAs} />
+          </label>
+          <textarea
+            id={sameAsId}
+            rows={4}
+            value={form.organizationSameAs}
+            disabled={!sameAsEditable}
+            placeholder={'https://linkedin.com/company/your-brand\nhttps://twitter.com/your-brand'}
+            aria-invalid={sameAsIssue?.severity === 'error'}
+            onChange={(e) => setField('organizationSameAs', e.target.value)}
+            className={`${INPUT_CLASS} resize-y font-mono text-sm`}
+          />
+          <p className="text-muted-foreground mt-1 text-sm">
+            One HTTPS profile URL per line (LinkedIn, X, Facebook, YouTube, etc.).
+          </p>
+          {sameAsIssue && <p className="text-destructive mt-1 text-sm">{sameAsIssue.message}</p>}
+        </div>
+      </div>
+
+      <MediaPickerModal
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+        accept="image/*"
+        onSelect={(url) => setField('organizationLogo', url)}
+      />
+    </SettingsCard>
+  )
+}
+
 // ---------------------------------------------------------------------------
 // Search Engine Verification
 // ---------------------------------------------------------------------------

package/src/views/settings/useSeoSettings.ts

@@ -39,6 +39,14 @@ export interface SeoSettingsForm {
   autoGenerateSitemap: boolean
   /** Notify Google/Bing when the sitemap changes (`module`). */
   pingOnPublish: boolean
+  /** Schema.org Organization name (falls back to site name when empty). */
+  organizationName: string
+  /** Canonical organization URL (falls back to site URL when empty). */
+  organizationUrl: string
+  /** Absolute logo URL for Organization JSON-LD. */
+  organizationLogo: string
+  /** Social profile URLs, one per line (`sameAs`). */
+  organizationSameAs: string
 }
 
 export interface SitemapSummary {
@@ -61,6 +69,10 @@ const EMPTY_FORM: SeoSettingsForm = {
   facebookDomainVerification: '',
   autoGenerateSitemap: true,
   pingOnPublish: true,
+  organizationName: '',
+  organizationUrl: '',
+  organizationLogo: '',
+  organizationSameAs: '',
 }
 
 /** Recommended max length for the default meta description (SERP truncation). */
@@ -93,6 +105,31 @@ export function validateTitleTemplateClient(template: string): {
   return { valid: true, unknownTokens: [] }
 }
 
+function parseSameAsLines(raw: string): string[] {
+  return raw
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean)
+}
+
+function validateUrlField(
+  value: string,
+  field: keyof SeoSettingsForm,
+  label: string,
+): ValidationIssue[] {
+  const trimmed = value.trim()
+  if (!trimmed) return []
+  try {
+    const u = new URL(trimmed)
+    if (u.protocol !== 'https:' && u.protocol !== 'http:') {
+      return [{ field, message: `${label} must use http:// or https://`, severity: 'error' }]
+    }
+  } catch {
+    return [{ field, message: `${label} is not a valid URL.`, severity: 'error' }]
+  }
+  return []
+}
+
 function validate(form: SeoSettingsForm): ValidationIssue[] {
   const issues: ValidationIssue[] = []
   const tpl = validateTitleTemplateClient(form.titleTemplate)
@@ -122,6 +159,11 @@ function validate(form: SeoSettingsForm): ValidationIssue[] {
       severity: 'warning',
     })
   }
+  issues.push(...validateUrlField(form.organizationUrl, 'organizationUrl', 'Organization URL'))
+  issues.push(...validateUrlField(form.organizationLogo, 'organizationLogo', 'Organization logo'))
+  for (const url of parseSameAsLines(form.organizationSameAs)) {
+    issues.push(...validateUrlField(url, 'organizationSameAs', 'Social profile URL'))
+  }
   return issues
 }
 
@@ -192,6 +234,7 @@ export function useSeoSettings(canEdit: boolean): UseSeoSettings {
         const staticSite = seo.static?.site ?? {}
         const overSite = seo.overrides?.site ?? {}
         const verification = effectiveSite.verification ?? {}
+        const organization = effectiveSite.organization ?? {}
         const crawl = crawlRes.data ?? {}
 
         const loaded: SeoSettingsForm = {
@@ -206,6 +249,14 @@ export function useSeoSettings(canEdit: boolean): UseSeoSettings {
           facebookDomainVerification: String(verification.facebookDomain ?? ''),
           autoGenerateSitemap: crawl.autoRegenerateSitemapOnPublish !== false,
           pingOnPublish: crawl.pingSearchEnginesOnPublish !== false,
+          organizationName: String(organization.name ?? ''),
+          organizationUrl: String(organization.url ?? ''),
+          organizationLogo: String(organization.logo ?? ''),
+          organizationSameAs: Array.isArray(organization.sameAs)
+            ? (organization.sameAs as unknown[])
+                .filter((u): u is string => typeof u === 'string')
+                .join('\n')
+            : '',
         }
 
         // `editable` reflects the field's MANAGEMENT source (config vs database),
@@ -216,11 +267,19 @@ export function useSeoSettings(canEdit: boolean): UseSeoSettings {
           staticSite[key]
             ? { source: 'config', editable: false, reason: 'Set in actuate.config.ts' }
             : { source: 'database', editable: true }
+        const orgConfigManaged = (): SettingsSourceMetadata =>
+          staticSite.organization
+            ? { source: 'config', editable: false, reason: 'Set in actuate.config.ts' }
+            : { source: 'database', editable: true }
 
         setSources({
           titleTemplate: configManaged('titleTemplate'),
           defaultMetaDescription: configManaged('defaultMetaDescription'),
           defaultOgImage: configManaged('defaultOgImage'),
+          organizationName: orgConfigManaged(),
+          organizationUrl: orgConfigManaged(),
+          organizationLogo: orgConfigManaged(),
+          organizationSameAs: orgConfigManaged(),
           verification: { source: 'database', editable: true },
           sitemap: { source: 'database', editable: true },
         })
@@ -279,7 +338,11 @@ export function useSeoSettings(canEdit: boolean): UseSeoSettings {
       form.bingVerification !== baseline.bingVerification ||
       form.yandexVerification !== baseline.yandexVerification ||
       form.pinterestVerification !== baseline.pinterestVerification ||
-      form.facebookDomainVerification !== baseline.facebookDomainVerification
+      form.facebookDomainVerification !== baseline.facebookDomainVerification ||
+      form.organizationName !== baseline.organizationName ||
+      form.organizationUrl !== baseline.organizationUrl ||
+      form.organizationLogo !== baseline.organizationLogo ||
+      form.organizationSameAs !== baseline.organizationSameAs
     const sitemapChanged =
       form.autoGenerateSitemap !== baseline.autoGenerateSitemap ||
       form.pingOnPublish !== baseline.pingOnPublish
@@ -302,6 +365,16 @@ export function useSeoSettings(canEdit: boolean): UseSeoSettings {
             pinterest: form.pinterestVerification.trim() || undefined,
             facebookDomain: form.facebookDomainVerification.trim() || undefined,
           },
+          organization: {
+            ...(overrideSite.organization ?? {}),
+            name: form.organizationName.trim() || undefined,
+            url: form.organizationUrl.trim() || undefined,
+            logo: form.organizationLogo.trim() || undefined,
+            sameAs: (() => {
+              const urls = parseSameAsLines(form.organizationSameAs)
+              return urls.length > 0 ? urls : undefined
+            })(),
+          },
         }
         const res = await cmsApi('/seo/config', {
           method: 'PUT',