@actuate-media/cms-admin 0.49.4 → 0.51.0

package/src/components/seo/SeoEditorDrawer.tsx

@@ -9,6 +9,7 @@ import {
   generateSeoField,
   type SeoContentRecord,
   type SeoFieldPayload,
+  type LlmsInclude,
 } from '../../lib/seo-service.js'
 import { Drawer } from './Drawer.js'
 import { SeoLoading, SeoErrorState, btnPrimary, btnSecondary, gradeMeta } from './primitives.js'
@@ -16,7 +17,16 @@ import { SeoLoading, SeoErrorState, btnPrimary, btnSecondary, gradeMeta } from '
 const META_TITLE_MAX = 60
 const META_DESC_MAX = 160
 
-type AiField = 'metaTitle' | 'metaDescription' | 'ogTitle' | 'ogDescription' | 'focusKeyword'
+type AiField =
+  | 'metaTitle'
+  | 'metaDescription'
+  | 'ogTitle'
+  | 'ogDescription'
+  | 'focusKeyword'
+  | 'keyTakeaway'
+
+const KEY_TAKEAWAY_MAX = 240
+const LLMS_DESC_MAX = 160
 
 function CharCount({ value, max }: { value: string; max: number }) {
   const over = value.length > max
@@ -100,10 +110,15 @@ export function SeoEditorDrawer({
           metaDescription: rec.metaDescription ?? '',
           canonicalUrl: rec.canonicalUrl ?? '',
           focusKeyword: rec.focusKeyword ?? '',
+          keyTakeaway: rec.keyTakeaway ?? '',
           ogTitle: rec.ogTitle ?? '',
           ogDescription: rec.ogDescription ?? '',
           noindex: rec.noindex,
           nofollow: rec.nofollow,
+          llmsInclude: rec.llmsInclude ?? 'AUTO',
+          llmsDescription: rec.llmsDescription ?? '',
+          llmsSection: rec.llmsSection ?? '',
+          llmsOptional: rec.llmsOptional ?? false,
         })
       })
       .catch((e) => alive && setError(e instanceof Error ? e.message : 'Failed to load'))
@@ -248,6 +263,23 @@ export function SeoEditorDrawer({
             />
           </Field>
 
+          <Field
+            label="Key takeaway"
+            hint={
+              <span className="flex items-center gap-2">
+                <CharCount value={form.keyTakeaway ?? ''} max={KEY_TAKEAWAY_MAX} />
+                {aiButton('keyTakeaway')}
+              </span>
+            }
+          >
+            <textarea
+              className={`${inputCls} min-h-16 resize-y`}
+              value={form.keyTakeaway ?? ''}
+              onChange={(e) => update({ keyTakeaway: e.target.value })}
+              placeholder="One or two sentences AI answer engines can quote — what is this page about?"
+            />
+          </Field>
+
           <Field label="Canonical URL">
             <input
               className={inputCls}
@@ -339,6 +371,67 @@ export function SeoEditorDrawer({
             </label>
           </div>
 
+          {/* llms.txt curation */}
+          <div className="border-border space-y-4 rounded-lg border p-4">
+            <div>
+              <p className="text-foreground text-sm font-medium">AI discovery (llms.txt)</p>
+              <p className="text-muted-foreground text-sm">
+                Controls how this page appears in the curated <code>llms.txt</code> guide that AI
+                agents read. It does not affect search ranking.
+              </p>
+            </div>
+            <Field label="Include in llms.txt">
+              <select
+                className={inputCls}
+                value={form.llmsInclude ?? 'AUTO'}
+                onChange={(e) => update({ llmsInclude: e.target.value as LlmsInclude })}
+              >
+                <option value="AUTO">Auto — include when eligible</option>
+                <option value="ALWAYS">Always — pin it in</option>
+                <option value="NEVER">Never — exclude</option>
+              </select>
+            </Field>
+            <Field
+              label="Agent description"
+              hint={<CharCount value={form.llmsDescription ?? ''} max={LLMS_DESC_MAX} />}
+            >
+              <textarea
+                className={`${inputCls} min-h-16 resize-y`}
+                value={form.llmsDescription ?? ''}
+                onChange={(e) => update({ llmsDescription: e.target.value })}
+                placeholder={
+                  form.keyTakeaway ||
+                  form.metaDescription ||
+                  'One line for an AI agent — what this page covers and why it matters.'
+                }
+              />
+            </Field>
+            <Field label="Section">
+              <input
+                className={inputCls}
+                value={form.llmsSection ?? ''}
+                onChange={(e) => update({ llmsSection: e.target.value })}
+                placeholder="Defaults to the content type"
+              />
+            </Field>
+            <label className="flex items-center justify-between gap-3">
+              <span className="min-w-0">
+                <span className="text-foreground block text-sm font-medium">Optional</span>
+                <span className="text-muted-foreground block text-sm">
+                  Group under “Optional” — agents skip these first when context is tight.
+                </span>
+              </span>
+              <input
+                type="checkbox"
+                role="switch"
+                aria-checked={!!form.llmsOptional}
+                checked={!!form.llmsOptional}
+                onChange={(e) => update({ llmsOptional: e.target.checked })}
+                className="accent-primary h-4 w-4"
+              />
+            </label>
+          </div>
+
           {/* Score summary */}
           {(() => {
             const meta = gradeMeta(record.seoGrade)

package/src/fields/SlugField.tsx

@@ -11,11 +11,15 @@ export interface SlugFieldProps {
   helpText?: string
 }
 
+// Mirrors `normalizeSlug` in @actuate-media/cms-core so the live-edited value
+// matches what the server will accept (lowercase alphanumerics + single
+// hyphens; underscores and other punctuation are collapsed to hyphens).
 function toSlug(text: string): string {
   return text
     .toLowerCase()
-    .replace(/[^\w\s-]/g, '')
-    .replace(/[\s_]+/g, '-')
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
     .replace(/^-+|-+$/g, '')
 }
 

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

@@ -33,6 +33,7 @@ import {
   validateSectionContent,
   type PageSection,
 } from '@actuate-media/cms-core/page-sections'
+import { validateSlug } from '@actuate-media/cms-core/client'
 
 import { missingCollectionFields } from './collection-schema.js'
 
@@ -108,6 +109,11 @@ export function validatePage(page: EditorPage, forPublish = false): ValidationRe
   if (isBlank(page.title)) errors.push('Page title is required.')
   if (isBlank(page.path)) errors.push('Page path is required.')
 
+  // Mirror the server publish gate so an invalid/reserved slug surfaces in the
+  // validation summary rather than only as a toast after the publish attempt.
+  const slugError = validateSlug(page.slug)
+  if (slugError) errors.push(slugError)
+
   if (forPublish) {
     const visible = page.sections.filter((s) => s.visible)
     if (visible.length === 0) {

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

@@ -41,6 +41,7 @@ import {
   type PageSection,
   type PostHeaderConfig,
 } from '@actuate-media/cms-core/page-sections'
+import { validateSlug } from '@actuate-media/cms-core/client'
 
 export type { PageSection, PostHeaderConfig } from '@actuate-media/cms-core/page-sections'
 
@@ -139,6 +140,11 @@ export function validatePost(post: EditorPost, forPublish = false): ValidationRe
   if (isBlank(post.title)) errors.push('Post title is required.')
   if (isBlank(post.slug)) errors.push('Post slug is required.')
 
+  // Mirror the server publish gate so an invalid/reserved slug surfaces in the
+  // validation summary rather than only as a toast after the publish attempt.
+  const slugError = validateSlug(post.slug)
+  if (slugError) errors.push(slugError)
+
   if (forPublish) {
     const visible = post.sections.filter((s) => s.visible)
     // Unmanaged (externally-managed) sections have no registered field schema,

package/src/lib/seo-service.ts

@@ -150,6 +150,7 @@ export interface SeoContentRecord {
   metaTitle: string | null
   metaDescription: string | null
   focusKeyword: string | null
+  keyTakeaway: string | null
   ogTitle: string | null
   ogDescription: string | null
   ogImageId: string | null
@@ -161,11 +162,21 @@ export interface SeoContentRecord {
   nofollow: boolean
   structuredDataType: string | null
   structuredData: Record<string, unknown> | null
+  /** llms.txt curation: AUTO (heuristic), ALWAYS (pin), NEVER (exclude). */
+  llmsInclude: LlmsInclude
+  /** Curated agent-facing description for llms.txt (overrides the fallback). */
+  llmsDescription: string | null
+  /** Section/grouping override in llms.txt (defaults to the collection). */
+  llmsSection: string | null
+  /** Route this entry into the reserved `## Optional` section. */
+  llmsOptional: boolean
   seoScore: number
   seoGrade: SeoGrade
   updatedAt: string | null
 }
 
+export type LlmsInclude = 'AUTO' | 'ALWAYS' | 'NEVER'
+
 export type ContentSeoFilter = 'all' | 'pages' | 'posts'
 
 export async function fetchSeoContentRecords(): Promise<SeoContentRecord[]> {
@@ -190,6 +201,7 @@ export interface SeoFieldPayload {
   metaDescription?: string
   canonicalUrl?: string
   focusKeyword?: string
+  keyTakeaway?: string
   ogTitle?: string
   ogDescription?: string
   ogImage?: string
@@ -200,6 +212,10 @@ export interface SeoFieldPayload {
   nofollow?: boolean
   structuredDataType?: string
   structuredData?: Record<string, unknown>
+  llmsInclude?: LlmsInclude
+  llmsDescription?: string
+  llmsSection?: string
+  llmsOptional?: boolean
 }
 
 export async function updateSeoFields(
@@ -620,7 +636,13 @@ function isAiUnavailable(status?: number): boolean {
 }
 
 export async function generateSeoField(
-  field: 'metaTitle' | 'metaDescription' | 'ogTitle' | 'ogDescription' | 'focusKeyword',
+  field:
+    | 'metaTitle'
+    | 'metaDescription'
+    | 'ogTitle'
+    | 'ogDescription'
+    | 'focusKeyword'
+    | 'keyTakeaway',
   context: { entityType: string; entityId: string },
 ): Promise<SeoAiResult> {
   const res = await cmsApi<SeoAiResult>('/ai/seo/generate-field', {

package/src/views/DocumentEdit.tsx

@@ -114,6 +114,7 @@ export function DocumentEdit({
     'metaTitle',
     'metaDescription',
     'focusKeyphrase',
+    'keyTakeaway',
     'canonical',
     'robotsPolicy',
     'noIndex',

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

@@ -1,10 +1,17 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
+import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 import type { EditorPage } from '../../lib/page-editor-service.js'
 
+const SEO_TITLE_MIN = 30
+const SEO_TITLE_MAX = 60
+const SEO_DESC_MIN = 120
+const SEO_DESC_MAX = 160
+
 interface PageSettingsModalProps {
   open: boolean
   page: EditorPage
@@ -17,13 +24,7 @@ const LABEL = 'text-foreground mb-1 block text-xs font-medium'
 const INPUT =
   'border-input 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'
 
-function slugify(value: string): string {
-  return value
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-}
+const slugify = normalizeSlug
 
 /** Edits page-level fields: title, slug, path, and SEO. */
 export function PageSettingsModal({
@@ -60,7 +61,10 @@ export function PageSettingsModal({
     }
   }
 
+  const slugError = validateSlug(slug)
+
   function handleSave() {
+    if (slugError) return
     onSave({ title, slug, path: path || (slug ? `/${slug}` : '/'), seoTitle, seoDescription })
     onClose()
   }
@@ -75,7 +79,7 @@ export function PageSettingsModal({
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
-          <Button variant="primary" onClick={handleSave} disabled={!canEdit}>
+          <Button variant="primary" onClick={handleSave} disabled={!canEdit || Boolean(slugError)}>
             Done
           </Button>
         </>
@@ -104,11 +108,18 @@ export function PageSettingsModal({
               className={INPUT}
               value={slug}
               disabled={!canEdit}
+              aria-invalid={Boolean(slugError)}
+              aria-describedby={slugError ? 'ps-slug-error' : undefined}
               onChange={(e) => {
                 setSlugTouched(true)
                 setSlug(slugify(e.target.value))
               }}
             />
+            {slugError && (
+              <p id="ps-slug-error" className="text-destructive mt-1 text-xs">
+                {slugError}
+              </p>
+            )}
           </div>
           <div>
             <label className={LABEL} htmlFor="ps-path">
@@ -125,26 +136,34 @@ export function PageSettingsModal({
           </div>
         </div>
         <div>
-          <label className={LABEL} htmlFor="ps-seo-title">
-            SEO title
-          </label>
+          <div className="mb-1 flex items-center justify-between">
+            <label className={`${LABEL} mb-0`} htmlFor="ps-seo-title">
+              SEO title
+            </label>
+            <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
+          </div>
           <input
             id="ps-seo-title"
             className={INPUT}
             value={seoTitle}
             disabled={!canEdit}
+            placeholder={title || 'Defaults to the page title'}
             onChange={(e) => setSeoTitle(e.target.value)}
           />
         </div>
         <div>
-          <label className={LABEL} htmlFor="ps-seo-desc">
-            SEO description
-          </label>
+          <div className="mb-1 flex items-center justify-between">
+            <label className={`${LABEL} mb-0`} htmlFor="ps-seo-desc">
+              SEO description
+            </label>
+            <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
+          </div>
           <textarea
             id="ps-seo-desc"
             className={`${INPUT} min-h-[64px] resize-y`}
             value={seoDescription}
             disabled={!canEdit}
+            placeholder="Summarize the page for search results (120–160 characters)"
             onChange={(e) => setSeoDescription(e.target.value)}
           />
         </div>

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

@@ -1,13 +1,20 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { TagInput } from '../../components/TagInput.js'
 import { RichTextField } from '../../fields/RichTextField.js'
+import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
+const SEO_TITLE_MIN = 30
+const SEO_TITLE_MAX = 60
+const SEO_DESC_MIN = 120
+const SEO_DESC_MAX = 160
+
 /**
  * The slice of a collection's field config the modal reads to pick controls:
  * a `select` category renders a dropdown (structured vocabulary), an `array`
@@ -33,13 +40,7 @@ const LABEL = 'text-foreground mb-1 block text-xs font-medium'
 const INPUT =
   'border-input 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'
 
-function slugify(value: string): string {
-  return value
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-}
+const slugify = normalizeSlug
 
 /** Edits post-level fields: title, slug, excerpt, featured image, category, tags, body, SEO. */
 export function PostFieldsModal({
@@ -89,7 +90,10 @@ export function PostFieldsModal({
     if (!slugTouched) setSlug(slugify(next))
   }
 
+  const slugError = validateSlug(slug)
+
   function handleSave() {
+    if (slugError) return
     onSave({ title, slug, excerpt, featuredImage, category, tags, body, seoTitle, seoDescription })
     onClose()
   }
@@ -104,7 +108,7 @@ export function PostFieldsModal({
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
-          <Button variant="primary" onClick={handleSave} disabled={!canEdit}>
+          <Button variant="primary" onClick={handleSave} disabled={!canEdit || Boolean(slugError)}>
             Done
           </Button>
         </>
@@ -133,11 +137,18 @@ export function PostFieldsModal({
               className={INPUT}
               value={slug}
               disabled={!canEdit}
+              aria-invalid={Boolean(slugError)}
+              aria-describedby={slugError ? 'pf-slug-error' : undefined}
               onChange={(e) => {
                 setSlugTouched(true)
                 setSlug(slugify(e.target.value))
               }}
             />
+            {slugError && (
+              <p id="pf-slug-error" className="text-destructive mt-1 text-xs">
+                {slugError}
+              </p>
+            )}
           </div>
           <div>
             <label className={LABEL} htmlFor="pf-category">
@@ -241,26 +252,34 @@ export function PostFieldsModal({
           />
         </div>
         <div>
-          <label className={LABEL} htmlFor="pf-seo-title">
-            SEO title
-          </label>
+          <div className="mb-1 flex items-center justify-between">
+            <label className={`${LABEL} mb-0`} htmlFor="pf-seo-title">
+              SEO title
+            </label>
+            <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
+          </div>
           <input
             id="pf-seo-title"
             className={INPUT}
             value={seoTitle}
             disabled={!canEdit}
+            placeholder={title || 'Defaults to the post title'}
             onChange={(e) => setSeoTitle(e.target.value)}
           />
         </div>
         <div>
-          <label className={LABEL} htmlFor="pf-seo-desc">
-            SEO description
-          </label>
+          <div className="mb-1 flex items-center justify-between">
+            <label className={`${LABEL} mb-0`} htmlFor="pf-seo-desc">
+              SEO description
+            </label>
+            <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
+          </div>
           <textarea
             id="pf-seo-desc"
             className={`${INPUT} min-h-[60px] resize-y`}
             value={seoDescription}
             disabled={!canEdit}
+            placeholder={excerpt || 'Summarize the post for search results (120–160 characters)'}
             onChange={(e) => setSeoDescription(e.target.value)}
           />
         </div>