@actuate-media/cms-admin 0.72.1 → 0.72.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.72.1",
+  "version": "0.72.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",

package/src/__tests__/components/toggle.test.tsx

@@ -0,0 +1,17 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Toggle } from '../../components/ui/Toggle.js'
+
+afterEach(cleanup)
+
+describe('Toggle', () => {
+  it('positions the thumb with design-system absolute offsets', () => {
+    render(<Toggle checked={false} onCheckedChange={() => {}} aria-label="Test toggle" />)
+    const thumb = screen.getByRole('switch').querySelector('span')
+    expect(thumb?.className).toContain('absolute')
+    expect(thumb?.className).toContain('top-[2.5px]')
+    expect(thumb?.className).toContain('left-[2.5px]')
+    expect(thumb?.className).toContain('data-[state=checked]:left-[19.5px]')
+  })
+})

package/src/__tests__/views/post-fields-modal.render.test.tsx

@@ -21,6 +21,17 @@ vi.mock('../../fields/RichTextField.js', () => ({
   RichTextField: () => <div data-testid="rich-text" />,
 }))
 
+vi.mock('../../lib/coauthor-client.js', () => ({
+  coauthorText: vi.fn(async () => ({
+    ok: true,
+    result: { action: 'compress', text: 'AI excerpt' },
+  })),
+}))
+
+vi.mock('../../lib/seo-service.js', () => ({
+  generateSeoField: vi.fn(async () => ({ text: 'AI SEO title' })),
+}))
+
 const { PostFieldsModal } = await import('../../views/post-editor/PostFieldsModal.js')
 type ModalProps = Parameters<typeof PostFieldsModal>[0]
 
@@ -123,4 +134,47 @@ describe('PostFieldsModal', () => {
       expect.objectContaining({ category: 'tutorials', tags: ['AI', 'CMS'] }),
     )
   })
+
+  it('derives slug from title until the slug field is edited', () => {
+    render(
+      <PostFieldsModal
+        open
+        post={basePost({ title: '', slug: '' })}
+        canEdit
+        onClose={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Hello World' } })
+    expect((screen.getByLabelText(/^Slug/) as HTMLInputElement).value).toBe('hello-world')
+    fireEvent.change(screen.getByLabelText(/^Slug/), { target: { value: 'custom-slug' } })
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Changed Title' } })
+    expect((screen.getByLabelText(/^Slug/) as HTMLInputElement).value).toBe('custom-slug')
+  })
+
+  it('exposes AI generate controls for excerpt and SEO fields', () => {
+    render(<PostFieldsModal open post={basePost()} canEdit onClose={() => {}} onSave={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Generate excerpt from content' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Generate SEO title from content' })).toBeTruthy()
+    expect(
+      screen.getByRole('button', { name: 'Generate SEO description from content' }),
+    ).toBeTruthy()
+  })
+
+  it('prompts before discarding when Cancel is clicked with unsaved edits', () => {
+    const onClose = vi.fn()
+    render(<PostFieldsModal open post={basePost()} canEdit onClose={onClose} onSave={() => {}} />)
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Changed title' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onClose).not.toHaveBeenCalled()
+    expect(screen.getByRole('dialog', { name: 'Discard unsaved changes?' })).toBeTruthy()
+  })
+
+  it('closes without prompting when nothing changed', () => {
+    const onClose = vi.fn()
+    render(<PostFieldsModal open post={basePost()} canEdit onClose={onClose} onSave={() => {}} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(screen.queryByRole('dialog', { name: 'Discard unsaved changes?' })).toBeNull()
+  })
 })

package/src/components/MediaPickerModal.tsx

@@ -129,10 +129,14 @@ export function MediaPickerModal({
   return (
     <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
       <Dialog.Portal container={adminPortalContainer()}>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        {/*
+          z-70 so this picker stacks above the z-60 form modals that embed it
+          (PostFieldsModal featured image, TipTap insert image, etc.).
+        */}
+        <Dialog.Overlay className="fixed inset-0 z-70 bg-black/40" />
         <Dialog.Content
           aria-describedby={undefined}
-          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 mx-4 flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-2xl focus:outline-none"
+          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-70 mx-4 flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-2xl focus:outline-none"
         >
           <div className="border-border flex items-center justify-between border-b px-4 py-3">
             <Dialog.Title className="text-foreground text-lg font-medium">

package/src/components/TagInput.tsx

@@ -35,7 +35,7 @@ interface FieldValuesResponse {
 }
 
 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'
+  'border-border 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'
 
 export function TagInput({
   id,

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/styles/theme.css

@@ -137,7 +137,19 @@
     @apply border-border outline-ring/50;
   }
 
-  .actuate-admin {
+  /*
+   * Base typography is written with doubled `.actuate-admin.actuate-admin`
+   * specificity on purpose. Consumer apps commonly import their site
+   * stylesheet into the admin route (for the page-editor canvas preview) and
+   * those sheets sometimes style `.actuate-admin` or plain `h1`/`body` in
+   * their own `@layer base` — with equal specificity, whichever file loads
+   * last wins, and the admin shell inherits site fonts/colors ("washed out"
+   * admin). Doubling the class wins those same-layer ties without `!important`
+   * while Tailwind utilities (a later layer) still override as usual.
+   * Consumer styles that should reach the canvas preview belong under
+   * `.actuate-admin .actuate-canvas` — see EditorCanvas.
+   */
+  .actuate-admin.actuate-admin {
     @apply bg-background text-foreground;
     font-family: var(--actuate-admin-font, var(--font-sans)) !important;
     font-size: var(--font-size);
@@ -148,44 +160,44 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .actuate-admin h1 {
+  .actuate-admin.actuate-admin h1 {
     font-size: var(--fs-page);
     font-weight: 700;
     letter-spacing: -0.5px;
     line-height: 1.5;
   }
 
-  .actuate-admin h2 {
+  .actuate-admin.actuate-admin h2 {
     font-size: var(--fs-card);
     font-weight: 600;
     line-height: 1.5;
   }
 
-  .actuate-admin h3 {
+  .actuate-admin.actuate-admin h3 {
     font-size: var(--fs-card);
     font-weight: 600;
     line-height: 1.5;
   }
 
-  .actuate-admin h4 {
+  .actuate-admin.actuate-admin h4 {
     font-size: var(--fs-body);
     font-weight: 600;
     line-height: 1.5;
   }
 
-  .actuate-admin label {
+  .actuate-admin.actuate-admin label {
     font-size: var(--fs-body);
     font-weight: var(--font-weight-medium);
     line-height: 1.5;
   }
 
-  .actuate-admin button {
+  .actuate-admin.actuate-admin button {
     font-size: var(--fs-body);
     font-weight: var(--font-weight-medium);
     line-height: 1.5;
   }
 
-  .actuate-admin input {
+  .actuate-admin.actuate-admin input {
     font-size: var(--fs-body);
     font-weight: var(--font-weight-normal);
     line-height: 1.5;
@@ -198,6 +210,20 @@
     text-transform: uppercase;
     color: var(--sub);
   }
+
+  /*
+   * The sanctioned hook for consumer brand styles inside the editor canvas
+   * preview. Anything the site stylesheet must render in the preview should
+   * be scoped `.actuate-admin .actuate-canvas …` instead of `.actuate-admin`.
+   * The canvas re-establishes the site's typographic context: headings and
+   * body text fall back to inheritance rather than the admin scale above.
+   */
+  .actuate-admin .actuate-canvas :is(h1, h2, h3, h4) {
+    font-size: revert-layer;
+    font-weight: revert-layer;
+    letter-spacing: revert-layer;
+    line-height: revert-layer;
+  }
 }
 
 .actuate-admin.reduce-motion,

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

@@ -88,9 +88,12 @@ export function EditorCanvas({
             className="mx-auto"
             style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}
           >
+            {/* `actuate-canvas` is the public hook for consumer brand CSS:
+                site styles that should render in this preview scope to
+                `.actuate-admin .actuate-canvas` instead of the admin root. */}
             <div
               ref={surfaceRef}
-              className="border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
+              className="actuate-canvas border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
               style={{
                 width: vp.width,
                 transform: `scale(${scale})`,

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

@@ -91,7 +91,7 @@ export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
 
       {/* The canvas is intentionally white regardless of the admin theme:
           it emulates the public page surface, not admin chrome. */}
-      <div className="bg-card flex-1 overflow-auto">
+      <div className="actuate-canvas bg-card flex-1 overflow-auto">
         {visible.length === 0 ? (
           <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
             This page has no visible sections yet.

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}

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

@@ -87,7 +87,7 @@ export function PostEditorCanvas({
       >
         <div
           ref={surfaceRef}
-          className="border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
+          className="actuate-canvas border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm"
           style={{ width: vp.width, transform: `scale(${scale})`, transformOrigin: 'top left' }}
         >
           <PostHeader config={header} context={context} />