@actuate-media/cms-admin 0.72.2 → 0.73.0

package/src/fields/RichTextField.tsx

@@ -8,6 +8,8 @@ export interface RichTextFieldProps {
   onChange: (value: string) => void
   required?: boolean
   helpText?: string
+  /** Passed through to the underlying editor shell (e.g. max-height). */
+  className?: string
 }
 
 export function RichTextField({
@@ -16,6 +18,7 @@ export function RichTextField({
   onChange,
   required,
   helpText,
+  className,
 }: RichTextFieldProps) {
   return (
     <div>
@@ -23,7 +26,7 @@ export function RichTextField({
         {label}
         {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
       </label>
-      <TipTapEditor content={value} onChange={onChange} />
+      <TipTapEditor content={value} onChange={onChange} className={className} />
       {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>
   )

package/src/styles/actuate-tokens.css

@@ -14,7 +14,11 @@
   /* Text */
   --txt: #1a1827;
   --sub: #6b6878;
-  --muted: #b0adbe;
+  /* Deviates from tokens.json's #B0ADBE (2.2:1 on white — illegible). The
+     admin uses --muted as real text (section labels, hints, icons), so it
+     must meet WCAG AA (>=4.5:1) on --card and --bg while staying one step
+     lighter than --sub to preserve the text hierarchy. */
+  --muted: #716e83;
 
   /* Accent */
   --acc: #7c3aed;
@@ -79,7 +83,8 @@
 
   --txt: #eae8f5;
   --sub: #8e8ba8;
-  --muted: #504e68;
+  /* Same AA deviation as light mode (tokens.json #504E68 is 2.1:1 on card). */
+  --muted: #8784a2;
 
   --acc: #9d71f0;
   --acc-l: #231950;

package/src/views/Dashboard.tsx

@@ -585,7 +585,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           <h1 className="text-foreground">
             {greeting}, {userName} <span aria-hidden>👋</span>
           </h1>
-          <p className="text-muted-foreground text-sm">
+          {/* data-volatile: the literal date changes daily — visual tests mask it. */}
+          <p className="text-muted-foreground text-sm" data-volatile>
             {dateStr}
             {totalIssues > 0 && (
               <span className="hidden sm:inline">

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

@@ -545,7 +545,7 @@ export function PageSectionEditor({
           />
         )}
 
-        <div className="flex flex-1 overflow-hidden">
+        <div className="relative flex flex-1 overflow-hidden">
           <SectionsPanel
             sections={page.sections}
             selectedId={selectedId}

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

@@ -19,7 +19,9 @@ import {
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js'
 import { Toggle } from '../../components/ui/Toggle.js'
+import { RichTextField } from '../../fields/RichTextField.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
 import type { ResolvedRepeater, SectionSettings } from './section-types.js'
 import {
@@ -37,11 +39,37 @@ interface SectionInspectorProps {
   onSettingsChange: (patch: Partial<SectionSettings>) => void
   onMetaChange: (patch: { name?: string; internalLabel?: string }) => void
   onToggleVisibility: () => void
+  /** Post body field — shown when editing an Article Body section bound to the post field. */
+  postBody?: string
+  onPostBodyChange?: (html: string) => void
 }
 
 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'
+const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
+
+function InspectorHeaderActions({
+  onClose,
+  closeLabel = 'Close inspector',
+}: {
+  onClose: () => void
+  closeLabel?: string
+}) {
+  return (
+    <div className="flex shrink-0 items-center gap-0.5">
+      <InspectorExpandButton />
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label={closeLabel}
+        className="text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7"
+      >
+        <X className="h-4 w-4" aria-hidden />
+      </button>
+    </div>
+  )
+}
 
 export function SectionInspector({
   section,
@@ -51,8 +79,17 @@ export function SectionInspector({
   onSettingsChange,
   onMetaChange,
   onToggleVisibility,
+  postBody,
+  onPostBodyChange,
 }: SectionInspectorProps) {
   const def = getSectionType(section.sectionType)
+  const bodySource = String(section.content.source ?? 'field')
+  const editPostBodyField =
+    section.sectionType === 'article-body' &&
+    bodySource === 'field' &&
+    onPostBodyChange !== undefined
+  const contentFields =
+    def?.fields.filter((field) => !(editPostBodyField && field.key === 'body')) ?? []
 
   // Escape closes the inspector.
   useEffect(() => {
@@ -67,24 +104,17 @@ export function SectionInspector({
   // editable controls, so the externally-managed content is never altered here.
   if (section.unmanaged) {
     return (
-      <aside
+      <ResizableAside
         role="dialog"
         aria-label={`${section.name} (read-only)`}
-        className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
+        className={INSPECTOR_SHELL}
       >
         <div className="border-border flex items-center justify-between border-b px-4 py-3">
           <div className="min-w-0">
             <h2 className="text-foreground truncate text-sm font-medium">{section.name}</h2>
             <p className="text-muted-foreground text-xs">Managed outside the editor</p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close inspector"
-            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
-          >
-            <X className="h-4 w-4" aria-hidden />
-          </button>
+          <InspectorHeaderActions onClose={onClose} />
         </div>
         <div className="flex-1 space-y-3 overflow-y-auto p-4">
           <div className="border-border bg-muted text-muted-foreground space-y-2 rounded-md border p-3 text-sm">
@@ -106,29 +136,18 @@ export function SectionInspector({
             </p>
           </div>
         </div>
-      </aside>
+      </ResizableAside>
     )
   }
 
   return (
-    <aside
-      role="dialog"
-      aria-label={`Edit ${section.name}`}
-      className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
-    >
+    <ResizableAside role="dialog" aria-label={`Edit ${section.name}`} className={INSPECTOR_SHELL}>
       <div className="border-border flex items-center justify-between border-b px-4 py-3">
         <div className="min-w-0">
           <h2 className="text-foreground truncate text-sm font-medium">{section.name}</h2>
           <p className="text-muted-foreground text-xs">{def?.name ?? 'Section'}</p>
         </div>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close inspector"
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
-        >
-          <X className="h-4 w-4" aria-hidden />
-        </button>
+        <InspectorHeaderActions onClose={onClose} />
       </div>
 
       <div className="flex-1 space-y-6 overflow-y-auto p-4">
@@ -143,7 +162,16 @@ export function SectionInspector({
           <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
             Content
           </legend>
-          {def?.fields.map((field) => (
+          {editPostBodyField && (
+            <RichTextField
+              label="Body"
+              value={postBody ?? ''}
+              onChange={onPostBodyChange}
+              className="[&_.ProseMirror]:min-h-[240px]"
+              helpText="Main article copy — rendered in the canvas preview and on the live site."
+            />
+          )}
+          {contentFields.map((field) => (
             <ContentField
               key={field.key}
               field={field}
@@ -294,7 +322,7 @@ export function SectionInspector({
           </div>
         </fieldset>
       </div>
-    </aside>
+    </ResizableAside>
   )
 }