@actuate-media/cms-admin 0.72.2 → 0.72.3

package/src/components/ui/Modal.tsx

@@ -5,12 +5,23 @@ import { X } from 'lucide-react'
 import { type ReactNode, type RefObject } from 'react'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 
+const MODAL_SIZE_CLASS = {
+  md: 'max-w-lg',
+  lg: 'max-w-3xl',
+  /** Wide form dialogs (post/page field editors) — body scrolls inside the shell. */
+  xl: 'flex max-h-[min(92vh,880px)] max-w-5xl flex-col',
+} as const
+
+export type ModalSize = keyof typeof MODAL_SIZE_CLASS
+
 export interface ModalProps {
   open: boolean
   onClose: () => void
   title: string
   children: ReactNode
   actions?: ReactNode
+  /** Dialog width preset. Defaults to `md` (512px). */
+  size?: ModalSize
   /**
    * Accessible description for the dialog, announced after the title. Optional —
    * omit when the body content is self-explanatory.
@@ -22,6 +33,12 @@ export interface ModalProps {
    * form dialogs where the user should land in the first input.
    */
   initialFocusRef?: RefObject<HTMLElement | null>
+  /**
+   * When set, overlay click, Escape, and the header X invoke this instead of
+   * closing immediately — use to confirm before discarding unsaved edits.
+   * The dialog stays open until the parent calls `onClose()`.
+   */
+  onDismiss?: () => void
 }
 
 /**
@@ -41,15 +58,39 @@ export function Modal({
   title,
   children,
   actions,
+  size = 'md',
   description,
   initialFocusRef,
+  onDismiss,
 }: ModalProps) {
+  const scrollBody = size === 'xl'
+
+  function handleDismissAttempt() {
+    if (onDismiss) onDismiss()
+    else onClose()
+  }
+
   return (
-    <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
+    <Dialog.Root
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) handleDismissAttempt()
+      }}
+    >
       <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-60 bg-black/50" />
         <Dialog.Content
-          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none"
+          className={`bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]}`}
+          onInteractOutside={(event) => {
+            if (!onDismiss) return
+            event.preventDefault()
+            handleDismissAttempt()
+          }}
+          onEscapeKeyDown={(event) => {
+            if (!onDismiss) return
+            event.preventDefault()
+            handleDismissAttempt()
+          }}
           onOpenAutoFocus={
             initialFocusRef
               ? (event) => {
@@ -78,7 +119,9 @@ export function Modal({
               {description}
             </Dialog.Description>
           )}
-          <div className="px-6 py-4">{children}</div>
+          <div className={scrollBody ? 'min-h-0 flex-1 overflow-y-auto px-6 py-4' : 'px-6 py-4'}>
+            {children}
+          </div>
           {actions && (
             <div className="border-border flex justify-end gap-2 border-t px-6 py-4">{actions}</div>
           )}

package/src/components/ui/Toggle.tsx

@@ -4,7 +4,7 @@ import * as Switch from '@radix-ui/react-switch'
 import { cv, type VariantProps } from '../../lib/cv.js'
 
 const toggleTrack = cv(
-  'relative inline-flex shrink-0 cursor-pointer rounded-[var(--r-pill)] transition-colors duration-[var(--motion-base)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  'relative inline-block shrink-0 cursor-pointer rounded-[var(--r-pill)] border-0 p-0 transition-colors duration-[var(--motion-base)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -26,11 +26,12 @@ const toggleTrack = cv(
 )
 
 const toggleThumb = cv(
-  'pointer-events-none block rounded-full bg-[var(--toggle-thumb)] shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-transform duration-[var(--motion-base)]',
+  'pointer-events-none absolute top-[2.5px] left-[2.5px] block rounded-full bg-[var(--toggle-thumb)] shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-[left] duration-[var(--motion-base)] data-[state=checked]:left-[19.5px]',
   {
     variants: {
       size: {
-        md: 'h-4 w-4 translate-x-0.5 data-[state=checked]:translate-x-[17.5px]',
+        /** Matches `.tog-thumb` in the design system handoff (16×16). */
+        md: 'h-4 w-4',
       },
     },
     defaultVariants: {

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

@@ -20,6 +20,7 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import { MediaPickerModal } from '../../components/MediaPickerModal.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,6 +38,9 @@ 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'
@@ -51,8 +55,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(() => {
@@ -143,7 +156,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}