@actuate-media/cms-admin 0.49.3 → 0.50.0

package/src/views/Dashboard.tsx

@@ -584,7 +584,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           consistent across navigation. The on-page secondary action row
           below covers the same creation paths plus authoring shortcuts. */}
       <div className="flex flex-col gap-1 sm:gap-0.5">
-        <h1 className="text-foreground text-xl font-semibold tracking-tight sm:text-2xl">
+        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">
           {greeting}, {userName} <span aria-hidden>👋</span>
         </h1>
         <p className="text-muted-foreground text-sm">
@@ -623,7 +623,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 <card.icon className={`h-4 w-4 ${card.iconColor}`} />
               </div>
               <div className="flex items-baseline gap-1">
-                <span className="text-foreground text-2xl leading-none font-semibold tracking-tight">
+                <span className="text-foreground text-2xl leading-none font-medium tracking-tight">
                   {card.value}
                 </span>
                 {card.unit && (
@@ -664,7 +664,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
           <header className="border-border flex items-center justify-between border-b px-4 py-3">
             <div className="min-w-0">
-              <h2 className="text-foreground text-sm font-semibold">Recent Activity</h2>
+              <h2 className="text-foreground text-sm font-medium">Recent Activity</h2>
               <p className="text-muted-foreground mt-0.5 text-xs">Last 7 days across all content</p>
             </div>
             {(stats?.recentDocuments?.length ?? 0) > 8 && (
@@ -693,7 +693,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                   >
                     <div className="flex min-w-0 items-start gap-3">
                       <div
-                        className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
+                        className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-medium text-white"
                         style={{ background: it.avatar.color }}
                         aria-hidden
                       >
@@ -701,7 +701,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       </div>
                       <div className="min-w-0 flex-1">
                         <p className="text-foreground truncate text-sm leading-snug">
-                          <span className="font-semibold">
+                          <span className="font-medium">
                             &ldquo;{it.title || 'Untitled'}&rdquo;
                           </span>{' '}
                           <span className="text-muted-foreground">— {it.typeLabel}</span>
@@ -731,7 +731,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
             <header className="border-border flex items-center justify-between border-b px-4 py-3">
               <div className="min-w-0">
-                <h2 className="text-foreground text-sm font-semibold">Publishing Queue</h2>
+                <h2 className="text-foreground text-sm font-medium">Publishing Queue</h2>
                 <p className="text-muted-foreground mt-0.5 text-xs">
                   {publishQueue.length} item{publishQueue.length === 1 ? '' : 's'} scheduled
                 </p>
@@ -787,7 +787,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
             <header className="border-border flex items-center justify-between border-b px-4 py-3">
               <div className="min-w-0">
-                <h2 className="text-foreground text-sm font-semibold">Content Health</h2>
+                <h2 className="text-foreground text-sm font-medium">Content Health</h2>
                 <p className="text-muted-foreground mt-0.5 text-xs">SEO &amp; quality issues</p>
               </div>
               <button
@@ -799,7 +799,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             </header>
             <div className="px-4 pt-3.5 pb-2.5">
               <div className="mb-1.5 flex items-baseline justify-between">
-                <p className="text-foreground text-2xl leading-none font-semibold tracking-tight">
+                <p className="text-foreground text-2xl leading-none font-medium tracking-tight">
                   {contentHealth.score > 0 ? contentHealth.score : '—'}
                   {contentHealth.score > 0 && (
                     <span className="text-muted-foreground ml-0.5 text-sm font-normal">/100</span>
@@ -861,7 +861,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                         {iss.label}
                       </span>
                       <span
-                        className={`shrink-0 text-sm font-semibold ${
+                        className={`shrink-0 text-sm font-medium ${
                           iss.tone === 'err'
                             ? 'text-red-600 dark:text-red-400'
                             : iss.tone === 'warn'
@@ -892,7 +892,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
         <header className="border-border flex items-center justify-between border-b px-4 py-3">
           <div className="min-w-0">
-            <h2 className="text-foreground text-sm font-semibold">Delivery API</h2>
+            <h2 className="text-foreground text-sm font-medium">Delivery API</h2>
             <p className="text-muted-foreground mt-0.5 text-xs">
               Headless content delivery · last 24 hours
             </p>
@@ -1030,7 +1030,7 @@ function EmptyState({
       className={`flex flex-col items-center justify-center gap-1.5 text-center ${compact ? 'px-4 py-6' : 'px-6 py-10'}`}
     >
       <Icon className="text-muted-foreground/50 mb-1 h-7 w-7" aria-hidden />
-      <p className="text-foreground text-sm font-semibold">{title}</p>
+      <p className="text-foreground text-sm font-medium">{title}</p>
       <p className="text-muted-foreground max-w-xs text-xs">{subtitle}</p>
     </div>
   )
@@ -1065,7 +1065,7 @@ function DeliveryTile({
         <Icon className="h-3.5 w-3.5" aria-hidden />
         <span className="text-[11px] font-medium">{label}</span>
       </div>
-      <p className="text-foreground text-xl leading-tight font-semibold tracking-tight">{value}</p>
+      <p className="text-foreground text-xl leading-tight font-medium tracking-tight">{value}</p>
       {sub && (
         <p className={`mt-0.5 inline-flex items-center gap-1 text-[11px] ${subTone}`}>
           {SubIcon && <SubIcon className="h-3 w-3 shrink-0" aria-hidden />}

package/src/views/DocumentEdit.tsx

@@ -114,6 +114,7 @@ export function DocumentEdit({
     'metaTitle',
     'metaDescription',
     'focusKeyphrase',
+    'keyTakeaway',
     'canonical',
     'robotsPolicy',
     'noIndex',
@@ -308,7 +309,7 @@ export function DocumentEdit({
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <h1 className="text-2xl font-bold">{displayTitle}</h1>
+          <h1 className="text-2xl font-medium">{displayTitle}</h1>
           <span
             className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor}`}
           >
@@ -384,7 +385,7 @@ export function DocumentEdit({
 
               <div className="space-y-6">
                 <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
-                  <h3 className="mb-4 font-semibold">Status</h3>
+                  <h3 className="mb-4 font-medium">Status</h3>
                   <div className="space-y-3">
                     {!isNew && docStatus === 'DRAFT' && (
                       <Button
@@ -436,7 +437,7 @@ export function DocumentEdit({
 
                 {sidebarFields.length > 0 && (
                   <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
-                    <h3 className="mb-4 font-semibold">Metadata</h3>
+                    <h3 className="mb-4 font-medium">Metadata</h3>
                     {sidebarFields.map((field: any) => (
                       <div key={field.name} className="mb-4">
                         <FieldRenderer
@@ -460,7 +461,7 @@ export function DocumentEdit({
 
                 {hasLayout && (
                   <div className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
-                    <h3 className="mb-1 font-semibold">Layout</h3>
+                    <h3 className="mb-1 font-medium">Layout</h3>
                     <p className="mb-4 text-xs text-[var(--muted-foreground)]">
                       Assign header/footer variants. Child pages inherit from ancestors.
                     </p>

package/src/views/ForgotPassword.tsx

@@ -48,7 +48,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
           <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600">
             <Shield className="h-7 w-7 text-white" />
           </div>
-          <h1 className="text-2xl font-bold text-gray-900">Reset Password</h1>
+          <h1 className="text-2xl font-medium text-gray-900">Reset Password</h1>
           <p className="mt-2 text-gray-600">
             {sent
               ? 'Check your inbox for a reset link'

package/src/views/FormEditor.tsx

@@ -191,9 +191,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
           <ArrowLeft className="h-5 w-5 text-gray-600" />
         </button>
         <div className="flex-1">
-          <h1 className="text-xl font-semibold text-gray-900">
-            {isNew ? 'New Form' : 'Edit Form'}
-          </h1>
+          <h1 className="text-xl font-medium text-gray-900">{isNew ? 'New Form' : 'Edit Form'}</h1>
         </div>
         <button
           onClick={handleSave}

package/src/views/Login.tsx

@@ -393,7 +393,7 @@ export function Login({
             ) : (
               <ActuateBrandLogo className="mx-auto mb-4 h-14 w-auto" />
             ))}
-          <h1 className="text-2xl font-bold text-gray-900">{brandName}</h1>
+          <h1 className="text-2xl font-medium text-gray-900">{brandName}</h1>
           <p className="mt-2 text-gray-600">{brandTagline}</p>
         </div>
 
@@ -403,7 +403,7 @@ export function Login({
             className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
           >
             <div>
-              <h2 className="text-lg font-semibold text-gray-900">Two-factor authentication</h2>
+              <h2 className="text-lg font-medium text-gray-900">Two-factor authentication</h2>
               <p className="mt-1 text-sm text-gray-600">
                 {useBackupCode
                   ? 'Enter one of your one-time backup codes.'

package/src/views/MediaBrowser.tsx

@@ -411,9 +411,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
             <FolderInput className="text-muted-foreground h-5 w-5" />
           </button>
           <div>
-            <h1 className="text-foreground mb-1 text-xl font-semibold sm:text-2xl">
-              Media Library
-            </h1>
+            <h1 className="text-foreground mb-1 text-xl font-medium sm:text-2xl">Media Library</h1>
             <p className="text-muted-foreground text-sm">{filteredAndSorted.length} files</p>
           </div>
         </div>
@@ -745,7 +743,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
               {panelOpen && activeItem && (
                 <div className="border-border bg-card flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border lg:w-96">
                   <div className="border-border bg-card sticky top-0 z-10 flex items-center justify-between border-b p-4">
-                    <h3 className="text-foreground truncate text-sm font-semibold">
+                    <h3 className="text-foreground truncate text-sm font-medium">
                       {activeItem.name}
                     </h3>
                     <button
@@ -773,7 +771,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                         <div className="flex items-start gap-2">
                           <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                           <div>
-                            <p className="text-warning mb-1 text-xs font-semibold">
+                            <p className="text-warning mb-1 text-xs font-medium">
                               {issues.length} issue{issues.length !== 1 ? 's' : ''} found
                             </p>
                             <ul className="space-y-0.5">
@@ -801,7 +799,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     )}
 
                     <div className="border-border space-y-3 border-b p-4">
-                      <h4 className="text-muted-foreground text-xs font-semibold tracking-wide uppercase">
+                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                         File Information
                       </h4>
                       <div className="grid grid-cols-2 gap-3">
@@ -850,7 +848,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     </div>
 
                     <div className="border-border space-y-4 border-b p-4">
-                      <h4 className="text-muted-foreground text-xs font-semibold tracking-wide uppercase">
+                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                         SEO & Accessibility
                       </h4>
 
@@ -917,7 +915,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     </div>
 
                     <div className="border-border border-b p-4">
-                      <h4 className="text-muted-foreground mb-3 text-xs font-semibold tracking-wide uppercase">
+                      <h4 className="text-muted-foreground mb-3 text-xs font-medium tracking-wide uppercase">
                         Used On {activeItem.usedOn && `(${activeItem.usedOn.length})`}
                       </h4>
                       {activeItem.usedOn && activeItem.usedOn.length > 0 ? (
@@ -954,7 +952,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                     </div>
 
                     <div className="space-y-3 p-4">
-                      <h4 className="text-muted-foreground text-xs font-semibold tracking-wide uppercase">
+                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                         AI Optimization
                       </h4>
                       <button

package/src/views/PageEditor.tsx

@@ -122,7 +122,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="Page title"
-              className="mb-4 w-full border-none px-0 text-2xl font-bold placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl"
+              className="mb-4 w-full border-none px-0 text-2xl font-medium placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl"
             />
 
             <div className="mb-4">
@@ -149,7 +149,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
         <div className="w-[30%] overflow-y-auto border-l border-gray-200 bg-gray-50">
           <div className="space-y-4 p-4">
             <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="mb-3 text-sm font-semibold text-gray-900">Publish</h3>
+              <h3 className="mb-3 text-sm font-medium text-gray-900">Publish</h3>
               <div className="space-y-3">
                 <div>
                   <label className="mb-1 block text-xs font-medium text-gray-700">Status</label>

package/src/views/Pages/PagesListView.tsx

@@ -347,7 +347,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
       {/* Tag filter bar */}
       <div className="flex flex-wrap items-center gap-2">
-        <span className="text-muted-foreground text-[10px] font-semibold tracking-wider uppercase">
+        <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase">
           Tags
         </span>
         {tags.map((t) => (
@@ -637,7 +637,7 @@ function GroupBlock({
       {showHeader && (
         <tr className="bg-muted/30 border-border border-b">
           <td colSpan={7} className="px-3 py-2">
-            <span className="text-foreground inline-flex items-center gap-2 text-xs font-semibold tracking-wider uppercase">
+            <span className="text-foreground inline-flex items-center gap-2 text-xs font-medium tracking-wider uppercase">
               {color && <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(color)}`} />}
               {label}
               <span className="text-muted-foreground tabular-nums">{count}</span>
@@ -819,7 +819,7 @@ function PageRow({
         <div className="flex items-center gap-2">
           <span
             aria-hidden
-            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-semibold"
+            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium"
           >
             {page.authorInitials}
           </span>

package/src/views/Pages.tsx

@@ -279,7 +279,7 @@ export function Pages({ onNavigate }: PagesProps) {
             <FolderInput className="h-5 w-5 text-gray-600" />
           </button>
           <div>
-            <h1 className="text-xl font-semibold text-gray-900 sm:text-2xl">Pages</h1>
+            <h1 className="text-xl font-medium text-gray-900 sm:text-2xl">Pages</h1>
             <p className="text-sm text-gray-500">
               {totalCount} page{totalCount !== 1 ? 's' : ''}
             </p>

package/src/views/Posts/PostsListView.tsx

@@ -711,7 +711,7 @@ function PostRow({
         <div className="flex items-center gap-2">
           <span
             aria-hidden
-            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-semibold"
+            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium"
           >
             {post.authorInitials}
           </span>

package/src/views/Redirects.tsx

@@ -143,7 +143,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-xl font-semibold sm:text-2xl">Redirects</h1>
+          <h1 className="text-foreground mb-1 text-xl font-medium sm:text-2xl">Redirects</h1>
           <p className="text-muted-foreground text-sm">
             {filteredAndSorted.length} total redirects
           </p>
@@ -286,7 +286,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
         <Dialog.Portal container={adminPortalContainer()}>
           <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
           <Dialog.Content className="bg-card fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg">
-            <Dialog.Title className="text-foreground mb-4 text-lg font-semibold">
+            <Dialog.Title className="text-foreground mb-4 text-lg font-medium">
               Add Redirect
             </Dialog.Title>
             <form onSubmit={handleSubmit} className="space-y-4">

package/src/views/ResetPassword.tsx

@@ -25,7 +25,7 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
             <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-red-100">
               <XCircle className="h-7 w-7 text-red-600" />
             </div>
-            <h1 className="text-2xl font-bold text-gray-900">Invalid Reset Link</h1>
+            <h1 className="text-2xl font-medium text-gray-900">Invalid Reset Link</h1>
             <p className="mt-2 text-gray-600">
               This password reset link is invalid or has expired.
             </p>
@@ -87,7 +87,7 @@ export function ResetPassword({ onNavigate, token }: ResetPasswordProps) {
           <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600">
             <Shield className="h-7 w-7 text-white" />
           </div>
-          <h1 className="text-2xl font-bold text-gray-900">
+          <h1 className="text-2xl font-medium text-gray-900">
             {success ? 'Password Reset' : 'Choose New Password'}
           </h1>
           <p className="mt-2 text-gray-600">

package/src/views/ScriptTagEditor.tsx

@@ -134,7 +134,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
           <ArrowLeft className="h-4 w-4" />
           Back to Script Tags
         </button>
-        <h1 className="text-foreground text-2xl font-semibold">
+        <h1 className="text-foreground text-2xl font-medium">
           {isNew ? 'New Script Tag' : 'Edit Script Tag'}
         </h1>
       </div>
@@ -179,7 +179,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
         </div>
 
         <div className="border-border bg-card space-y-4 rounded-lg border p-4">
-          <h3 className="text-foreground text-sm font-semibold">Placement & Scope</h3>
+          <h3 className="text-foreground text-sm font-medium">Placement & Scope</h3>
 
           <div>
             <label className="text-foreground mb-1 block text-sm font-medium">Placement</label>

package/src/views/ScriptTags.tsx

@@ -95,7 +95,7 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-2xl font-semibold">Script Tags</h1>
+          <h1 className="text-foreground mb-1 text-2xl font-medium">Script Tags</h1>
           <p className="text-muted-foreground text-sm">
             Manage tracking codes, analytics, and custom scripts injected into your site
           </p>
@@ -113,7 +113,7 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
       {tags.length === 0 && !error ? (
         <div className="border-border bg-card rounded-lg border p-12 text-center">
           <Code2 className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
-          <h3 className="text-foreground text-sm font-semibold">No script tags yet</h3>
+          <h3 className="text-foreground text-sm font-medium">No script tags yet</h3>
           <p className="text-muted-foreground mt-1 text-sm">
             Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
           </p>

package/src/views/SetupWizard.tsx

@@ -74,7 +74,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
             <CheckCircle2 className="h-8 w-8 text-green-600" />
           </div>
-          <h1 className="mb-2 text-2xl font-bold text-gray-900">Setup Complete</h1>
+          <h1 className="mb-2 text-2xl font-medium text-gray-900">Setup Complete</h1>
           <p className="mb-6 text-gray-600">
             Your admin account has been created. You can now sign in to manage your content.
           </p>
@@ -96,7 +96,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600">
             <Shield className="h-7 w-7 text-white" />
           </div>
-          <h1 className="text-2xl font-bold text-gray-900">Welcome to {siteName}</h1>
+          <h1 className="text-2xl font-medium text-gray-900">Welcome to {siteName}</h1>
           <p className="mt-2 text-gray-600">Create your admin account to get started</p>
         </div>
 

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/page-editor/SectionInspector.tsx

@@ -139,7 +139,7 @@ export function SectionInspector({
 
         {/* Content fields (schema-driven) */}
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Content
           </legend>
           {def?.fields.map((field) => (
@@ -154,7 +154,7 @@ export function SectionInspector({
 
         {/* Section meta + visibility */}
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Section settings
           </legend>
           <div>
@@ -203,7 +203,7 @@ export function SectionInspector({
 
         {/* Appearance */}
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Appearance
           </legend>
           <div>
@@ -263,7 +263,7 @@ export function SectionInspector({
 
         {/* Advanced */}
         <fieldset disabled={!canEdit} className="space-y-3">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-semibold tracking-wider uppercase">
+          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Advanced
           </legend>
           <div>